@memberjunction/ng-versions 5.10.1 → 5.12.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 (6) hide show
  1. package/dist/lib/label-create/label-create.component.js +2 -2
  2. package/dist/lib/label-detail/label-detail.component.js +245 -245
  3. package/dist/lib/label-detail/label-detail.component.js.map +1 -1
  4. package/dist/lib/panel/slide-panel.component.js +2 -2
  5. package/dist/lib/record-micro-view/record-micro-view.component.js +2 -2
  6. package/package.json +6 -6
package/dist/lib/label-detail/label-detail.component.js CHANGED
@@ -19,8 +19,8 @@ function MjLabelDetailComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
19
19
  i0.ɵɵtextInterpolate(ctx_r0.Label.Description);
20
20
  } }
21
21
  function MjLabelDetailComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
22
- i0.ɵɵelementStart(0, "div", 21)(1, "div", 32);
23
- i0.ɵɵelement(2, "i", 33);
22
+ i0.ɵɵelementStart(0, "div", 21)(1, "div", 31);
23
+ i0.ɵɵelement(2, "i", 32);
24
24
  i0.ɵɵelementEnd();
25
25
  i0.ɵɵelementStart(3, "div", 24)(4, "span", 25);
26
26
  i0.ɵɵtext(5);
@@ -34,8 +34,8 @@ function MjLabelDetailComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
34
34
  i0.ɵɵtextInterpolate(ctx_r0.FormatDuration(ctx_r0.Label.CreationDurationMS));
35
35
  } }
36
36
  function MjLabelDetailComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
37
- i0.ɵɵelementStart(0, "div", 21)(1, "div", 34);
38
- i0.ɵɵelement(2, "i", 35);
37
+ i0.ɵɵelementStart(0, "div", 21)(1, "div", 33);
38
+ i0.ɵɵelement(2, "i", 34);
39
39
  i0.ɵɵelementEnd();
40
40
  i0.ɵɵelementStart(3, "div", 24)(4, "span", 25);
41
41
  i0.ɵɵtext(5);
@@ -49,7 +49,7 @@ function MjLabelDetailComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
49
49
  i0.ɵɵtextInterpolate(ctx_r0.ChildLabels.length);
50
50
  } }
51
51
  function MjLabelDetailComponent_Conditional_41_Conditional_7_Template(rf, ctx) { if (rf & 1) {
52
- i0.ɵɵelementStart(0, "span", 39);
52
+ i0.ɵɵelementStart(0, "span", 38);
53
53
  i0.ɵɵtext(1);
54
54
  i0.ɵɵelementEnd();
55
55
  } if (rf & 2) {
@@ -59,30 +59,30 @@ function MjLabelDetailComponent_Conditional_41_Conditional_7_Template(rf, ctx) {
59
59
  } }
60
60
  function MjLabelDetailComponent_Conditional_41_Template(rf, ctx) { if (rf & 1) {
61
61
  const _r2 = i0.ɵɵgetCurrentView();
62
- i0.ɵɵelementStart(0, "div", 29)(1, "button", 36);
62
+ i0.ɵɵelementStart(0, "div", 28)(1, "button", 35);
63
63
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_41_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTabChange("overview")); });
64
- i0.ɵɵelement(2, "i", 37);
64
+ i0.ɵɵelement(2, "i", 36);
65
65
  i0.ɵɵtext(3, " Overview ");
66
66
  i0.ɵɵelementEnd();
67
- i0.ɵɵelementStart(4, "button", 36);
67
+ i0.ɵɵelementStart(4, "button", 35);
68
68
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_41_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTabChange("snapshots")); });
69
- i0.ɵɵelement(5, "i", 38);
69
+ i0.ɵɵelement(5, "i", 37);
70
70
  i0.ɵɵtext(6, " Snapshots ");
71
- i0.ɵɵconditionalCreate(7, MjLabelDetailComponent_Conditional_41_Conditional_7_Template, 2, 1, "span", 39);
71
+ i0.ɵɵconditionalCreate(7, MjLabelDetailComponent_Conditional_41_Conditional_7_Template, 2, 1, "span", 38);
72
72
  i0.ɵɵelementEnd();
73
- i0.ɵɵelementStart(8, "button", 36);
73
+ i0.ɵɵelementStart(8, "button", 35);
74
74
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_41_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTabChange("dependencies")); });
75
- i0.ɵɵelement(9, "i", 40);
75
+ i0.ɵɵelement(9, "i", 39);
76
76
  i0.ɵɵtext(10, " Dependencies ");
77
77
  i0.ɵɵelementEnd();
78
- i0.ɵɵelementStart(11, "button", 36);
78
+ i0.ɵɵelementStart(11, "button", 35);
79
79
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_41_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTabChange("changes")); });
80
- i0.ɵɵelement(12, "i", 41);
80
+ i0.ɵɵelement(12, "i", 40);
81
81
  i0.ɵɵtext(13, " Changes ");
82
82
  i0.ɵɵelementEnd();
83
- i0.ɵɵelementStart(14, "button", 36);
83
+ i0.ɵɵelementStart(14, "button", 35);
84
84
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_41_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTabChange("history")); });
85
- i0.ɵɵelement(15, "i", 42);
85
+ i0.ɵɵelement(15, "i", 41);
86
86
  i0.ɵɵtext(16, " History ");
87
87
  i0.ɵɵelementEnd()();
88
88
  } if (rf & 2) {
@@ -102,18 +102,18 @@ function MjLabelDetailComponent_Conditional_41_Template(rf, ctx) { if (rf & 1) {
102
102
  } }
103
103
  function MjLabelDetailComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
104
104
  const _r3 = i0.ɵɵgetCurrentView();
105
- i0.ɵɵelementStart(0, "div", 30)(1, "button", 43);
105
+ i0.ɵɵelementStart(0, "div", 29)(1, "button", 42);
106
106
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_42_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnBackFromMicroView()); });
107
- i0.ɵɵelement(2, "i", 44);
107
+ i0.ɵɵelement(2, "i", 43);
108
108
  i0.ɵɵelementEnd();
109
- i0.ɵɵelementStart(3, "div", 45)(4, "span", 46);
109
+ i0.ɵɵelementStart(3, "div", 44)(4, "span", 45);
110
110
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_42_Template_span_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnBackFromMicroView()); });
111
- i0.ɵɵelement(5, "i", 47);
111
+ i0.ɵɵelement(5, "i", 46);
112
112
  i0.ɵɵtext(6, " Snapshots ");
113
113
  i0.ɵɵelementEnd();
114
- i0.ɵɵelement(7, "i", 48);
115
- i0.ɵɵelementStart(8, "span", 49);
116
- i0.ɵɵelement(9, "i", 50);
114
+ i0.ɵɵelement(7, "i", 47);
115
+ i0.ɵɵelementStart(8, "span", 48);
116
+ i0.ɵɵelement(9, "i", 49);
117
117
  i0.ɵɵtext(10);
118
118
  i0.ɵɵelementEnd()()();
119
119
  } if (rf & 2) {
@@ -122,14 +122,14 @@ function MjLabelDetailComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
122
122
  i0.ɵɵtextInterpolate1(" ", ctx_r0.BreadcrumbLabel, " ");
123
123
  } }
124
124
  function MjLabelDetailComponent_Conditional_43_Conditional_1_Template(rf, ctx) { if (rf & 1) {
125
- i0.ɵɵelement(0, "mj-loading", 51);
125
+ i0.ɵɵelement(0, "mj-loading", 50);
126
126
  } }
127
127
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
128
- i0.ɵɵelementStart(0, "div", 57)(1, "span", 58);
128
+ i0.ɵɵelementStart(0, "div", 56)(1, "span", 57);
129
129
  i0.ɵɵtext(2, "Entity");
130
130
  i0.ɵɵelementEnd();
131
- i0.ɵɵelementStart(3, "span", 59);
132
- i0.ɵɵelement(4, "i", 64);
131
+ i0.ɵɵelementStart(3, "span", 58);
132
+ i0.ɵɵelement(4, "i", 63);
133
133
  i0.ɵɵtext(5);
134
134
  i0.ɵɵelementEnd()();
135
135
  } if (rf & 2) {
@@ -140,10 +140,10 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_23_Temp
140
140
  i0.ɵɵtextInterpolate1("", ctx_r0.Label.Entity ?? ctx_r0.resolveEntityName(ctx_r0.Label.EntityID), " ");
141
141
  } }
142
142
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
143
- i0.ɵɵelementStart(0, "div", 57)(1, "span", 58);
143
+ i0.ɵɵelementStart(0, "div", 56)(1, "span", 57);
144
144
  i0.ɵɵtext(2, "Record ID");
145
145
  i0.ɵɵelementEnd();
146
- i0.ɵɵelementStart(3, "span", 65);
146
+ i0.ɵɵelementStart(3, "span", 64);
147
147
  i0.ɵɵtext(4);
148
148
  i0.ɵɵelementEnd()();
149
149
  } if (rf & 2) {
@@ -152,10 +152,10 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_24_Temp
152
152
  i0.ɵɵtextInterpolate(ctx_r0.FormatRecordID(ctx_r0.Label.RecordID));
153
153
  } }
154
154
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
155
- i0.ɵɵelementStart(0, "div", 57)(1, "span", 58);
155
+ i0.ɵɵelementStart(0, "div", 56)(1, "span", 57);
156
156
  i0.ɵɵtext(2, "External Ref");
157
157
  i0.ɵɵelementEnd();
158
- i0.ɵɵelementStart(3, "span", 65);
158
+ i0.ɵɵelementStart(3, "span", 64);
159
159
  i0.ɵɵtext(4);
160
160
  i0.ɵɵelementEnd()();
161
161
  } if (rf & 2) {
@@ -164,7 +164,7 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_25_Temp
164
164
  i0.ɵɵtextInterpolate(ctx_r0.Label.ExternalSystemID);
165
165
  } }
166
166
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Conditional_4_Template(rf, ctx) { if (rf & 1) {
167
- i0.ɵɵelementStart(0, "span", 69);
167
+ i0.ɵɵelementStart(0, "span", 68);
168
168
  i0.ɵɵtext(1);
169
169
  i0.ɵɵelementEnd();
170
170
  } if (rf & 2) {
@@ -173,26 +173,26 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Cond
173
173
  i0.ɵɵtextInterpolate(ctx_r0.OverviewRecordName);
174
174
  } }
175
175
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Conditional_5_Template(rf, ctx) { if (rf & 1) {
176
- i0.ɵɵelementStart(0, "span", 70);
176
+ i0.ɵɵelementStart(0, "span", 69);
177
177
  i0.ɵɵtext(1, "Loading...");
178
178
  i0.ɵɵelementEnd();
179
179
  } }
180
180
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Template(rf, ctx) { if (rf & 1) {
181
181
  const _r4 = i0.ɵɵgetCurrentView();
182
- i0.ɵɵelementStart(0, "div", 62)(1, "div", 66);
183
- i0.ɵɵelement(2, "i", 67);
184
- i0.ɵɵelementStart(3, "div", 68);
185
- i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Conditional_4_Template, 2, 1, "span", 69);
186
- i0.ɵɵconditionalCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Conditional_5_Template, 2, 0, "span", 70);
187
- i0.ɵɵelementStart(6, "span", 71);
182
+ i0.ɵɵelementStart(0, "div", 61)(1, "div", 65);
183
+ i0.ɵɵelement(2, "i", 66);
184
+ i0.ɵɵelementStart(3, "div", 67);
185
+ i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Conditional_4_Template, 2, 1, "span", 68);
186
+ i0.ɵɵconditionalCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Conditional_5_Template, 2, 0, "span", 69);
187
+ i0.ɵɵelementStart(6, "span", 70);
188
188
  i0.ɵɵtext(7);
189
189
  i0.ɵɵelementEnd();
190
- i0.ɵɵelementStart(8, "span", 72);
190
+ i0.ɵɵelementStart(8, "span", 71);
191
191
  i0.ɵɵtext(9);
192
192
  i0.ɵɵelementEnd()()();
193
- i0.ɵɵelementStart(10, "button", 73);
193
+ i0.ɵɵelementStart(10, "button", 72);
194
194
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnOpenOverviewRecord()); });
195
- i0.ɵɵelement(11, "i", 74);
195
+ i0.ɵɵelement(11, "i", 73);
196
196
  i0.ɵɵtext(12, " Open ");
197
197
  i0.ɵɵelementEnd()();
198
198
  } if (rf & 2) {
@@ -209,11 +209,11 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Temp
209
209
  i0.ɵɵtextInterpolate(ctx_r0.FormatRecordID(ctx_r0.Label.RecordID));
210
210
  } }
211
211
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_27_Template(rf, ctx) { if (rf & 1) {
212
- i0.ɵɵelementStart(0, "div", 53)(1, "h3", 54);
213
- i0.ɵɵelement(2, "i", 75);
212
+ i0.ɵɵelementStart(0, "div", 52)(1, "h3", 53);
213
+ i0.ɵɵelement(2, "i", 74);
214
214
  i0.ɵɵtext(3, " Description ");
215
215
  i0.ɵɵelementEnd();
216
- i0.ɵɵelementStart(4, "p", 76);
216
+ i0.ɵɵelementStart(4, "p", 75);
217
217
  i0.ɵɵtext(5);
218
218
  i0.ɵɵelementEnd()();
219
219
  } if (rf & 2) {
@@ -222,11 +222,11 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_27_Temp
222
222
  i0.ɵɵtextInterpolate(ctx_r0.Label.Description);
223
223
  } }
224
224
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_38_Template(rf, ctx) { if (rf & 1) {
225
- i0.ɵɵelementStart(0, "div", 57)(1, "span", 58);
225
+ i0.ɵɵelementStart(0, "div", 56)(1, "span", 57);
226
226
  i0.ɵɵtext(2, "Created By");
227
227
  i0.ɵɵelementEnd();
228
- i0.ɵɵelementStart(3, "span", 59);
229
- i0.ɵɵelement(4, "i", 77);
228
+ i0.ɵɵelementStart(3, "span", 58);
229
+ i0.ɵɵelement(4, "i", 76);
230
230
  i0.ɵɵtext(5);
231
231
  i0.ɵɵelementEnd()();
232
232
  } if (rf & 2) {
@@ -235,10 +235,10 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_38_Temp
235
235
  i0.ɵɵtextInterpolate1("", ctx_r0.Label.CreatedByUser, " ");
236
236
  } }
237
237
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_39_Template(rf, ctx) { if (rf & 1) {
238
- i0.ɵɵelementStart(0, "div", 57)(1, "span", 58);
238
+ i0.ɵɵelementStart(0, "div", 56)(1, "span", 57);
239
239
  i0.ɵɵtext(2, "Capture Duration");
240
240
  i0.ɵɵelementEnd();
241
- i0.ɵɵelementStart(3, "span", 59);
241
+ i0.ɵɵelementStart(3, "span", 58);
242
242
  i0.ɵɵtext(4);
243
243
  i0.ɵɵelementEnd()();
244
244
  } if (rf & 2) {
@@ -263,12 +263,12 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Cond
263
263
  i0.ɵɵconditional(ctx_r0.IsParentLabel(pl_r5) ? 0 : -1);
264
264
  } }
265
265
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_4_Template(rf, ctx) { if (rf & 1) {
266
- i0.ɵɵelementStart(0, "div", 79);
267
- i0.ɵɵelement(1, "i", 81);
268
- i0.ɵɵelementStart(2, "span", 82);
266
+ i0.ɵɵelementStart(0, "div", 78);
267
+ i0.ɵɵelement(1, "i", 80);
268
+ i0.ɵɵelementStart(2, "span", 81);
269
269
  i0.ɵɵtext(3, "Parent:");
270
270
  i0.ɵɵelementEnd();
271
- i0.ɵɵelementStart(4, "span", 83);
271
+ i0.ɵɵelementStart(4, "span", 82);
272
272
  i0.ɵɵrepeaterCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_4_For_6_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
273
273
  i0.ɵɵelementEnd()();
274
274
  } if (rf & 2) {
@@ -277,7 +277,7 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Cond
277
277
  i0.ɵɵrepeater(ctx_r0.AllLabels);
278
278
  } }
279
279
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
280
- i0.ɵɵelementStart(0, "span", 86);
280
+ i0.ɵɵelementStart(0, "span", 85);
281
281
  i0.ɵɵtext(1);
282
282
  i0.ɵɵpipe(2, "slice");
283
283
  i0.ɵɵelementEnd();
@@ -287,7 +287,7 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Cond
287
287
  i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind3(2, 1, child_r6.RecordID, 0, 12), "...");
288
288
  } }
289
289
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
290
- i0.ɵɵelementStart(0, "span", 86);
290
+ i0.ɵɵelementStart(0, "span", 85);
291
291
  i0.ɵɵtext(1);
292
292
  i0.ɵɵelementEnd();
293
293
  } if (rf & 2) {
@@ -296,13 +296,13 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Cond
296
296
  i0.ɵɵtextInterpolate1("", child_r6.ItemCount, " items");
297
297
  } }
298
298
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
299
- i0.ɵɵelementStart(0, "div", 84);
300
- i0.ɵɵelement(1, "i", 85);
301
- i0.ɵɵelementStart(2, "span", 83);
299
+ i0.ɵɵelementStart(0, "div", 83);
300
+ i0.ɵɵelement(1, "i", 84);
301
+ i0.ɵɵelementStart(2, "span", 82);
302
302
  i0.ɵɵtext(3);
303
303
  i0.ɵɵelementEnd();
304
- i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_For_2_Conditional_4_Template, 3, 5, "span", 86);
305
- i0.ɵɵconditionalCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_For_2_Conditional_5_Template, 2, 1, "span", 86);
304
+ i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_For_2_Conditional_4_Template, 3, 5, "span", 85);
305
+ i0.ɵɵconditionalCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_For_2_Conditional_5_Template, 2, 1, "span", 85);
306
306
  i0.ɵɵelementEnd();
307
307
  } if (rf & 2) {
308
308
  const child_r6 = ctx.$implicit;
@@ -314,8 +314,8 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Cond
314
314
  i0.ɵɵconditional(child_r6.ItemCount ? 5 : -1);
315
315
  } }
316
316
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_Template(rf, ctx) { if (rf & 1) {
317
- i0.ɵɵelementStart(0, "div", 80);
318
- i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_For_2_Template, 6, 3, "div", 84, i0.ɵɵrepeaterTrackByIdentity);
317
+ i0.ɵɵelementStart(0, "div", 79);
318
+ i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_For_2_Template, 6, 3, "div", 83, i0.ɵɵrepeaterTrackByIdentity);
319
319
  i0.ɵɵelementEnd();
320
320
  } if (rf & 2) {
321
321
  const ctx_r0 = i0.ɵɵnextContext(4);
@@ -323,12 +323,12 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Cond
323
323
  i0.ɵɵrepeater(ctx_r0.ChildLabels);
324
324
  } }
325
325
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Template(rf, ctx) { if (rf & 1) {
326
- i0.ɵɵelementStart(0, "div", 53)(1, "h3", 54);
327
- i0.ɵɵelement(2, "i", 78);
326
+ i0.ɵɵelementStart(0, "div", 52)(1, "h3", 53);
327
+ i0.ɵɵelement(2, "i", 77);
328
328
  i0.ɵɵtext(3, " Hierarchy ");
329
329
  i0.ɵɵelementEnd();
330
- i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_4_Template, 7, 0, "div", 79);
331
- i0.ɵɵconditionalCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_Template, 3, 0, "div", 80);
330
+ i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_4_Template, 7, 0, "div", 78);
331
+ i0.ɵɵconditionalCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Conditional_5_Template, 3, 0, "div", 79);
332
332
  i0.ɵɵelementEnd();
333
333
  } if (rf & 2) {
334
334
  const ctx_r0 = i0.ɵɵnextContext(3);
@@ -338,54 +338,54 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Temp
338
338
  i0.ɵɵconditional(ctx_r0.ChildLabels.length > 0 ? 5 : -1);
339
339
  } }
340
340
  function MjLabelDetailComponent_Conditional_43_Conditional_2_Template(rf, ctx) { if (rf & 1) {
341
- i0.ɵɵelementStart(0, "div", 52)(1, "div", 53)(2, "h3", 54);
342
- i0.ɵɵelement(3, "i", 55);
341
+ i0.ɵɵelementStart(0, "div", 51)(1, "div", 52)(2, "h3", 53);
342
+ i0.ɵɵelement(3, "i", 54);
343
343
  i0.ɵɵtext(4, " Label Details ");
344
344
  i0.ɵɵelementEnd();
345
- i0.ɵɵelementStart(5, "div", 56)(6, "div", 57)(7, "span", 58);
345
+ i0.ɵɵelementStart(5, "div", 55)(6, "div", 56)(7, "span", 57);
346
346
  i0.ɵɵtext(8, "Name");
347
347
  i0.ɵɵelementEnd();
348
- i0.ɵɵelementStart(9, "span", 59);
348
+ i0.ɵɵelementStart(9, "span", 58);
349
349
  i0.ɵɵtext(10);
350
350
  i0.ɵɵelementEnd()();
351
- i0.ɵɵelementStart(11, "div", 57)(12, "span", 58);
351
+ i0.ɵɵelementStart(11, "div", 56)(12, "span", 57);
352
352
  i0.ɵɵtext(13, "Status");
353
353
  i0.ɵɵelementEnd();
354
- i0.ɵɵelementStart(14, "span", 59)(15, "span", 60);
354
+ i0.ɵɵelementStart(14, "span", 58)(15, "span", 59);
355
355
  i0.ɵɵtext(16);
356
356
  i0.ɵɵelementEnd()()();
357
- i0.ɵɵelementStart(17, "div", 57)(18, "span", 58);
357
+ i0.ɵɵelementStart(17, "div", 56)(18, "span", 57);
358
358
  i0.ɵɵtext(19, "Scope");
359
359
  i0.ɵɵelementEnd();
360
- i0.ɵɵelementStart(20, "span", 59);
361
- i0.ɵɵelement(21, "i", 61);
360
+ i0.ɵɵelementStart(20, "span", 58);
361
+ i0.ɵɵelement(21, "i", 60);
362
362
  i0.ɵɵtext(22);
363
363
  i0.ɵɵelementEnd()();
364
- i0.ɵɵconditionalCreate(23, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_23_Template, 6, 3, "div", 57);
365
- i0.ɵɵconditionalCreate(24, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_24_Template, 5, 1, "div", 57);
366
- i0.ɵɵconditionalCreate(25, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_25_Template, 5, 1, "div", 57);
364
+ i0.ɵɵconditionalCreate(23, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_23_Template, 6, 3, "div", 56);
365
+ i0.ɵɵconditionalCreate(24, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_24_Template, 5, 1, "div", 56);
366
+ i0.ɵɵconditionalCreate(25, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_25_Template, 5, 1, "div", 56);
367
367
  i0.ɵɵelementEnd()();
368
- i0.ɵɵconditionalCreate(26, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Template, 13, 6, "div", 62);
369
- i0.ɵɵconditionalCreate(27, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_27_Template, 6, 1, "div", 53);
370
- i0.ɵɵelementStart(28, "div", 53)(29, "h3", 54);
371
- i0.ɵɵelement(30, "i", 63);
368
+ i0.ɵɵconditionalCreate(26, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_26_Template, 13, 6, "div", 61);
369
+ i0.ɵɵconditionalCreate(27, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_27_Template, 6, 1, "div", 52);
370
+ i0.ɵɵelementStart(28, "div", 52)(29, "h3", 53);
371
+ i0.ɵɵelement(30, "i", 62);
372
372
  i0.ɵɵtext(31, " Creation ");
373
373
  i0.ɵɵelementEnd();
374
- i0.ɵɵelementStart(32, "div", 56)(33, "div", 57)(34, "span", 58);
374
+ i0.ɵɵelementStart(32, "div", 55)(33, "div", 56)(34, "span", 57);
375
375
  i0.ɵɵtext(35, "Created");
376
376
  i0.ɵɵelementEnd();
377
- i0.ɵɵelementStart(36, "span", 59);
377
+ i0.ɵɵelementStart(36, "span", 58);
378
378
  i0.ɵɵtext(37);
379
379
  i0.ɵɵelementEnd()();
380
- i0.ɵɵconditionalCreate(38, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_38_Template, 6, 1, "div", 57);
381
- i0.ɵɵconditionalCreate(39, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_39_Template, 5, 1, "div", 57);
382
- i0.ɵɵelementStart(40, "div", 57)(41, "span", 58);
380
+ i0.ɵɵconditionalCreate(38, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_38_Template, 6, 1, "div", 56);
381
+ i0.ɵɵconditionalCreate(39, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_39_Template, 5, 1, "div", 56);
382
+ i0.ɵɵelementStart(40, "div", 56)(41, "span", 57);
383
383
  i0.ɵɵtext(42, "Items Captured");
384
384
  i0.ɵɵelementEnd();
385
- i0.ɵɵelementStart(43, "span", 59);
385
+ i0.ɵɵelementStart(43, "span", 58);
386
386
  i0.ɵɵtext(44);
387
387
  i0.ɵɵelementEnd()()()();
388
- i0.ɵɵconditionalCreate(45, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Template, 6, 2, "div", 53);
388
+ i0.ɵɵconditionalCreate(45, MjLabelDetailComponent_Conditional_43_Conditional_2_Conditional_45_Template, 6, 2, "div", 52);
389
389
  i0.ɵɵelementEnd();
390
390
  } if (rf & 2) {
391
391
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -421,37 +421,37 @@ function MjLabelDetailComponent_Conditional_43_Conditional_2_Template(rf, ctx) {
421
421
  i0.ɵɵconditional(ctx_r0.Label.ParentID || ctx_r0.ChildLabels.length > 0 ? 45 : -1);
422
422
  } }
423
423
  function MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
424
- i0.ɵɵelement(0, "i", 93);
424
+ i0.ɵɵelement(0, "i", 92);
425
425
  } }
