@memberjunction/ng-dashboards 5.34.1 → 5.35.0

package/dist/VersionHistory/components/diff-resource.component.js

@@ -14,12 +14,13 @@ import { UserInfoEngine } from '@memberjunction/core-entities';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
-import * as i3 from "@memberjunction/ng-shared-generic";
-function VersionHistoryDiffResourceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+import * as i3 from "@memberjunction/ng-ui-components";
+import * as i4 from "@memberjunction/ng-shared-generic";
+function VersionHistoryDiffResourceComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-loading", 1);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_For_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 16);
+function VersionHistoryDiffResourceComponent_Conditional_4_For_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 12);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -29,22 +30,22 @@ function VersionHistoryDiffResourceComponent_Conditional_2_For_22_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.FormatLabelOption(label_r3), " ");
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "button", 22);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_23_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SwapLabels()); });
-    i0.ɵɵelement(2, "i", 23);
+    i0.ɵɵelementStart(0, "div", 13)(1, "button", 18);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_17_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SwapLabels()); });
+    i0.ɵɵelement(2, "i", 19);
     i0.ɵɵelementEnd()();
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵelement(1, "i", 24);
-    i0.ɵɵelementStart(2, "span", 25);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelementStart(2, "span", 21);
     i0.ɵɵtext(3, "Current State");
     i0.ɵɵelementEnd()();
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_25_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 16);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_19_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 12);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -54,17 +55,17 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_25_For_7_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.FormatLabelOption(label_r6), " ");
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12)(1, "label", 13);
+    i0.ɵɵelementStart(0, "div", 8)(1, "label", 9);
     i0.ɵɵtext(2, "To label");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "select", 14);
-    i0.ɵɵtwoWayListener("ngModelChange", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_25_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.ToLabelId, $event) || (ctx_r1.ToLabelId = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(4, "option", 15);
+    i0.ɵɵelementStart(3, "select", 10);
+    i0.ɵɵtwoWayListener("ngModelChange", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_19_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.ToLabelId, $event) || (ctx_r1.ToLabelId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(4, "option", 11);
     i0.ɵɵtext(5, "Select a label...");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(6, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_25_For_7_Template, 2, 2, "option", 16, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(6, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_19_For_7_Template, 2, 2, "option", 12, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -73,50 +74,50 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_25_Templa
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.FilteredToLabels);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 19);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 15);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 20);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 16);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 37)(1, "div", 39);
-    i0.ɵɵelement(2, "i", 40);
-    i0.ɵɵelementStart(3, "input", 41);
-    i0.ɵɵlistener("ngModelChange", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_25_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffSearchChange($event)); });
+    i0.ɵɵelementStart(0, "div", 33)(1, "div", 35);
+    i0.ɵɵelement(2, "i", 36);
+    i0.ɵɵelementStart(3, "input", 37);
+    i0.ɵɵlistener("ngModelChange", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_25_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffSearchChange($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 42)(5, "button", 43);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_25_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffFilterChange("all")); });
+    i0.ɵɵelementStart(4, "div", 38)(5, "button", 39);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_25_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffFilterChange("all")); });
     i0.ɵɵtext(6, "All");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 44);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_25_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffFilterChange("added")); });
+    i0.ɵɵelementStart(7, "button", 40);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_25_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffFilterChange("added")); });
     i0.ɵɵtext(8, "Added");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 45);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_25_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffFilterChange("removed")); });
+    i0.ɵɵelementStart(9, "button", 41);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_25_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffFilterChange("removed")); });
     i0.ɵɵtext(10, "Removed");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 46);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_25_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffFilterChange("modified")); });
+    i0.ɵɵelementStart(11, "button", 42);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_25_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffFilterChange("modified")); });
     i0.ɵɵtext(12, "Modified");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 47)(14, "button", 48);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_25_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ExpandAllGroups()); });
-    i0.ɵɵelement(15, "i", 49);
+    i0.ɵɵelementStart(13, "div", 43)(14, "button", 44);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_25_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ExpandAllGroups()); });
+    i0.ɵɵelement(15, "i", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "button", 50);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_25_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.CollapseAllGroups()); });
-    i0.ɵɵelement(17, "i", 51);
+    i0.ɵɵelementStart(16, "button", 46);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_25_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.CollapseAllGroups()); });
+    i0.ɵɵelement(17, "i", 47);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 52)(19, "button", 53);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_25_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffSortChange("name")); });
-    i0.ɵɵelement(20, "i", 54);
+    i0.ɵɵelementStart(18, "div", 48)(19, "button", 49);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_25_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffSortChange("name")); });
+    i0.ɵɵelement(20, "i", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "button", 55);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_25_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffSortChange("count")); });
-    i0.ɵɵelement(22, "i", 54);
+    i0.ɵɵelementStart(21, "button", 51);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_25_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDiffSortChange("count")); });
+    i0.ɵɵelement(22, "i", 50);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -139,8 +140,8 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.DiffSortBy === "count" && ctx_r1.DiffSortDir === "asc" ? "fa-arrow-up-1-9" : "fa-arrow-down-9-1");
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 63);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -148,8 +149,8 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" +", group_r9.AddedCount, " ");
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 64);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 60);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -157,8 +158,8 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" -", group_r9.RemovedCount, " ");
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 65);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 61);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -166,8 +167,8 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ~", group_r9.ModifiedCount, " ");
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 71);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 67);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -175,17 +176,17 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" (", item_r11.DisplayName, ")");
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 77);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 73);
 } if (rf & 2) {
     const item_r11 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵclassProp("expanded", item_r11.IsExpanded);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 78);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 74);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 83);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 79);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "slice");
     i0.ɵɵelementEnd();
@@ -194,11 +195,11 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, field_r12.OldValue, 0, 60));
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 84);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 80);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 85);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 81);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "slice");
     i0.ɵɵelementEnd();
@@ -207,14 +208,14 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, field_r12.NewValue, 0, 60));
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 80)(1, "span", 81);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76)(1, "span", 77);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 82);
-    i0.ɵɵconditionalCreate(4, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_4_Template, 3, 5, "span", 83);
-    i0.ɵɵconditionalCreate(5, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_5_Template, 1, 0, "i", 84);
-    i0.ɵɵconditionalCreate(6, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_6_Template, 3, 5, "span", 85);
+    i0.ɵɵelementStart(3, "span", 78);
+    i0.ɵɵconditionalCreate(4, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_4_Template, 3, 5, "span", 79);
+    i0.ɵɵconditionalCreate(5, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_5_Template, 1, 0, "i", 80);
+    i0.ɵɵconditionalCreate(6, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Conditional_6_Template, 3, 5, "span", 81);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const field_r12 = ctx.$implicit;
@@ -229,22 +230,22 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(field_r12.NewValue ? 6 : -1);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Template, 7, 5, "div", 80, i0.ɵɵrepeaterTrackByIdentity);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_For_1_Template, 7, 5, "div", 76, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const item_r11 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵrepeater(item_r11.FieldChanges);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79)(1, "span");
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 75)(1, "span");
     i0.ɵɵtext(2, "No field-level changes available");
     i0.ɵɵelementEnd()();
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵconditionalCreate(1, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_1_Template, 1, 0, "mj-loading", 78);
-    i0.ɵɵconditionalCreate(2, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_Template, 2, 0);
-    i0.ɵɵconditionalCreate(3, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_3_Template, 3, 0, "div", 79);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵconditionalCreate(1, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_1_Template, 1, 0, "mj-loading", 74);
+    i0.ɵɵconditionalCreate(2, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_2_Template, 2, 0);
+    i0.ɵɵconditionalCreate(3, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Conditional_3_Template, 3, 0, "div", 75);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r11 = i0.ɵɵnextContext().$implicit;
@@ -255,25 +256,25 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(!item_r11.IsLoadingFields && item_r11.FieldsLoaded && item_r11.FieldChanges.length === 0 ? 3 : -1);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 68);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Template_div_click_1_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.ToggleItem(item_r11)); });
-    i0.ɵɵelement(2, "i", 69);
-    i0.ɵɵelementStart(3, "span", 70);
+    i0.ɵɵelementStart(0, "div", 63)(1, "div", 64);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Template_div_click_1_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.ToggleItem(item_r11)); });
+    i0.ɵɵelement(2, "i", 65);
+    i0.ɵɵelementStart(3, "span", 66);
     i0.ɵɵtext(4);
