@memberjunction/ng-dashboards 3.4.0 → 4.1.0

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

@@ -0,0 +1,1162 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var VersionHistoryDiffResourceComponent_1;
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { RunView, Metadata, CompositeKey, EntityRecordNameInput } from '@memberjunction/core';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@memberjunction/ng-shared-generic";
+function VersionHistoryDiffResourceComponent_Conditional_1_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);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const label_r3 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", label_r3.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.FormatLabelOption(label_r3), " ");
+} }
+function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_23_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.ɵɵ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);
+    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);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const label_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("value", label_r6.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.FormatLabelOption(label_r6), " ");
+} }
+function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "label", 13);
+    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.ɵɵ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.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.ToLabelId);
+    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_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 20);
+} }
+function VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngModel", ctx_r1.DiffSearch);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.DiffFilterType === "all");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.DiffFilterType === "added");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.DiffFilterType === "removed");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.DiffFilterType === "modified");
+    i0.ɵɵadvance(8);
+    i0.ɵɵclassProp("active", ctx_r1.DiffSortBy === "name");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.DiffSortBy === "name" && ctx_r1.DiffSortDir === "desc" ? "fa-arrow-up-z-a" : "fa-arrow-down-a-z");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r1.DiffSortBy === "count");
+    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);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r9 = i0.ɵɵnextContext().$implicit;
+    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);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r9 = i0.ɵɵnextContext().$implicit;
+    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);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r9 = i0.ɵɵnextContext().$implicit;
+    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);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r11 = i0.ɵɵnextContext().$implicit;
+    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);
+} 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_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);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "slice");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r12 = i0.ɵɵnextContext().$implicit;
+    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_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);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "slice");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r12 = i0.ɵɵnextContext().$implicit;
+    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);
+    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.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r12 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(9);
+    i0.ɵɵproperty("ngClass", ctx_r1.GetChangeTypeClass(field_r12.ChangeType));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(field_r12.FieldName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(field_r12.OldValue ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r12.OldValue && field_r12.NewValue ? 5 : -1);
+    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);
+} 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");
+    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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r11.IsLoadingFields ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!item_r11.IsLoadingFields && item_r11.FieldChanges.length > 0 ? 2 : -1);
+    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) {
+    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.ɵɵ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.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 72);
+    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.ɵɵ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.ɵɵ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.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r11 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(6);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("clickable", item_r11.ChangeType === "Modified");
+    i0.ɵɵproperty("ngClass", ctx_r1.GetChangeTypeClass(item_r11.ChangeType));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.GetChangeTypeIcon(item_r11.ChangeType));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.FormatRecordID(item_r11.RecordID), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r11.DisplayName ? 5 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r11.ChangeType);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(item_r11.ChangeType === "Modified" ? 10 : -1);
+    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);
+    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) {
+    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.ɵɵ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.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(11, VersionHistoryDiffResourceComponent_Conditional_2_Conditional_31_Conditional_26_For_2_Conditional_11_Template, 3, 0, "div", 66);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r9 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("expanded", group_r9.IsExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(group_r9.EntityIcon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r9.EntityName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(group_r9.AddedCount > 0 ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(group_r9.RemovedCount > 0 ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(group_r9.ModifiedCount > 0 ? 10 : -1);
+    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);
+    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);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "No differences found");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    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);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 30);
+    i0.ɵɵtext(6, "Added");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 31);
+    i0.ɵɵelement(8, "i", 32);
+    i0.ɵɵelementStart(9, "span", 29);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "span", 30);
+    i0.ɵɵtext(12, "Removed");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 33);
+    i0.ɵɵelement(14, "i", 34);
+    i0.ɵɵelementStart(15, "span", 29);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "span", 30);
+    i0.ɵɵtext(18, "Modified");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "div", 35);
+    i0.ɵɵelement(20, "i", 36);
+    i0.ɵɵelementStart(21, "span", 29);
+    i0.ɵɵtext(22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "span", 30);
+    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);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.TotalAdded);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.TotalRemoved);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.TotalModified);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.TotalUnchanged);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.EntityGroups.length > 0 ? 25 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.FilteredEntityGroups.length > 0 ? 26 : -1);
+    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);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "Select labels to compare");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    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) {
+    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.ɵɵ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.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 11)(15, "div", 12)(16, "label", 13);
+    i0.ɵɵtext(17);
+    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.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(21, VersionHistoryDiffResourceComponent_Conditional_2_For_22_Template, 2, 2, "option", 16, 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.ɵɵ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.ɵɵ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);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    i0.ɵɵclassProp("active", ctx_r1.DiffMode === "label-to-current");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.DiffMode === "label-to-label");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.DiffMode === "label-to-current" ? "Compare label" : "From label", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.FromLabelId);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.FilteredFromLabels);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.DiffMode === "label-to-label" ? 23 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.DiffMode === "label-to-current" ? 24 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.DiffMode === "label-to-label" ? 25 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", !ctx_r1.CanRunDiff || ctx_r1.IsDiffLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.IsDiffLoading ? 27 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsDiffLoading ? 28 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.IsDiffLoading ? "Comparing..." : "Compare");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.HasDiffResult ? 31 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.HasDiffResult && !ctx_r1.IsDiffLoading ? 32 : -1);
+} }
+let VersionHistoryDiffResourceComponent = class VersionHistoryDiffResourceComponent extends BaseResourceComponent {
+    static { VersionHistoryDiffResourceComponent_1 = this; }
+    cdr;
+    navigationService;
+    IsLoading = true;
+    IsDiffLoading = false;
+    HasDiffResult = false;
+    // Label selection
+    AvailableLabels = [];
+    FromLabelId = '';
+    ToLabelId = '';
+    DiffMode = 'label-to-current';
+    // Diff results
+    EntityGroups = [];
+    FilteredEntityGroups = [];
+    TotalAdded = 0;
+    TotalRemoved = 0;
+    TotalModified = 0;
+    TotalUnchanged = 0;
+    // Diff result filtering/sorting
+    DiffSortBy = 'count';
+    DiffSortDir = 'desc';
+    DiffFilterType = 'all';
+    DiffSearch = '';
+    // UI state
+    ExpandedEntities = new Set();
+    static PREFS_KEY = 'VersionHistory.Diff.UserPreferences';
+    preferencesLoaded = false;
+    destroy$ = new Subject();
+    metadata = new Metadata();
+    constructor(cdr, navigationService) {
+        super();
+        this.cdr = cdr;
+        this.navigationService = navigationService;
+    }
+    ngOnInit() {
+        this.loadUserPreferences();
+        this.LoadLabels();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    async GetResourceDisplayName(data) {
+        return 'Diff Viewer';
+    }
+    async GetResourceIconClass(data) {
+        return 'fa-solid fa-code-compare';
+    }
+    async LoadLabels() {
+        try {
+            this.IsLoading = true;
+            this.cdr.markForCheck();
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: Version Labels',
+                ExtraFilter: "Status = 'Active'",
+                OrderBy: '__mj_CreatedAt DESC',
+                MaxRows: 200,
+                ResultType: 'simple'
+            });
+            if (result.Success) {
+                this.AvailableLabels = result.Results;
+            }
+        }
+        catch (error) {
+            console.error('Error loading labels for diff:', error);
+        }
+        finally {
+            this.IsLoading = false;
+            this.NotifyLoadComplete();
+            this.cdr.markForCheck();
+        }
+    }
+    OnDiffModeChange(mode) {
+        this.DiffMode = mode;
+        this.HasDiffResult = false;
+        this.EntityGroups = [];
+        this.cdr.markForCheck();
+        this.persistPreferences();
+    }
+    loadUserPreferences() {
+        try {
+            const raw = UserInfoEngine.Instance.GetSetting(VersionHistoryDiffResourceComponent_1.PREFS_KEY);
+            if (raw) {
+                const prefs = JSON.parse(raw);
+                if (prefs.DiffMode === 'label-to-label' || prefs.DiffMode === 'label-to-current') {
+                    this.DiffMode = prefs.DiffMode;
+                }
+            }
+        }
+        catch (error) {
+            console.error('Error loading diff preferences:', error);
+            this.DiffMode = 'label-to-current';
+        }
+        this.preferencesLoaded = true;
+    }
+    persistPreferences() {
+        if (!this.preferencesLoaded)
+            return;
+        const prefs = {
+            DiffMode: this.DiffMode
+        };
+        UserInfoEngine.Instance.SetSettingDebounced(VersionHistoryDiffResourceComponent_1.PREFS_KEY, JSON.stringify(prefs));
+    }
+    async RunDiff() {
+        if (!this.FromLabelId)
+            return;
+        if (this.DiffMode === 'label-to-label' && !this.ToLabelId)
+            return;
+        try {
+            this.IsDiffLoading = true;
+            this.HasDiffResult = false;
+            this.cdr.markForCheck();
+            // Load label items for comparison
+            const rv = new RunView();
+            const fromItems = await this.loadLabelItems(rv, this.FromLabelId);
+            if (this.DiffMode === 'label-to-label') {
+                const toItems = await this.loadLabelItems(rv, this.ToLabelId);
+                this.computeDiff(fromItems, toItems);
+            }
+            else {
+                // Label-to-current: compare label state against live data
+                await this.computeDiffToCurrentState(rv, fromItems);
+            }
+            this.HasDiffResult = true;
+        }
+        catch (error) {
+            console.error('Error running diff:', error);
+        }
+        finally {
+            this.IsDiffLoading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    async loadLabelItems(rv, labelId) {
+        const result = await rv.RunView({
+            EntityName: 'MJ: Version Label Items',
+            ExtraFilter: `VersionLabelID = '${labelId}'`,
+            ResultType: 'simple'
+        });
+        return result.Success ? result.Results : [];
+    }
+    computeDiff(fromItems, toItems) {
+        const entityMap = new Map();
+        // Build lookup maps keyed by EntityID + RecordID
+        const fromMap = this.buildItemKeyMap(fromItems);
+        const toMap = this.buildItemKeyMap(toItems);
+        // Items in 'to' but not in 'from' = Added
+        for (const [key, item] of toMap) {
+            const entityName = this.resolveEntityName(item.EntityID ?? '');
+            if (!entityMap.has(entityName))
+                entityMap.set(entityName, []);
+            if (!fromMap.has(key)) {
+                entityMap.get(entityName).push({
+                    EntityName: entityName,
+                    EntityID: item.EntityID ?? '',
+                    RecordID: item.RecordID ?? '',
+                    DisplayName: '',
+                    ChangeType: 'Added',
+                    FieldChanges: [],
+                    IsExpanded: false,
+                    IsLoadingFields: false,
+                    FieldsLoaded: false,
+                    FromRecordChangeID: '',
+                    ToRecordChangeID: item.RecordChangeID ?? ''
+                });
+            }
+        }
+        // Items in 'from' but not in 'to' = Removed
+        for (const [key, item] of fromMap) {
+            const entityName = this.resolveEntityName(item.EntityID ?? '');
+            if (!entityMap.has(entityName))
+                entityMap.set(entityName, []);
+            if (!toMap.has(key)) {
+                entityMap.get(entityName).push({
+                    EntityName: entityName,
+                    EntityID: item.EntityID ?? '',
+                    RecordID: item.RecordID ?? '',
+                    DisplayName: '',
+                    ChangeType: 'Removed',
+                    FieldChanges: [],
+                    IsExpanded: false,
+                    IsLoadingFields: false,
+                    FieldsLoaded: false,
+                    FromRecordChangeID: item.RecordChangeID ?? '',
+                    ToRecordChangeID: ''
+                });
+            }
+            else {
+                // Both exist - check if RecordChangeID differs (= Modified)
+                const toItem = toMap.get(key);
+                const changeType = item.RecordChangeID !== toItem.RecordChangeID
+                    ? 'Modified' : 'Unchanged';
+                entityMap.get(entityName).push({
+                    EntityName: entityName,
+                    EntityID: item.EntityID ?? '',
+                    RecordID: item.RecordID ?? '',
+                    DisplayName: '',
+                    ChangeType: changeType,
+                    FieldChanges: [],
+                    IsExpanded: false,
+                    IsLoadingFields: false,
+                    FieldsLoaded: false,
+                    FromRecordChangeID: item.RecordChangeID ?? '',
+                    ToRecordChangeID: toItem.RecordChangeID ?? ''
+                });
+            }
+        }
+        this.buildEntityGroups(entityMap);
+    }
+    async computeDiffToCurrentState(rv, labelItems) {
+        // For label-to-current, compare snapshot RecordChangeIDs against
+        // the latest RecordChange for each entity/record combination.
+        const entityMap = new Map();
+        for (const item of labelItems) {
+            const entityId = item.EntityID ?? '';
+            const entityName = this.resolveEntityName(entityId);
+            if (!entityMap.has(entityName))
+                entityMap.set(entityName, []);
+            // Load the latest RecordChange for this record
+            const latestChangeId = await this.loadLatestRecordChange(rv, entityId, item.RecordID ?? '');
+            const isModified = latestChangeId != null && latestChangeId !== item.RecordChangeID;
+            entityMap.get(entityName).push({
+                EntityName: entityName,
+                EntityID: entityId,
+                RecordID: item.RecordID ?? '',
+                DisplayName: '',
+                ChangeType: isModified ? 'Modified' : 'Unchanged',
+                FieldChanges: [],
+                IsExpanded: false,
+                IsLoadingFields: false,
+                FieldsLoaded: false,
+                FromRecordChangeID: item.RecordChangeID ?? '',
+                ToRecordChangeID: latestChangeId ?? ''
+            });
+        }
+        this.buildEntityGroups(entityMap);
+    }
+    buildItemKeyMap(items) {
+        const map = new Map();
+        for (const item of items) {
+            const key = `${item.EntityID ?? ''}|${item.RecordID ?? ''}`;
+            map.set(key, item);
+        }
+        return map;
+    }
+    buildEntityGroups(entityMap) {
+        this.TotalAdded = 0;
+        this.TotalRemoved = 0;
+        this.TotalModified = 0;
+        this.TotalUnchanged = 0;
+        this.EntityGroups = Array.from(entityMap.entries()).map(([entityName, items]) => {
+            const added = items.filter(i => i.ChangeType === 'Added').length;
+            const removed = items.filter(i => i.ChangeType === 'Removed').length;
+            const modified = items.filter(i => i.ChangeType === 'Modified').length;
+            this.TotalAdded += added;
+            this.TotalRemoved += removed;
+            this.TotalModified += modified;
+            this.TotalUnchanged += items.filter(i => i.ChangeType === 'Unchanged').length;
+            // Resolve entity icon from first item's EntityID
+            const firstItem = items[0];
+            const entityIcon = this.resolveEntityIcon(firstItem?.EntityID ?? '');
+            return {
+                EntityName: entityName,
+                EntityIcon: entityIcon,
+                Items: items.filter(i => i.ChangeType !== 'Unchanged'),
+                AddedCount: added,
+                RemovedCount: removed,
+                ModifiedCount: modified,
+                IsExpanded: false,
+                NamesLoaded: false,
+                IsLoadingNames: false
+            };
+        }).filter(g => g.Items.length > 0)
+            .sort((a, b) => b.Items.length - a.Items.length);
+        this.ExpandedEntities.clear();
+        this.applySortAndFilterDiff();
+    }
+    resolveEntityName(entityId) {
+        if (!entityId)
+            return 'Unknown';
+        const entity = this.metadata.Entities.find(e => e.ID === entityId);
+        return entity ? entity.Name : 'Unknown';
+    }
+    resolveEntityIcon(entityId) {
+        if (!entityId)
+            return 'fa-solid fa-table';
+        const entity = this.metadata.Entities.find(e => e.ID === entityId);
+        return entity?.Icon || 'fa-solid fa-table';
+    }
+    // =========================================================================
+    // Expand / Collapse
+    // =========================================================================
+    ToggleEntityGroup(group) {
+        group.IsExpanded = !group.IsExpanded;
+        if (group.IsExpanded) {
+            this.ExpandedEntities.add(group.EntityName);
+            // Auto-expand all Modified items so field details show immediately
+            for (const item of group.Items) {
+                if (item.ChangeType === 'Modified') {
+                    item.IsExpanded = true;
+                }
+            }
+            // Auto-load field changes for modified items when group opens
+            this.loadFieldChangesForGroup(group);
+            // Load record display names
+            if (!group.NamesLoaded && !group.IsLoadingNames) {
+                this.loadGroupRecordNames(group);
+            }
+        }
+        else {
+            this.ExpandedEntities.delete(group.EntityName);
+        }
+        this.cdr.markForCheck();
+    }
+    ToggleItem(item) {
+        if (item.ChangeType !== 'Modified')
+            return;
+        item.IsExpanded = !item.IsExpanded;
+        if (item.IsExpanded && !item.FieldsLoaded) {
+            this.loadFieldChangesForItem(item);
+        }
+        this.cdr.markForCheck();
+    }
+    ExpandAllGroups() {
+        for (const group of this.FilteredEntityGroups) {
+            group.IsExpanded = true;
+            this.ExpandedEntities.add(group.EntityName);
+            this.loadFieldChangesForGroup(group);
+            for (const item of group.Items) {
+                if (item.ChangeType === 'Modified') {
+                    item.IsExpanded = true;
+                }
+            }
+            if (!group.NamesLoaded && !group.IsLoadingNames) {
+                this.loadGroupRecordNames(group);
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    CollapseAllGroups() {
+        for (const group of this.FilteredEntityGroups) {
+            group.IsExpanded = false;
+            this.ExpandedEntities.delete(group.EntityName);
+            for (const item of group.Items) {
+                item.IsExpanded = false;
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    IsEntityExpanded(entityName) {
+        return this.ExpandedEntities.has(entityName);
+    }
+    /** Open a record in the explorer via NavigationService. */
+    OnOpenRecord(item) {
+        const rawId = this.extractRawRecordId(item.RecordID);
+        const pkey = new CompositeKey([{ FieldName: 'ID', Value: rawId }]);
+        this.navigationService.OpenEntityRecord(item.EntityName, pkey);
+    }
+    // =========================================================================
+    // Record name resolution
+    // =========================================================================
+    /** Lazy-load record display names for a group using Metadata.GetEntityRecordNames. */
+    async loadGroupRecordNames(group) {
+        group.IsLoadingNames = true;
+        this.cdr.markForCheck();
+        try {
+            const inputs = group.Items.map(item => {
+                const rawId = this.extractRawRecordId(item.RecordID);
+                const input = new EntityRecordNameInput();
+                input.EntityName = group.EntityName;
+                input.CompositeKey = new CompositeKey([{ FieldName: 'ID', Value: rawId }]);
+                return input;
+            });
+            const results = await this.metadata.GetEntityRecordNames(inputs);
+            for (const result of results) {
+                if (result.Success && result.RecordName) {
+                    const resultId = result.CompositeKey?.KeyValuePairs?.[0]?.Value;
+                    if (resultId) {
+                        const item = group.Items.find(i => this.extractRawRecordId(i.RecordID) === String(resultId));
+                        if (item) {
+                            item.DisplayName = result.RecordName;
+                        }
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.error('Error loading record names for group:', group.EntityName, e);
+        }
+        finally {
+            group.IsLoadingNames = false;
+            group.NamesLoaded = true;
+            this.cdr.markForCheck();
+        }
+    }
+    /** Extract the raw UUID from a RecordID that may be in "ID|<uuid>" format. */
+    extractRawRecordId(recordId) {
+        if (!recordId)
+            return '';
+        const parts = recordId.split('||');
+        if (parts.length === 1) {
+            const singleParts = recordId.split('|');
+            if (singleParts.length === 2) {
+                return singleParts[1];
+            }
+        }
+        return recordId;
+    }
+    // =========================================================================
+    // Field-level diff loading
+    // =========================================================================
+    /** Auto-load field changes for all modified items in a group (when first expanded). */
+    loadFieldChangesForGroup(group) {
+        for (const item of group.Items) {
+            if (item.ChangeType === 'Modified' && !item.FieldsLoaded && !item.IsLoadingFields) {
+                this.loadFieldChangesForItem(item);
+            }
+        }
+    }
+    /** Lazy-load field-level changes for a single modified item. */
+    async loadFieldChangesForItem(item) {
+        if (!item.FromRecordChangeID || !item.ToRecordChangeID) {
+            item.FieldsLoaded = true;
+            return;
+        }
+        item.IsLoadingFields = true;
+        this.cdr.markForCheck();
+        try {
+            item.FieldChanges = await this.computeFieldChanges(item.FromRecordChangeID, item.ToRecordChangeID);
+        }
+        catch (e) {
+            console.error('Error loading field changes:', e);
+        }
+        finally {
+            item.IsLoadingFields = false;
+            item.FieldsLoaded = true;
+            this.cdr.markForCheck();
+        }
+    }
+    async loadLatestRecordChange(rv, entityId, recordId) {
+        if (!entityId || !recordId)
+            return null;
+        const result = await rv.RunView({
+            EntityName: 'Record Changes',
+            ExtraFilter: `EntityID = '${entityId}' AND RecordID = '${recordId}'`,
+            OrderBy: 'ChangedAt DESC',
+            MaxRows: 1,
+            Fields: ['ID'],
+            ResultType: 'simple'
+        });
+        if (result.Success && result.Results.length > 0) {
+            return result.Results[0].ID;
+        }
+        return null;
+    }
+    async computeFieldChanges(oldChangeId, newChangeId) {
+        if (!oldChangeId || !newChangeId)
+            return [];
+        try {
+            const rv = new RunView();
+            const [oldResult, newResult] = await rv.RunViews([
+                {
+                    EntityName: 'Record Changes',
+                    ExtraFilter: `ID = '${oldChangeId}'`,
+                    Fields: ['FullRecordJSON'],
+                    ResultType: 'simple'
+                },
+                {
+                    EntityName: 'Record Changes',
+                    ExtraFilter: `ID = '${newChangeId}'`,
+                    Fields: ['FullRecordJSON'],
+                    ResultType: 'simple'
+                }
+            ]);
+            if (!oldResult.Success || !newResult.Success)
+                return [];
+            if (oldResult.Results.length === 0 || newResult.Results.length === 0)
+                return [];
+            const oldRow = oldResult.Results[0];
+            const newRow = newResult.Results[0];
+            return this.diffRecordJson(oldRow.FullRecordJSON, newRow.FullRecordJSON);
+        }
+        catch {
+            return [];
+        }
+    }
+    diffRecordJson(oldJson, newJson) {
+        const changes = [];
+        try {
+            const oldData = JSON.parse(oldJson || '{}');
+            const newData = JSON.parse(newJson || '{}');
+            const allKeys = new Set([...Object.keys(oldData), ...Object.keys(newData)]);
+            for (const key of allKeys) {
+                if (key.startsWith('__mj_'))
+                    continue;
+                const oldVal = oldData[key];
+                const newVal = newData[key];
+                if (oldVal === undefined && newVal !== undefined) {
+                    changes.push({ FieldName: key, OldValue: '', NewValue: this.formatFieldValue(newVal), ChangeType: 'Added' });
+                }
+                else if (oldVal !== undefined && newVal === undefined) {
+                    changes.push({ FieldName: key, OldValue: this.formatFieldValue(oldVal), NewValue: '', ChangeType: 'Removed' });
+                }
+                else if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
+                    changes.push({ FieldName: key, OldValue: this.formatFieldValue(oldVal), NewValue: this.formatFieldValue(newVal), ChangeType: 'Modified' });
+                }
+            }
+        }
+        catch {
+            // Invalid JSON - skip
+        }
+        return changes;
+    }
+    formatFieldValue(value) {
+        if (value == null)
+            return 'null';
+        if (typeof value === 'object')
+            return JSON.stringify(value);
+        return String(value);
+    }
+    // =========================================================================
+    // Display helpers
+    // =========================================================================
+    GetChangeTypeClass(changeType) {
+        const classes = {
+            'Added': 'change-added',
+            'Removed': 'change-removed',
+            'Modified': 'change-modified',
+            'Unchanged': 'change-unchanged'
+        };
+        return classes[changeType] ?? '';
+    }
+    GetChangeTypeIcon(changeType) {
+        const icons = {
+            'Added': 'fa-solid fa-plus',
+            'Removed': 'fa-solid fa-minus',
+            'Modified': 'fa-solid fa-pen',
+            'Unchanged': 'fa-solid fa-equals'
+        };
+        return icons[changeType] ?? 'fa-solid fa-circle';
+    }
+    FormatRecordID(recordId) {
+        return this.extractRawRecordId(recordId);
+    }
+    FormatLabelOption(label) {
+        const dateVal = label.__mj_CreatedAt;
+        const date = dateVal instanceof Date
+            ? dateVal.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+            : new Date(dateVal).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+        return `${label.Name} (${label.Scope}, ${date})`;
+    }
+    Refresh() {
+        this.LoadLabels();
+    }
+    get CanRunDiff() {
+        if (!this.FromLabelId)
+            return false;
+        if (this.DiffMode === 'label-to-label' && !this.ToLabelId)
+            return false;
+        return true;
+    }
+    get TotalChanges() {
+        return this.TotalAdded + this.TotalRemoved + this.TotalModified;
+    }
+    // =========================================================================
+    // Label selection helpers
+    // =========================================================================
+    /** From dropdown excludes the currently selected To label. */
+    get FilteredFromLabels() {
+        if (!this.ToLabelId)
+            return this.AvailableLabels;
+        return this.AvailableLabels.filter(l => l.ID !== this.ToLabelId);
+    }
+    /** To dropdown excludes the currently selected From label. */
+    get FilteredToLabels() {
+        if (!this.FromLabelId)
+            return this.AvailableLabels;
+        return this.AvailableLabels.filter(l => l.ID !== this.FromLabelId);
+    }
+    /** Swap From and To label selections. */
+    SwapLabels() {
+        const temp = this.FromLabelId;
+        this.FromLabelId = this.ToLabelId;
+        this.ToLabelId = temp;
+        this.cdr.markForCheck();
+    }
+    // =========================================================================
+    // Diff result sorting & filtering
+    // =========================================================================
+    OnDiffSortChange(sortBy) {
+        if (this.DiffSortBy === sortBy) {
+            this.DiffSortDir = this.DiffSortDir === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.DiffSortBy = sortBy;
+            this.DiffSortDir = sortBy === 'name' ? 'asc' : 'desc';
+        }
+        this.applySortAndFilterDiff();
+        this.cdr.markForCheck();
+    }
+    OnDiffFilterChange(filterType) {
+        this.DiffFilterType = filterType;
+        this.applySortAndFilterDiff();
+        this.cdr.markForCheck();
+    }
+    OnDiffSearchChange(text) {
+        this.DiffSearch = text;
+        this.applySortAndFilterDiff();
+        this.cdr.markForCheck();
+    }
+    applySortAndFilterDiff() {
+        let groups = [...this.EntityGroups];
+        // Filter by change type
+        if (this.DiffFilterType !== 'all') {
+            groups = groups.map(g => ({
+                ...g,
+                Items: g.Items.filter(i => i.ChangeType.toLowerCase() === this.DiffFilterType)
+            })).filter(g => g.Items.length > 0);
+        }
+        // Filter by search text
+        if (this.DiffSearch) {
+            const search = this.DiffSearch.toLowerCase();
+            groups = groups
+                .filter(g => g.EntityName.toLowerCase().includes(search) ||
+                g.Items.some(i => i.RecordID.toLowerCase().includes(search) || i.DisplayName.toLowerCase().includes(search)))
+                .map(g => ({
+                ...g,
+                Items: g.Items.filter(i => i.RecordID.toLowerCase().includes(search) ||
+                    i.DisplayName.toLowerCase().includes(search) ||
+                    g.EntityName.toLowerCase().includes(search))
+            }))
+                .filter(g => g.Items.length > 0);
+        }
+        // Sort
+        groups.sort((a, b) => {
+            if (this.DiffSortBy === 'name') {
+                const cmp = a.EntityName.localeCompare(b.EntityName);
+                return this.DiffSortDir === 'asc' ? cmp : -cmp;
+            }
+            const cmp = a.Items.length - b.Items.length;
+            return this.DiffSortDir === 'asc' ? cmp : -cmp;
+        });
+        this.FilteredEntityGroups = groups;
+    }
+    static ɵfac = function VersionHistoryDiffResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VersionHistoryDiffResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.NavigationService)); };
+    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();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsLoading ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
+        } }, dependencies: [i2.NgClass, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent, i2.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(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.page-subtitle[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\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(--hover-background, #f3f4f6);\n    border: 2px solid transparent;\n    border-radius: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    transition: all 0.2s ease;\n}\n\n.mode-btn[_ngcontent-%COMP%]:hover {\n    background: #e5e7eb;\n}\n\n.mode-btn.active[_ngcontent-%COMP%] {\n    background: rgba(99, 102, 241, 0.08);\n    border-color: #6366f1;\n    color: #6366f1;\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(--text-secondary, #6b7280);\n    margin-bottom: 6px;\n}\n\n.selector-input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 10px 12px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    outline: none;\n    box-sizing: border-box;\n}\n\n.selector-input[_ngcontent-%COMP%]:focus {\n    border-color: #6366f1;\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\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(--text-secondary, #6b7280);\n    font-size: 16px;\n}\n\n.current-state-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    color: #6366f1;\n    background: rgba(99, 102, 241, 0.1);\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: #6366f1;\n    border: none;\n    border-radius: 8px;\n    color: #ffffff;\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: #4f46e5;\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(--border-color, #e5e7eb);\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(--text-primary, #1f2937);\n}\n\n.diff-stat-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n\n\n.change-added[_ngcontent-%COMP%] {\n    background: rgba(16, 185, 129, 0.06);\n    border-color: rgba(16, 185, 129, 0.2);\n    color: #059669;\n}\n\n.change-removed[_ngcontent-%COMP%] {\n    background: rgba(239, 68, 68, 0.06);\n    border-color: rgba(239, 68, 68, 0.2);\n    color: #dc2626;\n}\n\n.change-modified[_ngcontent-%COMP%] {\n    background: rgba(245, 158, 11, 0.06);\n    border-color: rgba(245, 158, 11, 0.2);\n    color: #d97706;\n}\n\n.change-unchanged[_ngcontent-%COMP%] {\n    background: rgba(107, 114, 128, 0.06);\n    border-color: rgba(107, 114, 128, 0.2);\n    color: #6b7280;\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(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\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(--hover-background, #f9fafb);\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(--text-tertiary, #9ca3af);\n    width: 16px;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n    color: #6366f1;\n    font-size: 14px;\n}\n\n.entity-group-name[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\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(--text-tertiary, #9ca3af);\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(--border-color, #e5e7eb);\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(--text-primary, #1f2937);\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(--text-secondary, #6b7280);\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(--text-tertiary, #9ca3af);\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: #6366f1;\n    color: #6366f1;\n    background: rgba(99, 102, 241, 0.06);\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(--text-tertiary, #9ca3af);\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: rgba(16, 185, 129, 0.06);\n}\n\n.diff-field.change-modified[_ngcontent-%COMP%] {\n    background: rgba(245, 158, 11, 0.06);\n}\n\n.diff-field.change-removed[_ngcontent-%COMP%] {\n    background: rgba(239, 68, 68, 0.06);\n}\n\n.diff-field-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\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: #ef4444;\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(--text-tertiary, #9ca3af);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n.diff-field-new[_ngcontent-%COMP%] {\n    color: #10b981;\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(--text-tertiary, #9ca3af);\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(--border-color, #e5e7eb);\n    border-radius: 6px;\n    background: var(--card-background, #ffffff);\n    color: var(--text-tertiary, #9ca3af);\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: #6366f1;\n    color: #6366f1;\n    background: rgba(99, 102, 241, 0.06);\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(--text-tertiary, #9ca3af);\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(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\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(--border-color, #e5e7eb);\n    border-radius: 50%;\n    background: var(--card-background, #ffffff);\n    color: #6366f1;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.swap-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(99, 102, 241, 0.1);\n    border-color: #6366f1;\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(--text-tertiary, #9ca3af);\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(--border-color, #e5e7eb);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--card-background, #ffffff);\n    color: var(--text-primary, #1f2937);\n    box-sizing: border-box;\n}\n\n.diff-search-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: #6366f1;\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\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(--border-color, #e5e7eb);\n    border-radius: 16px;\n    background: var(--card-background, #ffffff);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.filter-pill[_ngcontent-%COMP%]:hover {\n    border-color: #6366f1;\n    color: #6366f1;\n}\n\n.filter-pill.active[_ngcontent-%COMP%] {\n    background: #6366f1;\n    border-color: #6366f1;\n    color: #ffffff;\n}\n\n.filter-pill.change-added.active[_ngcontent-%COMP%] {\n    background: #059669;\n    border-color: #059669;\n}\n\n.filter-pill.change-removed.active[_ngcontent-%COMP%] {\n    background: #dc2626;\n    border-color: #dc2626;\n}\n\n.filter-pill.change-modified.active[_ngcontent-%COMP%] {\n    background: #d97706;\n    border-color: #d97706;\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(--border-color, #e5e7eb);\n    border-radius: 6px;\n    background: var(--card-background, #ffffff);\n    color: var(--text-tertiary, #9ca3af);\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: #6366f1;\n    color: #6366f1;\n}\n\n.toggle-btn-sm.active[_ngcontent-%COMP%] {\n    background: rgba(99, 102, 241, 0.1);\n    border-color: #6366f1;\n    color: #6366f1;\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')
+], VersionHistoryDiffResourceComponent);
+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(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.page-subtitle {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n/* Config Panel */\n.config-panel {\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\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(--hover-background, #f3f4f6);\n    border: 2px solid transparent;\n    border-radius: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    transition: all 0.2s ease;\n}\n\n.mode-btn:hover {\n    background: #e5e7eb;\n}\n\n.mode-btn.active {\n    background: rgba(99, 102, 241, 0.08);\n    border-color: #6366f1;\n    color: #6366f1;\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(--text-secondary, #6b7280);\n    margin-bottom: 6px;\n}\n\n.selector-input {\n    width: 100%;\n    padding: 10px 12px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    outline: none;\n    box-sizing: border-box;\n}\n\n.selector-input:focus {\n    border-color: #6366f1;\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\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(--text-secondary, #6b7280);\n    font-size: 16px;\n}\n\n.current-state-badge {\n    font-size: 11px;\n    font-weight: 600;\n    color: #6366f1;\n    background: rgba(99, 102, 241, 0.1);\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: #6366f1;\n    border: none;\n    border-radius: 8px;\n    color: #ffffff;\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: #4f46e5;\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(--border-color, #e5e7eb);\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(--text-primary, #1f2937);\n}\n\n.diff-stat-label {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n/* Change type colors */\n.change-added {\n    background: rgba(16, 185, 129, 0.06);\n    border-color: rgba(16, 185, 129, 0.2);\n    color: #059669;\n}\n\n.change-removed {\n    background: rgba(239, 68, 68, 0.06);\n    border-color: rgba(239, 68, 68, 0.2);\n    color: #dc2626;\n}\n\n.change-modified {\n    background: rgba(245, 158, 11, 0.06);\n    border-color: rgba(245, 158, 11, 0.2);\n    color: #d97706;\n}\n\n.change-unchanged {\n    background: rgba(107, 114, 128, 0.06);\n    border-color: rgba(107, 114, 128, 0.2);\n    color: #6b7280;\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(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\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(--hover-background, #f9fafb);\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(--text-tertiary, #9ca3af);\n    width: 16px;\n}\n\n.entity-icon {\n    color: #6366f1;\n    font-size: 14px;\n}\n\n.entity-group-name {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\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(--text-tertiary, #9ca3af);\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(--border-color, #e5e7eb);\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(--text-primary, #1f2937);\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(--text-secondary, #6b7280);\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(--text-tertiary, #9ca3af);\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: #6366f1;\n    color: #6366f1;\n    background: rgba(99, 102, 241, 0.06);\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(--text-tertiary, #9ca3af);\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: rgba(16, 185, 129, 0.06);\n}\n\n.diff-field.change-modified {\n    background: rgba(245, 158, 11, 0.06);\n}\n\n.diff-field.change-removed {\n    background: rgba(239, 68, 68, 0.06);\n}\n\n.diff-field-name {\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\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: #ef4444;\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(--text-tertiary, #9ca3af);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n.diff-field-new {\n    color: #10b981;\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(--text-tertiary, #9ca3af);\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(--border-color, #e5e7eb);\n    border-radius: 6px;\n    background: var(--card-background, #ffffff);\n    color: var(--text-tertiary, #9ca3af);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.toolbar-action-btn:hover {\n    border-color: #6366f1;\n    color: #6366f1;\n    background: rgba(99, 102, 241, 0.06);\n}\n\n/* 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(--text-tertiary, #9ca3af);\n    margin-bottom: 16px;\n}\n\n.empty-state h3 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.empty-state p {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\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(--border-color, #e5e7eb);\n    border-radius: 50%;\n    background: var(--card-background, #ffffff);\n    color: #6366f1;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.swap-btn:hover {\n    background: rgba(99, 102, 241, 0.1);\n    border-color: #6366f1;\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(--text-tertiary, #9ca3af);\n    font-size: 13px;\n}\n\n.diff-search-input {\n    width: 100%;\n    padding: 8px 12px 8px 36px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--card-background, #ffffff);\n    color: var(--text-primary, #1f2937);\n    box-sizing: border-box;\n}\n\n.diff-search-input:focus {\n    outline: none;\n    border-color: #6366f1;\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\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(--border-color, #e5e7eb);\n    border-radius: 16px;\n    background: var(--card-background, #ffffff);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.filter-pill:hover {\n    border-color: #6366f1;\n    color: #6366f1;\n}\n\n.filter-pill.active {\n    background: #6366f1;\n    border-color: #6366f1;\n    color: #ffffff;\n}\n\n.filter-pill.change-added.active {\n    background: #059669;\n    border-color: #059669;\n}\n\n.filter-pill.change-removed.active {\n    background: #dc2626;\n    border-color: #dc2626;\n}\n\n.filter-pill.change-modified.active {\n    background: #d97706;\n    border-color: #d97706;\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(--border-color, #e5e7eb);\n    border-radius: 6px;\n    background: var(--card-background, #ffffff);\n    color: var(--text-tertiary, #9ca3af);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.toggle-btn-sm:hover {\n    border-color: #6366f1;\n    color: #6366f1;\n}\n\n.toggle-btn-sm.active {\n    background: rgba(99, 102, 241, 0.1);\n    border-color: #6366f1;\n    color: #6366f1;\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 }, { type: i1.NavigationService }], 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