426
426
  function MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
427
- i0.ɵɵelement(0, "i", 94);
427
+ i0.ɵɵelement(0, "i", 93);
428
428
  } }
429
429
  function MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
430
- i0.ɵɵelement(0, "i", 93);
430
+ i0.ɵɵelement(0, "i", 92);
431
431
  } }
432
432
  function MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
433
- i0.ɵɵelement(0, "i", 96);
433
+ i0.ɵɵelement(0, "i", 95);
434
434
  } }
435
435
  function MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
436
- i0.ɵɵelement(0, "i", 97);
436
+ i0.ɵɵelement(0, "i", 96);
437
437
  } }
438
438
  function MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
439
- i0.ɵɵelement(0, "i", 96);
439
+ i0.ɵɵelement(0, "i", 95);
440
440
  } }
441
441
  function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
442
- i0.ɵɵelementStart(0, "div", 111);
443
- i0.ɵɵelement(1, "mj-loading", 113);
442
+ i0.ɵɵelementStart(0, "div", 110);
443
+ i0.ɵɵelement(1, "mj-loading", 112);
444
444
  i0.ɵɵelementEnd();
445
445
  } }
446
446
  function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
447
447
  const _r10 = i0.ɵɵgetCurrentView();
448
- i0.ɵɵelementStart(0, "div", 115);
448
+ i0.ɵɵelementStart(0, "div", 114);
449
449
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_2_For_1_Template_div_click_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const group_r9 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OpenMicroView(group_r9.EntityName, item_r11.RecordID, item_r11.RecordChangeID, item_r11.DisplayName)); });
450
- i0.ɵɵelement(1, "i", 116);
451
- i0.ɵɵelementStart(2, "span", 117);
450
+ i0.ɵɵelement(1, "i", 115);
451
+ i0.ɵɵelementStart(2, "span", 116);
452
452
  i0.ɵɵtext(3);
453
453
  i0.ɵɵelementEnd();
454
- i0.ɵɵelement(4, "i", 118);
454
+ i0.ɵɵelement(4, "i", 117);
455
455
  i0.ɵɵelementEnd();
456
456
  } if (rf & 2) {
457
457
  const item_r11 = ctx.$implicit;
@@ -459,18 +459,18 @@ function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_
459
459
  i0.ɵɵtextInterpolate(item_r11.DisplayName);
460
460
  } }
461
461
  function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
462
- i0.ɵɵrepeaterCreate(0, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_2_For_1_Template, 5, 1, "div", 114, i0.ɵɵrepeaterTrackByIdentity);
462
+ i0.ɵɵrepeaterCreate(0, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_2_For_1_Template, 5, 1, "div", 113, i0.ɵɵrepeaterTrackByIdentity);
463
463
  } if (rf & 2) {
464
464
  const group_r9 = i0.ɵɵnextContext(2).$implicit;
465
465
  i0.ɵɵrepeater(group_r9.Items);
466
466
  } }
467
467
  function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
468
468
  const _r12 = i0.ɵɵgetCurrentView();
469
- i0.ɵɵelementStart(0, "div", 120);
469
+ i0.ɵɵelementStart(0, "div", 119);
470
470
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_For_2_Template_div_click_0_listener() { const item_r13 = i0.ɵɵrestoreView(_r12).$implicit; const group_r9 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OpenMicroView(group_r9.EntityName, item_r13.RecordID, item_r13.RecordChangeID, item_r13.DisplayName)); });
471
- i0.ɵɵelementStart(1, "div", 121);
472
- i0.ɵɵelement(2, "i", 122);
473
- i0.ɵɵelementStart(3, "span", 123);
471
+ i0.ɵɵelementStart(1, "div", 120);
472
+ i0.ɵɵelement(2, "i", 121);
473
+ i0.ɵɵelementStart(3, "span", 122);
474
474
  i0.ɵɵtext(4);
475
475
  i0.ɵɵelementEnd()()();
476
476
  } if (rf & 2) {
@@ -479,8 +479,8 @@ function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_
479
479
  i0.ɵɵtextInterpolate(item_r13.DisplayName);
480
480
  } }
481
481
  function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
482
- i0.ɵɵelementStart(0, "div", 112);
483
- i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_For_2_Template, 5, 1, "div", 119, i0.ɵɵrepeaterTrackByIdentity);
482
+ i0.ɵɵelementStart(0, "div", 111);
483
+ i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_For_2_Template, 5, 1, "div", 118, i0.ɵɵrepeaterTrackByIdentity);
484
484
  i0.ɵɵelementEnd();
485
485
  } if (rf & 2) {
486
486
  const group_r9 = i0.ɵɵnextContext(2).$implicit;
@@ -488,10 +488,10 @@ function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_
488
488
  i0.ɵɵrepeater(group_r9.Items);
489
489
  } }
490
490
  function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Template(rf, ctx) { if (rf & 1) {
491
- i0.ɵɵelementStart(0, "div", 110);
492
- i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_1_Template, 2, 0, "div", 111);
491
+ i0.ɵɵelementStart(0, "div", 109);
492
+ i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_1_Template, 2, 0, "div", 110);
493
493
  i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_2_Template, 2, 0);
494
- i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_Template, 3, 0, "div", 112);
494
+ i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_Template, 3, 0, "div", 111);
495
495
  i0.ɵɵelementEnd();
496
496
  } if (rf & 2) {
497
497
  const group_r9 = i0.ɵɵnextContext().$implicit;
@@ -505,15 +505,15 @@ function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_
505
505
  } }
506
506
  function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Template(rf, ctx) { if (rf & 1) {
507
507
  const _r8 = i0.ɵɵgetCurrentView();
508
- i0.ɵɵelementStart(0, "div", 103)(1, "div", 105);
508
+ i0.ɵɵelementStart(0, "div", 102)(1, "div", 104);
509
509
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Template_div_click_1_listener() { const group_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ToggleSnapshotGroup(group_r9)); });
510
- i0.ɵɵelement(2, "i", 106)(3, "i", 107);
511
- i0.ɵɵelementStart(4, "span", 108);
510
+ i0.ɵɵelement(2, "i", 105)(3, "i", 106);
511
+ i0.ɵɵelementStart(4, "span", 107);
512
512
  i0.ɵɵtext(5);
513
- i0.ɵɵelementStart(6, "span", 109);
513
+ i0.ɵɵelementStart(6, "span", 108);
514
514
  i0.ɵɵtext(7);
515
515
  i0.ɵɵelementEnd()()();
516
- i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Template, 4, 3, "div", 110);
516
+ i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Template, 4, 3, "div", 109);
517
517
  i0.ɵɵelementEnd();
518
518
  } if (rf & 2) {
519
519
  const group_r9 = ctx.$implicit;
@@ -529,43 +529,43 @@ function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Template(rf,
529
529
  i0.ɵɵconditional(group_r9.IsExpanded ? 8 : -1);
530
530
  } }
531
531
  function MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_22_Template(rf, ctx) { if (rf & 1) {
532
- i0.ɵɵelementStart(0, "div", 104);
533
- i0.ɵɵelement(1, "i", 124);
532
+ i0.ɵɵelementStart(0, "div", 103);
533
+ i0.ɵɵelement(1, "i", 123);
534
534
  i0.ɵɵelementStart(2, "p");
535
535
  i0.ɵɵtext(3, "No snapshot items found.");
536
536
  i0.ɵɵelementEnd()();
537
537
  } }
538
538
  function MjLabelDetailComponent_Conditional_43_Conditional_3_Template(rf, ctx) { if (rf & 1) {
539
539
  const _r7 = i0.ɵɵgetCurrentView();
540
- i0.ɵɵelementStart(0, "div", 52)(1, "div", 87)(2, "div", 88);
541
- i0.ɵɵelement(3, "i", 89);
542
- i0.ɵɵelementStart(4, "input", 90);
540
+ i0.ɵɵelementStart(0, "div", 51)(1, "div", 86)(2, "div", 87);
541
+ i0.ɵɵelement(3, "i", 88);
542
+ i0.ɵɵelementStart(4, "input", 89);
543
543
  i0.ɵɵlistener("ngModelChange", function MjLabelDetailComponent_Conditional_43_Conditional_3_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnSnapshotSearchChange($event)); });
544
544
  i0.ɵɵelementEnd()();
545
- i0.ɵɵelementStart(5, "div", 91)(6, "button", 92);
545
+ i0.ɵɵelementStart(5, "div", 90)(6, "button", 91);
546
546
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnSnapshotSortChange("name")); });
547
- i0.ɵɵconditionalCreate(7, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_7_Template, 1, 0, "i", 93);
548
- i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_8_Template, 1, 0, "i", 94);
549
- i0.ɵɵconditionalCreate(9, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_9_Template, 1, 0, "i", 93);
547
+ i0.ɵɵconditionalCreate(7, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_7_Template, 1, 0, "i", 92);
548
+ i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_8_Template, 1, 0, "i", 93);
549
+ i0.ɵɵconditionalCreate(9, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_9_Template, 1, 0, "i", 92);
550
550
  i0.ɵɵelementEnd();
551
- i0.ɵɵelementStart(10, "button", 95);
551
+ i0.ɵɵelementStart(10, "button", 94);
552
552
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnSnapshotSortChange("count")); });
553
- i0.ɵɵconditionalCreate(11, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_11_Template, 1, 0, "i", 96);
554
- i0.ɵɵconditionalCreate(12, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_12_Template, 1, 0, "i", 97);
555
- i0.ɵɵconditionalCreate(13, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_13_Template, 1, 0, "i", 96);
553
+ i0.ɵɵconditionalCreate(11, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_11_Template, 1, 0, "i", 95);
554
+ i0.ɵɵconditionalCreate(12, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_12_Template, 1, 0, "i", 96);
555
+ i0.ɵɵconditionalCreate(13, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_13_Template, 1, 0, "i", 95);
556
556
  i0.ɵɵelementEnd()();
557
- i0.ɵɵelementStart(14, "div", 98)(15, "button", 99);
557
+ i0.ɵɵelementStart(14, "div", 97)(15, "button", 98);
558
558
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.SnapshotViewMode = "list"); });
559
- i0.ɵɵelement(16, "i", 100);
559
+ i0.ɵɵelement(16, "i", 99);
560
560
  i0.ɵɵelementEnd();
561
- i0.ɵɵelementStart(17, "button", 99);
561
+ i0.ɵɵelementStart(17, "button", 98);
562
562
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.SnapshotViewMode = "card"); });
563
- i0.ɵɵelement(18, "i", 101);
563
+ i0.ɵɵelement(18, "i", 100);
564
564
  i0.ɵɵelementEnd()()();
565
- i0.ɵɵelementStart(19, "div", 102);
566
- i0.ɵɵrepeaterCreate(20, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Template, 9, 7, "div", 103, i0.ɵɵrepeaterTrackByIdentity);
565
+ i0.ɵɵelementStart(19, "div", 101);
566
+ i0.ɵɵrepeaterCreate(20, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Template, 9, 7, "div", 102, i0.ɵɵrepeaterTrackByIdentity);
567
567
  i0.ɵɵelementEnd();
568
- i0.ɵɵconditionalCreate(22, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_22_Template, 4, 0, "div", 104);
568
+ i0.ɵɵconditionalCreate(22, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_22_Template, 4, 0, "div", 103);
569
569
  i0.ɵɵelementEnd();
570
570
  } if (rf & 2) {
571
571
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -597,13 +597,13 @@ function MjLabelDetailComponent_Conditional_43_Conditional_3_Template(rf, ctx) {
597
597
  i0.ɵɵconditional(ctx_r0.FilteredSnapshotGroups.length === 0 ? 22 : -1);
598
598
  } }
599
599
  function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
600
- i0.ɵɵelement(0, "mj-loading", 125);
600
+ i0.ɵɵelement(0, "mj-loading", 124);
601
601
  } }
602
602
  function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_7_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
603
603
  i0.ɵɵelementContainer(0);
604
604
  } }
605
605
  function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
606
- i0.ɵɵtemplate(0, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_7_For_1_ng_container_0_Template, 1, 0, "ng-container", 132);
606
+ i0.ɵɵtemplate(0, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_7_For_1_ng_container_0_Template, 1, 0, "ng-container", 131);
607
607
  } if (rf & 2) {
608
608
  const node_r14 = ctx.$implicit;
609
609
  i0.ɵɵnextContext(4);
@@ -617,21 +617,21 @@ function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Condi
617
617
  i0.ɵɵrepeater(ctx_r0.DependencyTree);
618
618
  } }
619
619
  function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
620
- i0.ɵɵelementStart(0, "div", 131)(1, "p");
620
+ i0.ɵɵelementStart(0, "div", 130)(1, "p");
621
621
  i0.ɵɵtext(2, "No dependent entities found.");
622
622
  i0.ɵɵelementEnd()();
623
623
  } }
624
624
  function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
625
- i0.ɵɵelementStart(0, "div", 126)(1, "div", 127);
626
- i0.ɵɵelement(2, "i", 128);
627
- i0.ɵɵelementStart(3, "span", 129);
625
+ i0.ɵɵelementStart(0, "div", 125)(1, "div", 126);
626
+ i0.ɵɵelement(2, "i", 127);
627
+ i0.ɵɵelementStart(3, "span", 128);
628
628
  i0.ɵɵtext(4);
629
629
  i0.ɵɵelementEnd();
630
- i0.ɵɵelementStart(5, "span", 130);
630
+ i0.ɵɵelementStart(5, "span", 129);
631
631
  i0.ɵɵtext(6, "Root");
632
632
  i0.ɵɵelementEnd()();
633
633
  i0.ɵɵconditionalCreate(7, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_7_Template, 2, 0);
634
- i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_8_Template, 3, 0, "div", 131);
634
+ i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_8_Template, 3, 0, "div", 130);
635
635
  i0.ɵɵelementEnd();
636
636
  } if (rf & 2) {
637
637
  const ctx_r0 = i0.ɵɵnextContext(3);
@@ -645,17 +645,17 @@ function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Templ
645
645
  i0.ɵɵconditional(ctx_r0.DependencyTree.length === 0 ? 8 : -1);
646
646
  } }
647
647
  function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
648
- i0.ɵɵelementStart(0, "div", 104);
649
- i0.ɵɵelement(1, "i", 133);
648
+ i0.ɵɵelementStart(0, "div", 103);
649
+ i0.ɵɵelement(1, "i", 132);
650
650
  i0.ɵɵelementStart(2, "p");
651
651
  i0.ɵɵtext(3, "No entity associated with this label.");
652
652
  i0.ɵɵelementEnd()();
653
653
  } }
654
654
  function MjLabelDetailComponent_Conditional_43_Conditional_4_Template(rf, ctx) { if (rf & 1) {
655
- i0.ɵɵelementStart(0, "div", 52);
656
- i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_1_Template, 1, 0, "mj-loading", 125);
657
- i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Template, 9, 5, "div", 126);
658
- i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_3_Template, 4, 0, "div", 104);
655
+ i0.ɵɵelementStart(0, "div", 51);
656
+ i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_1_Template, 1, 0, "mj-loading", 124);
657
+ i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Template, 9, 5, "div", 125);
658
+ i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_3_Template, 4, 0, "div", 103);
659
659
  i0.ɵɵelementEnd();
660
660
  } if (rf & 2) {
661
661
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -667,16 +667,16 @@ function MjLabelDetailComponent_Conditional_43_Conditional_4_Template(rf, ctx) {
667
667
  i0.ɵɵconditional(!ctx_r0.IsLoadingDependencies && !ctx_r0.Label.EntityID ? 3 : -1);
668
668
  } }
669
669
  function MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
670
- i0.ɵɵelement(0, "i", 142);
670
+ i0.ɵɵelement(0, "i", 141);
671
671
  } if (rf & 2) {
672
672
  const node_r17 = i0.ɵɵnextContext().$implicit;
673
673
  i0.ɵɵclassProp("expanded", node_r17.IsExpanded);
674
674
  } }
675
675
  function MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
676
- i0.ɵɵelement(0, "span", 137);
676
+ i0.ɵɵelement(0, "span", 136);
677
677
  } }
678
678
  function MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_9_Template(rf, ctx) { if (rf & 1) {
679
- i0.ɵɵelementStart(0, "span", 141);
679
+ i0.ɵɵelementStart(0, "span", 140);
680
680
  i0.ɵɵtext(1);
681
681
  i0.ɵɵelementEnd();
682
682
  } if (rf & 2) {
@@ -688,7 +688,7 @@ function MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_10_For_
688
688
  i0.ɵɵelementContainer(0);
689
689
  } }
690
690
  function MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_10_For_1_Template(rf, ctx) { if (rf & 1) {
691
- i0.ɵɵtemplate(0, MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_10_For_1_ng_container_0_Template, 1, 0, "ng-container", 132);
691
+ i0.ɵɵtemplate(0, MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_10_For_1_ng_container_0_Template, 1, 0, "ng-container", 131);
692
692
  } if (rf & 2) {
693
693
  const child_r18 = ctx.$implicit;
694
694
  i0.ɵɵnextContext(3);
@@ -703,18 +703,18 @@ function MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_10_Temp
703
703
  } }
704
704
  function MjLabelDetailComponent_Conditional_43_ng_template_5_Template(rf, ctx) { if (rf & 1) {
705
705
  const _r16 = i0.ɵɵgetCurrentView();
706
- i0.ɵɵelementStart(0, "div", 134)(1, "div", 135);
706
+ i0.ɵɵelementStart(0, "div", 133)(1, "div", 134);
707
707
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_ng_template_5_Template_div_click_1_listener() { const node_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ToggleDependencyNode(node_r17)); });
708
- i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_2_Template, 1, 2, "i", 136);
709
- i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_3_Template, 1, 0, "span", 137);
710
- i0.ɵɵelement(4, "i", 138);
711
- i0.ɵɵelementStart(5, "span", 139);
708
+ i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_2_Template, 1, 2, "i", 135);
709
+ i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_3_Template, 1, 0, "span", 136);
710
+ i0.ɵɵelement(4, "i", 137);
711
+ i0.ɵɵelementStart(5, "span", 138);
712
712
  i0.ɵɵtext(6);
713
713
  i0.ɵɵelementEnd();
714
- i0.ɵɵelementStart(7, "span", 140);
714
+ i0.ɵɵelementStart(7, "span", 139);
715
715
  i0.ɵɵtext(8);
716
716
  i0.ɵɵelementEnd();
717
- i0.ɵɵconditionalCreate(9, MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_9_Template, 2, 2, "span", 141);
717
+ i0.ɵɵconditionalCreate(9, MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_9_Template, 2, 2, "span", 140);
718
718
  i0.ɵɵelementEnd();
719
719
  i0.ɵɵconditionalCreate(10, MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_10_Template, 2, 0);
720
720
  i0.ɵɵelementEnd();
@@ -738,25 +738,25 @@ function MjLabelDetailComponent_Conditional_43_ng_template_5_Template(rf, ctx) {
738
738
  i0.ɵɵconditional(node_r17.IsExpanded && node_r17.Children.length > 0 ? 10 : -1);
739
739
  } }
740
740
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
741
- i0.ɵɵelement(0, "mj-loading", 143);
741
+ i0.ɵɵelement(0, "mj-loading", 142);
742
742
  } }
743
743
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
744
744
  const _r19 = i0.ɵɵgetCurrentView();
745
- i0.ɵɵelementStart(0, "div", 149)(1, "button", 151);
745
+ i0.ɵɵelementStart(0, "div", 148)(1, "button", 150);
746
746
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.ExpandAllDiffGroups()); });
747
- i0.ɵɵelement(2, "i", 152);
747
+ i0.ɵɵelement(2, "i", 151);
748
748
  i0.ɵɵelementStart(3, "span");
749
749
  i0.ɵɵtext(4, "Expand All");
750
750
  i0.ɵɵelementEnd()();
751
- i0.ɵɵelementStart(5, "button", 153);
751
+ i0.ɵɵelementStart(5, "button", 152);
752
752
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.CollapseAllDiffGroups()); });
753
- i0.ɵɵelement(6, "i", 154);
753
+ i0.ɵɵelement(6, "i", 153);
754
754
  i0.ɵɵelementStart(7, "span");
755
755
  i0.ɵɵtext(8, "Collapse All");
756
756
  i0.ɵɵelementEnd()()();
757
757
  } }
758
758
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
759
- i0.ɵɵelementStart(0, "span", 169);
759
+ i0.ɵɵelementStart(0, "span", 168);
760
760
  i0.ɵɵtext(1);
761
761
  i0.ɵɵpipe(2, "slice");
762
762
  i0.ɵɵelementEnd();
@@ -766,10 +766,10 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
766
766
  i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, field_r22.OldValue, 0, 40));
767
767
  } }
768
768
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
769
- i0.ɵɵelement(0, "i", 170);
769
+ i0.ɵɵelement(0, "i", 169);
770
770
  } }
771
771
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
772
- i0.ɵɵelementStart(0, "span", 171);
772
+ i0.ɵɵelementStart(0, "span", 170);
773
773
  i0.ɵɵtext(1);
774
774
  i0.ɵɵpipe(2, "slice");
775
775
  i0.ɵɵelementEnd();
@@ -779,12 +779,12 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
779
779
  i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, field_r22.NewValue, 0, 40));
780
780
  } }
781
781
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
782
- i0.ɵɵelementStart(0, "div", 167)(1, "span", 168);
782
+ i0.ɵɵelementStart(0, "div", 166)(1, "span", 167);
783
783
  i0.ɵɵtext(2);
784
784
  i0.ɵɵelementEnd();
785
- i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_3_Template, 3, 5, "span", 169);
786
- i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_4_Template, 1, 0, "i", 170);
787
- i0.ɵɵconditionalCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_5_Template, 3, 5, "span", 171);
785
+ i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_3_Template, 3, 5, "span", 168);
786
+ i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_4_Template, 1, 0, "i", 169);
787
+ i0.ɵɵconditionalCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_5_Template, 3, 5, "span", 170);
788
788
  i0.ɵɵelementEnd();
789
789
  } if (rf & 2) {
790
790
  const field_r22 = ctx.$implicit;
@@ -800,8 +800,8 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
800
800
  i0.ɵɵconditional(field_r22.NewValue ? 5 : -1);
801
801
  } }
802
802
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
803
- i0.ɵɵelementStart(0, "div", 166);
804
- i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Template, 6, 5, "div", 167, i0.ɵɵrepeaterTrackByIdentity);
803
+ i0.ɵɵelementStart(0, "div", 165);
804
+ i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Template, 6, 5, "div", 166, i0.ɵɵrepeaterTrackByIdentity);
805
805
  i0.ɵɵelementEnd();
806
806
  } if (rf & 2) {
807
807
  const record_r23 = i0.ɵɵnextContext().$implicit;
@@ -809,13 +809,13 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
809
809
  i0.ɵɵrepeater(record_r23.FieldChanges);
810
810
  } }
811
811
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
812
- i0.ɵɵelementStart(0, "div", 162)(1, "div", 163);
813
- i0.ɵɵelement(2, "i", 164);
814
- i0.ɵɵelementStart(3, "span", 165);
812
+ i0.ɵɵelementStart(0, "div", 161)(1, "div", 162);
813
+ i0.ɵɵelement(2, "i", 163);
814
+ i0.ɵɵelementStart(3, "span", 164);
815
815
  i0.ɵɵtext(4);
816
816
  i0.ɵɵpipe(5, "slice");
817
817
  i0.ɵɵelementEnd()();
818
- i0.ɵɵconditionalCreate(6, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_Template, 3, 0, "div", 166);
818
+ i0.ɵɵconditionalCreate(6, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_Template, 3, 0, "div", 165);
819
819
  i0.ɵɵelementEnd();
820
820
  } if (rf & 2) {
821
821
  const record_r23 = ctx.$implicit;
@@ -829,8 +829,8 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
829
829
  i0.ɵɵconditional(record_r23.FieldChanges.length > 0 ? 6 : -1);
830
830
  } }
831
831
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
832
- i0.ɵɵelementStart(0, "div", 161);
833
- i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Template, 7, 9, "div", 162, i0.ɵɵrepeaterTrackByIdentity);
832
+ i0.ɵɵelementStart(0, "div", 160);
833
+ i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Template, 7, 9, "div", 161, i0.ɵɵrepeaterTrackByIdentity);
834
834
  i0.ɵɵelementEnd();
835
835
  } if (rf & 2) {
836
836
  const group_r21 = i0.ɵɵnextContext().$implicit;
@@ -839,16 +839,16 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
839
839
  } }
840
840
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
841
841
  const _r20 = i0.ɵɵgetCurrentView();