-    i0.ɵɵconditionalCreate(5, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_5_Template, 2, 1, "span", 71);
+    i0.ɵɵconditionalCreate(5, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_5_Template, 2, 1, "span", 67);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 72);
+    i0.ɵɵelementStart(6, "span", 68);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 73);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Template_button_click_8_listener($event) { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); ctx_r1.OnOpenRecord(item_r11); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(9, "i", 74);
+    i0.ɵɵelementStart(8, "button", 69);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Template_button_click_8_listener($event) { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); ctx_r1.OnOpenRecord(item_r11); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(9, "i", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_10_Template, 1, 2, "i", 75);
+    i0.ɵɵconditionalCreate(10, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_10_Template, 1, 2, "i", 71);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(11, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Template, 4, 3, "div", 76);
+    i0.ɵɵconditionalCreate(11, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Conditional_11_Template, 4, 3, "div", 72);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r11 = ctx.$implicit;
@@ -294,30 +295,30 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(item_r11.IsExpanded && item_r11.ChangeType === "Modified" ? 11 : -1);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 66);
-    i0.ɵɵrepeaterCreate(1, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_For_2_Template, 12, 10, "div", 67, i0.ɵɵrepeaterTrackByIdentity);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵrepeaterCreate(1, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_For_2_Template, 12, 10, "div", 63, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
     i0.ɵɵrepeater(group_r9.Items);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Template(rf, ctx) { if (rf & 1) {
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 56)(1, "div", 57);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Template_div_click_1_listener() { const group_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.ToggleEntityGroup(group_r9)); });
-    i0.ɵɵelementStart(2, "div", 58);
-    i0.ɵɵelement(3, "i", 59)(4, "i", 60);
-    i0.ɵɵelementStart(5, "span", 61);
+    i0.ɵɵelementStart(0, "div", 52)(1, "div", 53);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Template_div_click_1_listener() { const group_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.ToggleEntityGroup(group_r9)); });
+    i0.ɵɵelementStart(2, "div", 54);
+    i0.ɵɵelement(3, "i", 55)(4, "i", 56);
+    i0.ɵɵelementStart(5, "span", 57);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 62);
-    i0.ɵɵconditionalCreate(8, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_8_Template, 2, 1, "span", 63);
-    i0.ɵɵconditionalCreate(9, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_9_Template, 2, 1, "span", 64);
-    i0.ɵɵconditionalCreate(10, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_10_Template, 2, 1, "span", 65);
+    i0.ɵɵelementStart(7, "div", 58);
+    i0.ɵɵconditionalCreate(8, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_8_Template, 2, 1, "span", 59);
+    i0.ɵɵconditionalCreate(9, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_9_Template, 2, 1, "span", 60);
+    i0.ɵɵconditionalCreate(10, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_10_Template, 2, 1, "span", 61);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(11, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_Template, 3, 0, "div", 66);
+    i0.ɵɵconditionalCreate(11, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Conditional_11_Template, 3, 0, "div", 62);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r9 = ctx.$implicit;
@@ -336,18 +337,18 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(group_r9.IsExpanded ? 11 : -1);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵrepeaterCreate(1, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Template, 12, 9, "div", 56, i0.ɵɵrepeaterTrackByIdentity);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵrepeaterCreate(1, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_For_2_Template, 12, 9, "div", 52, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.FilteredEntityGroups);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵelement(1, "i", 86);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "i", 82);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No differences found");
     i0.ɵɵelementEnd();
@@ -355,42 +356,42 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Condit
     i0.ɵɵtext(5, "The compared states are identical.");
     i0.ɵɵelementEnd()();
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26)(1, "div", 27);
-    i0.ɵɵelement(2, "i", 28);
-    i0.ɵɵelementStart(3, "span", 29);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23);
+    i0.ɵɵelement(2, "i", 24);
+    i0.ɵɵelementStart(3, "span", 25);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 30);
+    i0.ɵɵelementStart(5, "span", 26);
     i0.ɵɵtext(6, "Added");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 31);
-    i0.ɵɵelement(8, "i", 32);
-    i0.ɵɵelementStart(9, "span", 29);
+    i0.ɵɵelementStart(7, "div", 27);
+    i0.ɵɵelement(8, "i", 28);
+    i0.ɵɵelementStart(9, "span", 25);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 30);
+    i0.ɵɵelementStart(11, "span", 26);
     i0.ɵɵtext(12, "Removed");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 33);
-    i0.ɵɵelement(14, "i", 34);
-    i0.ɵɵelementStart(15, "span", 29);
+    i0.ɵɵelementStart(13, "div", 29);
+    i0.ɵɵelement(14, "i", 30);
+    i0.ɵɵelementStart(15, "span", 25);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "span", 30);
+    i0.ɵɵelementStart(17, "span", 26);
     i0.ɵɵtext(18, "Modified");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 35);
-    i0.ɵɵelement(20, "i", 36);
-    i0.ɵɵelementStart(21, "span", 29);
+    i0.ɵɵelementStart(19, "div", 31);
+    i0.ɵɵelement(20, "i", 32);
+    i0.ɵɵelementStart(21, "span", 25);
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "span", 30);
+    i0.ɵɵelementStart(23, "span", 26);
     i0.ɵɵtext(24, "Unchanged");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(25, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_25_Template, 23, 15, "div", 37);
-    i0.ɵɵconditionalCreate(26, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_Template, 3, 0, "div", 38);
-    i0.ɵɵconditionalCreate(27, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_27_Template, 6, 0, "div", 21);
+    i0.ɵɵconditionalCreate(25, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_25_Template, 23, 15, "div", 33);
+    i0.ɵɵconditionalCreate(26, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_26_Template, 3, 0, "div", 34);
+    i0.ɵɵconditionalCreate(27, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Conditional_27_Template, 6, 0, "div", 17);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
@@ -408,9 +409,9 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Templa
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.FilteredEntityGroups.length === 0 && ctx_r1.TotalChanges === 0 ? 27 : -1);
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵelement(1, "i", 87);
+function VersionHistoryDiffResourceComponent_Conditional_4_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "i", 83);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "Select labels to compare");
     i0.ɵɵelementEnd();
@@ -418,50 +419,44 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_32_Templa
     i0.ɵɵtext(5, "Choose a diff mode and select labels above, then click Compare.");
     i0.ɵɵelementEnd()();
 } }
-function VersionHistoryDiffResourceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function VersionHistoryDiffResourceComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "h2", 4);
-    i0.ɵɵtext(3, "Diff Viewer");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 5);
-    i0.ɵɵtext(5, "Compare states between version labels or against current data");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(6, "div", 6)(7, "div", 7)(8, "button", 8);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiffModeChange("label-to-current")); });
-    i0.ɵɵelement(9, "i", 9);
-    i0.ɵɵtext(10, " Label vs Current ");
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "button", 4);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiffModeChange("label-to-current")); });
+    i0.ɵɵelement(3, "i", 5);
+    i0.ɵɵtext(4, " Label vs Current ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 8);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiffModeChange("label-to-label")); });
-    i0.ɵɵelement(12, "i", 10);
-    i0.ɵɵtext(13, " Label vs Label ");
+    i0.ɵɵelementStart(5, "button", 4);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiffModeChange("label-to-label")); });
+    i0.ɵɵelement(6, "i", 6);
+    i0.ɵɵtext(7, " Label vs Label ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 11)(15, "div", 12)(16, "label", 13);
-    i0.ɵɵtext(17);
+    i0.ɵɵelementStart(8, "div", 7)(9, "div", 8)(10, "label", 9);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "select", 14);
-    i0.ɵɵtwoWayListener("ngModelChange", function VersionHistoryDiffResourceComponent_Conditional_2_Template_select_ngModelChange_18_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FromLabelId, $event) || (ctx_r1.FromLabelId = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(19, "option", 15);
-    i0.ɵɵtext(20, "Select a label...");
+    i0.ɵɵelementStart(12, "select", 10);
+    i0.ɵɵtwoWayListener("ngModelChange", function VersionHistoryDiffResourceComponent_Conditional_4_Template_select_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FromLabelId, $event) || (ctx_r1.FromLabelId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(13, "option", 11);
+    i0.ɵɵtext(14, "Select a label...");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(21, VersionHistoryDiffResourceComponent_Conditional_2_For_22_Template, 2, 2, "option", 16, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(15, VersionHistoryDiffResourceComponent_Conditional_4_For_16_Template, 2, 2, "option", 12, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(23, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_23_Template, 3, 0, "div", 17);
-    i0.ɵɵconditionalCreate(24, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_24_Template, 4, 0, "div", 17);
-    i0.ɵɵconditionalCreate(25, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_25_Template, 8, 1, "div", 12);
+    i0.ɵɵconditionalCreate(17, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_17_Template, 3, 0, "div", 13);
+    i0.ɵɵconditionalCreate(18, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_18_Template, 4, 0, "div", 13);
+    i0.ɵɵconditionalCreate(19, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_19_Template, 8, 1, "div", 8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "button", 18);
-    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_2_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.RunDiff()); });
-    i0.ɵɵconditionalCreate(27, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_27_Template, 1, 0, "i", 19);
-    i0.ɵɵconditionalCreate(28, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_28_Template, 1, 0, "i", 20);
-    i0.ɵɵelementStart(29, "span");
-    i0.ɵɵtext(30);
+    i0.ɵɵelementStart(20, "button", 14);
+    i0.ɵɵlistener("click", function VersionHistoryDiffResourceComponent_Conditional_4_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.RunDiff()); });
+    i0.ɵɵconditionalCreate(21, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_21_Template, 1, 0, "i", 15);
+    i0.ɵɵconditionalCreate(22, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_22_Template, 1, 0, "i", 16);
+    i0.ɵɵelementStart(23, "span");
+    i0.ɵɵtext(24);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(31, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Template, 28, 7);
-    i0.ɵɵconditionalCreate(32, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_32_Template, 6, 0, "div", 21);
+    i0.ɵɵconditionalCreate(25, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_25_Template, 28, 7);
+    i0.ɵɵconditionalCreate(26, VersionHistoryDiffResourceComponent_Conditional_4_Conditional_26_Template, 6, 0, "div", 17);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(8);
+    i0.ɵɵadvance(2);
     i0.ɵɵclassProp("active", ctx_r1.DiffMode === "label-to-current");
     i0.ɵɵadvance(3);
     i0.ɵɵclassProp("active", ctx_r1.DiffMode === "label-to-label");