842
- i0.ɵɵelementStart(0, "div", 155)(1, "div", 156);
842
+ i0.ɵɵelementStart(0, "div", 154)(1, "div", 155);
843
843
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Template_div_click_1_listener() { const group_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.ToggleDiffGroup(group_r21)); });
844
- i0.ɵɵelement(2, "i", 157)(3, "i", 158);
845
- i0.ɵɵelementStart(4, "span", 159);
844
+ i0.ɵɵelement(2, "i", 156)(3, "i", 157);
845
+ i0.ɵɵelementStart(4, "span", 158);
846
846
  i0.ɵɵtext(5);
847
847
  i0.ɵɵelementEnd();
848
- i0.ɵɵelementStart(6, "span", 160);
848
+ i0.ɵɵelementStart(6, "span", 159);
849
849
  i0.ɵɵtext(7);
850
850
  i0.ɵɵelementEnd()();
851
- i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_Template, 3, 0, "div", 161);
851
+ i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_Template, 3, 0, "div", 160);
852
852
  i0.ɵɵelementEnd();
853
853
  } if (rf & 2) {
854
854
  const group_r21 = ctx.$implicit;
@@ -865,8 +865,8 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
865
865
  i0.ɵɵconditional(group_r21.IsExpanded ? 8 : -1);
866
866
  } }
867
867
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
868
- i0.ɵɵelementStart(0, "div", 150);
869
- i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Template, 9, 7, "div", 155, i0.ɵɵrepeaterTrackByIdentity);
868
+ i0.ɵɵelementStart(0, "div", 149);
869
+ i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Template, 9, 7, "div", 154, i0.ɵɵrepeaterTrackByIdentity);
870
870
  i0.ɵɵelementEnd();
871
871
  } if (rf & 2) {
872
872
  const ctx_r0 = i0.ɵɵnextContext(4);
@@ -874,34 +874,34 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
874
874
  i0.ɵɵrepeater(ctx_r0.DiffResult.EntityGroups);
875
875
  } }
876
876
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
877
- i0.ɵɵelementStart(0, "div", 104);
878
- i0.ɵɵelement(1, "i", 172);
877
+ i0.ɵɵelementStart(0, "div", 103);
878
+ i0.ɵɵelement(1, "i", 171);
879
879
  i0.ɵɵelementStart(2, "p");
880
880
  i0.ɵɵtext(3, "No changes detected since this label was created.");
881
881
  i0.ɵɵelementEnd()();
882
882
  } }
883
883
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
884
- i0.ɵɵelementStart(0, "div", 144)(1, "div", 145)(2, "span", 146);
884
+ i0.ɵɵelementStart(0, "div", 143)(1, "div", 144)(2, "span", 145);
885
885
  i0.ɵɵtext(3);
886
886
  i0.ɵɵelementEnd();
887
- i0.ɵɵelementStart(4, "span", 147);
887
+ i0.ɵɵelementStart(4, "span", 146);
888
888
  i0.ɵɵtext(5, "Changed");
889
889
  i0.ɵɵelementEnd()();
890
- i0.ɵɵelementStart(6, "div", 145)(7, "span", 148);
890
+ i0.ɵɵelementStart(6, "div", 144)(7, "span", 147);
891
891
  i0.ɵɵtext(8);
892
892
  i0.ɵɵelementEnd();
893
- i0.ɵɵelementStart(9, "span", 147);
893
+ i0.ɵɵelementStart(9, "span", 146);
894
894
  i0.ɵɵtext(10, "Unchanged");
895
895
  i0.ɵɵelementEnd()();
896
- i0.ɵɵelementStart(11, "div", 145)(12, "span", 148);
896
+ i0.ɵɵelementStart(11, "div", 144)(12, "span", 147);
897
897
  i0.ɵɵtext(13);
898
898
  i0.ɵɵelementEnd();
899
- i0.ɵɵelementStart(14, "span", 147);
899
+ i0.ɵɵelementStart(14, "span", 146);
900
900
  i0.ɵɵtext(15, "Entities");
901
901
  i0.ɵɵelementEnd()()();
902
- i0.ɵɵconditionalCreate(16, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_16_Template, 9, 0, "div", 149);
903
- i0.ɵɵconditionalCreate(17, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_Template, 3, 0, "div", 150);
904
- i0.ɵɵconditionalCreate(18, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_18_Template, 4, 0, "div", 104);
902
+ i0.ɵɵconditionalCreate(16, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_16_Template, 9, 0, "div", 148);
903
+ i0.ɵɵconditionalCreate(17, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_Template, 3, 0, "div", 149);
904
+ i0.ɵɵconditionalCreate(18, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_18_Template, 4, 0, "div", 103);
905
905
  } if (rf & 2) {
906
906
  const ctx_r0 = i0.ɵɵnextContext(3);
907
907
  i0.ɵɵadvance(3);
@@ -918,8 +918,8 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Templ
918
918
  i0.ɵɵconditional(ctx_r0.DiffResult.EntityGroups.length === 0 && ctx_r0.DiffResult.Summary.Changed === 0 ? 18 : -1);
919
919
  } }
920
920
  function MjLabelDetailComponent_Conditional_43_Conditional_7_Template(rf, ctx) { if (rf & 1) {
921
- i0.ɵɵelementStart(0, "div", 52);
922
- i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_1_Template, 1, 0, "mj-loading", 143);
921
+ i0.ɵɵelementStart(0, "div", 51);
922
+ i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_1_Template, 1, 0, "mj-loading", 142);
923
923
  i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Template, 19, 6);
924
924
  i0.ɵɵelementEnd();
925
925
  } if (rf & 2) {
@@ -930,7 +930,7 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Template(rf, ctx) {
930
930
  i0.ɵɵconditional(!ctx_r0.IsLoadingDiff && ctx_r0.DiffResult ? 2 : -1);
931
931
  } }
932
932
  function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
933
- i0.ɵɵelement(0, "mj-loading", 173);
933
+ i0.ɵɵelement(0, "mj-loading", 172);
934
934
  } }
935
935
  function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
936
936
  i0.ɵɵelementStart(0, "span");
@@ -942,17 +942,17 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Condi
942
942
  i0.ɵɵtextInterpolate1(" \u00B7 ", restore_r24.FailedItems, " failed");
943
943
  } }
944
944
  function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_For_6_Template(rf, ctx) { if (rf & 1) {
945
- i0.ɵɵelementStart(0, "div", 176)(1, "div", 177);
946
- i0.ɵɵelement(2, "i", 178);
945
+ i0.ɵɵelementStart(0, "div", 175)(1, "div", 176);
946
+ i0.ɵɵelement(2, "i", 177);
947
947
  i0.ɵɵelementEnd();
948
- i0.ɵɵelementStart(3, "div", 179)(4, "span", 180);
948
+ i0.ɵɵelementStart(3, "div", 178)(4, "span", 179);
949
949
  i0.ɵɵtext(5);
950
950
  i0.ɵɵelementEnd();
951
- i0.ɵɵelementStart(6, "span", 181);
951
+ i0.ɵɵelementStart(6, "span", 180);
952
952
  i0.ɵɵtext(7);
953
953
  i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_For_6_Conditional_8_Template, 2, 1, "span");
954
954
  i0.ɵɵelementEnd()();
955
- i0.ɵɵelementStart(9, "span", 182);
955
+ i0.ɵɵelementStart(9, "span", 181);
956
956
  i0.ɵɵtext(10);
957
957
  i0.ɵɵelementEnd()();
958
958
  } if (rf & 2) {
@@ -970,12 +970,12 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Condi
970
970
  i0.ɵɵtextInterpolate(ctx_r0.FormatRelativeDate(restore_r24.__mj_CreatedAt));
971
971
  } }
972
972
  function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
973
- i0.ɵɵelementStart(0, "div", 53)(1, "h3", 54);
974
- i0.ɵɵelement(2, "i", 174);
973
+ i0.ɵɵelementStart(0, "div", 52)(1, "h3", 53);
974
+ i0.ɵɵelement(2, "i", 173);
975
975
  i0.ɵɵtext(3, " Restore Operations ");
976
976
  i0.ɵɵelementEnd();
977
- i0.ɵɵelementStart(4, "div", 175);
978
- i0.ɵɵrepeaterCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_For_6_Template, 11, 6, "div", 176, i0.ɵɵrepeaterTrackByIdentity);
977
+ i0.ɵɵelementStart(4, "div", 174);
978
+ i0.ɵɵrepeaterCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_For_6_Template, 11, 6, "div", 175, i0.ɵɵrepeaterTrackByIdentity);
979
979
  i0.ɵɵelementEnd()();
980
980
  } if (rf & 2) {
981
981
  const ctx_r0 = i0.ɵɵnextContext(4);
@@ -983,16 +983,16 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Condi
983
983
  i0.ɵɵrepeater(ctx_r0.Restores);
984
984
  } }
985
985
  function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_1_For_6_Template(rf, ctx) { if (rf & 1) {
986
- i0.ɵɵelementStart(0, "div", 176)(1, "div", 184);
987
- i0.ɵɵelement(2, "i", 185);
986
+ i0.ɵɵelementStart(0, "div", 175)(1, "div", 183);
987
+ i0.ɵɵelement(2, "i", 184);
988
988
  i0.ɵɵelementEnd();
989
- i0.ɵɵelementStart(3, "div", 179)(4, "span", 180);
989
+ i0.ɵɵelementStart(3, "div", 178)(4, "span", 179);
990
990
  i0.ɵɵtext(5);
991
991
  i0.ɵɵelementEnd();
992
- i0.ɵɵelementStart(6, "span", 181)(7, "span", 186);
992
+ i0.ɵɵelementStart(6, "span", 180)(7, "span", 185);
993
993
  i0.ɵɵtext(8);
994
994
  i0.ɵɵelementEnd()()();
995
- i0.ɵɵelementStart(9, "span", 182);
995
+ i0.ɵɵelementStart(9, "span", 181);
996
996
  i0.ɵɵtext(10);
997
997
  i0.ɵɵelementEnd()();
998
998
  } if (rf & 2) {
@@ -1008,12 +1008,12 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Condi
1008
1008
  i0.ɵɵtextInterpolate(ctx_r0.FormatRelativeDate(related_r25.__mj_CreatedAt));
1009
1009
  } }
1010
1010
  function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
1011
- i0.ɵɵelementStart(0, "div", 53)(1, "h3", 54);
1012
- i0.ɵɵelement(2, "i", 183);
1011
+ i0.ɵɵelementStart(0, "div", 52)(1, "h3", 53);
1012
+ i0.ɵɵelement(2, "i", 182);
1013
1013
  i0.ɵɵtext(3, " Related Labels ");
1014
1014
  i0.ɵɵelementEnd();
1015
- i0.ɵɵelementStart(4, "div", 175);
1016
- i0.ɵɵrepeaterCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_1_For_6_Template, 11, 4, "div", 176, i0.ɵɵrepeaterTrackByIdentity);
1015
+ i0.ɵɵelementStart(4, "div", 174);
1016
+ i0.ɵɵrepeaterCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_1_For_6_Template, 11, 4, "div", 175, i0.ɵɵrepeaterTrackByIdentity);
1017
1017
  i0.ɵɵelementEnd()();
1018
1018
  } if (rf & 2) {
1019
1019
  const ctx_r0 = i0.ɵɵnextContext(4);
@@ -1021,16 +1021,16 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Condi
1021
1021
  i0.ɵɵrepeater(ctx_r0.RelatedLabels);
1022
1022
  } }
1023
1023
  function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
1024
- i0.ɵɵelementStart(0, "div", 104);
1025
- i0.ɵɵelement(1, "i", 187);
1024
+ i0.ɵɵelementStart(0, "div", 103);
1025
+ i0.ɵɵelement(1, "i", 186);
1026
1026
  i0.ɵɵelementStart(2, "p");
1027
1027
  i0.ɵɵtext(3, "No restore history or related labels found.");
1028
1028
  i0.ɵɵelementEnd()();
1029
1029
  } }
1030
1030
  function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
1031
- i0.ɵɵconditionalCreate(0, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_Template, 7, 0, "div", 53);
1032
- i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_1_Template, 7, 0, "div", 53);
1033
- i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_2_Template, 4, 0, "div", 104);
1031
+ i0.ɵɵconditionalCreate(0, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_Template, 7, 0, "div", 52);
1032
+ i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_1_Template, 7, 0, "div", 52);
1033
+ i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_2_Template, 4, 0, "div", 103);
1034
1034
  } if (rf & 2) {
1035
1035
  const ctx_r0 = i0.ɵɵnextContext(3);
1036
1036
  i0.ɵɵconditional(ctx_r0.Restores.length > 0 ? 0 : -1);
@@ -1040,8 +1040,8 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Templ
1040
1040
  i0.ɵɵconditional(ctx_r0.Restores.length === 0 && ctx_r0.RelatedLabels.length === 0 ? 2 : -1);
1041
1041
  } }
1042
1042
  function MjLabelDetailComponent_Conditional_43_Conditional_8_Template(rf, ctx) { if (rf & 1) {
1043
- i0.ɵɵelementStart(0, "div", 52);
1044
- i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_1_Template, 1, 0, "mj-loading", 173);
1043
+ i0.ɵɵelementStart(0, "div", 51);
1044
+ i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_1_Template, 1, 0, "mj-loading", 172);
1045
1045
  i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Template, 3, 3);
1046
1046
  i0.ɵɵelementEnd();
1047
1047
  } if (rf & 2) {
@@ -1052,14 +1052,14 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Template(rf, ctx) {
1052
1052
  i0.ɵɵconditional(!ctx_r0.IsLoadingHistory ? 2 : -1);
1053
1053
  } }
1054
1054
  function MjLabelDetailComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
1055
- i0.ɵɵelementStart(0, "div", 31);
1056
- i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_1_Template, 1, 0, "mj-loading", 51);
1057
- i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_2_Template, 46, 16, "div", 52);
1058
- i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_3_Template, 23, 16, "div", 52);
1059
- i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_4_Template, 4, 3, "div", 52);
1055
+ i0.ɵɵelementStart(0, "div", 30);
1056
+ i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_1_Template, 1, 0, "mj-loading", 50);
1057
+ i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_2_Template, 46, 16, "div", 51);
1058
+ i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_3_Template, 23, 16, "div", 51);
1059
+ i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_4_Template, 4, 3, "div", 51);
1060
1060
  i0.ɵɵtemplate(5, MjLabelDetailComponent_Conditional_43_ng_template_5_Template, 11, 10, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
1061
- i0.ɵɵconditionalCreate(7, MjLabelDetailComponent_Conditional_43_Conditional_7_Template, 3, 2, "div", 52);
1062
- i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_8_Template, 3, 2, "div", 52);
1061
+ i0.ɵɵconditionalCreate(7, MjLabelDetailComponent_Conditional_43_Conditional_7_Template, 3, 2, "div", 51);
1062
+ i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_8_Template, 3, 2, "div", 51);
1063
1063
  i0.ɵɵelementEnd();
1064
1064
  } if (rf & 2) {
1065
1065
  const ctx_r0 = i0.ɵɵnextContext();
@@ -1078,7 +1078,7 @@ function MjLabelDetailComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
1078
1078
  } }
1079
1079
  function MjLabelDetailComponent_Conditional_44_Template(rf, ctx) { if (rf & 1) {
1080
1080
  const _r26 = i0.ɵɵgetCurrentView();
1081
- i0.ɵɵelementStart(0, "div", 31)(1, "mj-record-micro-view", 188);
1081
+ i0.ɵɵelementStart(0, "div", 30)(1, "mj-record-micro-view", 187);
1082
1082
  i0.ɵɵlistener("Close", function MjLabelDetailComponent_Conditional_44_Template_mj_record_micro_view_Close_1_listener() { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnBackFromMicroView()); })("EntityLinkClick", function MjLabelDetailComponent_Conditional_44_Template_mj_record_micro_view_EntityLinkClick_1_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnEntityLinkClick($event)); })("OpenRecord", function MjLabelDetailComponent_Conditional_44_Template_mj_record_micro_view_OpenRecord_1_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnOpenRecordClick($event)); });
1083
1083
  i0.ɵɵelementEnd()();
1084
1084
  } if (rf & 2) {
@@ -1975,7 +1975,7 @@ export class MjLabelDetailComponent {
1975
1975
  static ɵfac = function MjLabelDetailComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MjLabelDetailComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ElementRef)); };