@@ -472,23 +467,23 @@ function VersionHistoryDiffResourceComponent_Conditional_2_Template(rf, ctx) { i
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.FilteredFromLabels);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.DiffMode === "label-to-label" ? 23 : -1);
+    i0.ɵɵconditional(ctx_r1.DiffMode === "label-to-label" ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.DiffMode === "label-to-current" ? 24 : -1);
+    i0.ɵɵconditional(ctx_r1.DiffMode === "label-to-current" ? 18 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.DiffMode === "label-to-label" ? 25 : -1);
+    i0.ɵɵconditional(ctx_r1.DiffMode === "label-to-label" ? 19 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", !ctx_r1.CanRunDiff || ctx_r1.IsDiffLoading);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsDiffLoading ? 27 : -1);
+    i0.ɵɵconditional(!ctx_r1.IsDiffLoading ? 21 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsDiffLoading ? 28 : -1);
+    i0.ɵɵconditional(ctx_r1.IsDiffLoading ? 22 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.IsDiffLoading ? "Comparing..." : "Compare");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.HasDiffResult ? 31 : -1);
+    i0.ɵɵconditional(ctx_r1.HasDiffResult ? 25 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.HasDiffResult && !ctx_r1.IsDiffLoading ? 32 : -1);
+    i0.ɵɵconditional(!ctx_r1.HasDiffResult && !ctx_r1.IsDiffLoading ? 26 : -1);
 } }
 let VersionHistoryDiffResourceComponent = class VersionHistoryDiffResourceComponent extends BaseResourceComponent {
     static { VersionHistoryDiffResourceComponent_1 = this; }
@@ -1137,17 +1132,19 @@ let VersionHistoryDiffResourceComponent = class VersionHistoryDiffResourceCompon
         this.FilteredEntityGroups = groups;
     }
     static ɵfac = function VersionHistoryDiffResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VersionHistoryDiffResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VersionHistoryDiffResourceComponent, selectors: [["mj-version-history-diff-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [[1, "diff-container"], ["text", "Loading diff viewer..."], [1, "page-header"], [1, "header-left"], [1, "page-title"], [1, "page-subtitle"], [1, "config-panel"], [1, "mode-selector"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "fa-solid", "fa-code-compare"], [1, "label-selectors"], [1, "selector-group"], [1, "selector-label"], [1, "selector-input", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], [1, "selector-arrow"], [1, "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "empty-state"], ["title", "Swap direction", 1, "swap-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "fa-solid", "fa-arrow-right"], [1, "current-state-badge"], [1, "diff-summary"], [1, "diff-stat", "change-added"], [1, "fa-solid", "fa-plus"], [1, "diff-stat-value"], [1, "diff-stat-label"], [1, "diff-stat", "change-removed"], [1, "fa-solid", "fa-minus"], [1, "diff-stat", "change-modified"], [1, "fa-solid", "fa-pen"], [1, "diff-stat", "change-unchanged"], [1, "fa-solid", "fa-equals"], [1, "diff-toolbar"], [1, "entity-groups"], [1, "diff-search"], [1, "fa-solid", "fa-search", "diff-search-icon"], ["type", "text", "placeholder", "Search by entity or record...", 1, "diff-search-input", 3, "ngModelChange", "ngModel"], [1, "diff-filter-pills"], [1, "filter-pill", 3, "click"], [1, "filter-pill", "change-added", 3, "click"], [1, "filter-pill", "change-removed", 3, "click"], [1, "filter-pill", "change-modified", 3, "click"], [1, "diff-toolbar-right"], ["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-sort-toggle"], ["title", "Sort by name", 1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", 3, "ngClass"], ["title", "Sort by count", 1, "toggle-btn-sm", 3, "click"], [1, "entity-group"], [1, "entity-group-header", 3, "click"], [1, "entity-group-left"], [1, "fa-solid", "fa-chevron-right", "entity-chevron"], [1, "entity-icon"], [1, "entity-group-name"], [1, "entity-group-badges"], [1, "badge", "change-added"], [1, "badge", "change-removed"], [1, "badge", "change-modified"], [1, "entity-group-items"], [1, "diff-item-wrapper"], [1, "diff-item", 3, "click", "ngClass"], [1, "diff-item-icon"], [1, "diff-item-record"], [1, "diff-item-display-name"], [1, "diff-item-type"], ["title", "Open record", 1, "diff-item-open-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-chevron-right", "diff-item-chevron", 3, "expanded"], [1, "diff-fields"], [1, "fa-solid", "fa-chevron-right", "diff-item-chevron"], ["text", "Loading changes...", "size", "small"], [1, "diff-fields-empty"], [1, "diff-field", 3, "ngClass"], [1, "diff-field-name"], [1, "diff-field-values"], [1, "diff-field-old"], [1, "fa-solid", "fa-arrow-right", "diff-field-arrow"], [1, "diff-field-new"], [1, "fa-solid", "fa-check-circle", "empty-icon", 2, "color", "#10b981"], [1, "fa-solid", "fa-code-compare", "empty-icon"]], template: function VersionHistoryDiffResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, VersionHistoryDiffResourceComponent_Conditional_1_Template, 1, 0, "mj-loading", 1);