1976
1976
  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjLabelDetailComponent, selectors: [["mj-label-detail-panel"]], hostBindings: function MjLabelDetailComponent_HostBindings(rf, ctx) { if (rf & 1) {
1977
1977
  i0.ɵɵlistener("keydown.escape", function MjLabelDetailComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscapeKey(); }, i0.ɵɵresolveDocument);
1978
- } }, inputs: { Label: "Label", AllLabels: "AllLabels", ItemCountMap: "ItemCountMap" }, outputs: { Close: "Close", LabelUpdated: "LabelUpdated", EntityLinkClick: "EntityLinkClick" }, standalone: false, decls: 45, vars: 22, consts: [["depNode", ""], [1, "panel-backdrop", 3, "click"], [1, "detail-panel"], [1, "resize-handle", 3, "mousedown"], [1, "resize-handle-grip"], [1, "panel-header"], [1, "header-info"], [1, "header-title-row"], [1, "header-scope-icon"], [1, "header-title"], [1, "header-status", 3, "ngClass"], [1, "header-scope-badge"], [1, "header-description"], [1, "header-actions"], ["title", "Archive this label", 1, "header-action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-box-archive"], ["title", "View changes", 1, "header-action-btn", 3, "click"], [1, "fa-solid", "fa-code-compare"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "summary-kpis"], [1, "summary-kpi"], [1, "kpi-mini-icon", 2, "background", "rgba(99, 102, 241, 0.1)", "color", "#6366f1"], [1, "fa-solid", "fa-camera"], [1, "kpi-mini-content"], [1, "kpi-mini-value"], [1, "kpi-mini-label"], [1, "kpi-mini-icon", 2, "background", "rgba(59, 130, 246, 0.1)", "color", "#3b82f6"], [1, "fa-solid", "fa-table"], [1, "tab-bar"], [1, "breadcrumb-bar"], [1, "tab-content"], [1, "kpi-mini-icon", 2, "background", "rgba(16, 185, 129, 0.1)", "color", "#10b981"], [1, "fa-solid", "fa-stopwatch"], [1, "kpi-mini-icon", 2, "background", "rgba(245, 158, 11, 0.1)", "color", "#f59e0b"], [1, "fa-solid", "fa-layer-group"], [1, "tab", 3, "click"], [1, "fa-solid", "fa-info-circle", "tab-icon"], [1, "fa-solid", "fa-camera", "tab-icon"], [1, "tab-count"], [1, "fa-solid", "fa-diagram-project", "tab-icon"], [1, "fa-solid", "fa-code-compare", "tab-icon"], [1, "fa-solid", "fa-clock-rotate-left", "tab-icon"], [1, "breadcrumb-back", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "breadcrumb-trail"], [1, "breadcrumb-item", "clickable", 3, "click"], [1, "fa-solid", "fa-camera", "breadcrumb-icon"], [1, "fa-solid", "fa-chevron-right", "breadcrumb-separator"], [1, "breadcrumb-item", "current"], [1, "fa-solid", "fa-file-lines", "breadcrumb-icon"], ["text", "Loading label data..."], [1, "tab-pane"], [1, "detail-section"], [1, "section-title"], [1, "fa-solid", "fa-info-circle", "section-icon"], [1, "detail-grid"], [1, "detail-field"], [1, "field-label"], [1, "field-value"], [1, "inline-badge", 3, "ngClass"], [2, "margin-right", "6px"], [1, "record-card"], [1, "fa-solid", "fa-clock", "section-icon"], [2, "margin-right", "6px", "color", "#3b82f6"], [1, "field-value", "field-mono"], [1, "record-card-main"], [1, "record-card-icon"], [1, "record-card-info"], [1, "record-card-name"], [1, "record-card-name", "record-card-name-loading"], [1, "record-card-entity"], [1, "record-card-id"], ["title", "Open record", 1, "record-card-open-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-align-left", "section-icon"], [1, "description-text"], [1, "fa-solid", "fa-user", 2, "margin-right", "6px", "opacity", "0.5"], [1, "fa-solid", "fa-sitemap", "section-icon"], [1, "hierarchy-item", "parent"], [1, "hierarchy-children"], [1, "fa-solid", "fa-arrow-up", "hierarchy-icon"], [1, "hierarchy-label"], [1, "hierarchy-name"], [1, "hierarchy-item", "child"], [1, "fa-solid", "fa-arrow-turn-down-right", "hierarchy-icon"], [1, "hierarchy-meta"], [1, "snapshot-toolbar"], [1, "snapshot-search"], [1, "fa-solid", "fa-search", "snapshot-search-icon"], ["type", "text", "placeholder", "Search by entity or record...", 1, "snapshot-search-input", 3, "ngModelChange", "ngModel"], [1, "snapshot-sort-toggle"], ["title", "Sort by name", 1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-arrow-down-a-z"], [1, "fa-solid", "fa-arrow-up-z-a"], ["title", "Sort by record count", 1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-arrow-down-9-1"], [1, "fa-solid", "fa-arrow-up-1-9"], [1, "snapshot-view-toggle"], [1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-list"], [1, "fa-solid", "fa-grip"], [1, "snapshot-groups"], [1, "snapshot-group"], [1, "tab-empty"], [1, "group-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "group-chevron"], [1, "group-entity-icon"], [1, "group-name"], [1, "group-count-inline"], [1, "group-content"], [1, "group-names-loading"], [1, "snapshot-cards"], ["text", "Loading record names...", "size", "small"], [1, "snapshot-list-item"], [1, "snapshot-list-item", 3, "click"], [1, "fa-solid", "fa-file-lines", "snapshot-item-icon"], [1, "snapshot-item-name"], [1, "fa-solid", "fa-chevron-right", "snapshot-item-arrow"], [1, "snapshot-card"], [1, "snapshot-card", 3, "click"], [1, "snapshot-card-header"], [1, "fa-solid", "fa-file-lines"], [1, "snapshot-card-name"], [1, "fa-solid", "fa-camera", "tab-empty-icon"], ["text", "Loading dependencies..."], [1, "dep-root"], [1, "dep-root-entity"], [1, "dep-root-icon"], [1, "dep-root-name"], [1, "dep-root-badge"], [1, "dep-empty"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "fa-solid", "fa-diagram-project", "tab-empty-icon"], [1, "dep-node"], [1, "dep-node-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "dep-chevron", 3, "expanded"], [1, "dep-node-spacer"], [1, "dep-node-icon"], [1, "dep-node-name"], [1, "dep-node-field"], [1, "dep-node-count"], [1, "fa-solid", "fa-chevron-right", "dep-chevron"], ["text", "Computing differences..."], [1, "diff-summary"], [1, "diff-stat"], [1, "diff-stat-value", "change-modified"], [1, "diff-stat-label"], [1, "diff-stat-value"], [1, "diff-toolbar"], [1, "diff-groups"], ["title", "Expand all", 1, "toolbar-action-btn", 3, "click"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all", 1, "toolbar-action-btn", 3, "click"], [1, "fa-solid", "fa-angles-up"], [1, "diff-group"], [1, "diff-group-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "diff-chevron"], [1, "diff-group-icon"], [1, "diff-group-name"], [1, "diff-group-count", "change-modified"], [1, "diff-group-content"], [1, "diff-record"], [1, "diff-record-header"], [3, "ngClass"], [1, "diff-record-id"], [1, "diff-fields"], [1, "diff-field", 3, "ngClass"], [1, "diff-field-name"], [1, "diff-field-old"], [1, "fa-solid", "fa-arrow-right", "diff-field-arrow"], [1, "diff-field-new"], [1, "fa-solid", "fa-circle-check", "tab-empty-icon", 2, "color", "#10b981"], ["text", "Loading history..."], [1, "fa-solid", "fa-clock-rotate-left", "section-icon"], [1, "history-list"], [1, "history-item"], [1, "history-item-icon", 3, "ngClass"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "history-item-content"], [1, "history-item-title"], [1, "history-item-meta"], [1, "history-item-date"], [1, "fa-solid", "fa-tags", "section-icon"], [1, "history-item-icon", 2, "background", "rgba(99, 102, 241, 0.1)", "color", "#6366f1"], [1, "fa-solid", "fa-tag"], [1, "inline-badge", "small", 3, "ngClass"], [1, "fa-solid", "fa-clock-rotate-left", "tab-empty-icon"], [3, "Close", "EntityLinkClick", "OpenRecord", "Data", "Inline"]], template: function MjLabelDetailComponent_Template(rf, ctx) { if (rf & 1) {
1978
+ } }, inputs: { Label: "Label", AllLabels: "AllLabels", ItemCountMap: "ItemCountMap" }, outputs: { Close: "Close", LabelUpdated: "LabelUpdated", EntityLinkClick: "EntityLinkClick" }, standalone: false, decls: 45, vars: 22, consts: [["depNode", ""], [1, "panel-backdrop", 3, "click"], [1, "detail-panel"], [1, "resize-handle", 3, "mousedown"], [1, "resize-handle-grip"], [1, "panel-header"], [1, "header-info"], [1, "header-title-row"], [1, "header-scope-icon"], [1, "header-title"], [1, "header-status", 3, "ngClass"], [1, "header-scope-badge"], [1, "header-description"], [1, "header-actions"], ["title", "Archive this label", 1, "header-action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-box-archive"], ["title", "View changes", 1, "header-action-btn", 3, "click"], [1, "fa-solid", "fa-code-compare"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "summary-kpis"], [1, "summary-kpi"], [1, "kpi-mini-icon", 2, "background", "color-mix(in srgb, var(--mj-brand-primary) 10%, transparent)", "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-camera"], [1, "kpi-mini-content"], [1, "kpi-mini-value"], [1, "kpi-mini-label"], [1, "fa-solid", "fa-table"], [1, "tab-bar"], [1, "breadcrumb-bar"], [1, "tab-content"], [1, "kpi-mini-icon", 2, "background", "rgba(16, 185, 129, 0.1)", "color", "#10b981"], [1, "fa-solid", "fa-stopwatch"], [1, "kpi-mini-icon", 2, "background", "rgba(245, 158, 11, 0.1)", "color", "#f59e0b"], [1, "fa-solid", "fa-layer-group"], [1, "tab", 3, "click"], [1, "fa-solid", "fa-info-circle", "tab-icon"], [1, "fa-solid", "fa-camera", "tab-icon"], [1, "tab-count"], [1, "fa-solid", "fa-diagram-project", "tab-icon"], [1, "fa-solid", "fa-code-compare", "tab-icon"], [1, "fa-solid", "fa-clock-rotate-left", "tab-icon"], [1, "breadcrumb-back", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "breadcrumb-trail"], [1, "breadcrumb-item", "clickable", 3, "click"], [1, "fa-solid", "fa-camera", "breadcrumb-icon"], [1, "fa-solid", "fa-chevron-right", "breadcrumb-separator"], [1, "breadcrumb-item", "current"], [1, "fa-solid", "fa-file-lines", "breadcrumb-icon"], ["text", "Loading label data..."], [1, "tab-pane"], [1, "detail-section"], [1, "section-title"], [1, "fa-solid", "fa-info-circle", "section-icon"], [1, "detail-grid"], [1, "detail-field"], [1, "field-label"], [1, "field-value"], [1, "inline-badge", 3, "ngClass"], [2, "margin-right", "6px"], [1, "record-card"], [1, "fa-solid", "fa-clock", "section-icon"], [2, "margin-right", "6px", "color", "var(--mj-brand-primary)"], [1, "field-value", "field-mono"], [1, "record-card-main"], [1, "record-card-icon"], [1, "record-card-info"], [1, "record-card-name"], [1, "record-card-name", "record-card-name-loading"], [1, "record-card-entity"], [1, "record-card-id"], ["title", "Open record", 1, "record-card-open-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-align-left", "section-icon"], [1, "description-text"], [1, "fa-solid", "fa-user", 2, "margin-right", "6px", "opacity", "0.5"], [1, "fa-solid", "fa-sitemap", "section-icon"], [1, "hierarchy-item", "parent"], [1, "hierarchy-children"], [1, "fa-solid", "fa-arrow-up", "hierarchy-icon"], [1, "hierarchy-label"], [1, "hierarchy-name"], [1, "hierarchy-item", "child"], [1, "fa-solid", "fa-arrow-turn-down-right", "hierarchy-icon"], [1, "hierarchy-meta"], [1, "snapshot-toolbar"], [1, "snapshot-search"], [1, "fa-solid", "fa-search", "snapshot-search-icon"], ["type", "text", "placeholder", "Search by entity or record...", 1, "snapshot-search-input", 3, "ngModelChange", "ngModel"], [1, "snapshot-sort-toggle"], ["title", "Sort by name", 1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-arrow-down-a-z"], [1, "fa-solid", "fa-arrow-up-z-a"], ["title", "Sort by record count", 1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-arrow-down-9-1"], [1, "fa-solid", "fa-arrow-up-1-9"], [1, "snapshot-view-toggle"], [1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-list"], [1, "fa-solid", "fa-grip"], [1, "snapshot-groups"], [1, "snapshot-group"], [1, "tab-empty"], [1, "group-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "group-chevron"], [1, "group-entity-icon"], [1, "group-name"], [1, "group-count-inline"], [1, "group-content"], [1, "group-names-loading"], [1, "snapshot-cards"], ["text", "Loading record names...", "size", "small"], [1, "snapshot-list-item"], [1, "snapshot-list-item", 3, "click"], [1, "fa-solid", "fa-file-lines", "snapshot-item-icon"], [1, "snapshot-item-name"], [1, "fa-solid", "fa-chevron-right", "snapshot-item-arrow"], [1, "snapshot-card"], [1, "snapshot-card", 3, "click"], [1, "snapshot-card-header"], [1, "fa-solid", "fa-file-lines"], [1, "snapshot-card-name"], [1, "fa-solid", "fa-camera", "tab-empty-icon"], ["text", "Loading dependencies..."], [1, "dep-root"], [1, "dep-root-entity"], [1, "dep-root-icon"], [1, "dep-root-name"], [1, "dep-root-badge"], [1, "dep-empty"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "fa-solid", "fa-diagram-project", "tab-empty-icon"], [1, "dep-node"], [1, "dep-node-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "dep-chevron", 3, "expanded"], [1, "dep-node-spacer"], [1, "dep-node-icon"], [1, "dep-node-name"], [1, "dep-node-field"], [1, "dep-node-count"], [1, "fa-solid", "fa-chevron-right", "dep-chevron"], ["text", "Computing differences..."], [1, "diff-summary"], [1, "diff-stat"], [1, "diff-stat-value", "change-modified"], [1, "diff-stat-label"], [1, "diff-stat-value"], [1, "diff-toolbar"], [1, "diff-groups"], ["title", "Expand all", 1, "toolbar-action-btn", 3, "click"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all", 1, "toolbar-action-btn", 3, "click"], [1, "fa-solid", "fa-angles-up"], [1, "diff-group"], [1, "diff-group-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "diff-chevron"], [1, "diff-group-icon"], [1, "diff-group-name"], [1, "diff-group-count", "change-modified"], [1, "diff-group-content"], [1, "diff-record"], [1, "diff-record-header"], [3, "ngClass"], [1, "diff-record-id"], [1, "diff-fields"], [1, "diff-field", 3, "ngClass"], [1, "diff-field-name"], [1, "diff-field-old"], [1, "fa-solid", "fa-arrow-right", "diff-field-arrow"], [1, "diff-field-new"], [1, "fa-solid", "fa-circle-check", "tab-empty-icon", 2, "color", "#10b981"], ["text", "Loading history..."], [1, "fa-solid", "fa-clock-rotate-left", "section-icon"], [1, "history-list"], [1, "history-item"], [1, "history-item-icon", 3, "ngClass"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "history-item-content"], [1, "history-item-title"], [1, "history-item-meta"], [1, "history-item-date"], [1, "fa-solid", "fa-tags", "section-icon"], [1, "history-item-icon", 2, "background", "color-mix(in srgb, var(--mj-brand-primary) 10%, transparent)", "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-tag"], [1, "inline-badge", "small", 3, "ngClass"], [1, "fa-solid", "fa-clock-rotate-left", "tab-empty-icon"], [3, "Close", "EntityLinkClick", "OpenRecord", "Data", "Inline"]], template: function MjLabelDetailComponent_Template(rf, ctx) { if (rf & 1) {
1979
1979
  i0.ɵɵelementStart(0, "div", 1);
1980
1980
  i0.ɵɵlistener("click", function MjLabelDetailComponent_Template_div_click_0_listener() { return ctx.OnBackdropClick(); });
1981
1981
  i0.ɵɵelementEnd();
@@ -2017,8 +2017,8 @@ export class MjLabelDetailComponent {
2017
2017
  i0.ɵɵelementStart(29, "span", 26);
2018
2018
  i0.ɵɵtext(30, "Items");
2019
2019
  i0.ɵɵelementEnd()()();
2020
- i0.ɵɵelementStart(31, "div", 21)(32, "div", 27);
2021
- i0.ɵɵelement(33, "i", 28);
2020
+ i0.ɵɵelementStart(31, "div", 21)(32, "div", 22);
2021
+ i0.ɵɵelement(33, "i", 27);
2022
2022
  i0.ɵɵelementEnd();
2023
2023
  i0.ɵɵelementStart(34, "div", 24)(35, "span", 25);
2024
2024
  i0.ɵɵtext(36);
@@ -2029,10 +2029,10 @@ export class MjLabelDetailComponent {
2029
2029
  i0.ɵɵconditionalCreate(39, MjLabelDetailComponent_Conditional_39_Template, 8, 1, "div", 21);
2030
2030
  i0.ɵɵconditionalCreate(40, MjLabelDetailComponent_Conditional_40_Template, 8, 1, "div", 21);
2031
2031
  i0.ɵɵelementEnd();
2032
- i0.ɵɵconditionalCreate(41, MjLabelDetailComponent_Conditional_41_Template, 17, 11, "div", 29);
2033
- i0.ɵɵconditionalCreate(42, MjLabelDetailComponent_Conditional_42_Template, 11, 1, "div", 30);
2034
- i0.ɵɵconditionalCreate(43, MjLabelDetailComponent_Conditional_43_Template, 9, 6, "div", 31);
2035
- i0.ɵɵconditionalCreate(44, MjLabelDetailComponent_Conditional_44_Template, 2, 2, "div", 31);
2032
+ i0.ɵɵconditionalCreate(41, MjLabelDetailComponent_Conditional_41_Template, 17, 11, "div", 28);
2033
+ i0.ɵɵconditionalCreate(42, MjLabelDetailComponent_Conditional_42_Template, 11, 1, "div", 29);
2034
+ i0.ɵɵconditionalCreate(43, MjLabelDetailComponent_Conditional_43_Template, 9, 6, "div", 30);
2035
+ i0.ɵɵconditionalCreate(44, MjLabelDetailComponent_Conditional_44_Template, 2, 2, "div", 30);
2036
2036
  i0.ɵɵelementEnd();
2037
2037
  } if (rf & 2) {
2038
2038
  i0.ɵɵclassProp("visible", ctx.IsVisible);
@@ -2069,11 +2069,11 @@ export class MjLabelDetailComponent {
2069
2069
  i0.ɵɵconditional(!ctx.ShowMicroView ? 43 : -1);
2070
2070
  i0.ɵɵadvance();
2071
2071
  i0.ɵɵconditional(ctx.ShowMicroView && ctx.MicroViewRecord ? 44 : -1);
2072
- } }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent, i4.MjRecordMicroViewComponent, i1.SlicePipe], styles: ["\n\n\n\n\n\n\n.panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0);\n z-index: 1000;\n transition: background 0.3s ease;\n pointer-events: none;\n}\n\n.panel-backdrop.visible[_ngcontent-%COMP%] {\n background: rgba(0, 0, 0, 0.3);\n pointer-events: auto;\n}\n\n\n\n\n\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n height: 100vh;\n background: var(--card-background, #ffffff);\n box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n \n\n min-width: 400px;\n max-width: 92vw;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n\n\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n position: absolute;\n left: -4px;\n top: 0;\n width: 8px;\n height: 100%;\n cursor: col-resize;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle[_ngcontent-%COMP%]:active .resize-handle-grip[_ngcontent-%COMP%] {\n opacity: 1;\n background: #6366f1;\n}\n\n.resize-handle-grip[_ngcontent-%COMP%] {\n width: 3px;\n height: 40px;\n background: var(--border-color, #d1d5db);\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n background: rgba(99, 102, 241, 0.04);\n}\n\n\n\n\n\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 24px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n background: var(--hover-background, #f9fafb);\n}\n\n.breadcrumb-back[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 13px;\n flex-shrink: 0;\n}\n\n.breadcrumb-back[_ngcontent-%COMP%]:hover {\n background: var(--card-background, #ffffff);\n color: #6366f1;\n border-color: #6366f1;\n}\n\n.breadcrumb-trail[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n overflow: hidden;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--text-secondary, #6b7280);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%]:hover {\n color: #6366f1;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n font-size: 9px;\n color: var(--text-tertiary, #d1d5db);\n flex-shrink: 0;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n font-size: 12px;\n flex-shrink: 0;\n}\n\n\n\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n}\n\n.header-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.header-title-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.header-scope-icon[_ngcontent-%COMP%] {\n color: #6366f1;\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 700;\n color: var(--text-primary, #1f2937);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.header-status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.header-scope-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n background: rgba(99, 102, 241, 0.08);\n color: #6366f1;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.header-description[_ngcontent-%COMP%] {\n margin: 8px 0 0 0;\n font-size: 14px;\n color: var(--text-secondary, #6b7280);\n line-height: 1.5;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-shrink: 0;\n margin-left: 16px;\n}\n\n.header-action-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 14px;\n}\n\n.header-action-btn[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f3f4f6);\n color: var(--text-primary, #1f2937);\n border-color: var(--border-hover, #d1d5db);\n}\n\n.header-action-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n background: none;\n border: none;\n border-radius: 8px;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 16px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f3f4f6);\n color: var(--text-primary, #1f2937);\n}\n\n\n\n.status-active[_ngcontent-%COMP%] { background: rgba(16, 185, 129, 0.1); color: #059669; }\n.status-archived[_ngcontent-%COMP%] { background: rgba(107, 114, 128, 0.1); color: #6b7280; }\n.status-restored[_ngcontent-%COMP%] { background: rgba(245, 158, 11, 0.1); color: #d97706; }\n\n\n\n\n\n\n\n\n.summary-kpis[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n overflow-x: auto;\n}\n\n.summary-kpi[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n background: var(--hover-background, #f9fafb);\n border-radius: 10px;\n flex-shrink: 0;\n}\n\n.kpi-mini-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 8px;\n font-size: 15px;\n flex-shrink: 0;\n}\n\n.kpi-mini-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.kpi-mini-value[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 700;\n color: var(--text-primary, #1f2937);\n line-height: 1;\n}\n\n.kpi-mini-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n margin-top: 2px;\n}\n\n\n\n\n\n\n\n\n.tab-bar[_ngcontent-%COMP%] {\n display: flex;\n gap: 0;\n padding: 0 24px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n overflow-x: auto;\n}\n\n.tab[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 12px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n font-size: 13px;\n font-weight: 500;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n color: var(--text-primary, #1f2937);\n background: var(--hover-background, #f9fafb);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n color: #6366f1;\n border-bottom-color: #6366f1;\n font-weight: 600;\n}\n\n.tab-icon[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.tab-count[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n background: rgba(99, 102, 241, 0.1);\n color: #6366f1;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n}\n\n\n\n\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.tab-pane[_ngcontent-%COMP%] {\n padding: 20px 24px;\n animation: _ngcontent-%COMP%_tabFadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_tabFadeIn {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.tab-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n\n.tab-empty-icon[_ngcontent-%COMP%] {\n font-size: 40px;\n color: var(--text-tertiary, #d1d5db);\n margin-bottom: 12px;\n}\n\n.tab-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-tertiary, #9ca3af);\n margin: 0;\n}\n\n\n\n\n\n\n\n\n.detail-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n margin: 0 0 14px 0;\n padding-bottom: 10px;\n border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.section-icon[_ngcontent-%COMP%] {\n color: var(--text-tertiary, #9ca3af);\n font-size: 14px;\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n}\n\n.detail-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.field-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: var(--text-tertiary, #9ca3af);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n.field-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-primary, #1f2937);\n display: flex;\n align-items: center;\n}\n\n.field-mono[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 13px;\n word-break: break-all;\n}\n\n.field-record-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #6366f1;\n}\n\n\n\n.record-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 16px 18px;\n background: rgba(99, 102, 241, 0.04);\n border: 1px solid rgba(99, 102, 241, 0.15);\n border-radius: 12px;\n margin-bottom: 24px;\n}\n\n.record-card-main[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n min-width: 0;\n flex: 1;\n}\n\n.record-card-icon[_ngcontent-%COMP%] {\n font-size: 22px;\n color: #6366f1;\n flex-shrink: 0;\n}\n\n.record-card-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.record-card-name[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 700;\n color: var(--text-primary, #1f2937);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.record-card-name-loading[_ngcontent-%COMP%] {\n color: var(--text-tertiary, #9ca3af);\n font-weight: 500;\n font-style: italic;\n}\n\n.record-card-entity[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--text-secondary, #6b7280);\n}\n\n.record-card-id[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n font-family: 'SF Mono', 'Fira Code', monospace;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.record-card-open-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: #6366f1;\n color: #ffffff;\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n white-space: nowrap;\n}\n\n.record-card-open-btn[_ngcontent-%COMP%]:hover {\n background: #4f46e5;\n box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n.inline-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.inline-badge.small[_ngcontent-%COMP%] {\n padding: 2px 8px;\n font-size: 11px;\n}\n\n.description-text[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-secondary, #6b7280);\n line-height: 1.6;\n margin: 0;\n}\n\n\n\n.hierarchy-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 12px;\n border-radius: 8px;\n font-size: 14px;\n transition: background 0.15s ease;\n}\n\n.hierarchy-item[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f3f4f6);\n}\n\n.hierarchy-icon[_ngcontent-%COMP%] {\n color: var(--text-tertiary, #9ca3af);\n font-size: 13px;\n width: 16px;\n text-align: center;\n}\n\n.hierarchy-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: var(--text-tertiary, #9ca3af);\n text-transform: uppercase;\n}\n\n.hierarchy-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n}\n\n.hierarchy-meta[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n font-family: monospace;\n}\n\n.hierarchy-children[_ngcontent-%COMP%] {\n margin-left: 16px;\n border-left: 2px solid var(--border-color, #e5e7eb);\n padding-left: 8px;\n}\n\n\n\n\n\n\n\n\n.snapshot-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.snapshot-search[_ngcontent-%COMP%] {\n position: relative;\n flex: 1;\n}\n\n.snapshot-search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-tertiary, #9ca3af);\n font-size: 13px;\n}\n\n.snapshot-search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px 12px 8px 36px;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n font-size: 13px;\n color: var(--text-primary, #1f2937);\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.15s ease;\n}\n\n.snapshot-search-input[_ngcontent-%COMP%]:focus {\n border-color: #6366f1;\n}\n\n.snapshot-sort-toggle[_ngcontent-%COMP%], \n.snapshot-view-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n background: transparent;\n border: none;\n cursor: pointer;\n color: var(--text-tertiary, #9ca3af);\n transition: all 0.15s ease;\n font-size: 12px;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%]:hover {\n color: var(--text-primary, #1f2937);\n}\n\n.toggle-btn-sm.active[_ngcontent-%COMP%] {\n color: #6366f1;\n background: rgba(99, 102, 241, 0.08);\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%] + .toggle-btn-sm[_ngcontent-%COMP%] {\n border-left: 1px solid var(--border-color, #e5e7eb);\n}\n\n\n\n.snapshot-groups[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.snapshot-group[_ngcontent-%COMP%] {\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.group-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.group-header[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f9fafb);\n}\n\n.group-chevron[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n transition: transform 0.2s ease;\n width: 14px;\n text-align: center;\n}\n\n.group-chevron.expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.group-entity-icon[_ngcontent-%COMP%] {\n color: #3b82f6;\n font-size: 14px;\n}\n\n.group-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n flex: 1;\n}\n\n.group-count-inline[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n margin-left: 6px;\n background: rgba(59, 130, 246, 0.1);\n color: #3b82f6;\n border-radius: 10px;\n font-size: 12px;\n font-weight: 600;\n vertical-align: middle;\n}\n\n.group-content[_ngcontent-%COMP%] {\n border-top: 1px solid var(--border-color, #f3f4f6);\n animation: _ngcontent-%COMP%_tabFadeIn 0.15s ease;\n}\n\n.group-names-loading[_ngcontent-%COMP%] {\n display: flex;\n justify-content: center;\n padding: 8px 14px;\n}\n\n\n\n.snapshot-list-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px 10px 40px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:hover {\n background: rgba(99, 102, 241, 0.04);\n}\n\n.snapshot-item-icon[_ngcontent-%COMP%] {\n color: var(--text-tertiary, #9ca3af);\n font-size: 13px;\n}\n\n.snapshot-item-name[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.snapshot-item-id[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n font-family: monospace;\n}\n\n.snapshot-item-arrow[_ngcontent-%COMP%] {\n color: var(--text-tertiary, #d1d5db);\n font-size: 11px;\n transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:hover .snapshot-item-arrow[_ngcontent-%COMP%] {\n color: #6366f1;\n transform: translateX(2px);\n}\n\n\n\n.snapshot-cards[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 10px;\n padding: 12px 14px;\n}\n\n.snapshot-card[_ngcontent-%COMP%] {\n padding: 12px;\n background: var(--hover-background, #f9fafb);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.snapshot-card[_ngcontent-%COMP%]:hover {\n border-color: #6366f1;\n box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);\n}\n\n.snapshot-card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n font-size: 13px;\n color: var(--text-primary, #1f2937);\n}\n\n.snapshot-card-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--text-tertiary, #9ca3af);\n font-size: 12px;\n}\n\n.snapshot-card-name[_ngcontent-%COMP%] {\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.snapshot-card-meta[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n font-family: monospace;\n}\n\n\n\n\n\n\n\n\n.dep-root[_ngcontent-%COMP%] {\n padding: 4px 0;\n}\n\n.dep-root-entity[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n background: rgba(99, 102, 241, 0.06);\n border: 1px solid rgba(99, 102, 241, 0.15);\n border-radius: 10px;\n margin-bottom: 12px;\n}\n\n.dep-root-icon[_ngcontent-%COMP%] {\n color: #6366f1;\n font-size: 16px;\n}\n\n.dep-root-name[_ngcontent-%COMP%] {\n font-size: 15px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n flex: 1;\n}\n\n.dep-root-badge[_ngcontent-%COMP%] {\n padding: 2px 10px;\n background: #6366f1;\n color: #ffffff;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n}\n\n.dep-node[_ngcontent-%COMP%] {\n margin-left: 8px;\n border-left: 2px solid var(--border-color, #e5e7eb);\n}\n\n.dep-node-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-radius: 6px;\n}\n\n.dep-node-header[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f3f4f6);\n}\n\n.dep-chevron[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--text-tertiary, #9ca3af);\n transition: transform 0.2s ease;\n width: 12px;\n text-align: center;\n}\n\n.dep-chevron.expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.dep-node-spacer[_ngcontent-%COMP%] {\n width: 12px;\n}\n\n.dep-node-icon[_ngcontent-%COMP%] {\n color: #3b82f6;\n font-size: 13px;\n}\n\n.dep-node-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n}\n\n.dep-node-field[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n font-style: italic;\n}\n\n.dep-node-count[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n padding: 1px 8px;\n background: var(--hover-background, #f3f4f6);\n border-radius: 8px;\n}\n\n.dep-empty[_ngcontent-%COMP%] {\n padding: 20px;\n text-align: center;\n}\n\n.dep-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-tertiary, #9ca3af);\n margin: 0;\n}\n\n\n\n\n\n\n\n\n.diff-summary[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.diff-stat[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 12px 20px;\n background: var(--hover-background, #f9fafb);\n border-radius: 10px;\n min-width: 80px;\n}\n\n.diff-stat-value[_ngcontent-%COMP%] {\n font-size: 24px;\n font-weight: 700;\n color: var(--text-primary, #1f2937);\n line-height: 1;\n}\n\n.diff-stat-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n margin-top: 4px;\n}\n\n\n\n.diff-toolbar[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 6px;\n background: var(--card-background, #ffffff);\n color: var(--text-secondary, #6b7280);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%]:hover {\n border-color: #6366f1;\n color: #6366f1;\n background: rgba(99, 102, 241, 0.06);\n}\n\n.diff-groups[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.diff-group[_ngcontent-%COMP%] {\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.diff-group-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.diff-group-header[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f9fafb);\n}\n\n.diff-chevron[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n transition: transform 0.2s ease;\n width: 14px;\n text-align: center;\n}\n\n.diff-chevron.expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.diff-group-icon[_ngcontent-%COMP%] {\n color: #3b82f6;\n font-size: 14px;\n}\n\n.diff-group-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n flex: 1;\n}\n\n.diff-group-count[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n padding: 2px 10px;\n border-radius: 10px;\n}\n\n.diff-group-content[_ngcontent-%COMP%] {\n border-top: 1px solid var(--border-color, #f3f4f6);\n animation: _ngcontent-%COMP%_tabFadeIn 0.15s ease;\n}\n\n.diff-record[_ngcontent-%COMP%] {\n padding: 10px 14px 10px 40px;\n border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.diff-record[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.diff-record-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.diff-record-id[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n font-family: monospace;\n}\n\n.diff-fields[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-left: 22px;\n}\n\n.diff-field[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n}\n\n.diff-field-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n min-width: 100px;\n}\n\n.diff-field-old[_ngcontent-%COMP%] {\n color: #ef4444;\n text-decoration: line-through;\n opacity: 0.7;\n font-family: monospace;\n font-size: 12px;\n}\n\n.diff-field-arrow[_ngcontent-%COMP%] {\n color: var(--text-tertiary, #9ca3af);\n font-size: 10px;\n}\n\n.diff-field-new[_ngcontent-%COMP%] {\n color: #10b981;\n font-family: monospace;\n font-size: 12px;\n}\n\n\n\n.change-added[_ngcontent-%COMP%] { color: #10b981; }\n.change-modified[_ngcontent-%COMP%] { color: #f59e0b; }\n.change-removed[_ngcontent-%COMP%] { color: #ef4444; }\n\n.diff-field.change-added[_ngcontent-%COMP%] { background: rgba(16, 185, 129, 0.06); }\n.diff-field.change-modified[_ngcontent-%COMP%] { background: rgba(245, 158, 11, 0.06); }\n.diff-field.change-removed[_ngcontent-%COMP%] { background: rgba(239, 68, 68, 0.06); }\n\n\n\n\n\n\n\n\n.history-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.history-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n border-radius: 8px;\n transition: background 0.15s ease;\n}\n\n.history-item[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f3f4f6);\n}\n\n.history-item-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 8px;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.history-item-icon.status-complete[_ngcontent-%COMP%] { background: rgba(16, 185, 129, 0.1); color: #10b981; }\n.history-item-icon.status-error[_ngcontent-%COMP%] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }\n.history-item-icon.status-partial[_ngcontent-%COMP%] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }\n.history-item-icon.status-in-progress[_ngcontent-%COMP%] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }\n.history-item-icon.status-pending[_ngcontent-%COMP%] { background: rgba(107, 114, 128, 0.1); color: #6b7280; }\n\n.history-item-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.history-item-title[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n}\n\n.history-item-meta[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.history-item-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n flex-shrink: 0;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 1024px) {\n .detail-panel[_ngcontent-%COMP%] {\n min-width: 360px;\n }\n\n .summary-kpis[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n}\n\n@media (max-width: 768px) {\n .detail-panel[_ngcontent-%COMP%] {\n width: 100% !important;\n min-width: unset;\n }\n\n .resize-handle[_ngcontent-%COMP%] {\n display: none;\n }\n\n .detail-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .summary-kpis[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 16px;\n }\n\n .summary-kpi[_ngcontent-%COMP%] {\n padding: 8px 10px;\n }\n\n .panel-header[_ngcontent-%COMP%] {\n padding: 16px 16px 12px;\n }\n\n .tab-bar[_ngcontent-%COMP%] {\n padding: 0 16px;\n }\n\n .tab-pane[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .breadcrumb-bar[_ngcontent-%COMP%] {\n padding: 8px 16px;\n }\n\n .snapshot-toolbar[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n\n .diff-summary[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .diff-stat[_ngcontent-%COMP%] {\n padding: 10px 14px;\n min-width: 60px;\n }\n}\n\n@media (max-width: 480px) {\n .header-title[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .header-title-row[_ngcontent-%COMP%] {\n gap: 6px;\n }\n\n .header-actions[_ngcontent-%COMP%] {\n margin-left: 8px;\n }\n\n .tab[_ngcontent-%COMP%] {\n padding: 10px 10px;\n font-size: 12px;\n }\n\n .snapshot-cards[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}"], changeDetection: 0 });
2072
+ } }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent, i4.MjRecordMicroViewComponent, i1.SlicePipe], styles: ["\n\n\n\n\n\n\n.panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: transparent;\n z-index: 1000;\n transition: background 0.3s ease;\n pointer-events: none;\n}\n\n.panel-backdrop.visible[_ngcontent-%COMP%] {\n background: var(--mj-bg-overlay);\n pointer-events: auto;\n}\n\n\n\n\n\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n height: 100vh;\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-lg);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n \n\n min-width: 400px;\n max-width: 92vw;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n\n\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n position: absolute;\n left: -4px;\n top: 0;\n width: 8px;\n height: 100%;\n cursor: col-resize;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle[_ngcontent-%COMP%]:active .resize-handle-grip[_ngcontent-%COMP%] {\n opacity: 1;\n background: var(--mj-brand-primary);\n}\n\n.resize-handle-grip[_ngcontent-%COMP%] {\n width: 3px;\n height: 40px;\n background: var(--mj-border-strong);\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n\n\n\n\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-back[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 13px;\n flex-shrink: 0;\n}\n\n.breadcrumb-back[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.breadcrumb-trail[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n overflow: hidden;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary);\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n font-size: 9px;\n color: var(--mj-border-strong);\n flex-shrink: 0;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n font-size: 12px;\n flex-shrink: 0;\n}\n\n\n\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.header-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.header-title-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.header-scope-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.header-status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.header-scope-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n color: var(--mj-brand-primary);\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.header-description[_ngcontent-%COMP%] {\n margin: 8px 0 0 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-shrink: 0;\n margin-left: 16px;\n}\n\n.header-action-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 14px;\n}\n\n.header-action-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n border-color: var(--mj-border-strong);\n}\n\n.header-action-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n background: none;\n border: none;\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 16px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n\n\n.status-active[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.status-archived[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n.status-restored[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n\n\n\n\n\n\n\n\n.summary-kpis[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n overflow-x: auto;\n}\n\n.summary-kpi[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 10px;\n flex-shrink: 0;\n}\n\n.kpi-mini-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 8px;\n font-size: 15px;\n flex-shrink: 0;\n}\n\n.kpi-mini-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.kpi-mini-value[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n}\n\n.kpi-mini-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n margin-top: 2px;\n}\n\n\n\n\n\n\n\n\n.tab-bar[_ngcontent-%COMP%] {\n display: flex;\n gap: 0;\n padding: 0 24px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n overflow-x: auto;\n}\n\n.tab[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 12px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n border-bottom-color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n.tab-icon[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.tab-count[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--mj-brand-primary);\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n}\n\n\n\n\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.tab-pane[_ngcontent-%COMP%] {\n padding: 20px 24px;\n animation: _ngcontent-%COMP%_tabFadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_tabFadeIn {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.tab-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n\n.tab-empty-icon[_ngcontent-%COMP%] {\n font-size: 40px;\n color: var(--mj-border-strong);\n margin-bottom: 12px;\n}\n\n.tab-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin: 0;\n}\n\n\n\n\n\n\n\n\n.detail-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 14px 0;\n padding-bottom: 10px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n}\n\n.detail-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.field-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n.field-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n}\n\n.field-mono[_ngcontent-%COMP%] {\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 13px;\n word-break: break-all;\n}\n\n.field-record-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n\n\n.record-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 16px 18px;\n background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n border-radius: 12px;\n margin-bottom: 24px;\n}\n\n.record-card-main[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n min-width: 0;\n flex: 1;\n}\n\n.record-card-icon[_ngcontent-%COMP%] {\n font-size: 22px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.record-card-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.record-card-name[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 700;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.record-card-name-loading[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-weight: 500;\n font-style: italic;\n}\n\n.record-card-entity[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.record-card-id[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-family: 'SF Mono', 'Fira Code', monospace;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.record-card-open-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n white-space: nowrap;\n}\n\n.record-card-open-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n box-shadow: var(--mj-shadow-md);\n}\n\n.inline-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.inline-badge.small[_ngcontent-%COMP%] {\n padding: 2px 8px;\n font-size: 11px;\n}\n\n.description-text[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n line-height: 1.6;\n margin: 0;\n}\n\n\n\n.hierarchy-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 12px;\n border-radius: 8px;\n font-size: 14px;\n transition: background 0.15s ease;\n}\n\n.hierarchy-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.hierarchy-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 13px;\n width: 16px;\n text-align: center;\n}\n\n.hierarchy-label[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n}\n\n.hierarchy-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.hierarchy-meta[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-family: monospace;\n}\n\n.hierarchy-children[_ngcontent-%COMP%] {\n margin-left: 16px;\n border-left: 2px solid var(--mj-border-default);\n padding-left: 8px;\n}\n\n\n\n\n\n\n\n\n.snapshot-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.snapshot-search[_ngcontent-%COMP%] {\n position: relative;\n flex: 1;\n}\n\n.snapshot-search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n.snapshot-search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px 12px 8px 36px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 13px;\n color: var(--mj-text-primary);\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.15s ease;\n}\n\n.snapshot-search-input[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.snapshot-sort-toggle[_ngcontent-%COMP%], \n.snapshot-view-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n background: transparent;\n border: none;\n cursor: pointer;\n color: var(--mj-text-disabled);\n transition: all 0.15s ease;\n font-size: 12px;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.toggle-btn-sm.active[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%] + .toggle-btn-sm[_ngcontent-%COMP%] {\n border-left: 1px solid var(--mj-border-default);\n}\n\n\n\n.snapshot-groups[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.snapshot-group[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.group-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.group-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.group-chevron[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n transition: transform 0.2s ease;\n width: 14px;\n text-align: center;\n}\n\n.group-chevron.expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.group-entity-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.group-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.group-count-inline[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n margin-left: 6px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--mj-brand-primary);\n border-radius: 10px;\n font-size: 12px;\n font-weight: 600;\n vertical-align: middle;\n}\n\n.group-content[_ngcontent-%COMP%] {\n border-top: 1px solid var(--mj-border-default);\n animation: _ngcontent-%COMP%_tabFadeIn 0.15s ease;\n}\n\n.group-names-loading[_ngcontent-%COMP%] {\n display: flex;\n justify-content: center;\n padding: 8px 14px;\n}\n\n\n\n.snapshot-list-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px 10px 40px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n.snapshot-item-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n.snapshot-item-name[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.snapshot-item-id[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-family: monospace;\n}\n\n.snapshot-item-arrow[_ngcontent-%COMP%] {\n color: var(--mj-border-strong);\n font-size: 11px;\n transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:hover .snapshot-item-arrow[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n transform: translateX(2px);\n}\n\n\n\n.snapshot-cards[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 10px;\n padding: 12px 14px;\n}\n\n.snapshot-card[_ngcontent-%COMP%] {\n padding: 12px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.snapshot-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.snapshot-card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.snapshot-card-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.snapshot-card-name[_ngcontent-%COMP%] {\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.snapshot-card-meta[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n font-family: monospace;\n}\n\n\n\n\n\n\n\n\n.dep-root[_ngcontent-%COMP%] {\n padding: 4px 0;\n}\n\n.dep-root-entity[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n border-radius: 10px;\n margin-bottom: 12px;\n}\n\n.dep-root-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 16px;\n}\n\n.dep-root-name[_ngcontent-%COMP%] {\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.dep-root-badge[_ngcontent-%COMP%] {\n padding: 2px 10px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n}\n\n.dep-node[_ngcontent-%COMP%] {\n margin-left: 8px;\n border-left: 2px solid var(--mj-border-default);\n}\n\n.dep-node-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-radius: 6px;\n}\n\n.dep-node-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.dep-chevron[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n transition: transform 0.2s ease;\n width: 12px;\n text-align: center;\n}\n\n.dep-chevron.expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.dep-node-spacer[_ngcontent-%COMP%] {\n width: 12px;\n}\n\n.dep-node-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 13px;\n}\n\n.dep-node-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.dep-node-field[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n.dep-node-count[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n padding: 1px 8px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 8px;\n}\n\n.dep-empty[_ngcontent-%COMP%] {\n padding: 20px;\n text-align: center;\n}\n\n.dep-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin: 0;\n}\n\n\n\n\n\n\n\n\n.diff-summary[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.diff-stat[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 12px 20px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 10px;\n min-width: 80px;\n}\n\n.diff-stat-value[_ngcontent-%COMP%] {\n font-size: 24px;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n}\n\n.diff-stat-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n margin-top: 4px;\n}\n\n\n\n.diff-toolbar[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.diff-groups[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.diff-group[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.diff-group-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.diff-group-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.diff-chevron[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n transition: transform 0.2s ease;\n width: 14px;\n text-align: center;\n}\n\n.diff-chevron.expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.diff-group-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.diff-group-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.diff-group-count[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 600;\n padding: 2px 10px;\n border-radius: 10px;\n}\n\n.diff-group-content[_ngcontent-%COMP%] {\n border-top: 1px solid var(--mj-border-default);\n animation: _ngcontent-%COMP%_tabFadeIn 0.15s ease;\n}\n\n.diff-record[_ngcontent-%COMP%] {\n padding: 10px 14px 10px 40px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.diff-record[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.diff-record-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.diff-record-id[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n font-family: monospace;\n}\n\n.diff-fields[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-left: 22px;\n}\n\n.diff-field[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n}\n\n.diff-field-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n min-width: 100px;\n}\n\n.diff-field-old[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n text-decoration: line-through;\n opacity: 0.7;\n font-family: monospace;\n font-size: 12px;\n}\n\n.diff-field-arrow[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 10px;\n}\n\n.diff-field-new[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n font-family: monospace;\n font-size: 12px;\n}\n\n\n\n.change-added[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.change-modified[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n.change-removed[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n.diff-field.change-added[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 6%, transparent); }\n.diff-field.change-modified[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent); }\n.diff-field.change-removed[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 6%, transparent); }\n\n\n\n\n\n\n\n\n.history-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.history-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n border-radius: 8px;\n transition: background 0.15s ease;\n}\n\n.history-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.history-item-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 8px;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.history-item-icon.status-complete[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.history-item-icon.status-error[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 10%, transparent); color: var(--mj-status-error); }\n.history-item-icon.status-partial[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n.history-item-icon.status-in-progress[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary); }\n.history-item-icon.status-pending[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n\n.history-item-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.history-item-title[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.history-item-meta[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.history-item-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 1024px) {\n .detail-panel[_ngcontent-%COMP%] {\n min-width: 360px;\n }\n\n .summary-kpis[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n}\n\n@media (max-width: 768px) {\n .detail-panel[_ngcontent-%COMP%] {\n width: 100% !important;\n min-width: unset;\n }\n\n .resize-handle[_ngcontent-%COMP%] {\n display: none;\n }\n\n .detail-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .summary-kpis[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 16px;\n }\n\n .summary-kpi[_ngcontent-%COMP%] {\n padding: 8px 10px;\n }\n\n .panel-header[_ngcontent-%COMP%] {\n padding: 16px 16px 12px;\n }\n\n .tab-bar[_ngcontent-%COMP%] {\n padding: 0 16px;\n }\n\n .tab-pane[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .breadcrumb-bar[_ngcontent-%COMP%] {\n padding: 8px 16px;\n }\n\n .snapshot-toolbar[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n\n .diff-summary[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .diff-stat[_ngcontent-%COMP%] {\n padding: 10px 14px;\n min-width: 60px;\n }\n}\n\n@media (max-width: 480px) {\n .header-title[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .header-title-row[_ngcontent-%COMP%] {\n gap: 6px;\n }\n\n .header-actions[_ngcontent-%COMP%] {\n margin-left: 8px;\n }\n\n .tab[_ngcontent-%COMP%] {\n padding: 10px 10px;\n font-size: 12px;\n }\n\n .snapshot-cards[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}"], changeDetection: 0 });
2073
2073
  }
2074
2074
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjLabelDetailComponent, [{
2075
2075
  type: Component,
2076
- args: [{ standalone: false, selector: 'mj-label-detail-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop overlay -->\n<div class=\"panel-backdrop\" [class.visible]=\"IsVisible\" (click)=\"OnBackdropClick()\"></div>\n\n<!-- Slide-in panel -->\n<div class=\"detail-panel\" [class.visible]=\"IsVisible\" [style.width.px]=\"PanelWidthPx\">\n <!-- Resize handle -->\n <div class=\"resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n <div class=\"resize-handle-grip\"></div>\n </div>\n\n <!-- ============================================================ -->\n <!-- HEADER -->\n <!-- ============================================================ -->\n <div class=\"panel-header\">\n <div class=\"header-info\">\n <div class=\"header-title-row\">\n <i [class]=\"GetScopeIcon(Label.Scope)\" class=\"header-scope-icon\"></i>\n <h2 class=\"header-title\">{{Label.Name}}</h2>\n <span class=\"header-status\" [ngClass]=\"GetStatusClass(Label.Status)\">\n {{Label.Status}}\n </span>\n <span class=\"header-scope-badge\">{{Label.Scope}}</span>\n </div>\n @if (Label.Description) {\n <p class=\"header-description\">{{Label.Description}}</p>\n }\n </div>\n <div class=\"header-actions\">\n <button class=\"header-action-btn\" (click)=\"OnArchive()\"\n [disabled]=\"IsArchiving || Label.Status === 'Archived'\"\n title=\"Archive this label\">\n <i class=\"fa-solid fa-box-archive\"></i>\n </button>\n <button class=\"header-action-btn\" (click)=\"OnTabChange('changes')\" title=\"View changes\">\n <i class=\"fa-solid fa-code-compare\"></i>\n </button>\n <button class=\"close-btn\" (click)=\"OnClose()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n\n <!-- ============================================================ -->\n <!-- SUMMARY KPIs -->\n <!-- ============================================================ -->\n <div class=\"summary-kpis\">\n <div class=\"summary-kpi\">\n <div class=\"kpi-mini-icon\" style=\"background: rgba(99, 102, 241, 0.1); color: #6366f1;\">\n <i class=\"fa-solid fa-camera\"></i>\n </div>\n <div class=\"kpi-mini-content\">\n <span class=\"kpi-mini-value\">{{LabelItems.length || Label.ItemCount || GetItemCount(Label.ID)}}</span>\n <span class=\"kpi-mini-label\">Items</span>\n </div>\n </div>\n <div class=\"summary-kpi\">\n <div class=\"kpi-mini-icon\" style=\"background: rgba(59, 130, 246, 0.1); color: #3b82f6;\">\n <i class=\"fa-solid fa-table\"></i>\n </div>\n <div class=\"kpi-mini-content\">\n <span class=\"kpi-mini-value\">{{UniqueEntityCount}}</span>\n <span class=\"kpi-mini-label\">Entities</span>\n </div>\n </div>\n @if (Label.CreationDurationMS) {\n <div class=\"summary-kpi\">\n <div class=\"kpi-mini-icon\" style=\"background: rgba(16, 185, 129, 0.1); color: #10b981;\">\n <i class=\"fa-solid fa-stopwatch\"></i>\n </div>\n <div class=\"kpi-mini-content\">\n <span class=\"kpi-mini-value\">{{FormatDuration(Label.CreationDurationMS)}}</span>\n <span class=\"kpi-mini-label\">Duration</span>\n </div>\n </div>\n }\n @if (ChildLabels.length > 0) {\n <div class=\"summary-kpi\">\n <div class=\"kpi-mini-icon\" style=\"background: rgba(245, 158, 11, 0.1); color: #f59e0b;\">\n <i class=\"fa-solid fa-layer-group\"></i>\n </div>\n <div class=\"kpi-mini-content\">\n <span class=\"kpi-mini-value\">{{ChildLabels.length}}</span>\n <span class=\"kpi-mini-label\">Children</span>\n </div>\n </div>\n }\n </div>\n\n <!-- ============================================================ -->\n <!-- TAB BAR (hidden when micro-view is active) -->\n <!-- ============================================================ -->\n @if (!ShowMicroView) {\n <div class=\"tab-bar\">\n <button class=\"tab\" [class.active]=\"ActiveTab === 'overview'\" (click)=\"OnTabChange('overview')\">\n <i class=\"fa-solid fa-info-circle tab-icon\"></i> Overview\n </button>\n <button class=\"tab\" [class.active]=\"ActiveTab === 'snapshots'\" (click)=\"OnTabChange('snapshots')\">\n <i class=\"fa-solid fa-camera tab-icon\"></i> Snapshots\n @if (LabelItems.length > 0) {\n <span class=\"tab-count\">{{LabelItems.length}}</span>\n }\n </button>\n <button class=\"tab\" [class.active]=\"ActiveTab === 'dependencies'\" (click)=\"OnTabChange('dependencies')\">\n <i class=\"fa-solid fa-diagram-project tab-icon\"></i> Dependencies\n </button>\n <button class=\"tab\" [class.active]=\"ActiveTab === 'changes'\" (click)=\"OnTabChange('changes')\">\n <i class=\"fa-solid fa-code-compare tab-icon\"></i> Changes\n </button>\n <button class=\"tab\" [class.active]=\"ActiveTab === 'history'\" (click)=\"OnTabChange('history')\">\n <i class=\"fa-solid fa-clock-rotate-left tab-icon\"></i> History\n </button>\n </div>\n }\n\n <!-- ============================================================ -->\n <!-- BREADCRUMB (shown when micro-view is active) -->\n <!-- ============================================================ -->\n @if (ShowMicroView) {\n <div class=\"breadcrumb-bar\">\n <button class=\"breadcrumb-back\" (click)=\"OnBackFromMicroView()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n <div class=\"breadcrumb-trail\">\n <span class=\"breadcrumb-item clickable\" (click)=\"OnBackFromMicroView()\">\n <i class=\"fa-solid fa-camera breadcrumb-icon\"></i> Snapshots\n </span>\n <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n <span class=\"breadcrumb-item current\">\n <i class=\"fa-solid fa-file-lines breadcrumb-icon\"></i> {{BreadcrumbLabel}}\n </span>\n </div>\n </div>\n }\n\n <!-- ============================================================ -->\n <!-- TAB CONTENT (scrollable) - or inline micro-view -->\n <!-- ============================================================ -->\n @if (!ShowMicroView) {\n <div class=\"tab-content\">\n <!-- Loading state for items -->\n @if (IsLoadingItems && ActiveTab !== 'dependencies') {\n <mj-loading text=\"Loading label data...\"></mj-loading>\n }\n <!-- ======================================================== -->\n <!-- OVERVIEW TAB -->\n <!-- ======================================================== -->\n @if (ActiveTab === 'overview' && !IsLoadingItems) {\n <div class=\"tab-pane\">\n <!-- Metadata section -->\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-info-circle section-icon\"></i> Label Details\n </h3>\n <div class=\"detail-grid\">\n <div class=\"detail-field\">\n <span class=\"field-label\">Name</span>\n <span class=\"field-value\">{{Label.Name}}</span>\n </div>\n <div class=\"detail-field\">\n <span class=\"field-label\">Status</span>\n <span class=\"field-value\">\n <span class=\"inline-badge\" [ngClass]=\"GetStatusClass(Label.Status)\">{{Label.Status}}</span>\n </span>\n </div>\n <div class=\"detail-field\">\n <span class=\"field-label\">Scope</span>\n <span class=\"field-value\">\n <i [class]=\"GetScopeIcon(Label.Scope)\" style=\"margin-right: 6px;\"></i>{{Label.Scope}}\n </span>\n </div>\n @if (Label.EntityID) {\n <div class=\"detail-field\">\n <span class=\"field-label\">Entity</span>\n <span class=\"field-value\">\n <i [class]=\"OverviewEntityIcon\" style=\"margin-right: 6px; color: #3b82f6;\"></i>{{Label.Entity ?? resolveEntityName(Label.EntityID)}}\n </span>\n </div>\n }\n @if (Label.RecordID && Label.Scope !== 'Record') {\n <div class=\"detail-field\">\n <span class=\"field-label\">Record ID</span>\n <span class=\"field-value field-mono\">{{FormatRecordID(Label.RecordID)}}</span>\n </div>\n }\n @if (Label.ExternalSystemID) {\n <div class=\"detail-field\">\n <span class=\"field-label\">External Ref</span>\n <span class=\"field-value field-mono\">{{Label.ExternalSystemID}}</span>\n </div>\n }\n </div>\n </div>\n <!-- Record card (Record-scoped labels) -->\n @if (Label.Scope === 'Record' && Label.RecordID) {\n <div class=\"record-card\">\n <div class=\"record-card-main\">\n <i [class]=\"OverviewEntityIcon\" class=\"record-card-icon\"></i>\n <div class=\"record-card-info\">\n @if (OverviewRecordName) {\n <span class=\"record-card-name\">{{OverviewRecordName}}</span>\n }\n @if (!OverviewRecordName) {\n <span class=\"record-card-name record-card-name-loading\">Loading...</span>\n }\n <span class=\"record-card-entity\">{{Label.Entity ?? resolveEntityName(Label.EntityID)}}</span>\n <span class=\"record-card-id\">{{FormatRecordID(Label.RecordID)}}</span>\n </div>\n </div>\n <button class=\"record-card-open-btn\" (click)=\"OnOpenOverviewRecord()\" title=\"Open record\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open\n </button>\n </div>\n }\n <!-- Description -->\n @if (Label.Description) {\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-align-left section-icon\"></i> Description\n </h3>\n <p class=\"description-text\">{{Label.Description}}</p>\n </div>\n }\n <!-- Creation info -->\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-clock section-icon\"></i> Creation\n </h3>\n <div class=\"detail-grid\">\n <div class=\"detail-field\">\n <span class=\"field-label\">Created</span>\n <span class=\"field-value\">{{FormatDate(Label.__mj_CreatedAt)}}</span>\n </div>\n @if (Label.CreatedByUser) {\n <div class=\"detail-field\">\n <span class=\"field-label\">Created By</span>\n <span class=\"field-value\">\n <i class=\"fa-solid fa-user\" style=\"margin-right: 6px; opacity: 0.5;\"></i>{{Label.CreatedByUser}}\n </span>\n </div>\n }\n @if (Label.CreationDurationMS) {\n <div class=\"detail-field\">\n <span class=\"field-label\">Capture Duration</span>\n <span class=\"field-value\">{{FormatDuration(Label.CreationDurationMS)}}</span>\n </div>\n }\n <div class=\"detail-field\">\n <span class=\"field-label\">Items Captured</span>\n <span class=\"field-value\">{{LabelItems.length}}</span>\n </div>\n </div>\n </div>\n <!-- Parent / Children -->\n @if (Label.ParentID || ChildLabels.length > 0) {\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-sitemap section-icon\"></i> Hierarchy\n </h3>\n <!-- Parent reference -->\n @if (Label.ParentID) {\n <div class=\"hierarchy-item parent\">\n <i class=\"fa-solid fa-arrow-up hierarchy-icon\"></i>\n <span class=\"hierarchy-label\">Parent:</span>\n <span class=\"hierarchy-name\">\n @for (pl of AllLabels; track pl) {\n @if (IsParentLabel(pl)) {\n <span>{{pl.Name}}</span>\n }\n }\n </span>\n </div>\n }\n <!-- Children -->\n @if (ChildLabels.length > 0) {\n <div class=\"hierarchy-children\">\n @for (child of ChildLabels; track child) {\n <div class=\"hierarchy-item child\">\n <i class=\"fa-solid fa-arrow-turn-down-right hierarchy-icon\"></i>\n <span class=\"hierarchy-name\">{{child.Name}}</span>\n @if (child.RecordID) {\n <span class=\"hierarchy-meta\">{{child.RecordID | slice:0:12}}...</span>\n }\n @if (child.ItemCount) {\n <span class=\"hierarchy-meta\">{{child.ItemCount}} items</span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n <!-- ======================================================== -->\n <!-- SNAPSHOTS TAB -->\n <!-- ======================================================== -->\n @if (ActiveTab === 'snapshots' && !IsLoadingItems) {\n <div class=\"tab-pane\">\n <!-- Snapshot toolbar -->\n <div class=\"snapshot-toolbar\">\n <div class=\"snapshot-search\">\n <i class=\"fa-solid fa-search snapshot-search-icon\"></i>\n <input type=\"text\" class=\"snapshot-search-input\"\n placeholder=\"Search by entity or record...\"\n [ngModel]=\"SnapshotSearch\"\n (ngModelChange)=\"OnSnapshotSearchChange($event)\" />\n </div>\n <div class=\"snapshot-sort-toggle\">\n <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotSortBy === 'name'\"\n (click)=\"OnSnapshotSortChange('name')\" title=\"Sort by name\">\n @if (SnapshotSortBy === 'name' && SnapshotSortDir === 'asc') {\n <i class=\"fa-solid fa-arrow-down-a-z\"></i>\n }\n @if (SnapshotSortBy === 'name' && SnapshotSortDir === 'desc') {\n <i class=\"fa-solid fa-arrow-up-z-a\"></i>\n }\n @if (SnapshotSortBy !== 'name') {\n <i class=\"fa-solid fa-arrow-down-a-z\"></i>\n }\n </button>\n <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotSortBy === 'count'\"\n (click)=\"OnSnapshotSortChange('count')\" title=\"Sort by record count\">\n @if (SnapshotSortBy === 'count' && SnapshotSortDir === 'desc') {\n <i class=\"fa-solid fa-arrow-down-9-1\"></i>\n }\n @if (SnapshotSortBy === 'count' && SnapshotSortDir === 'asc') {\n <i class=\"fa-solid fa-arrow-up-1-9\"></i>\n }\n @if (SnapshotSortBy !== 'count') {\n <i class=\"fa-solid fa-arrow-down-9-1\"></i>\n }\n </button>\n </div>\n <div class=\"snapshot-view-toggle\">\n <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotViewMode === 'list'\" (click)=\"SnapshotViewMode = 'list'\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotViewMode === 'card'\" (click)=\"SnapshotViewMode = 'card'\">\n <i class=\"fa-solid fa-grip\"></i>\n </button>\n </div>\n </div>\n <!-- Entity groups -->\n <div class=\"snapshot-groups\">\n @for (group of FilteredSnapshotGroups; track group) {\n <div class=\"snapshot-group\">\n <div class=\"group-header\" (click)=\"ToggleSnapshotGroup(group)\">\n <i class=\"fa-solid fa-chevron-right group-chevron\" [class.expanded]=\"group.IsExpanded\"></i>\n <i [class]=\"group.EntityIcon\" class=\"group-entity-icon\"></i>\n <span class=\"group-name\">{{group.EntityName}} <span class=\"group-count-inline\">{{group.Items.length}}</span></span>\n </div>\n @if (group.IsExpanded) {\n <div class=\"group-content\">\n <!-- Loading names indicator -->\n @if (group.IsLoadingNames) {\n <div class=\"group-names-loading\">\n <mj-loading text=\"Loading record names...\" size=\"small\"></mj-loading>\n </div>\n }\n <!-- List mode -->\n @if (SnapshotViewMode === 'list') {\n @for (item of group.Items; track item) {\n <div class=\"snapshot-list-item\"\n (click)=\"OpenMicroView(group.EntityName, item.RecordID, item.RecordChangeID, item.DisplayName)\">\n <i class=\"fa-solid fa-file-lines snapshot-item-icon\"></i>\n <span class=\"snapshot-item-name\">{{item.DisplayName}}</span>\n <i class=\"fa-solid fa-chevron-right snapshot-item-arrow\"></i>\n </div>\n }\n }\n <!-- Card mode -->\n @if (SnapshotViewMode === 'card') {\n <div class=\"snapshot-cards\">\n @for (item of group.Items; track item) {\n <div class=\"snapshot-card\"\n (click)=\"OpenMicroView(group.EntityName, item.RecordID, item.RecordChangeID, item.DisplayName)\">\n <div class=\"snapshot-card-header\">\n <i class=\"fa-solid fa-file-lines\"></i>\n <span class=\"snapshot-card-name\">{{item.DisplayName}}</span>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n <!-- Empty state -->\n @if (FilteredSnapshotGroups.length === 0) {\n <div class=\"tab-empty\">\n <i class=\"fa-solid fa-camera tab-empty-icon\"></i>\n <p>No snapshot items found.</p>\n </div>\n }\n </div>\n }\n <!-- ======================================================== -->\n <!-- DEPENDENCIES TAB -->\n <!-- ======================================================== -->\n @if (ActiveTab === 'dependencies') {\n <div class=\"tab-pane\">\n @if (IsLoadingDependencies) {\n <mj-loading text=\"Loading dependencies...\"></mj-loading>\n }\n @if (!IsLoadingDependencies && Label.EntityID) {\n <div class=\"dep-root\">\n <div class=\"dep-root-entity\">\n <i [class]=\"GetScopeIcon(Label.Scope)\" class=\"dep-root-icon\"></i>\n <span class=\"dep-root-name\">{{Label.Entity ?? resolveEntityName(Label.EntityID)}}</span>\n <span class=\"dep-root-badge\">Root</span>\n </div>\n @if (DependencyTree.length > 0) {\n @for (node of DependencyTree; track node) {\n <ng-container *ngTemplateOutlet=\"depNode; context: { $implicit: node }\"></ng-container>\n }\n }\n @if (DependencyTree.length === 0) {\n <div class=\"dep-empty\">\n <p>No dependent entities found.</p>\n </div>\n }\n </div>\n }\n @if (!IsLoadingDependencies && !Label.EntityID) {\n <div class=\"tab-empty\">\n <i class=\"fa-solid fa-diagram-project tab-empty-icon\"></i>\n <p>No entity associated with this label.</p>\n </div>\n }\n </div>\n }\n <!-- Dependency tree node template -->\n <ng-template #depNode let-node>\n <div class=\"dep-node\" [style.padding-left.px]=\"node.Depth * 24\">\n <div class=\"dep-node-header\" (click)=\"ToggleDependencyNode(node)\">\n @if (node.Children.length > 0) {\n <i class=\"fa-solid fa-chevron-right dep-chevron\"\n [class.expanded]=\"node.IsExpanded\"\n ></i>\n }\n @if (node.Children.length === 0) {\n <span class=\"dep-node-spacer\"></span>\n }\n <i [class]=\"resolveEntityIconByName(node.EntityName)\" class=\"dep-node-icon\"></i>\n <span class=\"dep-node-name\">{{node.EntityName}}</span>\n <span class=\"dep-node-field\">via {{node.RelationshipField}}</span>\n @if (node.Children.length > 0) {\n <span class=\"dep-node-count\">\n {{node.Children.length}} dep{{node.Children.length !== 1 ? 's' : ''}}\n </span>\n }\n </div>\n @if (node.IsExpanded && node.Children.length > 0) {\n @for (child of node.Children; track child) {\n <ng-container *ngTemplateOutlet=\"depNode; context: { $implicit: child }\"></ng-container>\n }\n }\n </div>\n </ng-template>\n <!-- ======================================================== -->\n <!-- CHANGES TAB -->\n <!-- ======================================================== -->\n @if (ActiveTab === 'changes') {\n <div class=\"tab-pane\">\n @if (IsLoadingDiff) {\n <mj-loading text=\"Computing differences...\"></mj-loading>\n }\n @if (!IsLoadingDiff && DiffResult) {\n <!-- Diff summary -->\n <div class=\"diff-summary\">\n <div class=\"diff-stat\">\n <span class=\"diff-stat-value change-modified\">{{DiffResult.Summary.Changed}}</span>\n <span class=\"diff-stat-label\">Changed</span>\n </div>\n <div class=\"diff-stat\">\n <span class=\"diff-stat-value\">{{DiffResult.Summary.Unchanged}}</span>\n <span class=\"diff-stat-label\">Unchanged</span>\n </div>\n <div class=\"diff-stat\">\n <span class=\"diff-stat-value\">{{DiffResult.Summary.EntitiesAffected}}</span>\n <span class=\"diff-stat-label\">Entities</span>\n </div>\n </div>\n <!-- Expand/collapse all -->\n @if (DiffResult.EntityGroups.length > 0) {\n <div class=\"diff-toolbar\">\n <button class=\"toolbar-action-btn\" (click)=\"ExpandAllDiffGroups()\" title=\"Expand all\">\n <i class=\"fa-solid fa-angles-down\"></i>\n <span>Expand All</span>\n </button>\n <button class=\"toolbar-action-btn\" (click)=\"CollapseAllDiffGroups()\" title=\"Collapse all\">\n <i class=\"fa-solid fa-angles-up\"></i>\n <span>Collapse All</span>\n </button>\n </div>\n }\n <!-- Entity diff groups -->\n @if (DiffResult.EntityGroups.length > 0) {\n <div class=\"diff-groups\">\n @for (group of DiffResult.EntityGroups; track group) {\n <div class=\"diff-group\">\n <div class=\"diff-group-header\" (click)=\"ToggleDiffGroup(group)\">\n <i class=\"fa-solid fa-chevron-right diff-chevron\" [class.expanded]=\"group.IsExpanded\"></i>\n <i [class]=\"resolveEntityIconByName(group.EntityName)\" class=\"diff-group-icon\"></i>\n <span class=\"diff-group-name\">{{group.EntityName}}</span>\n <span class=\"diff-group-count change-modified\">\n {{group.Records.length}} modified\n </span>\n </div>\n @if (group.IsExpanded) {\n <div class=\"diff-group-content\">\n @for (record of group.Records; track record) {\n <div class=\"diff-record\">\n <div class=\"diff-record-header\">\n <i [class]=\"GetChangeTypeIcon(record.ChangeType)\" [ngClass]=\"GetChangeTypeClass(record.ChangeType)\"></i>\n <span class=\"diff-record-id\">{{record.RecordID | slice:0:20}}...</span>\n </div>\n @if (record.FieldChanges.length > 0) {\n <div class=\"diff-fields\">\n @for (field of record.FieldChanges; track field) {\n <div class=\"diff-field\"\n [ngClass]=\"GetChangeTypeClass(field.ChangeType)\">\n <span class=\"diff-field-name\">{{field.FieldName}}</span>\n @if (field.OldValue) {\n <span class=\"diff-field-old\">{{field.OldValue | slice:0:40}}</span>\n }\n @if (field.OldValue && field.NewValue) {\n <i class=\"fa-solid fa-arrow-right diff-field-arrow\"></i>\n }\n @if (field.NewValue) {\n <span class=\"diff-field-new\">{{field.NewValue | slice:0:40}}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n <!-- No changes -->\n @if (DiffResult.EntityGroups.length === 0 && DiffResult.Summary.Changed === 0) {\n <div class=\"tab-empty\">\n <i class=\"fa-solid fa-circle-check tab-empty-icon\" style=\"color: #10b981;\"></i>\n <p>No changes detected since this label was created.</p>\n </div>\n }\n }\n </div>\n }\n <!-- ======================================================== -->\n <!-- HISTORY TAB -->\n <!-- ======================================================== -->\n @if (ActiveTab === 'history') {\n <div class=\"tab-pane\">\n @if (IsLoadingHistory) {\n <mj-loading text=\"Loading history...\"></mj-loading>\n }\n @if (!IsLoadingHistory) {\n <!-- Restores -->\n @if (Restores.length > 0) {\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-clock-rotate-left section-icon\"></i> Restore Operations\n </h3>\n <div class=\"history-list\">\n @for (restore of Restores; track restore) {\n <div class=\"history-item\">\n <div class=\"history-item-icon\" [ngClass]=\"'status-' + (restore.Status ?? '').toLowerCase().replace(' ', '-')\">\n <i class=\"fa-solid fa-clock-rotate-left\"></i>\n </div>\n <div class=\"history-item-content\">\n <span class=\"history-item-title\">Restore {{restore.Status}}</span>\n <span class=\"history-item-meta\">\n {{restore.CompletedItems ?? 0}}/{{restore.TotalItems ?? 0}} items\n @if (restore.FailedItems) {\n <span> &middot; {{restore.FailedItems}} failed</span>\n }\n </span>\n </div>\n <span class=\"history-item-date\">{{FormatRelativeDate(restore.__mj_CreatedAt)}}</span>\n </div>\n }\n </div>\n </div>\n }\n <!-- Related labels -->\n @if (RelatedLabels.length > 0) {\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-tags section-icon\"></i> Related Labels\n </h3>\n <div class=\"history-list\">\n @for (related of RelatedLabels; track related) {\n <div class=\"history-item\">\n <div class=\"history-item-icon\" style=\"background: rgba(99, 102, 241, 0.1); color: #6366f1;\">\n <i class=\"fa-solid fa-tag\"></i>\n </div>\n <div class=\"history-item-content\">\n <span class=\"history-item-title\">{{related.Name}}</span>\n <span class=\"history-item-meta\">\n <span class=\"inline-badge small\" [ngClass]=\"GetStatusClass(related.Status)\">{{related.Status}}</span>\n </span>\n </div>\n <span class=\"history-item-date\">{{FormatRelativeDate(related.__mj_CreatedAt)}}</span>\n </div>\n }\n </div>\n </div>\n }\n <!-- Empty -->\n @if (Restores.length === 0 && RelatedLabels.length === 0) {\n <div class=\"tab-empty\">\n <i class=\"fa-solid fa-clock-rotate-left tab-empty-icon\"></i>\n <p>No restore history or related labels found.</p>\n </div>\n }\n }\n </div>\n }\n </div>\n }\n\n <!-- ============================================================ -->\n <!-- INLINE MICRO VIEW (replaces tab content when active) -->\n <!-- ============================================================ -->\n @if (ShowMicroView && MicroViewRecord) {\n <div class=\"tab-content\">\n <mj-record-micro-view\n [Data]=\"MicroViewRecord\"\n [Inline]=\"true\"\n (Close)=\"OnBackFromMicroView()\"\n (EntityLinkClick)=\"OnEntityLinkClick($event)\"\n (OpenRecord)=\"OnOpenRecordClick($event)\">\n </mj-record-micro-view>\n </div>\n }\n</div>\n", styles: ["/* ================================================================= */\n/* BACKDROP */\n/* ================================================================= */\n\n.panel-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0);\n z-index: 1000;\n transition: background 0.3s ease;\n pointer-events: none;\n}\n\n.panel-backdrop.visible {\n background: rgba(0, 0, 0, 0.3);\n pointer-events: auto;\n}\n\n/* ================================================================= */\n/* PANEL */\n/* ================================================================= */\n\n.detail-panel {\n position: fixed;\n top: 0;\n right: 0;\n height: 100vh;\n background: var(--card-background, #ffffff);\n box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n /* Width is set dynamically via [style.width.px] */\n min-width: 400px;\n max-width: 92vw;\n}\n\n.detail-panel.visible {\n transform: translateX(0);\n}\n\n/* ================================================================= */\n/* RESIZE HANDLE */\n/* ================================================================= */\n\n.resize-handle {\n position: absolute;\n left: -4px;\n top: 0;\n width: 8px;\n height: 100%;\n cursor: col-resize;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.resize-handle:hover .resize-handle-grip,\n.resize-handle:active .resize-handle-grip {\n opacity: 1;\n background: #6366f1;\n}\n\n.resize-handle-grip {\n width: 3px;\n height: 40px;\n background: var(--border-color, #d1d5db);\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.resize-handle:hover {\n background: rgba(99, 102, 241, 0.04);\n}\n\n/* ================================================================= */\n/* BREADCRUMB BAR */\n/* ================================================================= */\n\n.breadcrumb-bar {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 24px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n background: var(--hover-background, #f9fafb);\n}\n\n.breadcrumb-back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 13px;\n flex-shrink: 0;\n}\n\n.breadcrumb-back:hover {\n background: var(--card-background, #ffffff);\n color: #6366f1;\n border-color: #6366f1;\n}\n\n.breadcrumb-trail {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n overflow: hidden;\n}\n\n.breadcrumb-item {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--text-secondary, #6b7280);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.breadcrumb-item.clickable {\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n.breadcrumb-item.clickable:hover {\n color: #6366f1;\n}\n\n.breadcrumb-item.current {\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n}\n\n.breadcrumb-separator {\n font-size: 9px;\n color: var(--text-tertiary, #d1d5db);\n flex-shrink: 0;\n}\n\n.breadcrumb-icon {\n font-size: 12px;\n flex-shrink: 0;\n}\n\n/* ================================================================= */\n/* HEADER */\n/* ================================================================= */\n\n.panel-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n}\n\n.header-info {\n flex: 1;\n min-width: 0;\n}\n\n.header-title-row {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.header-scope-icon {\n color: #6366f1;\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.header-title {\n font-size: 20px;\n font-weight: 700;\n color: var(--text-primary, #1f2937);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.header-status {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.header-scope-badge {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n background: rgba(99, 102, 241, 0.08);\n color: #6366f1;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.header-description {\n margin: 8px 0 0 0;\n font-size: 14px;\n color: var(--text-secondary, #6b7280);\n line-height: 1.5;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-shrink: 0;\n margin-left: 16px;\n}\n\n.header-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 14px;\n}\n\n.header-action-btn:hover {\n background: var(--hover-background, #f3f4f6);\n color: var(--text-primary, #1f2937);\n border-color: var(--border-hover, #d1d5db);\n}\n\n.header-action-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.close-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n background: none;\n border: none;\n border-radius: 8px;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 16px;\n}\n\n.close-btn:hover {\n background: var(--hover-background, #f3f4f6);\n color: var(--text-primary, #1f2937);\n}\n\n/* Status badges (reused) */\n.status-active { background: rgba(16, 185, 129, 0.1); color: #059669; }\n.status-archived { background: rgba(107, 114, 128, 0.1); color: #6b7280; }\n.status-restored { background: rgba(245, 158, 11, 0.1); color: #d97706; }\n\n/* ================================================================= */\n/* SUMMARY KPIs */\n/* ================================================================= */\n\n.summary-kpis {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n overflow-x: auto;\n}\n\n.summary-kpi {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n background: var(--hover-background, #f9fafb);\n border-radius: 10px;\n flex-shrink: 0;\n}\n\n.kpi-mini-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 8px;\n font-size: 15px;\n flex-shrink: 0;\n}\n\n.kpi-mini-content {\n display: flex;\n flex-direction: column;\n}\n\n.kpi-mini-value {\n font-size: 18px;\n font-weight: 700;\n color: var(--text-primary, #1f2937);\n line-height: 1;\n}\n\n.kpi-mini-label {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n margin-top: 2px;\n}\n\n/* ================================================================= */\n/* TAB BAR */\n/* ================================================================= */\n\n.tab-bar {\n display: flex;\n gap: 0;\n padding: 0 24px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n overflow-x: auto;\n}\n\n.tab {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 12px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n font-size: 13px;\n font-weight: 500;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.tab:hover {\n color: var(--text-primary, #1f2937);\n background: var(--hover-background, #f9fafb);\n}\n\n.tab.active {\n color: #6366f1;\n border-bottom-color: #6366f1;\n font-weight: 600;\n}\n\n.tab-icon {\n font-size: 13px;\n}\n\n.tab-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n background: rgba(99, 102, 241, 0.1);\n color: #6366f1;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n}\n\n/* ================================================================= */\n/* TAB CONTENT */\n/* ================================================================= */\n\n.tab-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.tab-pane {\n padding: 20px 24px;\n animation: tabFadeIn 0.2s ease;\n}\n\n@keyframes tabFadeIn {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.tab-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n\n.tab-empty-icon {\n font-size: 40px;\n color: var(--text-tertiary, #d1d5db);\n margin-bottom: 12px;\n}\n\n.tab-empty p {\n font-size: 14px;\n color: var(--text-tertiary, #9ca3af);\n margin: 0;\n}\n\n/* ================================================================= */\n/* OVERVIEW TAB */\n/* ================================================================= */\n\n.detail-section {\n margin-bottom: 24px;\n}\n\n.section-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n margin: 0 0 14px 0;\n padding-bottom: 10px;\n border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.section-icon {\n color: var(--text-tertiary, #9ca3af);\n font-size: 14px;\n}\n\n.detail-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n}\n\n.detail-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.field-label {\n font-size: 12px;\n font-weight: 600;\n color: var(--text-tertiary, #9ca3af);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n.field-value {\n font-size: 14px;\n color: var(--text-primary, #1f2937);\n display: flex;\n align-items: center;\n}\n\n.field-mono {\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 13px;\n word-break: break-all;\n}\n\n.field-record-name {\n font-weight: 600;\n color: #6366f1;\n}\n\n/* Record card for Record-scoped labels on overview tab */\n.record-card {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 16px 18px;\n background: rgba(99, 102, 241, 0.04);\n border: 1px solid rgba(99, 102, 241, 0.15);\n border-radius: 12px;\n margin-bottom: 24px;\n}\n\n.record-card-main {\n display: flex;\n align-items: center;\n gap: 14px;\n min-width: 0;\n flex: 1;\n}\n\n.record-card-icon {\n font-size: 22px;\n color: #6366f1;\n flex-shrink: 0;\n}\n\n.record-card-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.record-card-name {\n font-size: 16px;\n font-weight: 700;\n color: var(--text-primary, #1f2937);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.record-card-name-loading {\n color: var(--text-tertiary, #9ca3af);\n font-weight: 500;\n font-style: italic;\n}\n\n.record-card-entity {\n font-size: 13px;\n color: var(--text-secondary, #6b7280);\n}\n\n.record-card-id {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n font-family: 'SF Mono', 'Fira Code', monospace;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.record-card-open-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: #6366f1;\n color: #ffffff;\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n white-space: nowrap;\n}\n\n.record-card-open-btn:hover {\n background: #4f46e5;\n box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n.inline-badge {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.inline-badge.small {\n padding: 2px 8px;\n font-size: 11px;\n}\n\n.description-text {\n font-size: 14px;\n color: var(--text-secondary, #6b7280);\n line-height: 1.6;\n margin: 0;\n}\n\n/* Hierarchy */\n.hierarchy-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 12px;\n border-radius: 8px;\n font-size: 14px;\n transition: background 0.15s ease;\n}\n\n.hierarchy-item:hover {\n background: var(--hover-background, #f3f4f6);\n}\n\n.hierarchy-icon {\n color: var(--text-tertiary, #9ca3af);\n font-size: 13px;\n width: 16px;\n text-align: center;\n}\n\n.hierarchy-label {\n font-size: 12px;\n font-weight: 600;\n color: var(--text-tertiary, #9ca3af);\n text-transform: uppercase;\n}\n\n.hierarchy-name {\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n}\n\n.hierarchy-meta {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n font-family: monospace;\n}\n\n.hierarchy-children {\n margin-left: 16px;\n border-left: 2px solid var(--border-color, #e5e7eb);\n padding-left: 8px;\n}\n\n/* ================================================================= */\n/* SNAPSHOTS TAB */\n/* ================================================================= */\n\n.snapshot-toolbar {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.snapshot-search {\n position: relative;\n flex: 1;\n}\n\n.snapshot-search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-tertiary, #9ca3af);\n font-size: 13px;\n}\n\n.snapshot-search-input {\n width: 100%;\n padding: 8px 12px 8px 36px;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n font-size: 13px;\n color: var(--text-primary, #1f2937);\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.15s ease;\n}\n\n.snapshot-search-input:focus {\n border-color: #6366f1;\n}\n\n.snapshot-sort-toggle,\n.snapshot-view-toggle {\n display: flex;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.toggle-btn-sm {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n background: transparent;\n border: none;\n cursor: pointer;\n color: var(--text-tertiary, #9ca3af);\n transition: all 0.15s ease;\n font-size: 12px;\n}\n\n.toggle-btn-sm:hover {\n color: var(--text-primary, #1f2937);\n}\n\n.toggle-btn-sm.active {\n color: #6366f1;\n background: rgba(99, 102, 241, 0.08);\n}\n\n.toggle-btn-sm + .toggle-btn-sm {\n border-left: 1px solid var(--border-color, #e5e7eb);\n}\n\n/* Snapshot groups */\n.snapshot-groups {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.snapshot-group {\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.group-header {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.group-header:hover {\n background: var(--hover-background, #f9fafb);\n}\n\n.group-chevron {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n transition: transform 0.2s ease;\n width: 14px;\n text-align: center;\n}\n\n.group-chevron.expanded {\n transform: rotate(90deg);\n}\n\n.group-entity-icon {\n color: #3b82f6;\n font-size: 14px;\n}\n\n.group-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n flex: 1;\n}\n\n.group-count-inline {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n margin-left: 6px;\n background: rgba(59, 130, 246, 0.1);\n color: #3b82f6;\n border-radius: 10px;\n font-size: 12px;\n font-weight: 600;\n vertical-align: middle;\n}\n\n.group-content {\n border-top: 1px solid var(--border-color, #f3f4f6);\n animation: tabFadeIn 0.15s ease;\n}\n\n.group-names-loading {\n display: flex;\n justify-content: center;\n padding: 8px 14px;\n}\n\n/* Snapshot list items */\n.snapshot-list-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px 10px 40px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.snapshot-list-item:last-child {\n border-bottom: none;\n}\n\n.snapshot-list-item:hover {\n background: rgba(99, 102, 241, 0.04);\n}\n\n.snapshot-item-icon {\n color: var(--text-tertiary, #9ca3af);\n font-size: 13px;\n}\n\n.snapshot-item-name {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.snapshot-item-id {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n font-family: monospace;\n}\n\n.snapshot-item-arrow {\n color: var(--text-tertiary, #d1d5db);\n font-size: 11px;\n transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.snapshot-list-item:hover .snapshot-item-arrow {\n color: #6366f1;\n transform: translateX(2px);\n}\n\n/* Snapshot cards */\n.snapshot-cards {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 10px;\n padding: 12px 14px;\n}\n\n.snapshot-card {\n padding: 12px;\n background: var(--hover-background, #f9fafb);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.snapshot-card:hover {\n border-color: #6366f1;\n box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);\n}\n\n.snapshot-card-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n font-size: 13px;\n color: var(--text-primary, #1f2937);\n}\n\n.snapshot-card-header i {\n color: var(--text-tertiary, #9ca3af);\n font-size: 12px;\n}\n\n.snapshot-card-name {\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.snapshot-card-meta {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n font-family: monospace;\n}\n\n/* ================================================================= */\n/* DEPENDENCIES TAB */\n/* ================================================================= */\n\n.dep-root {\n padding: 4px 0;\n}\n\n.dep-root-entity {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n background: rgba(99, 102, 241, 0.06);\n border: 1px solid rgba(99, 102, 241, 0.15);\n border-radius: 10px;\n margin-bottom: 12px;\n}\n\n.dep-root-icon {\n color: #6366f1;\n font-size: 16px;\n}\n\n.dep-root-name {\n font-size: 15px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n flex: 1;\n}\n\n.dep-root-badge {\n padding: 2px 10px;\n background: #6366f1;\n color: #ffffff;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n}\n\n.dep-node {\n margin-left: 8px;\n border-left: 2px solid var(--border-color, #e5e7eb);\n}\n\n.dep-node-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-radius: 6px;\n}\n\n.dep-node-header:hover {\n background: var(--hover-background, #f3f4f6);\n}\n\n.dep-chevron {\n font-size: 10px;\n color: var(--text-tertiary, #9ca3af);\n transition: transform 0.2s ease;\n width: 12px;\n text-align: center;\n}\n\n.dep-chevron.expanded {\n transform: rotate(90deg);\n}\n\n.dep-node-spacer {\n width: 12px;\n}\n\n.dep-node-icon {\n color: #3b82f6;\n font-size: 13px;\n}\n\n.dep-node-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n}\n\n.dep-node-field {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n font-style: italic;\n}\n\n.dep-node-count {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n padding: 1px 8px;\n background: var(--hover-background, #f3f4f6);\n border-radius: 8px;\n}\n\n.dep-empty {\n padding: 20px;\n text-align: center;\n}\n\n.dep-empty p {\n font-size: 14px;\n color: var(--text-tertiary, #9ca3af);\n margin: 0;\n}\n\n/* ================================================================= */\n/* CHANGES TAB */\n/* ================================================================= */\n\n.diff-summary {\n display: flex;\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.diff-stat {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 12px 20px;\n background: var(--hover-background, #f9fafb);\n border-radius: 10px;\n min-width: 80px;\n}\n\n.diff-stat-value {\n font-size: 24px;\n font-weight: 700;\n color: var(--text-primary, #1f2937);\n line-height: 1;\n}\n\n.diff-stat-label {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n margin-top: 4px;\n}\n\n/* Diff toolbar */\n.diff-toolbar {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.toolbar-action-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 6px;\n background: var(--card-background, #ffffff);\n color: var(--text-secondary, #6b7280);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.toolbar-action-btn i {\n font-size: 11px;\n}\n\n.toolbar-action-btn:hover {\n border-color: #6366f1;\n color: #6366f1;\n background: rgba(99, 102, 241, 0.06);\n}\n\n.diff-groups {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.diff-group {\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.diff-group-header {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.diff-group-header:hover {\n background: var(--hover-background, #f9fafb);\n}\n\n.diff-chevron {\n font-size: 11px;\n color: var(--text-tertiary, #9ca3af);\n transition: transform 0.2s ease;\n width: 14px;\n text-align: center;\n}\n\n.diff-chevron.expanded {\n transform: rotate(90deg);\n}\n\n.diff-group-icon {\n color: #3b82f6;\n font-size: 14px;\n}\n\n.diff-group-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n flex: 1;\n}\n\n.diff-group-count {\n font-size: 12px;\n font-weight: 600;\n padding: 2px 10px;\n border-radius: 10px;\n}\n\n.diff-group-content {\n border-top: 1px solid var(--border-color, #f3f4f6);\n animation: tabFadeIn 0.15s ease;\n}\n\n.diff-record {\n padding: 10px 14px 10px 40px;\n border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.diff-record:last-child {\n border-bottom: none;\n}\n\n.diff-record-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.diff-record-id {\n font-size: 13px;\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n font-family: monospace;\n}\n\n.diff-fields {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-left: 22px;\n}\n\n.diff-field {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n}\n\n.diff-field-name {\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n min-width: 100px;\n}\n\n.diff-field-old {\n color: #ef4444;\n text-decoration: line-through;\n opacity: 0.7;\n font-family: monospace;\n font-size: 12px;\n}\n\n.diff-field-arrow {\n color: var(--text-tertiary, #9ca3af);\n font-size: 10px;\n}\n\n.diff-field-new {\n color: #10b981;\n font-family: monospace;\n font-size: 12px;\n}\n\n/* Change type colors */\n.change-added { color: #10b981; }\n.change-modified { color: #f59e0b; }\n.change-removed { color: #ef4444; }\n\n.diff-field.change-added { background: rgba(16, 185, 129, 0.06); }\n.diff-field.change-modified { background: rgba(245, 158, 11, 0.06); }\n.diff-field.change-removed { background: rgba(239, 68, 68, 0.06); }\n\n/* ================================================================= */\n/* HISTORY TAB */\n/* ================================================================= */\n\n.history-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.history-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n border-radius: 8px;\n transition: background 0.15s ease;\n}\n\n.history-item:hover {\n background: var(--hover-background, #f3f4f6);\n}\n\n.history-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 8px;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.history-item-icon.status-complete { background: rgba(16, 185, 129, 0.1); color: #10b981; }\n.history-item-icon.status-error { background: rgba(239, 68, 68, 0.1); color: #ef4444; }\n.history-item-icon.status-partial { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }\n.history-item-icon.status-in-progress { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }\n.history-item-icon.status-pending { background: rgba(107, 114, 128, 0.1); color: #6b7280; }\n\n.history-item-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.history-item-title {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n}\n\n.history-item-meta {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.history-item-date {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n flex-shrink: 0;\n}\n\n/* ================================================================= */\n/* RESPONSIVE */\n/* ================================================================= */\n\n@media (max-width: 1024px) {\n .detail-panel {\n min-width: 360px;\n }\n\n .summary-kpis {\n flex-wrap: wrap;\n }\n}\n\n@media (max-width: 768px) {\n .detail-panel {\n width: 100% !important;\n min-width: unset;\n }\n\n .resize-handle {\n display: none;\n }\n\n .detail-grid {\n grid-template-columns: 1fr;\n }\n\n .summary-kpis {\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 16px;\n }\n\n .summary-kpi {\n padding: 8px 10px;\n }\n\n .panel-header {\n padding: 16px 16px 12px;\n }\n\n .tab-bar {\n padding: 0 16px;\n }\n\n .tab-pane {\n padding: 16px;\n }\n\n .breadcrumb-bar {\n padding: 8px 16px;\n }\n\n .snapshot-toolbar {\n flex-direction: column;\n align-items: stretch;\n }\n\n .diff-summary {\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .diff-stat {\n padding: 10px 14px;\n min-width: 60px;\n }\n}\n\n@media (max-width: 480px) {\n .header-title {\n font-size: 16px;\n }\n\n .header-title-row {\n gap: 6px;\n }\n\n .header-actions {\n margin-left: 8px;\n }\n\n .tab {\n padding: 10px 10px;\n font-size: 12px;\n }\n\n .snapshot-cards {\n grid-template-columns: 1fr;\n }\n}\n"] }]
2076
+ args: [{ standalone: false, selector: 'mj-label-detail-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop overlay -->\n<div class=\"panel-backdrop\" [class.visible]=\"IsVisible\" (click)=\"OnBackdropClick()\"></div>\n\n<!-- Slide-in panel -->\n<div class=\"detail-panel\" [class.visible]=\"IsVisible\" [style.width.px]=\"PanelWidthPx\">\n <!-- Resize handle -->\n <div class=\"resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n <div class=\"resize-handle-grip\"></div>\n </div>\n\n <!-- ============================================================ -->\n <!-- HEADER -->\n <!-- ============================================================ -->\n <div class=\"panel-header\">\n <div class=\"header-info\">\n <div class=\"header-title-row\">\n <i [class]=\"GetScopeIcon(Label.Scope)\" class=\"header-scope-icon\"></i>\n <h2 class=\"header-title\">{{Label.Name}}</h2>\n <span class=\"header-status\" [ngClass]=\"GetStatusClass(Label.Status)\">\n {{Label.Status}}\n </span>\n <span class=\"header-scope-badge\">{{Label.Scope}}</span>\n </div>\n @if (Label.Description) {\n <p class=\"header-description\">{{Label.Description}}</p>\n }\n </div>\n <div class=\"header-actions\">\n <button class=\"header-action-btn\" (click)=\"OnArchive()\"\n [disabled]=\"IsArchiving || Label.Status === 'Archived'\"\n title=\"Archive this label\">\n <i class=\"fa-solid fa-box-archive\"></i>\n </button>\n <button class=\"header-action-btn\" (click)=\"OnTabChange('changes')\" title=\"View changes\">\n <i class=\"fa-solid fa-code-compare\"></i>\n </button>\n <button class=\"close-btn\" (click)=\"OnClose()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n\n <!-- ============================================================ -->\n <!-- SUMMARY KPIs -->\n <!-- ============================================================ -->\n <div class=\"summary-kpis\">\n <div class=\"summary-kpi\">\n <div class=\"kpi-mini-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary);\">\n <i class=\"fa-solid fa-camera\"></i>\n </div>\n <div class=\"kpi-mini-content\">\n <span class=\"kpi-mini-value\">{{LabelItems.length || Label.ItemCount || GetItemCount(Label.ID)}}</span>\n <span class=\"kpi-mini-label\">Items</span>\n </div>\n </div>\n <div class=\"summary-kpi\">\n <div class=\"kpi-mini-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary);\">\n <i class=\"fa-solid fa-table\"></i>\n </div>\n <div class=\"kpi-mini-content\">\n <span class=\"kpi-mini-value\">{{UniqueEntityCount}}</span>\n <span class=\"kpi-mini-label\">Entities</span>\n </div>\n </div>\n @if (Label.CreationDurationMS) {\n <div class=\"summary-kpi\">\n <div class=\"kpi-mini-icon\" style=\"background: rgba(16, 185, 129, 0.1); color: #10b981;\">\n <i class=\"fa-solid fa-stopwatch\"></i>\n </div>\n <div class=\"kpi-mini-content\">\n <span class=\"kpi-mini-value\">{{FormatDuration(Label.CreationDurationMS)}}</span>\n <span class=\"kpi-mini-label\">Duration</span>\n </div>\n </div>\n }\n @if (ChildLabels.length > 0) {\n <div class=\"summary-kpi\">\n <div class=\"kpi-mini-icon\" style=\"background: rgba(245, 158, 11, 0.1); color: #f59e0b;\">\n <i class=\"fa-solid fa-layer-group\"></i>\n </div>\n <div class=\"kpi-mini-content\">\n <span class=\"kpi-mini-value\">{{ChildLabels.length}}</span>\n <span class=\"kpi-mini-label\">Children</span>\n </div>\n </div>\n }\n </div>\n\n <!-- ============================================================ -->\n <!-- TAB BAR (hidden when micro-view is active) -->\n <!-- ============================================================ -->\n @if (!ShowMicroView) {\n <div class=\"tab-bar\">\n <button class=\"tab\" [class.active]=\"ActiveTab === 'overview'\" (click)=\"OnTabChange('overview')\">\n <i class=\"fa-solid fa-info-circle tab-icon\"></i> Overview\n </button>\n <button class=\"tab\" [class.active]=\"ActiveTab === 'snapshots'\" (click)=\"OnTabChange('snapshots')\">\n <i class=\"fa-solid fa-camera tab-icon\"></i> Snapshots\n @if (LabelItems.length > 0) {\n <span class=\"tab-count\">{{LabelItems.length}}</span>\n }\n </button>\n <button class=\"tab\" [class.active]=\"ActiveTab === 'dependencies'\" (click)=\"OnTabChange('dependencies')\">\n <i class=\"fa-solid fa-diagram-project tab-icon\"></i> Dependencies\n </button>\n <button class=\"tab\" [class.active]=\"ActiveTab === 'changes'\" (click)=\"OnTabChange('changes')\">\n <i class=\"fa-solid fa-code-compare tab-icon\"></i> Changes\n </button>\n <button class=\"tab\" [class.active]=\"ActiveTab === 'history'\" (click)=\"OnTabChange('history')\">\n <i class=\"fa-solid fa-clock-rotate-left tab-icon\"></i> History\n </button>\n </div>\n }\n\n <!-- ============================================================ -->\n <!-- BREADCRUMB (shown when micro-view is active) -->\n <!-- ============================================================ -->\n @if (ShowMicroView) {\n <div class=\"breadcrumb-bar\">\n <button class=\"breadcrumb-back\" (click)=\"OnBackFromMicroView()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n <div class=\"breadcrumb-trail\">\n <span class=\"breadcrumb-item clickable\" (click)=\"OnBackFromMicroView()\">\n <i class=\"fa-solid fa-camera breadcrumb-icon\"></i> Snapshots\n </span>\n <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n <span class=\"breadcrumb-item current\">\n <i class=\"fa-solid fa-file-lines breadcrumb-icon\"></i> {{BreadcrumbLabel}}\n </span>\n </div>\n </div>\n }\n\n <!-- ============================================================ -->\n <!-- TAB CONTENT (scrollable) - or inline micro-view -->\n <!-- ============================================================ -->\n @if (!ShowMicroView) {\n <div class=\"tab-content\">\n <!-- Loading state for items -->\n @if (IsLoadingItems && ActiveTab !== 'dependencies') {\n <mj-loading text=\"Loading label data...\"></mj-loading>\n }\n <!-- ======================================================== -->\n <!-- OVERVIEW TAB -->\n <!-- ======================================================== -->\n @if (ActiveTab === 'overview' && !IsLoadingItems) {\n <div class=\"tab-pane\">\n <!-- Metadata section -->\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-info-circle section-icon\"></i> Label Details\n </h3>\n <div class=\"detail-grid\">\n <div class=\"detail-field\">\n <span class=\"field-label\">Name</span>\n <span class=\"field-value\">{{Label.Name}}</span>\n </div>\n <div class=\"detail-field\">\n <span class=\"field-label\">Status</span>\n <span class=\"field-value\">\n <span class=\"inline-badge\" [ngClass]=\"GetStatusClass(Label.Status)\">{{Label.Status}}</span>\n </span>\n </div>\n <div class=\"detail-field\">\n <span class=\"field-label\">Scope</span>\n <span class=\"field-value\">\n <i [class]=\"GetScopeIcon(Label.Scope)\" style=\"margin-right: 6px;\"></i>{{Label.Scope}}\n </span>\n </div>\n @if (Label.EntityID) {\n <div class=\"detail-field\">\n <span class=\"field-label\">Entity</span>\n <span class=\"field-value\">\n <i [class]=\"OverviewEntityIcon\" style=\"margin-right: 6px; color: var(--mj-brand-primary);\"></i>{{Label.Entity ?? resolveEntityName(Label.EntityID)}}\n </span>\n </div>\n }\n @if (Label.RecordID && Label.Scope !== 'Record') {\n <div class=\"detail-field\">\n <span class=\"field-label\">Record ID</span>\n <span class=\"field-value field-mono\">{{FormatRecordID(Label.RecordID)}}</span>\n </div>\n }\n @if (Label.ExternalSystemID) {\n <div class=\"detail-field\">\n <span class=\"field-label\">External Ref</span>\n <span class=\"field-value field-mono\">{{Label.ExternalSystemID}}</span>\n </div>\n }\n </div>\n </div>\n <!-- Record card (Record-scoped labels) -->\n @if (Label.Scope === 'Record' && Label.RecordID) {\n <div class=\"record-card\">\n <div class=\"record-card-main\">\n <i [class]=\"OverviewEntityIcon\" class=\"record-card-icon\"></i>\n <div class=\"record-card-info\">\n @if (OverviewRecordName) {\n <span class=\"record-card-name\">{{OverviewRecordName}}</span>\n }\n @if (!OverviewRecordName) {\n <span class=\"record-card-name record-card-name-loading\">Loading...</span>\n }\n <span class=\"record-card-entity\">{{Label.Entity ?? resolveEntityName(Label.EntityID)}}</span>\n <span class=\"record-card-id\">{{FormatRecordID(Label.RecordID)}}</span>\n </div>\n </div>\n <button class=\"record-card-open-btn\" (click)=\"OnOpenOverviewRecord()\" title=\"Open record\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open\n </button>\n </div>\n }\n <!-- Description -->\n @if (Label.Description) {\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-align-left section-icon\"></i> Description\n </h3>\n <p class=\"description-text\">{{Label.Description}}</p>\n </div>\n }\n <!-- Creation info -->\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-clock section-icon\"></i> Creation\n </h3>\n <div class=\"detail-grid\">\n <div class=\"detail-field\">\n <span class=\"field-label\">Created</span>\n <span class=\"field-value\">{{FormatDate(Label.__mj_CreatedAt)}}</span>\n </div>\n @if (Label.CreatedByUser) {\n <div class=\"detail-field\">\n <span class=\"field-label\">Created By</span>\n <span class=\"field-value\">\n <i class=\"fa-solid fa-user\" style=\"margin-right: 6px; opacity: 0.5;\"></i>{{Label.CreatedByUser}}\n </span>\n </div>\n }\n @if (Label.CreationDurationMS) {\n <div class=\"detail-field\">\n <span class=\"field-label\">Capture Duration</span>\n <span class=\"field-value\">{{FormatDuration(Label.CreationDurationMS)}}</span>\n </div>\n }\n <div class=\"detail-field\">\n <span class=\"field-label\">Items Captured</span>\n <span class=\"field-value\">{{LabelItems.length}}</span>\n </div>\n </div>\n </div>\n <!-- Parent / Children -->\n @if (Label.ParentID || ChildLabels.length > 0) {\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-sitemap section-icon\"></i> Hierarchy\n </h3>\n <!-- Parent reference -->\n @if (Label.ParentID) {\n <div class=\"hierarchy-item parent\">\n <i class=\"fa-solid fa-arrow-up hierarchy-icon\"></i>\n <span class=\"hierarchy-label\">Parent:</span>\n <span class=\"hierarchy-name\">\n @for (pl of AllLabels; track pl) {\n @if (IsParentLabel(pl)) {\n <span>{{pl.Name}}</span>\n }\n }\n </span>\n </div>\n }\n <!-- Children -->\n @if (ChildLabels.length > 0) {\n <div class=\"hierarchy-children\">\n @for (child of ChildLabels; track child) {\n <div class=\"hierarchy-item child\">\n <i class=\"fa-solid fa-arrow-turn-down-right hierarchy-icon\"></i>\n <span class=\"hierarchy-name\">{{child.Name}}</span>\n @if (child.RecordID) {\n <span class=\"hierarchy-meta\">{{child.RecordID | slice:0:12}}...</span>\n }\n @if (child.ItemCount) {\n <span class=\"hierarchy-meta\">{{child.ItemCount}} items</span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n <!-- ======================================================== -->\n <!-- SNAPSHOTS TAB -->\n <!-- ======================================================== -->\n @if (ActiveTab === 'snapshots' && !IsLoadingItems) {\n <div class=\"tab-pane\">\n <!-- Snapshot toolbar -->\n <div class=\"snapshot-toolbar\">\n <div class=\"snapshot-search\">\n <i class=\"fa-solid fa-search snapshot-search-icon\"></i>\n <input type=\"text\" class=\"snapshot-search-input\"\n placeholder=\"Search by entity or record...\"\n [ngModel]=\"SnapshotSearch\"\n (ngModelChange)=\"OnSnapshotSearchChange($event)\" />\n </div>\n <div class=\"snapshot-sort-toggle\">\n <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotSortBy === 'name'\"\n (click)=\"OnSnapshotSortChange('name')\" title=\"Sort by name\">\n @if (SnapshotSortBy === 'name' && SnapshotSortDir === 'asc') {\n <i class=\"fa-solid fa-arrow-down-a-z\"></i>\n }\n @if (SnapshotSortBy === 'name' && SnapshotSortDir === 'desc') {\n <i class=\"fa-solid fa-arrow-up-z-a\"></i>\n }\n @if (SnapshotSortBy !== 'name') {\n <i class=\"fa-solid fa-arrow-down-a-z\"></i>\n }\n </button>\n <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotSortBy === 'count'\"\n (click)=\"OnSnapshotSortChange('count')\" title=\"Sort by record count\">\n @if (SnapshotSortBy === 'count' && SnapshotSortDir === 'desc') {\n <i class=\"fa-solid fa-arrow-down-9-1\"></i>\n }\n @if (SnapshotSortBy === 'count' && SnapshotSortDir === 'asc') {\n <i class=\"fa-solid fa-arrow-up-1-9\"></i>\n }\n @if (SnapshotSortBy !== 'count') {\n <i class=\"fa-solid fa-arrow-down-9-1\"></i>\n }\n </button>\n </div>\n <div class=\"snapshot-view-toggle\">\n <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotViewMode === 'list'\" (click)=\"SnapshotViewMode = 'list'\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotViewMode === 'card'\" (click)=\"SnapshotViewMode = 'card'\">\n <i class=\"fa-solid fa-grip\"></i>\n </button>\n </div>\n </div>\n <!-- Entity groups -->\n <div class=\"snapshot-groups\">\n @for (group of FilteredSnapshotGroups; track group) {\n <div class=\"snapshot-group\">\n <div class=\"group-header\" (click)=\"ToggleSnapshotGroup(group)\">\n <i class=\"fa-solid fa-chevron-right group-chevron\" [class.expanded]=\"group.IsExpanded\"></i>\n <i [class]=\"group.EntityIcon\" class=\"group-entity-icon\"></i>\n <span class=\"group-name\">{{group.EntityName}} <span class=\"group-count-inline\">{{group.Items.length}}</span></span>\n </div>\n @if (group.IsExpanded) {\n <div class=\"group-content\">\n <!-- Loading names indicator -->\n @if (group.IsLoadingNames) {\n <div class=\"group-names-loading\">\n <mj-loading text=\"Loading record names...\" size=\"small\"></mj-loading>\n </div>\n }\n <!-- List mode -->\n @if (SnapshotViewMode === 'list') {\n @for (item of group.Items; track item) {\n <div class=\"snapshot-list-item\"\n (click)=\"OpenMicroView(group.EntityName, item.RecordID, item.RecordChangeID, item.DisplayName)\">\n <i class=\"fa-solid fa-file-lines snapshot-item-icon\"></i>\n <span class=\"snapshot-item-name\">{{item.DisplayName}}</span>\n <i class=\"fa-solid fa-chevron-right snapshot-item-arrow\"></i>\n </div>\n }\n }\n <!-- Card mode -->\n @if (SnapshotViewMode === 'card') {\n <div class=\"snapshot-cards\">\n @for (item of group.Items; track item) {\n <div class=\"snapshot-card\"\n (click)=\"OpenMicroView(group.EntityName, item.RecordID, item.RecordChangeID, item.DisplayName)\">\n <div class=\"snapshot-card-header\">\n <i class=\"fa-solid fa-file-lines\"></i>\n <span class=\"snapshot-card-name\">{{item.DisplayName}}</span>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n <!-- Empty state -->\n @if (FilteredSnapshotGroups.length === 0) {\n <div class=\"tab-empty\">\n <i class=\"fa-solid fa-camera tab-empty-icon\"></i>\n <p>No snapshot items found.</p>\n </div>\n }\n </div>\n }\n <!-- ======================================================== -->\n <!-- DEPENDENCIES TAB -->\n <!-- ======================================================== -->\n @if (ActiveTab === 'dependencies') {\n <div class=\"tab-pane\">\n @if (IsLoadingDependencies) {\n <mj-loading text=\"Loading dependencies...\"></mj-loading>\n }\n @if (!IsLoadingDependencies && Label.EntityID) {\n <div class=\"dep-root\">\n <div class=\"dep-root-entity\">\n <i [class]=\"GetScopeIcon(Label.Scope)\" class=\"dep-root-icon\"></i>\n <span class=\"dep-root-name\">{{Label.Entity ?? resolveEntityName(Label.EntityID)}}</span>\n <span class=\"dep-root-badge\">Root</span>\n </div>\n @if (DependencyTree.length > 0) {\n @for (node of DependencyTree; track node) {\n <ng-container *ngTemplateOutlet=\"depNode; context: { $implicit: node }\"></ng-container>\n }\n }\n @if (DependencyTree.length === 0) {\n <div class=\"dep-empty\">\n <p>No dependent entities found.</p>\n </div>\n }\n </div>\n }\n @if (!IsLoadingDependencies && !Label.EntityID) {\n <div class=\"tab-empty\">\n <i class=\"fa-solid fa-diagram-project tab-empty-icon\"></i>\n <p>No entity associated with this label.</p>\n </div>\n }\n </div>\n }\n <!-- Dependency tree node template -->\n <ng-template #depNode let-node>\n <div class=\"dep-node\" [style.padding-left.px]=\"node.Depth * 24\">\n <div class=\"dep-node-header\" (click)=\"ToggleDependencyNode(node)\">\n @if (node.Children.length > 0) {\n <i class=\"fa-solid fa-chevron-right dep-chevron\"\n [class.expanded]=\"node.IsExpanded\"\n ></i>\n }\n @if (node.Children.length === 0) {\n <span class=\"dep-node-spacer\"></span>\n }\n <i [class]=\"resolveEntityIconByName(node.EntityName)\" class=\"dep-node-icon\"></i>\n <span class=\"dep-node-name\">{{node.EntityName}}</span>\n <span class=\"dep-node-field\">via {{node.RelationshipField}}</span>\n @if (node.Children.length > 0) {\n <span class=\"dep-node-count\">\n {{node.Children.length}} dep{{node.Children.length !== 1 ? 's' : ''}}\n </span>\n }\n </div>\n @if (node.IsExpanded && node.Children.length > 0) {\n @for (child of node.Children; track child) {\n <ng-container *ngTemplateOutlet=\"depNode; context: { $implicit: child }\"></ng-container>\n }\n }\n </div>\n </ng-template>\n <!-- ======================================================== -->\n <!-- CHANGES TAB -->\n <!-- ======================================================== -->\n @if (ActiveTab === 'changes') {\n <div class=\"tab-pane\">\n @if (IsLoadingDiff) {\n <mj-loading text=\"Computing differences...\"></mj-loading>\n }\n @if (!IsLoadingDiff && DiffResult) {\n <!-- Diff summary -->\n <div class=\"diff-summary\">\n <div class=\"diff-stat\">\n <span class=\"diff-stat-value change-modified\">{{DiffResult.Summary.Changed}}</span>\n <span class=\"diff-stat-label\">Changed</span>\n </div>\n <div class=\"diff-stat\">\n <span class=\"diff-stat-value\">{{DiffResult.Summary.Unchanged}}</span>\n <span class=\"diff-stat-label\">Unchanged</span>\n </div>\n <div class=\"diff-stat\">\n <span class=\"diff-stat-value\">{{DiffResult.Summary.EntitiesAffected}}</span>\n <span class=\"diff-stat-label\">Entities</span>\n </div>\n </div>\n <!-- Expand/collapse all -->\n @if (DiffResult.EntityGroups.length > 0) {\n <div class=\"diff-toolbar\">\n <button class=\"toolbar-action-btn\" (click)=\"ExpandAllDiffGroups()\" title=\"Expand all\">\n <i class=\"fa-solid fa-angles-down\"></i>\n <span>Expand All</span>\n </button>\n <button class=\"toolbar-action-btn\" (click)=\"CollapseAllDiffGroups()\" title=\"Collapse all\">\n <i class=\"fa-solid fa-angles-up\"></i>\n <span>Collapse All</span>\n </button>\n </div>\n }\n <!-- Entity diff groups -->\n @if (DiffResult.EntityGroups.length > 0) {\n <div class=\"diff-groups\">\n @for (group of DiffResult.EntityGroups; track group) {\n <div class=\"diff-group\">\n <div class=\"diff-group-header\" (click)=\"ToggleDiffGroup(group)\">\n <i class=\"fa-solid fa-chevron-right diff-chevron\" [class.expanded]=\"group.IsExpanded\"></i>\n <i [class]=\"resolveEntityIconByName(group.EntityName)\" class=\"diff-group-icon\"></i>\n <span class=\"diff-group-name\">{{group.EntityName}}</span>\n <span class=\"diff-group-count change-modified\">\n {{group.Records.length}} modified\n </span>\n </div>\n @if (group.IsExpanded) {\n <div class=\"diff-group-content\">\n @for (record of group.Records; track record) {\n <div class=\"diff-record\">\n <div class=\"diff-record-header\">\n <i [class]=\"GetChangeTypeIcon(record.ChangeType)\" [ngClass]=\"GetChangeTypeClass(record.ChangeType)\"></i>\n <span class=\"diff-record-id\">{{record.RecordID | slice:0:20}}...</span>\n </div>\n @if (record.FieldChanges.length > 0) {\n <div class=\"diff-fields\">\n @for (field of record.FieldChanges; track field) {\n <div class=\"diff-field\"\n [ngClass]=\"GetChangeTypeClass(field.ChangeType)\">\n <span class=\"diff-field-name\">{{field.FieldName}}</span>\n @if (field.OldValue) {\n <span class=\"diff-field-old\">{{field.OldValue | slice:0:40}}</span>\n }\n @if (field.OldValue && field.NewValue) {\n <i class=\"fa-solid fa-arrow-right diff-field-arrow\"></i>\n }\n @if (field.NewValue) {\n <span class=\"diff-field-new\">{{field.NewValue | slice:0:40}}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n <!-- No changes -->\n @if (DiffResult.EntityGroups.length === 0 && DiffResult.Summary.Changed === 0) {\n <div class=\"tab-empty\">\n <i class=\"fa-solid fa-circle-check tab-empty-icon\" style=\"color: #10b981;\"></i>\n <p>No changes detected since this label was created.</p>\n </div>\n }\n }\n </div>\n }\n <!-- ======================================================== -->\n <!-- HISTORY TAB -->\n <!-- ======================================================== -->\n @if (ActiveTab === 'history') {\n <div class=\"tab-pane\">\n @if (IsLoadingHistory) {\n <mj-loading text=\"Loading history...\"></mj-loading>\n }\n @if (!IsLoadingHistory) {\n <!-- Restores -->\n @if (Restores.length > 0) {\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-clock-rotate-left section-icon\"></i> Restore Operations\n </h3>\n <div class=\"history-list\">\n @for (restore of Restores; track restore) {\n <div class=\"history-item\">\n <div class=\"history-item-icon\" [ngClass]=\"'status-' + (restore.Status ?? '').toLowerCase().replace(' ', '-')\">\n <i class=\"fa-solid fa-clock-rotate-left\"></i>\n </div>\n <div class=\"history-item-content\">\n <span class=\"history-item-title\">Restore {{restore.Status}}</span>\n <span class=\"history-item-meta\">\n {{restore.CompletedItems ?? 0}}/{{restore.TotalItems ?? 0}} items\n @if (restore.FailedItems) {\n <span> &middot; {{restore.FailedItems}} failed</span>\n }\n </span>\n </div>\n <span class=\"history-item-date\">{{FormatRelativeDate(restore.__mj_CreatedAt)}}</span>\n </div>\n }\n </div>\n </div>\n }\n <!-- Related labels -->\n @if (RelatedLabels.length > 0) {\n <div class=\"detail-section\">\n <h3 class=\"section-title\">\n <i class=\"fa-solid fa-tags section-icon\"></i> Related Labels\n </h3>\n <div class=\"history-list\">\n @for (related of RelatedLabels; track related) {\n <div class=\"history-item\">\n <div class=\"history-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary);\">\n <i class=\"fa-solid fa-tag\"></i>\n </div>\n <div class=\"history-item-content\">\n <span class=\"history-item-title\">{{related.Name}}</span>\n <span class=\"history-item-meta\">\n <span class=\"inline-badge small\" [ngClass]=\"GetStatusClass(related.Status)\">{{related.Status}}</span>\n </span>\n </div>\n <span class=\"history-item-date\">{{FormatRelativeDate(related.__mj_CreatedAt)}}</span>\n </div>\n }\n </div>\n </div>\n }\n <!-- Empty -->\n @if (Restores.length === 0 && RelatedLabels.length === 0) {\n <div class=\"tab-empty\">\n <i class=\"fa-solid fa-clock-rotate-left tab-empty-icon\"></i>\n <p>No restore history or related labels found.</p>\n </div>\n }\n }\n </div>\n }\n </div>\n }\n\n <!-- ============================================================ -->\n <!-- INLINE MICRO VIEW (replaces tab content when active) -->\n <!-- ============================================================ -->\n @if (ShowMicroView && MicroViewRecord) {\n <div class=\"tab-content\">\n <mj-record-micro-view\n [Data]=\"MicroViewRecord\"\n [Inline]=\"true\"\n (Close)=\"OnBackFromMicroView()\"\n (EntityLinkClick)=\"OnEntityLinkClick($event)\"\n (OpenRecord)=\"OnOpenRecordClick($event)\">\n </mj-record-micro-view>\n </div>\n }\n</div>\n", styles: ["/* ================================================================= */\n/* BACKDROP */\n/* ================================================================= */\n\n.panel-backdrop {\n position: fixed;\n inset: 0;\n background: transparent;\n z-index: 1000;\n transition: background 0.3s ease;\n pointer-events: none;\n}\n\n.panel-backdrop.visible {\n background: var(--mj-bg-overlay);\n pointer-events: auto;\n}\n\n/* ================================================================= */\n/* PANEL */\n/* ================================================================= */\n\n.detail-panel {\n position: fixed;\n top: 0;\n right: 0;\n height: 100vh;\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-lg);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n /* Width is set dynamically via [style.width.px] */\n min-width: 400px;\n max-width: 92vw;\n}\n\n.detail-panel.visible {\n transform: translateX(0);\n}\n\n/* ================================================================= */\n/* RESIZE HANDLE */\n/* ================================================================= */\n\n.resize-handle {\n position: absolute;\n left: -4px;\n top: 0;\n width: 8px;\n height: 100%;\n cursor: col-resize;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.resize-handle:hover .resize-handle-grip,\n.resize-handle:active .resize-handle-grip {\n opacity: 1;\n background: var(--mj-brand-primary);\n}\n\n.resize-handle-grip {\n width: 3px;\n height: 40px;\n background: var(--mj-border-strong);\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.resize-handle:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n/* ================================================================= */\n/* BREADCRUMB BAR */\n/* ================================================================= */\n\n.breadcrumb-bar {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 13px;\n flex-shrink: 0;\n}\n\n.breadcrumb-back:hover {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.breadcrumb-trail {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n overflow: hidden;\n}\n\n.breadcrumb-item {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.breadcrumb-item.clickable {\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n.breadcrumb-item.clickable:hover {\n color: var(--mj-brand-primary);\n}\n\n.breadcrumb-item.current {\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.breadcrumb-separator {\n font-size: 9px;\n color: var(--mj-border-strong);\n flex-shrink: 0;\n}\n\n.breadcrumb-icon {\n font-size: 12px;\n flex-shrink: 0;\n}\n\n/* ================================================================= */\n/* HEADER */\n/* ================================================================= */\n\n.panel-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.header-info {\n flex: 1;\n min-width: 0;\n}\n\n.header-title-row {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.header-scope-icon {\n color: var(--mj-brand-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.header-title {\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.header-status {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.header-scope-badge {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n color: var(--mj-brand-primary);\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.header-description {\n margin: 8px 0 0 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-shrink: 0;\n margin-left: 16px;\n}\n\n.header-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 14px;\n}\n\n.header-action-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n border-color: var(--mj-border-strong);\n}\n\n.header-action-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.close-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n background: none;\n border: none;\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 16px;\n}\n\n.close-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n/* Status badges (reused) */\n.status-active { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.status-archived { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n.status-restored { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n\n/* ================================================================= */\n/* SUMMARY KPIs */\n/* ================================================================= */\n\n.summary-kpis {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n overflow-x: auto;\n}\n\n.summary-kpi {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 10px;\n flex-shrink: 0;\n}\n\n.kpi-mini-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 8px;\n font-size: 15px;\n flex-shrink: 0;\n}\n\n.kpi-mini-content {\n display: flex;\n flex-direction: column;\n}\n\n.kpi-mini-value {\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n}\n\n.kpi-mini-label {\n font-size: 11px;\n color: var(--mj-text-disabled);\n margin-top: 2px;\n}\n\n/* ================================================================= */\n/* TAB BAR */\n/* ================================================================= */\n\n.tab-bar {\n display: flex;\n gap: 0;\n padding: 0 24px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n overflow-x: auto;\n}\n\n.tab {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 12px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.tab:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.tab.active {\n color: var(--mj-brand-primary);\n border-bottom-color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n.tab-icon {\n font-size: 13px;\n}\n\n.tab-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--mj-brand-primary);\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n}\n\n/* ================================================================= */\n/* TAB CONTENT */\n/* ================================================================= */\n\n.tab-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.tab-pane {\n padding: 20px 24px;\n animation: tabFadeIn 0.2s ease;\n}\n\n@keyframes tabFadeIn {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.tab-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n}\n\n.tab-empty-icon {\n font-size: 40px;\n color: var(--mj-border-strong);\n margin-bottom: 12px;\n}\n\n.tab-empty p {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin: 0;\n}\n\n/* ================================================================= */\n/* OVERVIEW TAB */\n/* ================================================================= */\n\n.detail-section {\n margin-bottom: 24px;\n}\n\n.section-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 14px 0;\n padding-bottom: 10px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-icon {\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.detail-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n}\n\n.detail-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.field-label {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n.field-value {\n font-size: 14px;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n}\n\n.field-mono {\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 13px;\n word-break: break-all;\n}\n\n.field-record-name {\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n/* Record card for Record-scoped labels on overview tab */\n.record-card {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 16px 18px;\n background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n border-radius: 12px;\n margin-bottom: 24px;\n}\n\n.record-card-main {\n display: flex;\n align-items: center;\n gap: 14px;\n min-width: 0;\n flex: 1;\n}\n\n.record-card-icon {\n font-size: 22px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.record-card-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.record-card-name {\n font-size: 16px;\n font-weight: 700;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.record-card-name-loading {\n color: var(--mj-text-disabled);\n font-weight: 500;\n font-style: italic;\n}\n\n.record-card-entity {\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.record-card-id {\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-family: 'SF Mono', 'Fira Code', monospace;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.record-card-open-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n white-space: nowrap;\n}\n\n.record-card-open-btn:hover {\n background: var(--mj-brand-primary-hover);\n box-shadow: var(--mj-shadow-md);\n}\n\n.inline-badge {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.inline-badge.small {\n padding: 2px 8px;\n font-size: 11px;\n}\n\n.description-text {\n font-size: 14px;\n color: var(--mj-text-secondary);\n line-height: 1.6;\n margin: 0;\n}\n\n/* Hierarchy */\n.hierarchy-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 12px;\n border-radius: 8px;\n font-size: 14px;\n transition: background 0.15s ease;\n}\n\n.hierarchy-item:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.hierarchy-icon {\n color: var(--mj-text-disabled);\n font-size: 13px;\n width: 16px;\n text-align: center;\n}\n\n.hierarchy-label {\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n}\n\n.hierarchy-name {\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.hierarchy-meta {\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-family: monospace;\n}\n\n.hierarchy-children {\n margin-left: 16px;\n border-left: 2px solid var(--mj-border-default);\n padding-left: 8px;\n}\n\n/* ================================================================= */\n/* SNAPSHOTS TAB */\n/* ================================================================= */\n\n.snapshot-toolbar {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.snapshot-search {\n position: relative;\n flex: 1;\n}\n\n.snapshot-search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n.snapshot-search-input {\n width: 100%;\n padding: 8px 12px 8px 36px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 13px;\n color: var(--mj-text-primary);\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.15s ease;\n}\n\n.snapshot-search-input:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.snapshot-sort-toggle,\n.snapshot-view-toggle {\n display: flex;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.toggle-btn-sm {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n background: transparent;\n border: none;\n cursor: pointer;\n color: var(--mj-text-disabled);\n transition: all 0.15s ease;\n font-size: 12px;\n}\n\n.toggle-btn-sm:hover {\n color: var(--mj-text-primary);\n}\n\n.toggle-btn-sm.active {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.toggle-btn-sm + .toggle-btn-sm {\n border-left: 1px solid var(--mj-border-default);\n}\n\n/* Snapshot groups */\n.snapshot-groups {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.snapshot-group {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.group-header {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.group-header:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.group-chevron {\n font-size: 11px;\n color: var(--mj-text-disabled);\n transition: transform 0.2s ease;\n width: 14px;\n text-align: center;\n}\n\n.group-chevron.expanded {\n transform: rotate(90deg);\n}\n\n.group-entity-icon {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.group-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.group-count-inline {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n margin-left: 6px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--mj-brand-primary);\n border-radius: 10px;\n font-size: 12px;\n font-weight: 600;\n vertical-align: middle;\n}\n\n.group-content {\n border-top: 1px solid var(--mj-border-default);\n animation: tabFadeIn 0.15s ease;\n}\n\n.group-names-loading {\n display: flex;\n justify-content: center;\n padding: 8px 14px;\n}\n\n/* Snapshot list items */\n.snapshot-list-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px 10px 40px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.snapshot-list-item:last-child {\n border-bottom: none;\n}\n\n.snapshot-list-item:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n.snapshot-item-icon {\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n.snapshot-item-name {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.snapshot-item-id {\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-family: monospace;\n}\n\n.snapshot-item-arrow {\n color: var(--mj-border-strong);\n font-size: 11px;\n transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.snapshot-list-item:hover .snapshot-item-arrow {\n color: var(--mj-brand-primary);\n transform: translateX(2px);\n}\n\n/* Snapshot cards */\n.snapshot-cards {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 10px;\n padding: 12px 14px;\n}\n\n.snapshot-card {\n padding: 12px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.snapshot-card:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.snapshot-card-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.snapshot-card-header i {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.snapshot-card-name {\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.snapshot-card-meta {\n font-size: 11px;\n color: var(--mj-text-disabled);\n font-family: monospace;\n}\n\n/* ================================================================= */\n/* DEPENDENCIES TAB */\n/* ================================================================= */\n\n.dep-root {\n padding: 4px 0;\n}\n\n.dep-root-entity {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n border-radius: 10px;\n margin-bottom: 12px;\n}\n\n.dep-root-icon {\n color: var(--mj-brand-primary);\n font-size: 16px;\n}\n\n.dep-root-name {\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.dep-root-badge {\n padding: 2px 10px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n}\n\n.dep-node {\n margin-left: 8px;\n border-left: 2px solid var(--mj-border-default);\n}\n\n.dep-node-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-radius: 6px;\n}\n\n.dep-node-header:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.dep-chevron {\n font-size: 10px;\n color: var(--mj-text-disabled);\n transition: transform 0.2s ease;\n width: 12px;\n text-align: center;\n}\n\n.dep-chevron.expanded {\n transform: rotate(90deg);\n}\n\n.dep-node-spacer {\n width: 12px;\n}\n\n.dep-node-icon {\n color: var(--mj-brand-primary);\n font-size: 13px;\n}\n\n.dep-node-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.dep-node-field {\n font-size: 11px;\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n.dep-node-count {\n font-size: 11px;\n color: var(--mj-text-disabled);\n padding: 1px 8px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 8px;\n}\n\n.dep-empty {\n padding: 20px;\n text-align: center;\n}\n\n.dep-empty p {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin: 0;\n}\n\n/* ================================================================= */\n/* CHANGES TAB */\n/* ================================================================= */\n\n.diff-summary {\n display: flex;\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.diff-stat {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 12px 20px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 10px;\n min-width: 80px;\n}\n\n.diff-stat-value {\n font-size: 24px;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n}\n\n.diff-stat-label {\n font-size: 12px;\n color: var(--mj-text-disabled);\n margin-top: 4px;\n}\n\n/* Diff toolbar */\n.diff-toolbar {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.toolbar-action-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.toolbar-action-btn i {\n font-size: 11px;\n}\n\n.toolbar-action-btn:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.diff-groups {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.diff-group {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n overflow: hidden;\n}\n\n.diff-group-header {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.diff-group-header:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.diff-chevron {\n font-size: 11px;\n color: var(--mj-text-disabled);\n transition: transform 0.2s ease;\n width: 14px;\n text-align: center;\n}\n\n.diff-chevron.expanded {\n transform: rotate(90deg);\n}\n\n.diff-group-icon {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.diff-group-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.diff-group-count {\n font-size: 12px;\n font-weight: 600;\n padding: 2px 10px;\n border-radius: 10px;\n}\n\n.diff-group-content {\n border-top: 1px solid var(--mj-border-default);\n animation: tabFadeIn 0.15s ease;\n}\n\n.diff-record {\n padding: 10px 14px 10px 40px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.diff-record:last-child {\n border-bottom: none;\n}\n\n.diff-record-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.diff-record-id {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n font-family: monospace;\n}\n\n.diff-fields {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-left: 22px;\n}\n\n.diff-field {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n}\n\n.diff-field-name {\n font-weight: 600;\n color: var(--mj-text-primary);\n min-width: 100px;\n}\n\n.diff-field-old {\n color: var(--mj-status-error);\n text-decoration: line-through;\n opacity: 0.7;\n font-family: monospace;\n font-size: 12px;\n}\n\n.diff-field-arrow {\n color: var(--mj-text-disabled);\n font-size: 10px;\n}\n\n.diff-field-new {\n color: var(--mj-status-success);\n font-family: monospace;\n font-size: 12px;\n}\n\n/* Change type colors */\n.change-added { color: var(--mj-status-success); }\n.change-modified { color: var(--mj-status-warning); }\n.change-removed { color: var(--mj-status-error); }\n\n.diff-field.change-added { background: color-mix(in srgb, var(--mj-status-success) 6%, transparent); }\n.diff-field.change-modified { background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent); }\n.diff-field.change-removed { background: color-mix(in srgb, var(--mj-status-error) 6%, transparent); }\n\n/* ================================================================= */\n/* HISTORY TAB */\n/* ================================================================= */\n\n.history-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.history-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n border-radius: 8px;\n transition: background 0.15s ease;\n}\n\n.history-item:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.history-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 8px;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.history-item-icon.status-complete { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.history-item-icon.status-error { background: color-mix(in srgb, var(--mj-status-error) 10%, transparent); color: var(--mj-status-error); }\n.history-item-icon.status-partial { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n.history-item-icon.status-in-progress { background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary); }\n.history-item-icon.status-pending { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n\n.history-item-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.history-item-title {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.history-item-meta {\n font-size: 12px;\n color: var(--mj-text-disabled);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.history-item-date {\n font-size: 12px;\n color: var(--mj-text-disabled);\n flex-shrink: 0;\n}\n\n/* ================================================================= */\n/* RESPONSIVE */\n/* ================================================================= */\n\n@media (max-width: 1024px) {\n .detail-panel {\n min-width: 360px;\n }\n\n .summary-kpis {\n flex-wrap: wrap;\n }\n}\n\n@media (max-width: 768px) {\n .detail-panel {\n width: 100% !important;\n min-width: unset;\n }\n\n .resize-handle {\n display: none;\n }\n\n .detail-grid {\n grid-template-columns: 1fr;\n }\n\n .summary-kpis {\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 16px;\n }\n\n .summary-kpi {\n padding: 8px 10px;\n }\n\n .panel-header {\n padding: 16px 16px 12px;\n }\n\n .tab-bar {\n padding: 0 16px;\n }\n\n .tab-pane {\n padding: 16px;\n }\n\n .breadcrumb-bar {\n padding: 8px 16px;\n }\n\n .snapshot-toolbar {\n flex-direction: column;\n align-items: stretch;\n }\n\n .diff-summary {\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .diff-stat {\n padding: 10px 14px;\n min-width: 60px;\n }\n}\n\n@media (max-width: 480px) {\n .header-title {\n font-size: 16px;\n }\n\n .header-title-row {\n gap: 6px;\n }\n\n .header-actions {\n margin-left: 8px;\n }\n\n .tab {\n padding: 10px 10px;\n font-size: 12px;\n }\n\n .snapshot-cards {\n grid-template-columns: 1fr;\n }\n}\n"] }]
2077
2077
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }], { Label: [{
2078
2078
  type: Input
2079
2079
  }], AllLabels: [{