-            i0.ɵɵconditionalCreate(2, VersionHistoryDiffResourceComponent_Conditional_2_Template, 33, 15);
-            i0.ɵɵelementEnd();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VersionHistoryDiffResourceComponent, selectors: [["mj-version-history-diff-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 2, consts: [["Title", "Diff Viewer", "Icon", "fa-solid fa-code-compare", "Subtitle", "Compare states between version labels or against current data"], ["text", "Loading diff viewer..."], [1, "config-panel"], [1, "mode-selector"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "fa-solid", "fa-code-compare"], [1, "label-selectors"], [1, "selector-group"], [1, "selector-label"], [1, "selector-input", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], [1, "selector-arrow"], [1, "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "empty-state"], ["title", "Swap direction", 1, "swap-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "fa-solid", "fa-arrow-right"], [1, "current-state-badge"], [1, "diff-summary"], [1, "diff-stat", "change-added"], [1, "fa-solid", "fa-plus"], [1, "diff-stat-value"], [1, "diff-stat-label"], [1, "diff-stat", "change-removed"], [1, "fa-solid", "fa-minus"], [1, "diff-stat", "change-modified"], [1, "fa-solid", "fa-pen"], [1, "diff-stat", "change-unchanged"], [1, "fa-solid", "fa-equals"], [1, "diff-toolbar"], [1, "entity-groups"], [1, "diff-search"], [1, "fa-solid", "fa-search", "diff-search-icon"], ["type", "text", "placeholder", "Search by entity or record...", 1, "diff-search-input", 3, "ngModelChange", "ngModel"], [1, "diff-filter-pills"], [1, "filter-pill", 3, "click"], [1, "filter-pill", "change-added", 3, "click"], [1, "filter-pill", "change-removed", 3, "click"], [1, "filter-pill", "change-modified", 3, "click"], [1, "diff-toolbar-right"], ["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-sort-toggle"], ["title", "Sort by name", 1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", 3, "ngClass"], ["title", "Sort by count", 1, "toggle-btn-sm", 3, "click"], [1, "entity-group"], [1, "entity-group-header", 3, "click"], [1, "entity-group-left"], [1, "fa-solid", "fa-chevron-right", "entity-chevron"], [1, "entity-icon"], [1, "entity-group-name"], [1, "entity-group-badges"], [1, "badge", "change-added"], [1, "badge", "change-removed"], [1, "badge", "change-modified"], [1, "entity-group-items"], [1, "diff-item-wrapper"], [1, "diff-item", 3, "click", "ngClass"], [1, "diff-item-icon"], [1, "diff-item-record"], [1, "diff-item-display-name"], [1, "diff-item-type"], ["title", "Open record", 1, "diff-item-open-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-chevron-right", "diff-item-chevron", 3, "expanded"], [1, "diff-fields"], [1, "fa-solid", "fa-chevron-right", "diff-item-chevron"], ["text", "Loading changes...", "size", "small"], [1, "diff-fields-empty"], [1, "diff-field", 3, "ngClass"], [1, "diff-field-name"], [1, "diff-field-values"], [1, "diff-field-old"], [1, "fa-solid", "fa-arrow-right", "diff-field-arrow"], [1, "diff-field-new"], [1, "fa-solid", "fa-check-circle", "empty-icon", 2, "color", "#10b981"], [1, "fa-solid", "fa-code-compare", "empty-icon"]], template: function VersionHistoryDiffResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout");
+            i0.ɵɵelement(1, "mj-page-header", 0);
+            i0.ɵɵelementStart(2, "mj-page-body");
+            i0.ɵɵconditionalCreate(3, VersionHistoryDiffResourceComponent_Conditional_3_Template, 1, 0, "mj-loading", 1);
+            i0.ɵɵconditionalCreate(4, VersionHistoryDiffResourceComponent_Conditional_4_Template, 27, 15);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.IsLoading ? 3 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.IsLoading ? 1 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent, i1.SlicePipe], styles: [".diff-container[_ngcontent-%COMP%] {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n}\n\n\n\n.page-header[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.page-title[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n}\n\n.page-subtitle[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n}\n\n.mode-selector[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 20px;\n}\n\n.mode-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 18px;\n    background: var(--mj-bg-surface-sunken);\n    border: 2px solid transparent;\n    border-radius: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.mode-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default);\n}\n\n.mode-btn.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n\n\n.label-selectors[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-end;\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.selector-group[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.selector-label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.selector-input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 8px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    outline: none;\n    box-sizing: border-box;\n}\n\n.selector-input[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.selector-arrow[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding-bottom: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 16px;\n}\n\n.current-state-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    padding: 2px 8px;\n    border-radius: 8px;\n    white-space: nowrap;\n}\n\n\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 24px;\n    background: var(--mj-brand-primary);\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-inverse);\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n}\n\n.btn-primary[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n\n\n.diff-summary[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 12px;\n    margin-bottom: 24px;\n}\n\n.diff-stat[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 16px 20px;\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.diff-stat[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.diff-stat-value[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.diff-stat-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.change-added[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n    color: var(--mj-status-success);\n}\n\n.change-removed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n    color: var(--mj-status-error);\n}\n\n.change-modified[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n    color: var(--mj-status-warning);\n}\n\n.change-unchanged[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-muted) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n    color: var(--mj-text-muted);\n}\n\n\n\n.entity-groups[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.entity-group[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.entity-group-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 20px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.entity-group-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.entity-group-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.entity-group-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    width: 16px;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.entity-group-name[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.entity-group-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n}\n\n.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    border: none;\n}\n\n\n\n.entity-chevron[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    width: 14px;\n    text-align: center;\n    transition: transform 0.2s ease;\n}\n\n.entity-chevron.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n\n\n.entity-group-items[_ngcontent-%COMP%] {\n    border-top: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n}\n\n.diff-item-wrapper[_ngcontent-%COMP%] {\n    margin-bottom: 2px;\n}\n\n.diff-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 12px;\n    border-radius: 6px;\n}\n\n.diff-item.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.diff-item.clickable[_ngcontent-%COMP%]:hover {\n    filter: brightness(0.97);\n}\n\n.diff-item-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n    width: 20px;\n    text-align: center;\n}\n\n.diff-item-record[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    color: var(--mj-text-primary);\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-item-display-name[_ngcontent-%COMP%] {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n.diff-item-open-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 26px;\n    height: 26px;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.diff-item-open-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-item-type[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.diff-item-chevron[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    transition: transform 0.2s ease;\n}\n\n.diff-item-chevron.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n\n\n.diff-fields[_ngcontent-%COMP%] {\n    margin-left: 42px;\n    margin-bottom: 8px;\n    padding: 8px 0;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.diff-field[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 13px;\n}\n\n.diff-field.change-added[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 6%, transparent);\n}\n\n.diff-field.change-modified[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent);\n}\n\n.diff-field.change-removed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n}\n\n.diff-field-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 120px;\n    flex-shrink: 0;\n}\n\n.diff-field-values[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    flex: 1;\n}\n\n.diff-field-old[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    text-decoration: line-through;\n    opacity: 0.8;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-field-arrow[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n.diff-field-new[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-fields-empty[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    font-style: italic;\n}\n\n\n\n.diff-toolbar-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.15s ease;\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\n\n.empty-state[_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.empty-icon[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: var(--mj-text-muted);\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n    max-width: 400px;\n}\n\n\n\n.swap-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 50%;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.swap-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n    transform: rotate(180deg);\n}\n\n\n\n.diff-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.diff-search[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n    min-width: 200px;\n}\n\n.diff-search-icon[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n.diff-search-input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px 8px 36px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    box-sizing: border-box;\n}\n\n.diff-search-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.diff-filter-pills[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.filter-pill[_ngcontent-%COMP%] {\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 16px;\n    background: var(--mj-bg-surface-card);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.filter-pill[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.filter-pill.active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.filter-pill.change-added.active[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n    border-color: var(--mj-status-success);\n}\n\n.filter-pill.change-removed.active[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n    border-color: var(--mj-status-error);\n}\n\n.filter-pill.change-modified.active[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    border-color: var(--mj-status-warning);\n}\n\n.diff-sort-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 2px;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.toggle-btn-sm.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n@media (max-width: 768px) {\n    .diff-summary[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .label-selectors[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n}"], changeDetection: 0 });
+            i0.ɵɵconditional(!ctx.IsLoading ? 4 : -1);
+        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJPageHeaderComponent, i3.MJPageLayoutComponent, i3.MJPageBodyComponent, i4.LoadingComponent, i1.SlicePipe], styles: ["\n\n.config-panel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n}\n\n.mode-selector[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 20px;\n}\n\n.mode-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 18px;\n    background: var(--mj-bg-surface-sunken);\n    border: 2px solid transparent;\n    border-radius: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.mode-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default);\n}\n\n.mode-btn.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n\n\n.label-selectors[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-end;\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.selector-group[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.selector-label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.selector-input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 8px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    outline: none;\n    box-sizing: border-box;\n}\n\n.selector-input[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.selector-arrow[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding-bottom: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 16px;\n}\n\n.current-state-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    padding: 2px 8px;\n    border-radius: 8px;\n    white-space: nowrap;\n}\n\n\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 24px;\n    background: var(--mj-brand-primary);\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-inverse);\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n}\n\n.btn-primary[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n\n\n.diff-summary[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 12px;\n    margin-bottom: 24px;\n}\n\n.diff-stat[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 16px 20px;\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.diff-stat[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.diff-stat-value[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.diff-stat-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n\n\n.change-added[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n    color: var(--mj-status-success);\n}\n\n.change-removed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n    color: var(--mj-status-error);\n}\n\n.change-modified[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n    color: var(--mj-status-warning);\n}\n\n.change-unchanged[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-muted) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n    color: var(--mj-text-muted);\n}\n\n\n\n.entity-groups[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.entity-group[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.entity-group-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 20px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.entity-group-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.entity-group-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.entity-group-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    width: 16px;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.entity-group-name[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.entity-group-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n}\n\n.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    border: none;\n}\n\n\n\n.entity-chevron[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    width: 14px;\n    text-align: center;\n    transition: transform 0.2s ease;\n}\n\n.entity-chevron.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n\n\n.entity-group-items[_ngcontent-%COMP%] {\n    border-top: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n}\n\n.diff-item-wrapper[_ngcontent-%COMP%] {\n    margin-bottom: 2px;\n}\n\n.diff-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 12px;\n    border-radius: 6px;\n}\n\n.diff-item.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.diff-item.clickable[_ngcontent-%COMP%]:hover {\n    filter: brightness(0.97);\n}\n\n.diff-item-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n    width: 20px;\n    text-align: center;\n}\n\n.diff-item-record[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    color: var(--mj-text-primary);\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-item-display-name[_ngcontent-%COMP%] {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n.diff-item-open-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 26px;\n    height: 26px;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.diff-item-open-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-item-type[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.diff-item-chevron[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    transition: transform 0.2s ease;\n}\n\n.diff-item-chevron.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n\n\n.diff-fields[_ngcontent-%COMP%] {\n    margin-left: 42px;\n    margin-bottom: 8px;\n    padding: 8px 0;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.diff-field[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 13px;\n}\n\n.diff-field.change-added[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 6%, transparent);\n}\n\n.diff-field.change-modified[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent);\n}\n\n.diff-field.change-removed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n}\n\n.diff-field-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 120px;\n    flex-shrink: 0;\n}\n\n.diff-field-values[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    flex: 1;\n}\n\n.diff-field-old[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    text-decoration: line-through;\n    opacity: 0.8;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-field-arrow[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n.diff-field-new[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-fields-empty[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    font-style: italic;\n}\n\n\n\n.diff-toolbar-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.15s ease;\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\n\n.empty-state[_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.empty-icon[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: var(--mj-text-muted);\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n    max-width: 400px;\n}\n\n\n\n.swap-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 50%;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.swap-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n    transform: rotate(180deg);\n}\n\n\n\n.diff-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.diff-search[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n    min-width: 200px;\n}\n\n.diff-search-icon[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n.diff-search-input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px 8px 36px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    box-sizing: border-box;\n}\n\n.diff-search-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.diff-filter-pills[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.filter-pill[_ngcontent-%COMP%] {\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 16px;\n    background: var(--mj-bg-surface-card);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.filter-pill[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.filter-pill.active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.filter-pill.change-added.active[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n    border-color: var(--mj-status-success);\n}\n\n.filter-pill.change-removed.active[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n    border-color: var(--mj-status-error);\n}\n\n.filter-pill.change-modified.active[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    border-color: var(--mj-status-warning);\n}\n\n.diff-sort-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 2px;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.toggle-btn-sm.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n@media (max-width: 768px) {\n    .diff-summary[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .label-selectors[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n}"], changeDetection: 0 });
 };
 VersionHistoryDiffResourceComponent = VersionHistoryDiffResourceComponent_1 = __decorate([
     RegisterClass(BaseResourceComponent, 'VersionHistoryDiffResource')
@@ -1155,7 +1152,7 @@ VersionHistoryDiffResourceComponent = VersionHistoryDiffResourceComponent_1 = __
 export { VersionHistoryDiffResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VersionHistoryDiffResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-version-history-diff-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"diff-container\">\n  @if (IsLoading) {\n    <mj-loading text=\"Loading diff viewer...\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <!-- Header -->\n    <div class=\"page-header\">\n      <div class=\"header-left\">\n        <h2 class=\"page-title\">Diff Viewer</h2>\n        <p class=\"page-subtitle\">Compare states between version labels or against current data</p>\n      </div>\n    </div>\n    <!-- Diff Configuration Panel -->\n    <div class=\"config-panel\">\n      <!-- Mode Selector -->\n      <div class=\"mode-selector\">\n        <button class=\"mode-btn\"\n          [class.active]=\"DiffMode === 'label-to-current'\"\n          (click)=\"OnDiffModeChange('label-to-current')\">\n          <i class=\"fa-solid fa-clock-rotate-left\"></i>\n          Label vs Current\n        </button>\n        <button class=\"mode-btn\"\n          [class.active]=\"DiffMode === 'label-to-label'\"\n          (click)=\"OnDiffModeChange('label-to-label')\">\n          <i class=\"fa-solid fa-code-compare\"></i>\n          Label vs Label\n        </button>\n      </div>\n      <!-- Label Selectors -->\n      <div class=\"label-selectors\">\n        <div class=\"selector-group\">\n          <label class=\"selector-label\">\n            {{DiffMode === 'label-to-current' ? 'Compare label' : 'From label'}}\n          </label>\n          <select class=\"selector-input\"\n            [(ngModel)]=\"FromLabelId\">\n            <option value=\"\">Select a label...</option>\n            @for (label of FilteredFromLabels; track label) {\n              <option\n                [value]=\"label.ID\">\n                {{FormatLabelOption(label)}}\n              </option>\n            }\n          </select>\n        </div>\n        @if (DiffMode === 'label-to-label') {\n          <div class=\"selector-arrow\">\n            <button class=\"swap-btn\" (click)=\"SwapLabels()\" title=\"Swap direction\">\n              <i class=\"fa-solid fa-arrows-rotate\"></i>\n            </button>\n          </div>\n        }\n        @if (DiffMode === 'label-to-current') {\n          <div class=\"selector-arrow\">\n            <i class=\"fa-solid fa-arrow-right\"></i>\n            <span class=\"current-state-badge\">Current State</span>\n          </div>\n        }\n        @if (DiffMode === 'label-to-label') {\n          <div class=\"selector-group\">\n            <label class=\"selector-label\">To label</label>\n            <select class=\"selector-input\"\n              [(ngModel)]=\"ToLabelId\">\n              <option value=\"\">Select a label...</option>\n              @for (label of FilteredToLabels; track label) {\n                <option\n                  [value]=\"label.ID\">\n                  {{FormatLabelOption(label)}}\n                </option>\n              }\n            </select>\n          </div>\n        }\n      </div>\n      <!-- Run Button -->\n      <button class=\"btn-primary\"\n        [disabled]=\"!CanRunDiff || IsDiffLoading\"\n        (click)=\"RunDiff()\">\n        @if (!IsDiffLoading) {\n          <i class=\"fa-solid fa-play\"></i>\n        }\n        @if (IsDiffLoading) {\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        }\n        <span>{{IsDiffLoading ? 'Comparing...' : 'Compare'}}</span>\n      </button>\n    </div>\n    <!-- Diff Results -->\n    @if (HasDiffResult) {\n      <!-- Summary Stats -->\n      <div class=\"diff-summary\">\n        <div class=\"diff-stat change-added\">\n          <i class=\"fa-solid fa-plus\"></i>\n          <span class=\"diff-stat-value\">{{TotalAdded}}</span>\n          <span class=\"diff-stat-label\">Added</span>\n        </div>\n        <div class=\"diff-stat change-removed\">\n          <i class=\"fa-solid fa-minus\"></i>\n          <span class=\"diff-stat-value\">{{TotalRemoved}}</span>\n          <span class=\"diff-stat-label\">Removed</span>\n        </div>\n        <div class=\"diff-stat change-modified\">\n          <i class=\"fa-solid fa-pen\"></i>\n          <span class=\"diff-stat-value\">{{TotalModified}}</span>\n          <span class=\"diff-stat-label\">Modified</span>\n        </div>\n        <div class=\"diff-stat change-unchanged\">\n          <i class=\"fa-solid fa-equals\"></i>\n          <span class=\"diff-stat-value\">{{TotalUnchanged}}</span>\n          <span class=\"diff-stat-label\">Unchanged</span>\n        </div>\n      </div>\n      <!-- Results toolbar -->\n      @if (EntityGroups.length > 0) {\n        <div class=\"diff-toolbar\">\n          <div class=\"diff-search\">\n            <i class=\"fa-solid fa-search diff-search-icon\"></i>\n            <input type=\"text\" class=\"diff-search-input\"\n              placeholder=\"Search by entity or record...\"\n              [ngModel]=\"DiffSearch\"\n              (ngModelChange)=\"OnDiffSearchChange($event)\" />\n          </div>\n          <div class=\"diff-filter-pills\">\n            <button class=\"filter-pill\" [class.active]=\"DiffFilterType === 'all'\"\n            (click)=\"OnDiffFilterChange('all')\">All</button>\n            <button class=\"filter-pill change-added\" [class.active]=\"DiffFilterType === 'added'\"\n            (click)=\"OnDiffFilterChange('added')\">Added</button>\n            <button class=\"filter-pill change-removed\" [class.active]=\"DiffFilterType === 'removed'\"\n            (click)=\"OnDiffFilterChange('removed')\">Removed</button>\n            <button class=\"filter-pill change-modified\" [class.active]=\"DiffFilterType === 'modified'\"\n            (click)=\"OnDiffFilterChange('modified')\">Modified</button>\n          </div>\n          <div class=\"diff-toolbar-right\">\n            <button class=\"toolbar-action-btn\" (click)=\"ExpandAllGroups()\" title=\"Expand all\">\n              <i class=\"fa-solid fa-angles-down\"></i>\n            </button>\n            <button class=\"toolbar-action-btn\" (click)=\"CollapseAllGroups()\" title=\"Collapse all\">\n              <i class=\"fa-solid fa-angles-up\"></i>\n            </button>\n            <div class=\"diff-sort-toggle\">\n              <button class=\"toggle-btn-sm\" [class.active]=\"DiffSortBy === 'name'\"\n                (click)=\"OnDiffSortChange('name')\" title=\"Sort by name\">\n                <i class=\"fa-solid\" [ngClass]=\"DiffSortBy === 'name' && DiffSortDir === 'desc' ? 'fa-arrow-up-z-a' : 'fa-arrow-down-a-z'\"></i>\n              </button>\n              <button class=\"toggle-btn-sm\" [class.active]=\"DiffSortBy === 'count'\"\n                (click)=\"OnDiffSortChange('count')\" title=\"Sort by count\">\n                <i class=\"fa-solid\" [ngClass]=\"DiffSortBy === 'count' && DiffSortDir === 'asc' ? 'fa-arrow-up-1-9' : 'fa-arrow-down-9-1'\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- Entity Groups -->\n      @if (FilteredEntityGroups.length > 0) {\n        <div class=\"entity-groups\">\n          @for (group of FilteredEntityGroups; track group) {\n            <div class=\"entity-group\">\n              <div class=\"entity-group-header\" (click)=\"ToggleEntityGroup(group)\">\n                <div class=\"entity-group-left\">\n                  <i class=\"fa-solid fa-chevron-right entity-chevron\"\n                    [class.expanded]=\"group.IsExpanded\">\n                  </i>\n                  <i [class]=\"group.EntityIcon\" class=\"entity-icon\"></i>\n                  <span class=\"entity-group-name\">{{group.EntityName}}</span>\n                </div>\n                <div class=\"entity-group-badges\">\n                  @if (group.AddedCount > 0) {\n                    <span class=\"badge change-added\">\n                      +{{group.AddedCount}}\n                    </span>\n                  }\n                  @if (group.RemovedCount > 0) {\n                    <span class=\"badge change-removed\">\n                      -{{group.RemovedCount}}\n                    </span>\n                  }\n                  @if (group.ModifiedCount > 0) {\n                    <span class=\"badge change-modified\">\n                      ~{{group.ModifiedCount}}\n                    </span>\n                  }\n                </div>\n              </div>\n              @if (group.IsExpanded) {\n                <div class=\"entity-group-items\">\n                  @for (item of group.Items; track item) {\n                    <div class=\"diff-item-wrapper\">\n                      <div class=\"diff-item\" [ngClass]=\"GetChangeTypeClass(item.ChangeType)\"\n                        [class.clickable]=\"item.ChangeType === 'Modified'\"\n                        (click)=\"ToggleItem(item)\">\n                        <i [class]=\"GetChangeTypeIcon(item.ChangeType)\" class=\"diff-item-icon\"></i>\n                        <span class=\"diff-item-record\">\n                          {{FormatRecordID(item.RecordID)}}\n                          @if (item.DisplayName) {\n                            <span class=\"diff-item-display-name\"> ({{item.DisplayName}})</span>\n                          }\n                        </span>\n                        <span class=\"diff-item-type\">{{item.ChangeType}}</span>\n                        <button class=\"diff-item-open-btn\" (click)=\"OnOpenRecord(item); $event.stopPropagation()\"\n                          title=\"Open record\">\n                          <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                        </button>\n                        @if (item.ChangeType === 'Modified') {\n                          <i class=\"fa-solid fa-chevron-right diff-item-chevron\"\n                            [class.expanded]=\"item.IsExpanded\"\n                          ></i>\n                        }\n                      </div>\n                      <!-- Field-level changes -->\n                      @if (item.IsExpanded && item.ChangeType === 'Modified') {\n                        <div class=\"diff-fields\">\n                          @if (item.IsLoadingFields) {\n                            <mj-loading text=\"Loading changes...\" size=\"small\"></mj-loading>\n                          }\n                          @if (!item.IsLoadingFields && item.FieldChanges.length > 0) {\n                            @for (field of item.FieldChanges; track field) {\n                              <div class=\"diff-field\"\n                                [ngClass]=\"GetChangeTypeClass(field.ChangeType)\">\n                                <span class=\"diff-field-name\">{{field.FieldName}}</span>\n                                <span class=\"diff-field-values\">\n                                  @if (field.OldValue) {\n                                    <span class=\"diff-field-old\">{{field.OldValue | slice:0:60}}</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:60}}</span>\n                                  }\n                                </span>\n                              </div>\n                            }\n                          }\n                          @if (!item.IsLoadingFields && item.FieldsLoaded && item.FieldChanges.length === 0) {\n                            <div class=\"diff-fields-empty\">\n                              <span>No field-level changes available</span>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      <!-- No changes -->\n      @if (FilteredEntityGroups.length === 0 && TotalChanges === 0) {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-check-circle empty-icon\" style=\"color: #10b981;\"></i>\n          <h3>No differences found</h3>\n          <p>The compared states are identical.</p>\n        </div>\n      }\n    }\n    <!-- No results yet -->\n    @if (!HasDiffResult && !IsDiffLoading) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-code-compare empty-icon\"></i>\n        <h3>Select labels to compare</h3>\n        <p>Choose a diff mode and select labels above, then click Compare.</p>\n      </div>\n    }\n  }\n</div>\n", styles: [".diff-container {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n}\n\n/* Header */\n.page-header {\n    margin-bottom: 24px;\n}\n\n.page-title {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n}\n\n.page-subtitle {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n/* Config Panel */\n.config-panel {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n}\n\n.mode-selector {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 20px;\n}\n\n.mode-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 18px;\n    background: var(--mj-bg-surface-sunken);\n    border: 2px solid transparent;\n    border-radius: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.mode-btn:hover {\n    background: var(--mj-border-default);\n}\n\n.mode-btn.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n/* Label Selectors */\n.label-selectors {\n    display: flex;\n    align-items: flex-end;\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.selector-group {\n    flex: 1;\n}\n\n.selector-label {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.selector-input {\n    width: 100%;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 8px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    outline: none;\n    box-sizing: border-box;\n}\n\n.selector-input:focus {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.selector-arrow {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding-bottom: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 16px;\n}\n\n.current-state-badge {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    padding: 2px 8px;\n    border-radius: 8px;\n    white-space: nowrap;\n}\n\n/* Run Button */\n.btn-primary {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 24px;\n    background: var(--mj-brand-primary);\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-inverse);\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-primary:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n}\n\n.btn-primary:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* Diff Summary */\n.diff-summary {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 12px;\n    margin-bottom: 24px;\n}\n\n.diff-stat {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 16px 20px;\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.diff-stat i {\n    font-size: 16px;\n}\n\n.diff-stat-value {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.diff-stat-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n/* Change type colors */\n.change-added {\n    background: color-mix(in srgb, var(--mj-status-success) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n    color: var(--mj-status-success);\n}\n\n.change-removed {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n    color: var(--mj-status-error);\n}\n\n.change-modified {\n    background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n    color: var(--mj-status-warning);\n}\n\n.change-unchanged {\n    background: color-mix(in srgb, var(--mj-text-muted) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n    color: var(--mj-text-muted);\n}\n\n/* Entity Groups */\n.entity-groups {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.entity-group {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.entity-group-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 20px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.entity-group-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.entity-group-left {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.entity-group-left i:first-child {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    width: 16px;\n}\n\n.entity-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.entity-group-name {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.entity-group-badges {\n    display: flex;\n    gap: 6px;\n}\n\n.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    border: none;\n}\n\n/* Entity chevron animation */\n.entity-chevron {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    width: 14px;\n    text-align: center;\n    transition: transform 0.2s ease;\n}\n\n.entity-chevron.expanded {\n    transform: rotate(90deg);\n}\n\n/* Entity group items */\n.entity-group-items {\n    border-top: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n}\n\n.diff-item-wrapper {\n    margin-bottom: 2px;\n}\n\n.diff-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 12px;\n    border-radius: 6px;\n}\n\n.diff-item.clickable {\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.diff-item.clickable:hover {\n    filter: brightness(0.97);\n}\n\n.diff-item-icon {\n    font-size: 12px;\n    width: 20px;\n    text-align: center;\n}\n\n.diff-item-record {\n    font-size: 13px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    color: var(--mj-text-primary);\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-item-display-name {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n.diff-item-open-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 26px;\n    height: 26px;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.diff-item-open-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-item-type {\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.diff-item-chevron {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    transition: transform 0.2s ease;\n}\n\n.diff-item-chevron.expanded {\n    transform: rotate(90deg);\n}\n\n/* Field-level diff changes */\n.diff-fields {\n    margin-left: 42px;\n    margin-bottom: 8px;\n    padding: 8px 0;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.diff-field {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 13px;\n}\n\n.diff-field.change-added {\n    background: color-mix(in srgb, var(--mj-status-success) 6%, transparent);\n}\n\n.diff-field.change-modified {\n    background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent);\n}\n\n.diff-field.change-removed {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n}\n\n.diff-field-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 120px;\n    flex-shrink: 0;\n}\n\n.diff-field-values {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    flex: 1;\n}\n\n.diff-field-old {\n    color: var(--mj-status-error);\n    text-decoration: line-through;\n    opacity: 0.8;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-field-arrow {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n.diff-field-new {\n    color: var(--mj-status-success);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-fields-empty {\n    padding: 6px 10px;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    font-style: italic;\n}\n\n/* Toolbar actions */\n.diff-toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.toolbar-action-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.15s ease;\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/* Empty State */\n.empty-state {\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.empty-icon {\n    font-size: 48px;\n    color: var(--mj-text-muted);\n    margin-bottom: 16px;\n}\n\n.empty-state h3 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state p {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n    max-width: 400px;\n}\n\n/* Swap Button */\n.swap-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 50%;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.swap-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n    transform: rotate(180deg);\n}\n\n/* Diff Results Toolbar */\n.diff-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.diff-search {\n    position: relative;\n    flex: 1;\n    min-width: 200px;\n}\n\n.diff-search-icon {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n.diff-search-input {\n    width: 100%;\n    padding: 8px 12px 8px 36px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    box-sizing: border-box;\n}\n\n.diff-search-input:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.diff-filter-pills {\n    display: flex;\n    gap: 4px;\n}\n\n.filter-pill {\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 16px;\n    background: var(--mj-bg-surface-card);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.filter-pill:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.filter-pill.active {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.filter-pill.change-added.active {\n    background: var(--mj-status-success);\n    border-color: var(--mj-status-success);\n}\n\n.filter-pill.change-removed.active {\n    background: var(--mj-status-error);\n    border-color: var(--mj-status-error);\n}\n\n.filter-pill.change-modified.active {\n    background: var(--mj-status-warning);\n    border-color: var(--mj-status-warning);\n}\n\n.diff-sort-toggle {\n    display: flex;\n    gap: 2px;\n}\n\n.toggle-btn-sm {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.toggle-btn-sm:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.toggle-btn-sm.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n@media (max-width: 768px) {\n    .diff-summary {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .label-selectors {\n        flex-direction: column;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-version-history-diff-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Diff Viewer\"\n    Icon=\"fa-solid fa-code-compare\"\n    Subtitle=\"Compare states between version labels or against current data\">\n  </mj-page-header>\n\n  <mj-page-body>\n  @if (IsLoading) {\n    <mj-loading text=\"Loading diff viewer...\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <!-- Diff Configuration Panel -->\n    <div class=\"config-panel\">\n      <!-- Mode Selector -->\n      <div class=\"mode-selector\">\n        <button class=\"mode-btn\"\n          [class.active]=\"DiffMode === 'label-to-current'\"\n          (click)=\"OnDiffModeChange('label-to-current')\">\n          <i class=\"fa-solid fa-clock-rotate-left\"></i>\n          Label vs Current\n        </button>\n        <button class=\"mode-btn\"\n          [class.active]=\"DiffMode === 'label-to-label'\"\n          (click)=\"OnDiffModeChange('label-to-label')\">\n          <i class=\"fa-solid fa-code-compare\"></i>\n          Label vs Label\n        </button>\n      </div>\n      <!-- Label Selectors -->\n      <div class=\"label-selectors\">\n        <div class=\"selector-group\">\n          <label class=\"selector-label\">\n            {{DiffMode === 'label-to-current' ? 'Compare label' : 'From label'}}\n          </label>\n          <select class=\"selector-input\"\n            [(ngModel)]=\"FromLabelId\">\n            <option value=\"\">Select a label...</option>\n            @for (label of FilteredFromLabels; track label) {\n              <option\n                [value]=\"label.ID\">\n                {{FormatLabelOption(label)}}\n              </option>\n            }\n          </select>\n        </div>\n        @if (DiffMode === 'label-to-label') {\n          <div class=\"selector-arrow\">\n            <button class=\"swap-btn\" (click)=\"SwapLabels()\" title=\"Swap direction\">\n              <i class=\"fa-solid fa-arrows-rotate\"></i>\n            </button>\n          </div>\n        }\n        @if (DiffMode === 'label-to-current') {\n          <div class=\"selector-arrow\">\n            <i class=\"fa-solid fa-arrow-right\"></i>\n            <span class=\"current-state-badge\">Current State</span>\n          </div>\n        }\n        @if (DiffMode === 'label-to-label') {\n          <div class=\"selector-group\">\n            <label class=\"selector-label\">To label</label>\n            <select class=\"selector-input\"\n              [(ngModel)]=\"ToLabelId\">\n              <option value=\"\">Select a label...</option>\n              @for (label of FilteredToLabels; track label) {\n                <option\n                  [value]=\"label.ID\">\n                  {{FormatLabelOption(label)}}\n                </option>\n              }\n            </select>\n          </div>\n        }\n      </div>\n      <!-- Run Button -->\n      <button class=\"btn-primary\"\n        [disabled]=\"!CanRunDiff || IsDiffLoading\"\n        (click)=\"RunDiff()\">\n        @if (!IsDiffLoading) {\n          <i class=\"fa-solid fa-play\"></i>\n        }\n        @if (IsDiffLoading) {\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        }\n        <span>{{IsDiffLoading ? 'Comparing...' : 'Compare'}}</span>\n      </button>\n    </div>\n    <!-- Diff Results -->\n    @if (HasDiffResult) {\n      <!-- Summary Stats -->\n      <div class=\"diff-summary\">\n        <div class=\"diff-stat change-added\">\n          <i class=\"fa-solid fa-plus\"></i>\n          <span class=\"diff-stat-value\">{{TotalAdded}}</span>\n          <span class=\"diff-stat-label\">Added</span>\n        </div>\n        <div class=\"diff-stat change-removed\">\n          <i class=\"fa-solid fa-minus\"></i>\n          <span class=\"diff-stat-value\">{{TotalRemoved}}</span>\n          <span class=\"diff-stat-label\">Removed</span>\n        </div>\n        <div class=\"diff-stat change-modified\">\n          <i class=\"fa-solid fa-pen\"></i>\n          <span class=\"diff-stat-value\">{{TotalModified}}</span>\n          <span class=\"diff-stat-label\">Modified</span>\n        </div>\n        <div class=\"diff-stat change-unchanged\">\n          <i class=\"fa-solid fa-equals\"></i>\n          <span class=\"diff-stat-value\">{{TotalUnchanged}}</span>\n          <span class=\"diff-stat-label\">Unchanged</span>\n        </div>\n      </div>\n      <!-- Results toolbar -->\n      @if (EntityGroups.length > 0) {\n        <div class=\"diff-toolbar\">\n          <div class=\"diff-search\">\n            <i class=\"fa-solid fa-search diff-search-icon\"></i>\n            <input type=\"text\" class=\"diff-search-input\"\n              placeholder=\"Search by entity or record...\"\n              [ngModel]=\"DiffSearch\"\n              (ngModelChange)=\"OnDiffSearchChange($event)\" />\n          </div>\n          <div class=\"diff-filter-pills\">\n            <button class=\"filter-pill\" [class.active]=\"DiffFilterType === 'all'\"\n            (click)=\"OnDiffFilterChange('all')\">All</button>\n            <button class=\"filter-pill change-added\" [class.active]=\"DiffFilterType === 'added'\"\n            (click)=\"OnDiffFilterChange('added')\">Added</button>\n            <button class=\"filter-pill change-removed\" [class.active]=\"DiffFilterType === 'removed'\"\n            (click)=\"OnDiffFilterChange('removed')\">Removed</button>\n            <button class=\"filter-pill change-modified\" [class.active]=\"DiffFilterType === 'modified'\"\n            (click)=\"OnDiffFilterChange('modified')\">Modified</button>\n          </div>\n          <div class=\"diff-toolbar-right\">\n            <button class=\"toolbar-action-btn\" (click)=\"ExpandAllGroups()\" title=\"Expand all\">\n              <i class=\"fa-solid fa-angles-down\"></i>\n            </button>\n            <button class=\"toolbar-action-btn\" (click)=\"CollapseAllGroups()\" title=\"Collapse all\">\n              <i class=\"fa-solid fa-angles-up\"></i>\n            </button>\n            <div class=\"diff-sort-toggle\">\n              <button class=\"toggle-btn-sm\" [class.active]=\"DiffSortBy === 'name'\"\n                (click)=\"OnDiffSortChange('name')\" title=\"Sort by name\">\n                <i class=\"fa-solid\" [ngClass]=\"DiffSortBy === 'name' && DiffSortDir === 'desc' ? 'fa-arrow-up-z-a' : 'fa-arrow-down-a-z'\"></i>\n              </button>\n              <button class=\"toggle-btn-sm\" [class.active]=\"DiffSortBy === 'count'\"\n                (click)=\"OnDiffSortChange('count')\" title=\"Sort by count\">\n                <i class=\"fa-solid\" [ngClass]=\"DiffSortBy === 'count' && DiffSortDir === 'asc' ? 'fa-arrow-up-1-9' : 'fa-arrow-down-9-1'\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- Entity Groups -->\n      @if (FilteredEntityGroups.length > 0) {\n        <div class=\"entity-groups\">\n          @for (group of FilteredEntityGroups; track group) {\n            <div class=\"entity-group\">\n              <div class=\"entity-group-header\" (click)=\"ToggleEntityGroup(group)\">\n                <div class=\"entity-group-left\">\n                  <i class=\"fa-solid fa-chevron-right entity-chevron\"\n                    [class.expanded]=\"group.IsExpanded\">\n                  </i>\n                  <i [class]=\"group.EntityIcon\" class=\"entity-icon\"></i>\n                  <span class=\"entity-group-name\">{{group.EntityName}}</span>\n                </div>\n                <div class=\"entity-group-badges\">\n                  @if (group.AddedCount > 0) {\n                    <span class=\"badge change-added\">\n                      +{{group.AddedCount}}\n                    </span>\n                  }\n                  @if (group.RemovedCount > 0) {\n                    <span class=\"badge change-removed\">\n                      -{{group.RemovedCount}}\n                    </span>\n                  }\n                  @if (group.ModifiedCount > 0) {\n                    <span class=\"badge change-modified\">\n                      ~{{group.ModifiedCount}}\n                    </span>\n                  }\n                </div>\n              </div>\n              @if (group.IsExpanded) {\n                <div class=\"entity-group-items\">\n                  @for (item of group.Items; track item) {\n                    <div class=\"diff-item-wrapper\">\n                      <div class=\"diff-item\" [ngClass]=\"GetChangeTypeClass(item.ChangeType)\"\n                        [class.clickable]=\"item.ChangeType === 'Modified'\"\n                        (click)=\"ToggleItem(item)\">\n                        <i [class]=\"GetChangeTypeIcon(item.ChangeType)\" class=\"diff-item-icon\"></i>\n                        <span class=\"diff-item-record\">\n                          {{FormatRecordID(item.RecordID)}}\n                          @if (item.DisplayName) {\n                            <span class=\"diff-item-display-name\"> ({{item.DisplayName}})</span>\n                          }\n                        </span>\n                        <span class=\"diff-item-type\">{{item.ChangeType}}</span>\n                        <button class=\"diff-item-open-btn\" (click)=\"OnOpenRecord(item); $event.stopPropagation()\"\n                          title=\"Open record\">\n                          <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                        </button>\n                        @if (item.ChangeType === 'Modified') {\n                          <i class=\"fa-solid fa-chevron-right diff-item-chevron\"\n                            [class.expanded]=\"item.IsExpanded\"\n                          ></i>\n                        }\n                      </div>\n                      <!-- Field-level changes -->\n                      @if (item.IsExpanded && item.ChangeType === 'Modified') {\n                        <div class=\"diff-fields\">\n                          @if (item.IsLoadingFields) {\n                            <mj-loading text=\"Loading changes...\" size=\"small\"></mj-loading>\n                          }\n                          @if (!item.IsLoadingFields && item.FieldChanges.length > 0) {\n                            @for (field of item.FieldChanges; track field) {\n                              <div class=\"diff-field\"\n                                [ngClass]=\"GetChangeTypeClass(field.ChangeType)\">\n                                <span class=\"diff-field-name\">{{field.FieldName}}</span>\n                                <span class=\"diff-field-values\">\n                                  @if (field.OldValue) {\n                                    <span class=\"diff-field-old\">{{field.OldValue | slice:0:60}}</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:60}}</span>\n                                  }\n                                </span>\n                              </div>\n                            }\n                          }\n                          @if (!item.IsLoadingFields && item.FieldsLoaded && item.FieldChanges.length === 0) {\n                            <div class=\"diff-fields-empty\">\n                              <span>No field-level changes available</span>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      <!-- No changes -->\n      @if (FilteredEntityGroups.length === 0 && TotalChanges === 0) {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-check-circle empty-icon\" style=\"color: #10b981;\"></i>\n          <h3>No differences found</h3>\n          <p>The compared states are identical.</p>\n        </div>\n      }\n    }\n    <!-- No results yet -->\n    @if (!HasDiffResult && !IsDiffLoading) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-code-compare empty-icon\"></i>\n        <h3>Select labels to compare</h3>\n        <p>Choose a diff mode and select labels above, then click Compare.</p>\n      </div>\n    }\n  }\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* Config Panel */\n.config-panel {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n}\n\n.mode-selector {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 20px;\n}\n\n.mode-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 18px;\n    background: var(--mj-bg-surface-sunken);\n    border: 2px solid transparent;\n    border-radius: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.mode-btn:hover {\n    background: var(--mj-border-default);\n}\n\n.mode-btn.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n/* Label Selectors */\n.label-selectors {\n    display: flex;\n    align-items: flex-end;\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.selector-group {\n    flex: 1;\n}\n\n.selector-label {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.selector-input {\n    width: 100%;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 8px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    outline: none;\n    box-sizing: border-box;\n}\n\n.selector-input:focus {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.selector-arrow {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding-bottom: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 16px;\n}\n\n.current-state-badge {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    padding: 2px 8px;\n    border-radius: 8px;\n    white-space: nowrap;\n}\n\n/* Run Button */\n.btn-primary {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 24px;\n    background: var(--mj-brand-primary);\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-inverse);\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-primary:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover);\n}\n\n.btn-primary:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* Diff Summary */\n.diff-summary {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 12px;\n    margin-bottom: 24px;\n}\n\n.diff-stat {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 16px 20px;\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.diff-stat i {\n    font-size: 16px;\n}\n\n.diff-stat-value {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.diff-stat-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n/* Change type colors */\n.change-added {\n    background: color-mix(in srgb, var(--mj-status-success) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n    color: var(--mj-status-success);\n}\n\n.change-removed {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n    color: var(--mj-status-error);\n}\n\n.change-modified {\n    background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n    color: var(--mj-status-warning);\n}\n\n.change-unchanged {\n    background: color-mix(in srgb, var(--mj-text-muted) 6%, transparent);\n    border-color: color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n    color: var(--mj-text-muted);\n}\n\n/* Entity Groups */\n.entity-groups {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.entity-group {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.entity-group-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 20px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.entity-group-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.entity-group-left {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.entity-group-left i:first-child {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    width: 16px;\n}\n\n.entity-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.entity-group-name {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.entity-group-badges {\n    display: flex;\n    gap: 6px;\n}\n\n.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    border: none;\n}\n\n/* Entity chevron animation */\n.entity-chevron {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    width: 14px;\n    text-align: center;\n    transition: transform 0.2s ease;\n}\n\n.entity-chevron.expanded {\n    transform: rotate(90deg);\n}\n\n/* Entity group items */\n.entity-group-items {\n    border-top: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n}\n\n.diff-item-wrapper {\n    margin-bottom: 2px;\n}\n\n.diff-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 12px;\n    border-radius: 6px;\n}\n\n.diff-item.clickable {\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.diff-item.clickable:hover {\n    filter: brightness(0.97);\n}\n\n.diff-item-icon {\n    font-size: 12px;\n    width: 20px;\n    text-align: center;\n}\n\n.diff-item-record {\n    font-size: 13px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    color: var(--mj-text-primary);\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-item-display-name {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n.diff-item-open-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 26px;\n    height: 26px;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.diff-item-open-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-item-type {\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.diff-item-chevron {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    transition: transform 0.2s ease;\n}\n\n.diff-item-chevron.expanded {\n    transform: rotate(90deg);\n}\n\n/* Field-level diff changes */\n.diff-fields {\n    margin-left: 42px;\n    margin-bottom: 8px;\n    padding: 8px 0;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.diff-field {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 6px 10px;\n    border-radius: 6px;\n    font-size: 13px;\n}\n\n.diff-field.change-added {\n    background: color-mix(in srgb, var(--mj-status-success) 6%, transparent);\n}\n\n.diff-field.change-modified {\n    background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent);\n}\n\n.diff-field.change-removed {\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n}\n\n.diff-field-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 120px;\n    flex-shrink: 0;\n}\n\n.diff-field-values {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    flex: 1;\n}\n\n.diff-field-old {\n    color: var(--mj-status-error);\n    text-decoration: line-through;\n    opacity: 0.8;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-field-arrow {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n.diff-field-new {\n    color: var(--mj-status-success);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.diff-fields-empty {\n    padding: 6px 10px;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    font-style: italic;\n}\n\n/* Toolbar actions */\n.diff-toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.toolbar-action-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.15s ease;\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/* Empty State */\n.empty-state {\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.empty-icon {\n    font-size: 48px;\n    color: var(--mj-text-muted);\n    margin-bottom: 16px;\n}\n\n.empty-state h3 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state p {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n    max-width: 400px;\n}\n\n/* Swap Button */\n.swap-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 50%;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.swap-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n    transform: rotate(180deg);\n}\n\n/* Diff Results Toolbar */\n.diff-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.diff-search {\n    position: relative;\n    flex: 1;\n    min-width: 200px;\n}\n\n.diff-search-icon {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n.diff-search-input {\n    width: 100%;\n    padding: 8px 12px 8px 36px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    box-sizing: border-box;\n}\n\n.diff-search-input:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.diff-filter-pills {\n    display: flex;\n    gap: 4px;\n}\n\n.filter-pill {\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 16px;\n    background: var(--mj-bg-surface-card);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.filter-pill:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.filter-pill.active {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.filter-pill.change-added.active {\n    background: var(--mj-status-success);\n    border-color: var(--mj-status-success);\n}\n\n.filter-pill.change-removed.active {\n    background: var(--mj-status-error);\n    border-color: var(--mj-status-error);\n}\n\n.filter-pill.change-modified.active {\n    background: var(--mj-status-warning);\n    border-color: var(--mj-status-warning);\n}\n\n.diff-sort-toggle {\n    display: flex;\n    gap: 2px;\n}\n\n.toggle-btn-sm {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.toggle-btn-sm:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.toggle-btn-sm.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n@media (max-width: 768px) {\n    .diff-summary {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .label-selectors {\n        flex-direction: column;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VersionHistoryDiffResourceComponent, { className: "VersionHistoryDiffResourceComponent", filePath: "src/VersionHistory/components/diff-resource.component.ts", lineNumber: 59 }); })();
 //# sourceMappingURL=diff-resource.component.js.map