npm - @memberjunction/ng-record-changes - Versions diffs - 4.2.0 → 4.3.1 - Mend

@memberjunction/ng-record-changes 4.2.0 → 4.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/lib/__tests__/record-changes.test.d.ts +2 -0
package/dist/lib/__tests__/record-changes.test.d.ts.map +1 -0
package/dist/lib/__tests__/record-changes.test.js +236 -0
package/dist/lib/__tests__/record-changes.test.js.map +1 -0
package/dist/lib/ng-record-changes.component.d.ts +34 -14
package/dist/lib/ng-record-changes.component.d.ts.map +1 -1
package/dist/lib/ng-record-changes.component.js +456 -378
package/dist/lib/ng-record-changes.component.js.map +1 -1
package/package.json +9 -9

package/dist/lib/ng-record-changes.component.js CHANGED Viewed

@@ -9,8 +9,9 @@ import * as i4 from "@memberjunction/ng-shared-generic";
 import * as i5 from "@memberjunction/ng-versions";
 const _c0 = a0 => [a0];
 const _forTrack0 = ($index, $item) => $item.ID;
-const _forTrack1 = ($index, $item) => $item.name;
-const _forTrack2 = ($index, $item) => $item.field;
+const _forTrack1 = ($index, $item) => $item.label;
+const _forTrack2 = ($index, $item) => $item.name;
+const _forTrack3 = ($index, $item) => $item.field;
 function RecordChangesComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-loading", 1);
 } }
@@ -84,339 +85,328 @@ function RecordChangesComponent_Conditional_2_Conditional_14_Template(rf, ctx) {
     i0.ɵɵtext(10, "Record change tracking is managed at the entity level");
     i0.ɵɵelementEnd()()();
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 44);
     i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 47);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_28_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ClearFilters()); });
+    i0.ɵɵtext(3, "Clear filters");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2(" Showing ", ctx_r1.filteredData.length, " of ", ctx_r1.viewData.length, " changes ");
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵelement(1, "i", 43);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No changes match your current filters.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 44);
-    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_21_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ClearFilters()); });
-    i0.ɵɵelement(5, "i", 45);
+    i0.ɵɵelementStart(4, "button", 49);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_30_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ClearFilters()); });
+    i0.ɵɵelement(5, "i", 50);
     i0.ɵɵtext(6, " Clear Filters ");
     i0.ɵɵelementEnd()();
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 50);
-} }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 60);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const change_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" via ", change_r7.Integration, " ");
-} }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const change_r7 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getChangeSummary(change_r7), " ");
-} }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_5_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 71)(1, "span", 72);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 70)(1, "div", 71);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 73);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(3, "div", 72)(4, "span", 73);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const field_r8 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(field_r8.displayName);
+    const field_r9 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(field_r8.value);
+    i0.ɵɵtextInterpolate(field_r9.displayName);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(field_r9.value);
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 70);
-    i0.ɵɵrepeaterCreate(1, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_5_Conditional_4_For_2_Template, 5, 2, "div", 71, _forTrack1);
-    i0.ɵɵelementEnd();
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Conditional_0_For_1_Template, 6, 2, "div", 70, _forTrack2);
 } if (rf & 2) {
-    const change_r7 = i0.ɵɵnextContext(3).$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.getCreatedFields(change_r7));
+    const change_r8 = i0.ɵɵnextContext(3).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵrepeater(ctx_r1.getCreatedFields(change_r8));
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 65)(1, "h4");
-    i0.ɵɵelement(2, "i", 10);
-    i0.ɵɵtext(3, " Record Created");
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_5_Conditional_4_Template, 3, 0, "div", 70);
-    i0.ɵɵelementEnd();
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Conditional_0_Template, 2, 0);
 } if (rf & 2) {
-    const change_r7 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(change_r7.FullRecordJSON ? 4 : -1);
+    const change_r8 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵconditional(change_r8.FullRecordJSON ? 0 : -1);
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 66)(1, "h4");
-    i0.ɵɵelement(2, "i", 74);
-    i0.ɵɵtext(3, " Record Deleted");
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 67);
+    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵtext(2, " This record was permanently removed from the system. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 75);
-    i0.ɵɵtext(5, "This record was permanently removed from the system.");
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵelement(1, "span", 77);
+    i0.ɵɵelementStart(2, "span", 78);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "i", 79)(5, "span", 77);
+    i0.ɵɵelementStart(6, "span", 80);
+    i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const fc_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("on", fc_r10.oldValue === "true" || fc_r10.oldValue === "1")("off", fc_r10.oldValue !== "true" && fc_r10.oldValue !== "1");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(fc_r10.oldValue === "true" || fc_r10.oldValue === "1" ? "Yes" : "No");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("on", fc_r10.newValue === "true" || fc_r10.newValue === "1")("off", fc_r10.newValue !== "true" && fc_r10.newValue !== "1");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", fc_r10.newValue === "true" || fc_r10.newValue === "1")("inactive", fc_r10.newValue !== "true" && fc_r10.newValue !== "1");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(fc_r10.newValue === "true" || fc_r10.newValue === "1" ? "Yes" : "No");
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_7_For_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78)(1, "span", 81);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 75)(1, "span", 81);
     i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "i", 79);
+    i0.ɵɵelementStart(4, "span", 73);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const fieldChange_r9 = i0.ɵɵnextContext().$implicit;
+    const fc_r10 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(fieldChange_r9.newValue);
+    i0.ɵɵtextInterpolate(fc_r10.oldValue || "(empty)");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(fc_r10.newValue || "(empty)");
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_7_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵelement(1, "div", 82);
-    i0.ɵɵelementEnd();
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 76);
 } if (rf & 2) {
-    const fieldChange_r9 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", fieldChange_r9.diffHtml, i0.ɵɵsanitizeHtml);
+    const fc_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("innerHTML", fc_r10.diffHtml, i0.ɵɵsanitizeHtml);
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_7_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 80)(1, "div", 83)(2, "span", 84);
-    i0.ɵɵtext(3, "From:");
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 75)(1, "span", 81);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 85);
+    i0.ɵɵelement(3, "i", 79);
+    i0.ɵɵelementStart(4, "span", 73);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 86);
-    i0.ɵɵelement(7, "i", 87);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 81)(9, "span", 84);
-    i0.ɵɵtext(10, "To:");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 85);
-    i0.ɵɵtext(12);
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const fieldChange_r9 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(fieldChange_r9.oldValue || "(empty)");
-    i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate(fieldChange_r9.newValue || "(empty)");
+    const fc_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(fc_r10.oldValue || "(empty)");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(fc_r10.newValue || "(empty)");
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_7_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 77)(1, "div", 72);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 70)(1, "div", 71);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_7_For_6_Conditional_3_Template, 3, 1, "div", 78)(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_7_For_6_Conditional_4_Template, 2, 1, "div", 79)(5, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_7_For_6_Conditional_5_Template, 13, 2, "div", 80);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 72);
+    i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_4_Template, 8, 14, "div", 74)(5, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_5_Template, 6, 2, "div", 75)(6, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_6_Template, 1, 1, "div", 76)(7, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Conditional_7_Template, 6, 2, "div", 75);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const fieldChange_r9 = ctx.$implicit;
+    const fc_r10 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(fieldChange_r9.displayName);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(fieldChange_r9.isBooleanField ? 3 : fieldChange_r9.diffHtml ? 4 : 5);
+    i0.ɵɵtextInterpolate(fc_r10.displayName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(fc_r10.fieldType === "boolean" ? 4 : fc_r10.fieldType === "date" || fc_r10.fieldType === "number" ? 5 : fc_r10.diffHtml ? 6 : 7);
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "h4");
-    i0.ɵɵelement(2, "i", 76);
-    i0.ɵɵtext(3, " Fields Changed");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 70);
-    i0.ɵɵrepeaterCreate(5, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_7_For_6_Template, 6, 2, "div", 77, _forTrack2);
-    i0.ɵɵelementEnd()();
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_For_1_Template, 8, 2, "div", 70, _forTrack3);
 } if (rf & 2) {
-    const change_r7 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(5);
-    i0.ɵɵrepeater(ctx_r1.getFieldChanges(change_r7));
+    const change_r8 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵrepeater(ctx_r1.getFieldChanges(change_r8));
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68)(1, "h5");
-    i0.ɵɵelement(2, "i", 88);
-    i0.ɵɵtext(3, " Comments");
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "i", 82);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p");
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const change_r7 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(change_r7.Comments);
+    const change_r8 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", change_r8.Comments, " ");
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 69)(1, "h5");
-    i0.ɵɵelement(2, "i", 89);
-    i0.ɵɵtext(3, " Errors");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "pre", 90);
-    i0.ɵɵtext(5);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵelement(1, "i", 83);
+    i0.ɵɵelementStart(2, "pre", 84);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const change_r7 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(change_r7.ErrorLog);
+    const change_r8 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(change_r8.ErrorLog);
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62)(1, "div", 63);
-    i0.ɵɵelement(2, "i", 64);
-    i0.ɵɵelementStart(3, "strong");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_5_Template, 5, 1, "div", 65)(6, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_6_Template, 6, 0, "div", 66)(7, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_7_Template, 7, 0, "div", 67);
-    i0.ɵɵconditionalCreate(8, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_8_Template, 6, 1, "div", 68);
-    i0.ɵɵconditionalCreate(9, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Conditional_9_Template, 6, 1, "div", 69);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵconditionalCreate(1, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_1_Template, 1, 1)(2, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_2_Template, 3, 0, "div", 67)(3, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_3_Template, 2, 0);
+    i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_4_Template, 3, 1, "div", 68);
+    i0.ɵɵconditionalCreate(5, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Conditional_5_Template, 4, 1, "div", 69);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const change_r7 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.formatFullDateTime(change_r7.ChangedAt));
+    const change_r8 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵconditional(change_r7.Type === "Create" ? 5 : change_r7.Type === "Delete" ? 6 : 7);
+    i0.ɵɵconditional(change_r8.Type === "Create" ? 1 : change_r8.Type === "Delete" ? 2 : 3);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(change_r7.Comments ? 8 : -1);
+    i0.ɵɵconditional(change_r8.Comments ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(change_r7.ErrorLog ? 9 : -1);
+    i0.ɵɵconditional(change_r8.ErrorLog ? 5 : -1);
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Template_div_click_0_listener() { const change_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleExpansion(change_r7.ID)); })("keydown", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Template_div_keydown_0_listener($event) { const change_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onTimelineItemKeydown($event, change_r7.ID)); });
-    i0.ɵɵelementStart(1, "div", 48)(2, "div", 49);
-    i0.ɵɵelement(3, "i");
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_4_Template, 1, 0, "div", 50);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 54);
+    i0.ɵɵlistener("keydown", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Template_div_keydown_0_listener($event) { const change_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onTimelineItemKeydown($event, change_r8.ID)); });
+    i0.ɵɵelementStart(1, "div", 55);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Template_div_click_1_listener() { const change_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleExpansion(change_r8.ID)); });
+    i0.ɵɵelementStart(2, "div", 56)(3, "span", 57);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 51)(6, "div", 52)(7, "div", 53)(8, "span", 54);
-    i0.ɵɵtext(9);
+    i0.ɵɵelementStart(5, "span", 58);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 59)(8, "div", 60)(9, "div", 61);
+    i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 55);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 56);
+    i0.ɵɵelementStart(12, "span", 62);
     i0.ɵɵtext(13);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 57)(15, "span", 58);
-    i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "span", 59);
-    i0.ɵɵtext(18);
+    i0.ɵɵelementStart(14, "span", 63);
+    i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(19, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_19_Template, 2, 1, "span", 60);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(20, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_20_Template, 2, 1, "div", 61);
-    i0.ɵɵconditionalCreate(21, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Conditional_21_Template, 10, 4, "div", 62);
+    i0.ɵɵelementStart(16, "span", 64);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(18, "i", 65);
     i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(19, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Conditional_19_Template, 6, 3, "div", 66);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const change_r7 = ctx.$implicit;
-    const ɵ$index_132_r10 = ctx.$index;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("expanded", ctx_r1.expandedItems.has(change_r7.ID));
-    i0.ɵɵattribute("tabindex", 0)("aria-expanded", ctx_r1.expandedItems.has(change_r7.ID))("aria-label", ctx_r1.getTimelineItemLabel(change_r7));
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getChangeTypeClass(change_r7.Type));
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getChangeTypeIcon(change_r7.Type));
-    i0.ɵɵattribute("aria-hidden", true);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ɵ$index_132_r10 < ctx_r1.filteredData.length - 1 ? 4 : -1);
+    const change_r8 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassMap(ctx_r1.getChangeTypeCardClass(change_r8.Type));
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedItems.has(change_r8.ID));
+    i0.ɵɵattribute("tabindex", 0)("aria-expanded", ctx_r1.expandedItems.has(change_r8.ID))("aria-label", ctx_r1.getTimelineItemLabel(change_r8));
     i0.ɵɵadvance(4);
-    i0.ɵɵclassMap(ctx_r1.getChangeTypeBadgeClass(change_r7.Type));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", change_r7.Type, " ");
+    i0.ɵɵtextInterpolate(ctx_r1.getChangeTypeBadgeText(change_r8.Type));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(change_r7.User || "Unknown User");
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getSourceClass(change_r7.Source));
+    i0.ɵɵtextInterpolate(ctx_r1.getChangeSummary(change_r8));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.getUserInitials(change_r8.User));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", change_r7.Source, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", ctx_r1.formatFullDateTime(change_r7.ChangedAt));
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getUserDisplayName(change_r8.User), " ");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatRelativeTime(change_r7.ChangedAt), " ");
+    i0.ɵɵproperty("title", ctx_r1.formatFullDateTime(change_r8.ChangedAt));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getStatusClass(change_r7.Status));
+    i0.ɵɵtextInterpolate(ctx_r1.formatTime(change_r8.ChangedAt));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", change_r7.Status, " ");
+    i0.ɵɵclassMap(ctx_r1.getSourceClass(change_r8.Source));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(change_r7.Integration ? 19 : -1);
+    i0.ɵɵtextInterpolate(change_r8.Source);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.expandedItems.has(change_r7.ID) ? 20 : -1);
+    i0.ɵɵclassMap(ctx_r1.getStatusClass(change_r8.Status));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.expandedItems.has(change_r7.ID) ? 21 : -1);
+    i0.ɵɵtextInterpolate(change_r8.Status);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.expandedItems.has(change_r8.ID) ? 19 : -1);
 } }
-function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵrepeaterCreate(1, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_For_2_Template, 22, 26, "div", 46, _forTrack0);
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51)(1, "div", 52);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(3, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_For_4_Template, 20, 20, "div", 53, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const group_r11 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r11.label);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.filteredData);
+    i0.ɵɵrepeater(group_r11.changes);
+} }
+function RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_For_1_Template, 5, 1, "div", 51, _forTrack1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r1.dateGroups);
 } }
 function RecordChangesComponent_Conditional_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29)(2, "input", 30);
-    i0.ɵɵtwoWayListener("ngModelChange", function RecordChangesComponent_Conditional_2_Conditional_15_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.searchTerm, $event) || (ctx_r1.searchTerm = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("input", function RecordChangesComponent_Conditional_2_Conditional_15_Template_input_input_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSearchChange()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "select", 31);
-    i0.ɵɵtwoWayListener("ngModelChange", function RecordChangesComponent_Conditional_2_Conditional_15_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedType, $event) || (ctx_r1.selectedType = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function RecordChangesComponent_Conditional_2_Conditional_15_Template_select_change_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFilterChange()); });
-    i0.ɵɵelementStart(4, "option", 32);
-    i0.ɵɵtext(5, "All Changes");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "option", 33);
-    i0.ɵɵtext(7, "Created");
+    i0.ɵɵelementStart(0, "div", 28)(1, "div")(2, "h2", 29);
+    i0.ɵɵtext(3, "Change History");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "option", 34);
-    i0.ɵɵtext(9, "Updated");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "option", 35);
-    i0.ɵɵtext(11, "Deleted");
+    i0.ɵɵelementStart(4, "div", 30);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "select", 36);
-    i0.ɵɵtwoWayListener("ngModelChange", function RecordChangesComponent_Conditional_2_Conditional_15_Template_select_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedSource, $event) || (ctx_r1.selectedSource = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function RecordChangesComponent_Conditional_2_Conditional_15_Template_select_change_12_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFilterChange()); });
-    i0.ɵɵelementStart(13, "option", 32);
-    i0.ɵɵtext(14, "All Sources");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "option", 37);
-    i0.ɵɵtext(16, "Internal");
+    i0.ɵɵelementStart(6, "div", 31)(7, "div", 32);
+    i0.ɵɵelement(8, "i", 33);
+    i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "option", 38);
-    i0.ɵɵtext(18, "External");
+    i0.ɵɵelementStart(10, "div", 34);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(19, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_19_Template, 2, 2, "div", 39);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 40);
-    i0.ɵɵconditionalCreate(21, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_21_Template, 7, 0, "div", 41)(22, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_22_Template, 3, 0, "div", 42);
+    i0.ɵɵelementStart(12, "div", 35)(13, "div", 36);
+    i0.ɵɵelement(14, "i", 37);
+    i0.ɵɵelementStart(15, "input", 38);
+    i0.ɵɵtwoWayListener("ngModelChange", function RecordChangesComponent_Conditional_2_Conditional_15_Template_input_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.searchTerm, $event) || (ctx_r1.searchTerm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("input", function RecordChangesComponent_Conditional_2_Conditional_15_Template_input_input_15_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSearchChange()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "button", 39);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SetTypeFilter("")); });
+    i0.ɵɵelement(17, "i", 40);
+    i0.ɵɵtext(18, " All ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "button", 39);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SetTypeFilter("Update")); });
+    i0.ɵɵelement(20, "i", 41);
+    i0.ɵɵtext(21, " Updates ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "button", 39);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SetTypeFilter("Create")); });
+    i0.ɵɵelement(23, "i", 42);
+    i0.ɵɵtext(24, " Creates ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "button", 39);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_2_Conditional_15_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SetTypeFilter("Delete")); });
+    i0.ɵɵelement(26, "i", 43);
+    i0.ɵɵtext(27, " Deletes ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(28, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_28_Template, 4, 2, "div", 44);
+    i0.ɵɵelementStart(29, "div", 45);
+    i0.ɵɵconditionalCreate(30, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_30_Template, 7, 0, "div", 46)(31, RecordChangesComponent_Conditional_2_Conditional_15_Conditional_31_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.record.EntityInfo.Name);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.record.EntityInfo.Name, " ");
     i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate4("", ctx_r1.viewData.length, " change", ctx_r1.viewData.length !== 1 ? "s" : "", " \u00B7 ", ctx_r1.getUniqueContributorCount(), " contributor", ctx_r1.getUniqueContributorCount() !== 1 ? "s" : "");
+    i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.searchTerm);
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedType);
-    i0.ɵɵadvance(9);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedSource);
-    i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r1.filteredData.length !== ctx_r1.viewData.length ? 19 : -1);
+    i0.ɵɵclassProp("active", !ctx_r1.selectedType);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.selectedType === "Update");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.selectedType === "Create");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.selectedType === "Delete");
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.filteredData.length !== ctx_r1.viewData.length ? 28 : -1);
     i0.ɵɵadvance();
     i0.ɵɵattribute("aria-label", "Timeline of changes for " + ctx_r1.record.EntityInfo.Name + " record");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.filteredData.length === 0 ? 21 : 22);
+    i0.ɵɵconditional(ctx_r1.filteredData.length === 0 ? 30 : 31);
 } }
 function RecordChangesComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -434,7 +424,7 @@ function RecordChangesComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(11, RecordChangesComponent_Conditional_2_Conditional_11_Template, 3, 0, "div", 11)(12, RecordChangesComponent_Conditional_2_Conditional_12_Template, 2, 0, "div", 12)(13, RecordChangesComponent_Conditional_2_Conditional_13_Template, 3, 0, "div", 13);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(14, RecordChangesComponent_Conditional_2_Conditional_14_Template, 11, 0, "div", 14)(15, RecordChangesComponent_Conditional_2_Conditional_15_Template, 23, 6);
+    i0.ɵɵconditionalCreate(14, RecordChangesComponent_Conditional_2_Conditional_14_Template, 11, 0, "div", 14)(15, RecordChangesComponent_Conditional_2_Conditional_15_Template, 32, 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -446,13 +436,13 @@ function RecordChangesComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r1.viewData.length === 0 ? 14 : 15);
 } }
 function RecordChangesComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 91);
-    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreateCancelled()); });
-    i0.ɵɵelementStart(1, "div", 92);
-    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_3_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r11); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "mj-label-create", 93);
-    i0.ɵɵlistener("Created", function RecordChangesComponent_Conditional_3_Template_mj_label_create_Created_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreated($event)); })("Cancel", function RecordChangesComponent_Conditional_3_Template_mj_label_create_Cancel_2_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreateCancelled()); });
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 85);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreateCancelled()); });
+    i0.ɵɵelementStart(1, "div", 86);
+    i0.ɵɵlistener("click", function RecordChangesComponent_Conditional_3_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "mj-label-create", 87);
+    i0.ɵɵlistener("Created", function RecordChangesComponent_Conditional_3_Template_mj_label_create_Created_2_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreated($event)); })("Cancel", function RecordChangesComponent_Conditional_3_Template_mj_label_create_Cancel_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLabelCreateCancelled()); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -461,6 +451,7 @@ function RecordChangesComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
 } }
 export class RecordChangesComponent {
     cdr;
+    ngZone;
     mjNotificationService;
     sanitizer;
     IsLoading = false;
@@ -469,6 +460,7 @@ export class RecordChangesComponent {
     record;
     viewData = [];
     filteredData = [];
+    dateGroups = [];
     expandedItems = new Set();
     // Version label state
     RecordLabels = [];
@@ -478,8 +470,9 @@ export class RecordChangesComponent {
     searchTerm = '';
     selectedType = '';
     selectedSource = '';
-    constructor(cdr, mjNotificationService, sanitizer) {
+    constructor(cdr, ngZone, mjNotificationService, sanitizer) {
         this.cdr = cdr;
+        this.ngZone = ngZone;
         this.mjNotificationService = mjNotificationService;
         this.sanitizer = sanitizer;
     }
@@ -502,32 +495,57 @@ export class RecordChangesComponent {
         if (pkey && entityName) {
             const md = new Metadata();
             const changes = await md.GetRecordChanges(entityName, pkey);
-            if (changes) {
-                this.viewData = changes.sort((a, b) => new Date(b.ChangedAt).getTime() - new Date(a.ChangedAt).getTime());
-                this.filteredData = [...this.viewData];
-                this.IsLoading = false;
-            }
-            else {
-                this.mjNotificationService.CreateSimpleNotification(`Error loading record changes for ${entityName} with primary key ${pkey.ToString()}.`, 'error');
-                this.IsLoading = false;
-            }
-            this.cdr.markForCheck();
+            this.ngZone.run(() => {
+                if (changes) {
+                    this.viewData = changes.sort((a, b) => new Date(b.ChangedAt).getTime() - new Date(a.ChangedAt).getTime());
+                    this.filteredData = [...this.viewData];
+                    this.dateGroups = this.buildDateGroups(this.filteredData);
+                    this.IsLoading = false;
+                }
+                else {
+                    this.mjNotificationService.CreateSimpleNotification(`Error loading record changes for ${entityName} with primary key ${pkey.ToString()}.`, 'error');
+                    this.IsLoading = false;
+                }
+                this.cdr.markForCheck();
+            });
         }
     }
-    // Filter and search methods
+    // ─── Filter & Search ────────────────────────────────────────────
     onSearchChange() {
         this.applyFilters();
     }
     onFilterChange() {
         this.applyFilters();
     }
+    SetTypeFilter(type) {
+        this.selectedType = this.selectedType === type ? '' : type;
+        this.applyFilters();
+    }
     ClearFilters() {
         this.searchTerm = '';
         this.selectedType = '';
         this.selectedSource = '';
         this.applyFilters();
     }
-    // Version label methods
+    applyFilters() {
+        let filtered = [...this.viewData];
+        if (this.searchTerm.trim()) {
+            const search = this.searchTerm.toLowerCase();
+            filtered = filtered.filter(change => change.ChangesDescription?.toLowerCase().includes(search) ||
+                change.User?.toLowerCase().includes(search) ||
+                change.Comments?.toLowerCase().includes(search));
+        }
+        if (this.selectedType) {
+            filtered = filtered.filter(change => change.Type === this.selectedType);
+        }
+        if (this.selectedSource) {
+            filtered = filtered.filter(change => change.Source === this.selectedSource);
+        }
+        this.filteredData = filtered;
+        this.dateGroups = this.buildDateGroups(this.filteredData);
+        this.cdr.markForCheck();
+    }
+    // ─── Version Labels ─────────────────────────────────────────────
     async LoadRecordLabels() {
         if (!this.record)
             return;
@@ -537,7 +555,6 @@ export class RecordChangesComponent {
             const entityId = this.record.EntityInfo.ID;
             const recordId = this.record.PrimaryKey.ToConcatenatedString();
             const rv = new RunView();
-            // Find all label items that reference this specific record
             const itemsResult = await rv.RunView({
                 EntityName: 'MJ: Version Label Items',
                 Fields: ['VersionLabelID'],
@@ -545,9 +562,11 @@ export class RecordChangesComponent {
                 ResultType: 'simple'
             });
             if (!itemsResult.Success || itemsResult.Results.length === 0) {
-                this.RecordLabels = [];
-                this.IsLoadingLabels = false;
-                this.cdr.markForCheck();
+                this.ngZone.run(() => {
+                    this.RecordLabels = [];
+                    this.IsLoadingLabels = false;
+                    this.cdr.markForCheck();
+                });
                 return;
             }
             const labelIds = [...new Set(itemsResult.Results.map(i => i.VersionLabelID))];
@@ -576,8 +595,10 @@ export class RecordChangesComponent {
             this.RecordLabels = [];
         }
         finally {
-            this.IsLoadingLabels = false;
-            this.cdr.markForCheck();
+            this.ngZone.run(() => {
+                this.IsLoadingLabels = false;
+                this.cdr.markForCheck();
+            });
         }
     }
     OpenCreateWizard() {
@@ -602,24 +623,7 @@ export class RecordChangesComponent {
             default: return '';
         }
     }
-    applyFilters() {
-        let filtered = [...this.viewData];
-        if (this.searchTerm.trim()) {
-            const search = this.searchTerm.toLowerCase();
-            filtered = filtered.filter(change => change.ChangesDescription?.toLowerCase().includes(search) ||
-                change.User?.toLowerCase().includes(search) ||
-                change.Comments?.toLowerCase().includes(search));
-        }
-        if (this.selectedType) {
-            filtered = filtered.filter(change => change.Type === this.selectedType);
-        }
-        if (this.selectedSource) {
-            filtered = filtered.filter(change => change.Source === this.selectedSource);
-        }
-        this.filteredData = filtered;
-        this.cdr.markForCheck();
-    }
-    // Timeline interaction methods
+    // ─── Timeline Interaction ───────────────────────────────────────
     toggleExpansion(changeId) {
         if (this.expandedItems.has(changeId)) {
             this.expandedItems.delete(changeId);
@@ -635,29 +639,44 @@ export class RecordChangesComponent {
             this.toggleExpansion(changeId);
         }
     }
-    // Utility methods for timeline display
-    getChangeTypeClass(type) {
-        switch (type) {
-            case 'Create': return 'change-create';
-            case 'Update': return 'change-update';
-            case 'Delete': return 'change-delete';
-            default: return 'change-unknown';
+    // ─── Date Grouping ─────────────────────────────────────────────
+    buildDateGroups(changes) {
+        const groups = new Map();
+        for (const change of changes) {
+            const label = this.formatDateGroupLabel(new Date(change.ChangedAt));
+            if (!groups.has(label)) {
+                groups.set(label, []);
+            }
+            groups.get(label).push(change);
         }
+        return Array.from(groups.entries()).map(([label, items]) => ({ label, changes: items }));
     }
-    getChangeTypeIcon(type) {
+    formatDateGroupLabel(date) {
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        const diffDays = Math.floor((today.getTime() - target.getTime()) / 86400000);
+        const formatted = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(date);
+        if (diffDays === 0)
+            return `Today \u2014 ${formatted}`;
+        if (diffDays === 1)
+            return `Yesterday \u2014 ${formatted}`;
+        return formatted;
+    }
+    // ─── Display Helpers ────────────────────────────────────────────
+    getChangeTypeCardClass(type) {
         switch (type) {
-            case 'Create': return 'fa-solid fa-plus';
-            case 'Update': return 'fa-solid fa-edit';
-            case 'Delete': return 'fa-solid fa-trash';
-            default: return 'fa-solid fa-question';
+            case 'Create': return 'type-create';
+            case 'Update': return 'type-update';
+            case 'Delete': return 'type-delete';
+            default: return 'type-update';
         }
     }
-    getChangeTypeBadgeClass(type) {
+    getChangeTypeBadgeText(type) {
         switch (type) {
-            case 'Create': return 'badge-create';
-            case 'Update': return 'badge-update';
-            case 'Delete': return 'badge-delete';
-            default: return 'badge-unknown';
+            case 'Create': return 'Created';
+            case 'Delete': return 'Deleted';
+            default: return type;
         }
     }
     getSourceClass(source) {
@@ -674,6 +693,39 @@ export class RecordChangesComponent {
     getTimelineItemLabel(change) {
         return `${change.Type} by ${change.User || 'Unknown User'} on ${this.formatFullDateTime(change.ChangedAt)}`;
     }
+    getUserInitials(user) {
+        if (!user)
+            return '?';
+        // Handle email addresses: take first char of local part + first char of domain
+        if (user.includes('@')) {
+            const local = user.split('@')[0];
+            return local.substring(0, 2).toUpperCase();
+        }
+        // Handle names: first char of each word
+        const parts = user.trim().split(/\s+/);
+        if (parts.length >= 2) {
+            return (parts[0][0] + parts[1][0]).toUpperCase();
+        }
+        return user.substring(0, 2).toUpperCase();
+    }
+    getUserDisplayName(user) {
+        if (!user)
+            return 'Unknown';
+        if (user.includes('@'))
+            return user.split('@')[0];
+        return user;
+    }
+    getUniqueContributorCount() {
+        const users = new Set(this.viewData.map(c => c.User).filter(Boolean));
+        return users.size;
+    }
+    formatTime(date) {
+        return new Intl.DateTimeFormat('en-US', {
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: true
+        }).format(new Date(date));
+    }
     formatRelativeTime(date) {
         const now = new Date();
         const diffMs = now.getTime() - new Date(date).getTime();
@@ -705,70 +757,95 @@ export class RecordChangesComponent {
             timeZoneName: 'short'
         }).format(new Date(date));
     }
+    // ─── Change Summary ─────────────────────────────────────────────
     getChangeSummary(change) {
-        if (change.Type === 'Create') {
-            return 'Record was created';
-        }
-        if (change.Type === 'Delete') {
-            return 'Record was deleted';
-        }
+        if (change.Type === 'Create')
+            return 'Record created';
+        if (change.Type === 'Delete')
+            return 'Record deleted';
         try {
             const changesJson = JSON.parse(change.ChangesJSON || '{}');
-            const fields = Object.keys(changesJson);
-            if (fields.length === 0)
+            const fieldNames = this.extractFieldDisplayNames(changesJson);
+            if (fieldNames.length === 0)
                 return 'No field changes detected';
-            const fieldNames = fields.map(fieldKey => {
-                const changeInfo = changesJson[fieldKey];
-                const field = this.record.EntityInfo.Fields.find((f) => f.Name.trim().toLowerCase() === changeInfo.field?.trim().toLowerCase());
-                return field?.DisplayNameOrName || changeInfo.field;
-            });
-            if (fieldNames.length === 1) {
-                return `${fieldNames[0]} changed`;
-            }
-            if (fieldNames.length === 2) {
-                return `${fieldNames[0]} and ${fieldNames[1]} changed`;
-            }
-            if (fieldNames.length <= 4) {
-                const lastField = fieldNames.pop();
-                return `${fieldNames.join(', ')}, and ${lastField} changed`;
-            }
-            return `${fieldNames.slice(0, 3).join(', ')}, and ${fieldNames.length - 3} other field${fieldNames.length - 3 > 1 ? 's' : ''} changed`;
+            return this.buildFieldListSummary(fieldNames);
         }
         catch {
             return change.ChangesDescription || 'Changes made';
         }
     }
+    getCreatedFieldCount(change) {
+        try {
+            if (!change.FullRecordJSON)
+                return 0;
+            const record = JSON.parse(change.FullRecordJSON);
+            return this.record.EntityInfo.Fields
+                .filter((f) => record[f.Name] != null && record[f.Name] !== '')
+                .length;
+        }
+        catch {
+            return 0;
+        }
+    }
+    extractFieldDisplayNames(changesJson) {
+        return Object.keys(changesJson).map(fieldKey => {
+            const changeInfo = changesJson[fieldKey];
+            const field = this.record.EntityInfo.Fields.find((f) => f.Name.trim().toLowerCase() === changeInfo.field?.trim().toLowerCase());
+            return field?.DisplayNameOrName || changeInfo.field || fieldKey;
+        });
+    }
+    buildFieldListSummary(fieldNames) {
+        if (fieldNames.length === 1)
+            return `${fieldNames[0]} changed`;
+        if (fieldNames.length === 2)
+            return `${fieldNames[0]} and ${fieldNames[1]} changed`;
+        if (fieldNames.length <= 4) {
+            const last = fieldNames[fieldNames.length - 1];
+            return `${fieldNames.slice(0, -1).join(', ')}, and ${last} changed`;
+        }
+        const remaining = fieldNames.length - 3;
+        return `${fieldNames.slice(0, 3).join(', ')}, and ${remaining} other field${remaining > 1 ? 's' : ''} changed`;
+    }
+    // ─── Field Changes (type-aware) ────────────────────────────────
     getFieldChanges(change) {
         try {
             const changesJson = JSON.parse(change.ChangesJSON || '{}');
-            const fields = Object.keys(changesJson);
-            return fields.map(fieldKey => {
-                const changeInfo = changesJson[fieldKey];
-                const field = this.record.EntityInfo.Fields.find((f) => f.Name.trim().toLowerCase() === changeInfo.field?.trim().toLowerCase());
-                const isBooleanField = field?.TSType === EntityFieldTSType.Boolean;
-                const isDateField = field?.TSType === EntityFieldTSType.Date;
-                let diffHtml;
-                const formattedOld = this.formatChangeValue(changeInfo.oldValue, isDateField);
-                const formattedNew = this.formatChangeValue(changeInfo.newValue, isDateField);
-                if (!isBooleanField) {
-                    if (formattedOld !== formattedNew) {
-                        diffHtml = this.generateDiffHtml(formattedOld, formattedNew);
-                    }
-                }
-                return {
-                    field: changeInfo.field,
-                    displayName: field?.DisplayNameOrName || changeInfo.field,
-                    oldValue: formattedOld,
-                    newValue: formattedNew,
-                    isBooleanField,
-                    diffHtml
-                };
-            });
+            return Object.keys(changesJson).map(fieldKey => this.buildFieldChangeInfo(changesJson[fieldKey]));
         }
         catch {
             return [];
         }
     }
+    buildFieldChangeInfo(changeInfo) {
+        const field = this.record.EntityInfo.Fields.find((f) => f.Name.trim().toLowerCase() === changeInfo.field?.trim().toLowerCase());
+        const fieldType = this.classifyFieldType(field);
+        const isDateField = fieldType === 'date';
+        const formattedOld = this.formatChangeValue(changeInfo.oldValue, isDateField);
+        const formattedNew = this.formatChangeValue(changeInfo.newValue, isDateField);
+        let diffHtml;
+        if (fieldType === 'text' && formattedOld !== formattedNew) {
+            diffHtml = this.generateDiffHtml(formattedOld, formattedNew);
+        }
+        return {
+            field: changeInfo.field || '',
+            displayName: field?.DisplayNameOrName || changeInfo.field || '',
+            oldValue: formattedOld,
+            newValue: formattedNew,
+            fieldType,
+            diffHtml
+        };
+    }
+    classifyFieldType(field) {
+        if (!field)
+            return 'text';
+        if (field.TSType === EntityFieldTSType.Boolean)
+            return 'boolean';
+        if (field.TSType === EntityFieldTSType.Date)
+            return 'date';
+        if (field.TSType === EntityFieldTSType.Number)
+            return 'number';
+        return 'text';
+    }
     getCreatedFields(change) {
         try {
             if (!change.FullRecordJSON)
@@ -787,6 +864,7 @@ export class RecordChangesComponent {
             return [];
         }
     }
+    // ─── Value Formatting ───────────────────────────────────────────
     /**
      * Formats a change value for display. Handles corrupted date values (stored as empty objects)
      * and formats ISO date strings into a human-readable format.
@@ -794,48 +872,48 @@ export class RecordChangesComponent {
     formatChangeValue(value, isDateField) {
         if (value == null)
             return '';
-        // Handle object values (e.g., Date objects that were incorrectly serialized as {})
         if (typeof value === 'object') {
             const keys = Object.keys(value);
             if (keys.length === 0)
-                return ''; // Empty object from corrupted date serialization
+                return '';
             return JSON.stringify(value);
         }
-        // Format ISO date strings into a readable format
         if (isDateField && typeof value === 'string') {
             const date = new Date(value);
             if (!isNaN(date.getTime())) {
-                return date.toLocaleString();
+                return new Intl.DateTimeFormat('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                    hour: 'numeric',
+                    minute: '2-digit',
+                    hour12: true
+                }).format(date);
             }
         }
         return String(value);
     }
+    // ─── Diff Generation (text fields only) ─────────────────────────
     generateDiffHtml(oldValue, newValue) {
         if (!oldValue && !newValue) {
-            return this.sanitizer.bypassSecurityTrustHtml('<div class="diff-container"><span class="diff-unchanged">(no change)</span></div>');
+            return this.sanitizer.bypassSecurityTrustHtml('<span class="rc-diff-unchanged">(no change)</span>');
         }
         if (!oldValue) {
-            return this.sanitizer.bypassSecurityTrustHtml(`<div class="diff-container"><span class="diff-added">${this.escapeHtml(newValue)}</span></div>`);
+            return this.sanitizer.bypassSecurityTrustHtml(`<span class="rc-diff-added">${this.escapeHtml(newValue)}</span>`);
         }
         if (!newValue) {
-            return this.sanitizer.bypassSecurityTrustHtml(`<div class="diff-container"><span class="diff-removed">${this.escapeHtml(oldValue)}</span></div>`);
+            return this.sanitizer.bypassSecurityTrustHtml(`<span class="rc-diff-removed">${this.escapeHtml(oldValue)}</span>`);
         }
         const useWordDiff = this.shouldUseWordDiff(oldValue, newValue);
         const diffs = useWordDiff ? diffWords(oldValue, newValue) : diffChars(oldValue, newValue);
-        let html = '<div class="diff-container">';
-        diffs.forEach((part) => {
-            const escapedValue = this.escapeHtml(part.value);
-            if (part.added) {
-                html += `<span class="diff-added">${escapedValue}</span>`;
-            }
-            else if (part.removed) {
-                html += `<span class="diff-removed">${escapedValue}</span>`;
-            }
-            else {
-                html += `<span class="diff-unchanged">${escapedValue}</span>`;
-            }
-        });
-        html += '</div>';
+        const html = diffs.map((part) => {
+            const escaped = this.escapeHtml(part.value);
+            if (part.added)
+                return `<span class="rc-diff-added">${escaped}</span>`;
+            if (part.removed)
+                return `<span class="rc-diff-removed">${escaped}</span>`;
+            return `<span class="rc-diff-unchanged">${escaped}</span>`;
+        }).join('');
         return this.sanitizer.bypassSecurityTrustHtml(html);
     }
     shouldUseWordDiff(oldValue, newValue) {
@@ -849,8 +927,8 @@ export class RecordChangesComponent {
         div.textContent = text;
         return div.innerHTML;
     }
-    static ɵfac = function RecordChangesComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RecordChangesComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.MJNotificationService), i0.ɵɵdirectiveInject(i2.DomSanitizer)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordChangesComponent, selectors: [["mj-record-changes"]], inputs: { record: "record" }, outputs: { dialogClosed: "dialogClosed" }, standalone: false, decls: 4, vars: 9, consts: [[3, "Closed", "Mode", "Title", "Visible", "Resizable", "MinWidthPx", "MaxWidthRatio"], ["text", "Loading history...", "size", "medium"], [1, "record-changes-container"], [1, "create-wizard-overlay"], [1, "labels-section"], [1, "labels-header"], [1, "labels-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-tags"], [1, "labels-count"], ["title", "Create a version label for this record", 1, "create-label-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "labels-loading"], [1, "labels-empty"], [1, "labels-list"], [1, "empty-state"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "label-chip", 3, "title"], [1, "fa-solid", "fa-tag", "label-chip-icon"], [1, "label-chip-name"], [1, "label-chip-meta"], [1, "label-chip-status"], [1, "label-chip-items"], [1, "empty-state-icon"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "empty-state-title"], [1, "empty-state-description"], [1, "empty-state-hint"], [1, "fa-solid", "fa-shield-halved"], [1, "filter-panel"], [1, "filter-controls"], ["type", "text", "placeholder", "Search changes...", "aria-label", "Search record changes", 1, "search-input", 3, "ngModelChange", "input", "ngModel"], ["aria-label", "Filter by change type", 1, "filter-select", 3, "ngModelChange", "change", "ngModel"], ["value", ""], ["value", "Create"], ["value", "Update"], ["value", "Delete"], ["aria-label", "Filter by change source", 1, "filter-select", 3, "ngModelChange", "change", "ngModel"], ["value", "Internal"], ["value", "External"], [1, "filter-results"], [1, "timeline-container"], [1, "no-changes-message"], [1, "timeline"], [1, "fa-solid", "fa-filter"], [1, "clear-filters-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "timeline-item", 3, "expanded"], [1, "timeline-item", 3, "click", "keydown"], [1, "timeline-marker"], [1, "timeline-icon"], [1, "timeline-line"], [1, "timeline-content"], [1, "change-header"], [1, "change-title"], [1, "change-type-badge"], [1, "change-user"], [1, "change-source"], [1, "change-meta"], [1, "change-time", 3, "title"], [1, "change-status"], [1, "change-integration"], [1, "change-summary"], [1, "change-details"], [1, "change-timestamp"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock"], [1, "creation-details"], [1, "deletion-details"], [1, "update-details"], [1, "change-comments"], [1, "change-errors"], [1, "field-changes"], [1, "field-change", "created"], [1, "field-name"], [1, "field-value", "new-value"], [1, "fa-solid", "fa-trash"], [1, "deletion-note"], [1, "fa-solid", "fa-edit"], [1, "field-change"], [1, "boolean-change"], [1, "diff-view"], [1, "value-diff"], [1, "new-value"], [1, "diff-content", 3, "innerHTML"], [1, "old-value"], [1, "value-label"], [1, "value"], [1, "diff-arrow"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-right"], [1, "fa-solid", "fa-comment"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-log"], [1, "create-wizard-overlay", 3, "click"], [1, "create-wizard-container", 3, "click"], [3, "Created", "Cancel", "PreselectedEntity", "PreselectedRecordIds"]], template: function RecordChangesComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function RecordChangesComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RecordChangesComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1.MJNotificationService), i0.ɵɵdirectiveInject(i2.DomSanitizer)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordChangesComponent, selectors: [["mj-record-changes"]], inputs: { record: "record" }, outputs: { dialogClosed: "dialogClosed" }, standalone: false, decls: 4, vars: 9, consts: [[3, "Closed", "Mode", "Title", "Visible", "Resizable", "MinWidthPx", "MaxWidthRatio"], ["text", "Loading history...", "size", "medium"], [1, "rc-container"], [1, "rc-wizard-overlay"], [1, "rc-labels-section"], [1, "rc-labels-header"], [1, "rc-labels-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-tags"], [1, "rc-labels-count"], ["title", "Create a version label for this record", 1, "rc-create-label-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "rc-labels-loading"], [1, "rc-labels-empty"], [1, "rc-labels-list"], [1, "rc-empty-state"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "rc-label-chip", 3, "title"], [1, "fa-solid", "fa-tag", "rc-label-chip-icon"], [1, "rc-label-chip-name"], [1, "rc-label-chip-meta"], [1, "rc-label-chip-status"], [1, "rc-label-chip-items"], [1, "rc-empty-state-icon"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "rc-empty-state-title"], [1, "rc-empty-state-description"], [1, "rc-empty-state-hint"], [1, "fa-solid", "fa-shield-halved"], [1, "rc-page-header"], [1, "rc-page-title"], [1, "rc-page-subtitle"], [1, "rc-header-meta"], [1, "rc-entity-badge"], ["aria-hidden", "true", 1, "fa-solid", "fa-database"], [1, "rc-change-count"], [1, "rc-filter-bar"], [1, "rc-search-wrap"], ["aria-hidden", "true", 1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search changes...", "aria-label", "Search record changes", 1, "rc-search-box", 3, "ngModelChange", "input", "ngModel"], [1, "rc-filter-pill", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-layer-group"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"], [1, "rc-filter-results"], [1, "rc-timeline"], [1, "rc-no-results"], [1, "rc-clear-filters-link", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-filter"], [1, "rc-clear-filters-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "rc-date-group"], [1, "rc-date-label"], [1, "rc-card", 3, "class", "expanded"], [1, "rc-card", 3, "keydown"], [1, "rc-card-header", 3, "click"], [1, "rc-card-header-left"], [1, "rc-card-type-badge"], [1, "rc-card-summary"], [1, "rc-card-meta"], [1, "rc-card-user"], [1, "rc-avatar"], [1, "rc-card-time", 3, "title"], [1, "rc-card-source"], [1, "rc-card-status"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down", "rc-card-chevron"], [1, "rc-card-body"], [1, "rc-deletion-note"], [1, "rc-comments"], [1, "rc-errors"], [1, "rc-field-row"], [1, "rc-field-label"], [1, "rc-field-values"], [1, "rc-val-new"], [1, "rc-bool-change"], [1, "rc-atomic-change"], [1, "rc-text-diff", 3, "innerHTML"], [1, "rc-bool-dot"], [1, "rc-bool-label", "old"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-right", "rc-val-arrow"], [1, "rc-bool-label", "new"], [1, "rc-val-old"], ["aria-hidden", "true", 1, "fa-solid", "fa-comment"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle"], [1, "rc-error-log"], [1, "rc-wizard-overlay", 3, "click"], [1, "rc-wizard-container", 3, "click"], [3, "Created", "Cancel", "PreselectedEntity", "PreselectedRecordIds"]], template: function RecordChangesComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mj-slide-panel", 0);
             i0.ɵɵlistener("Closed", function RecordChangesComponent_Template_mj_slide_panel_Closed_0_listener() { return ctx.OnClose(); });
             i0.ɵɵconditionalCreate(1, RecordChangesComponent_Conditional_1_Template, 1, 0, "mj-loading", 1);
@@ -865,15 +943,15 @@ export class RecordChangesComponent {
             i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowCreateWizard ? 3 : -1);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent, i5.MjSlidePanelComponent, i5.MjLabelCreateComponent], styles: ["/* Record Changes Timeline Styles */\n.record-changes-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 1rem;\n}\n\n/* Version Labels Section */\n.labels-section {\n  background: #f8f9fa;\n  border-radius: 8px;\n  padding: 0.75rem 1rem;\n  margin-bottom: 1rem;\n  border: 1px solid #e9ecef;\n}\n\n.labels-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0.5rem;\n}\n\n.labels-title {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  font-size: 0.9rem;\n  color: #495057;\n}\n\n.labels-title i {\n  color: #6f42c1;\n}\n\n.labels-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  height: 1.25rem;\n  padding: 0 0.35rem;\n  border-radius: 10px;\n  background: #6f42c1;\n  color: white;\n  font-size: 0.7rem;\n  font-weight: 700;\n}\n\n.create-label-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.35rem 0.75rem;\n  border: 1px solid #6f42c1;\n  border-radius: 6px;\n  background: white;\n  color: #6f42c1;\n  font-size: 0.8rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.create-label-btn:hover {\n  background: #6f42c1;\n  color: white;\n}\n\n.labels-loading {\n  font-size: 0.8rem;\n  color: #6c757d;\n  padding: 0.25rem 0;\n}\n\n.labels-loading i {\n  margin-right: 0.25rem;\n}\n\n.labels-empty {\n  font-size: 0.8rem;\n  color: #94a3b8;\n  font-style: italic;\n  padding: 0.25rem 0;\n}\n\n.labels-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.label-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.3rem 0.6rem;\n  background: white;\n  border: 1px solid #dee2e6;\n  border-radius: 16px;\n  font-size: 0.8rem;\n  color: #495057;\n  transition: all 0.15s ease;\n  cursor: default;\n}\n\n.label-chip:hover {\n  border-color: #6f42c1;\n  box-shadow: 0 1px 3px rgba(111, 66, 193, 0.15);\n}\n\n.label-chip-icon {\n  color: #6f42c1;\n  font-size: 0.7rem;\n}\n\n.label-chip-name {\n  font-weight: 600;\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label-chip-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.3rem;\n  font-size: 0.7rem;\n  color: #6c757d;\n}\n\n.label-chip-status {\n  padding: 0.1rem 0.3rem;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.6rem;\n  letter-spacing: 0.03em;\n}\n\n.label-status-active {\n  background: #d4edda;\n  color: #155724;\n}\n\n.label-status-archived {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.label-status-restored {\n  background: #cce7ff;\n  color: #004085;\n}\n\n.label-chip-items {\n  white-space: nowrap;\n}\n\n/* Create Wizard Overlay */\n.create-wizard-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: fadeIn 0.15s ease;\n}\n\n.create-wizard-container {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  width: 90%;\n  max-width: 600px;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 1.5rem;\n  animation: slideUp 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes slideUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* Filter Panel */\n.filter-panel {\n  background: #f8f9fa;\n  border-radius: 8px;\n  padding: 1rem;\n  margin-bottom: 1rem;\n  border: 1px solid #e9ecef;\n}\n\n.filter-controls {\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.search-input {\n  flex: 1;\n  min-width: 200px;\n  padding: 0.5rem 1rem;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  font-size: 0.9rem;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n}\n\n.filter-select {\n  padding: 0.5rem;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  background: white;\n  font-size: 0.9rem;\n  min-width: 120px;\n}\n\n.filter-select:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n}\n\n.filter-results {\n  margin-top: 0.5rem;\n  font-size: 0.85rem;\n  color: #6c757d;\n  font-style: italic;\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: 4rem 2rem;\n  text-align: center;\n  min-height: 400px;\n}\n\n.empty-state-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #e8edf2, #f0f4f8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 1.5rem;\n}\n\n.empty-state-icon i {\n  font-size: 2rem;\n  color: #94a3b8;\n}\n\n.empty-state-title {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: #334155;\n  margin: 0 0 0.75rem 0;\n}\n\n.empty-state-description {\n  font-size: 0.95rem;\n  color: #64748b;\n  line-height: 1.6;\n  max-width: 320px;\n  margin: 0 0 1.5rem 0;\n}\n\n.empty-state-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  background: #f1f5f9;\n  border-radius: 20px;\n  font-size: 0.8rem;\n  color: #64748b;\n}\n\n.empty-state-hint i {\n  color: #94a3b8;\n}\n\n/* No filtered results */\n.no-changes-message {\n  text-align: center;\n  padding: 3rem 1rem;\n  color: #6c757d;\n}\n\n.no-changes-message i {\n  display: block;\n  font-size: 2rem;\n  margin-bottom: 1rem;\n  color: #adb5bd;\n}\n\n.no-changes-message p {\n  font-size: 1rem;\n  margin: 0 0 1rem 0;\n}\n\n.clear-filters-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.4rem 1rem;\n  border: 1px solid #ced4da;\n  border-radius: 6px;\n  background: white;\n  color: #495057;\n  font-size: 0.85rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.clear-filters-btn:hover {\n  background: #f8f9fa;\n  border-color: #adb5bd;\n}\n\n/* Timeline Container */\n.timeline-container {\n  flex: 1;\n  overflow-y: auto;\n  padding-right: 0.5rem;\n}\n\n/* Timeline */\n.timeline {\n  position: relative;\n  padding-left: 2rem;\n}\n\n.timeline-item {\n  position: relative;\n  margin-bottom: 1.5rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n  transform: translateX(2px);\n}\n\n.timeline-item:focus {\n  outline: 2px solid #007bff;\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n.timeline-item.expanded {\n  margin-bottom: 2rem;\n}\n\n/* Timeline Marker */\n.timeline-marker {\n  position: absolute;\n  left: -2rem;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.timeline-icon {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.9rem;\n  color: white;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  z-index: 2;\n}\n\n.timeline-icon.change-create {\n  background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.timeline-icon.change-update {\n  background: linear-gradient(135deg, #007bff, #6f42c1);\n}\n\n.timeline-icon.change-delete {\n  background: linear-gradient(135deg, #dc3545, #fd7e14);\n}\n\n.timeline-icon.change-unknown {\n  background: linear-gradient(135deg, #6c757d, #adb5bd);\n}\n\n.timeline-line {\n  width: 2px;\n  height: 2rem;\n  background: #e9ecef;\n  margin-top: 0.5rem;\n}\n\n/* Timeline Content */\n.timeline-content {\n  background: white;\n  border: 1px solid #e9ecef;\n  border-radius: 8px;\n  padding: 1rem;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n  transition: box-shadow 0.2s ease;\n}\n\n.timeline-item:hover .timeline-content {\n  box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-item.expanded .timeline-content {\n  box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n}\n\n/* Change Header */\n.change-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 0.75rem;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.change-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n}\n\n.change-type-badge {\n  font-size: 0.75rem;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem;\n  border-radius: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.badge-create {\n  background: #d4edda;\n  color: #155724;\n}\n\n.badge-update {\n  background: #cce7ff;\n  color: #004085;\n}\n\n.badge-delete {\n  background: #f8d7da;\n  color: #721c24;\n}\n\n.badge-unknown {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.change-user {\n  font-weight: 600;\n  color: #495057;\n}\n\n.change-source {\n  font-size: 0.8rem;\n  padding: 0.2rem 0.4rem;\n  border-radius: 8px;\n  font-weight: 500;\n}\n\n.source-internal {\n  background: #e7f3ff;\n  color: #0056b3;\n}\n\n.source-external {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.change-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 0.85rem;\n  color: #6c757d;\n  flex-wrap: wrap;\n}\n\n.change-time {\n  font-weight: 500;\n}\n\n.change-status {\n  padding: 0.2rem 0.4rem;\n  border-radius: 8px;\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-complete {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-pending {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-error {\n  background: #f8d7da;\n  color: #721c24;\n}\n\n.status-unknown {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.change-integration {\n  font-style: italic;\n  color: #495057;\n}\n\n/* Change Summary */\n.change-summary {\n  color: #6c757d;\n  font-size: 0.9rem;\n  line-height: 1.4;\n}\n\n/* Change Details */\n.change-details {\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid #e9ecef;\n}\n\n.change-timestamp {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 1rem;\n  padding: 0.5rem;\n  background: #f8f9fa;\n  border-radius: 6px;\n  border-left: 4px solid #6c757d;\n  font-size: 0.9rem;\n  color: #495057;\n}\n\n.change-timestamp i {\n  color: #6c757d;\n}\n\n.change-details h4 {\n  font-size: 1rem;\n  margin-bottom: 1rem;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.change-details h5 {\n  font-size: 0.9rem;\n  margin-bottom: 0.5rem;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Field Changes */\n.field-changes {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.field-change {\n  background: #f8f9fa;\n  border-radius: 6px;\n  padding: 0.75rem;\n  border-left: 4px solid #007bff;\n}\n\n.field-change.created {\n  border-left-color: #28a745;\n}\n\n.field-name {\n  font-weight: 600;\n  color: #495057;\n  margin-bottom: 0.5rem;\n  display: block;\n}\n\n.field-value {\n  font-family: 'Courier New', monospace;\n  font-size: 0.85rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  background: white;\n  border: 1px solid #dee2e6;\n}\n\n.value-diff {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 1rem;\n  align-items: center;\n}\n\n.old-value, .new-value {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.value-label {\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: #6c757d;\n}\n\n.old-value .value {\n  color: #6c757d;\n  background: #f8f9fa;\n  text-decoration: line-through;\n}\n\n.new-value .value {\n  color: #155724;\n  background: #d4edda;\n  font-weight: 500;\n}\n\n.value {\n  font-family: 'Courier New', monospace;\n  font-size: 0.85rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  border: 1px solid #dee2e6;\n  word-break: break-all;\n}\n\n.diff-arrow {\n  color: #007bff;\n  font-size: 1.2rem;\n}\n\n.boolean-change .new-value {\n  font-weight: 600;\n  color: #007bff;\n  font-size: 0.9rem;\n}\n\n/* Creation Details */\n.creation-details .field-change {\n  border-left-color: #28a745;\n}\n\n.creation-details .field-value {\n  color: #155724;\n  background: #d4edda;\n  font-weight: 500;\n}\n\n/* Deletion Details */\n.deletion-details {\n  text-align: center;\n  padding: 1rem;\n}\n\n.deletion-note {\n  color: #6c757d;\n  font-style: italic;\n  margin-bottom: 0;\n}\n\n/* Diff View Styles */\n.diff-view {\n  margin-top: 0.5rem;\n  border: 1px dashed #28a745;\n  border-radius: 4px;\n  padding: 0.25rem;\n}\n\n.diff-content {\n  background: #ffffff;\n  border: 2px solid #007bff;\n  border-radius: 6px;\n  padding: 0.75rem;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  font-size: 0.85rem;\n  line-height: 1.45;\n  overflow-x: auto;\n  min-height: 2rem;\n}\n\n.diff-container {\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.diff-added {\n  background-color: #d1f5d3;\n  color: #22863a;\n  text-decoration: none;\n  border-radius: 3px;\n  padding: 2px 4px;\n  font-weight: 600;\n  display: inline;\n  border: 1px solid #28a745;\n  position: relative;\n  margin: 0 1px;\n}\n\n.diff-removed {\n  background-color: #ffeef0;\n  color: #d73a49;\n  text-decoration: line-through;\n  border-radius: 3px;\n  padding: 2px 4px;\n  font-weight: 600;\n  display: inline;\n  border: 1px solid #dc3545;\n  position: relative;\n  margin: 0 1px;\n}\n\n.diff-unchanged {\n  color: #24292e;\n  display: inline;\n}\n\n/* Hover effects for diff elements */\n.diff-added:hover {\n  background-color: #c3f0c5;\n  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);\n}\n\n.diff-removed:hover {\n  background-color: #ffd6dd;\n  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);\n}\n\n/* Comments and Errors */\n.change-comments, .change-errors {\n  margin-top: 1rem;\n  padding: 0.75rem;\n  border-radius: 6px;\n}\n\n.change-comments {\n  background: #e7f3ff;\n  border-left: 4px solid #007bff;\n}\n\n.change-errors {\n  background: #f8d7da;\n  border-left: 4px solid #dc3545;\n}\n\n.error-log {\n  background: #ffffff;\n  padding: 0.5rem;\n  border-radius: 4px;\n  font-family: 'Courier New', monospace;\n  font-size: 0.8rem;\n  color: #721c24;\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-x: auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .filter-controls {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .search-input, .filter-select {\n    width: 100%;\n  }\n\n  .change-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .change-meta {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.25rem;\n  }\n\n  .value-diff {\n    grid-template-columns: 1fr;\n    gap: 0.5rem;\n  }\n\n  .diff-arrow {\n    justify-self: center;\n    transform: rotate(90deg);\n  }\n\n  .timeline {\n    padding-left: 1.5rem;\n  }\n\n  .timeline-marker {\n    left: -1.5rem;\n  }\n\n  .timeline-icon {\n    width: 2rem;\n    height: 2rem;\n    font-size: 0.8rem;\n  }\n\n  .diff-content {\n    font-size: 0.8rem;\n    padding: 0.5rem;\n  }\n\n  .diff-added, .diff-removed {\n    padding: 1px 2px;\n  }\n}\n\n@media (max-width: 480px) {\n  .record-changes-container {\n    padding: 0.5rem;\n  }\n\n  .timeline-content {\n    padding: 0.75rem;\n  }\n\n  .field-change {\n    padding: 0.5rem;\n  }\n}\n"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent, i5.MjSlidePanelComponent, i5.MjLabelCreateComponent], styles: ["/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   Record Changes \u2014 Option A \"Clean Timeline\"\n   Linear / Notion-inspired minimal timeline design\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px 24px;\n  background: #fafbfc;\n}\n\n/* \u2500\u2500\u2500 Version Labels Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-labels-section {\n  background: #f8f9fa;\n  border-radius: 8px;\n  padding: 12px 16px;\n  margin-bottom: 20px;\n  border: 1px solid #e9ecef;\n}\n\n.rc-labels-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.rc-labels-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  font-size: 13px;\n  color: #495057;\n}\n\n.rc-labels-title i { color: #6f42c1; }\n\n.rc-labels-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 10px;\n  background: #6f42c1;\n  color: #fff;\n  font-size: 10px;\n  font-weight: 700;\n}\n\n.rc-create-label-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 12px;\n  border: 1px solid #6f42c1;\n  border-radius: 6px;\n  background: #fff;\n  color: #6f42c1;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-create-label-btn:hover {\n  background: #6f42c1;\n  color: #fff;\n}\n\n.rc-labels-loading {\n  font-size: 12px;\n  color: #6c757d;\n  padding: 4px 0;\n}\n\n.rc-labels-loading i { margin-right: 4px; }\n\n.rc-labels-empty {\n  font-size: 12px;\n  color: #94a3b8;\n  font-style: italic;\n  padding: 4px 0;\n}\n\n.rc-labels-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.rc-label-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  background: #fff;\n  border: 1px solid #dee2e6;\n  border-radius: 16px;\n  font-size: 12px;\n  color: #495057;\n  transition: all 0.15s ease;\n  cursor: default;\n}\n\n.rc-label-chip:hover {\n  border-color: #6f42c1;\n  box-shadow: 0 1px 3px rgba(111, 66, 193, 0.15);\n}\n\n.rc-label-chip-icon { color: #6f42c1; font-size: 10px; }\n\n.rc-label-chip-name {\n  font-weight: 600;\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-label-chip-meta {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 10px;\n  color: #6c757d;\n}\n\n.rc-label-chip-status {\n  padding: 1px 5px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 9px;\n  letter-spacing: 0.03em;\n}\n\n.label-status-active { background: #d4edda; color: #155724; }\n.label-status-archived { background: #e2e3e5; color: #383d41; }\n.label-status-restored { background: #cce7ff; color: #004085; }\n\n.rc-label-chip-items { white-space: nowrap; }\n\n/* \u2500\u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 32px;\n  text-align: center;\n  min-height: 400px;\n}\n\n.rc-empty-state-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #e8edf2, #f0f4f8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.rc-empty-state-icon i { font-size: 32px; color: #94a3b8; }\n\n.rc-empty-state-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #334155;\n  margin: 0 0 12px 0;\n}\n\n.rc-empty-state-description {\n  font-size: 14px;\n  color: #64748b;\n  line-height: 1.6;\n  max-width: 320px;\n  margin: 0 0 24px 0;\n}\n\n.rc-empty-state-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: #f1f5f9;\n  border-radius: 20px;\n  font-size: 12px;\n  color: #64748b;\n}\n\n.rc-empty-state-hint i { color: #94a3b8; }\n\n/* \u2500\u2500\u2500 Page Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-page-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 24px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid #e5e7eb;\n}\n\n.rc-page-title {\n  font-size: 20px;\n  font-weight: 700;\n  color: #111827;\n  margin: 0;\n}\n\n.rc-page-subtitle {\n  font-size: 13px;\n  color: #6b7280;\n  margin-top: 4px;\n}\n\n.rc-header-meta { text-align: right; }\n\n.rc-entity-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  background: #eff6ff;\n  color: #3b82f6;\n  border: 1px solid #dbeafe;\n}\n\n.rc-change-count {\n  font-size: 12px;\n  color: #9ca3af;\n  margin-top: 6px;\n}\n\n/* \u2500\u2500\u2500 Filter Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-filter-bar {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 20px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.rc-search-wrap {\n  position: relative;\n  flex: 1;\n  min-width: 180px;\n}\n\n.rc-search-wrap i {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #9ca3af;\n  font-size: 13px;\n  pointer-events: none;\n}\n\n.rc-search-box {\n  width: 100%;\n  padding: 8px 12px 8px 36px;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  font-size: 13px;\n  background: #fff;\n  outline: none;\n  color: #111827;\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.rc-search-box:focus {\n  border-color: #6366f1;\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.rc-search-box::placeholder { color: #9ca3af; }\n\n.rc-filter-pill {\n  padding: 7px 14px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid #e5e7eb;\n  background: #fff;\n  cursor: pointer;\n  color: #374151;\n  transition: all 0.15s;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.rc-filter-pill:hover {\n  border-color: #6366f1;\n  color: #6366f1;\n}\n\n.rc-filter-pill.active {\n  background: #6366f1;\n  color: #fff;\n  border-color: #6366f1;\n}\n\n.rc-filter-results {\n  font-size: 12px;\n  color: #6b7280;\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-clear-filters-link {\n  background: none;\n  border: none;\n  color: #6366f1;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  padding: 0;\n  text-decoration: underline;\n}\n\n.rc-clear-filters-link:hover { color: #4f46e5; }\n\n/* \u2500\u2500\u2500 No Results \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-no-results {\n  text-align: center;\n  padding: 48px 16px;\n  color: #6c757d;\n}\n\n.rc-no-results i {\n  display: block;\n  font-size: 32px;\n  margin-bottom: 16px;\n  color: #adb5bd;\n}\n\n.rc-no-results p { font-size: 14px; margin: 0 0 16px 0; }\n\n.rc-clear-filters-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 16px;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  background: #fff;\n  color: #374151;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-clear-filters-btn:hover {\n  border-color: #6366f1;\n  color: #6366f1;\n}\n\n/* \u2500\u2500\u2500 Timeline \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-timeline {\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n}\n\n/* Vertical line running through the timeline */\n.rc-timeline::before {\n  content: '';\n  position: absolute;\n  left: 15px;\n  top: 24px;\n  bottom: 0;\n  width: 2px;\n  background: #e5e7eb;\n}\n\n/* \u2500\u2500\u2500 Date Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-date-group { margin-bottom: 8px; }\n\n.rc-date-label {\n  position: relative;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.8px;\n  color: #9ca3af;\n  padding: 16px 0 12px 44px;\n}\n\n/* Date dot on the timeline line */\n.rc-date-label::before {\n  content: '';\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #e5e7eb;\n  border: 2px solid #fafbfc;\n}\n\n/* \u2500\u2500\u2500 Change Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card {\n  position: relative;\n  margin-left: 44px;\n  margin-bottom: 12px;\n  background: #fff;\n  border-radius: 12px;\n  border: 1px solid #e5e7eb;\n  transition: all 0.2s;\n  overflow: hidden;\n}\n\n.rc-card:hover {\n  border-color: #d1d5db;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);\n}\n\n.rc-card:focus {\n  outline: 2px solid #6366f1;\n  outline-offset: 2px;\n}\n\n/* Colored dot on the timeline line for each card */\n.rc-card::before {\n  content: '';\n  position: absolute;\n  left: -23px;\n  top: 20px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  z-index: 1;\n}\n\n.rc-card.type-update::before {\n  background: #6366f1;\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);\n}\n\n.rc-card.type-create::before {\n  background: #10b981;\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);\n}\n\n.rc-card.type-delete::before {\n  background: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);\n}\n\n/* \u2500\u2500\u2500 Card Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-header {\n  padding: 14px 18px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  gap: 12px;\n}\n\n.rc-card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.rc-card-type-badge {\n  padding: 3px 10px;\n  border-radius: 5px;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.type-update .rc-card-type-badge { background: #eef2ff; color: #6366f1; }\n.type-create .rc-card-type-badge { background: #ecfdf5; color: #059669; }\n.type-delete .rc-card-type-badge { background: #fef2f2; color: #dc2626; }\n\n.rc-card-summary {\n  font-size: 13px;\n  color: #374151;\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 12px;\n  color: #9ca3af;\n  flex-shrink: 0;\n}\n\n.rc-card-user {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  white-space: nowrap;\n}\n\n.rc-avatar {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #6366f1, #8b5cf6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  font-weight: 700;\n  color: #fff;\n  flex-shrink: 0;\n}\n\n.rc-card-time { white-space: nowrap; }\n\n.rc-card-source {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.source-internal { background: #eff6ff; color: #3b82f6; }\n.source-external { background: #fefce8; color: #a16207; }\n\n.rc-card-status {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.status-complete { background: #ecfdf5; color: #059669; }\n.status-pending { background: #fefce8; color: #a16207; }\n.status-error { background: #fef2f2; color: #dc2626; }\n.status-unknown { background: #f3f4f6; color: #6b7280; }\n\n.rc-card-chevron {\n  color: #9ca3af;\n  transition: transform 0.2s;\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.rc-card.expanded .rc-card-chevron { transform: rotate(180deg); }\n\n/* \u2500\u2500\u2500 Card Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-body {\n  border-top: 1px solid #f3f4f6;\n}\n\n/* \u2500\u2500\u2500 Field Row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-field-row {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid #f9fafb;\n}\n\n.rc-field-row:last-child { border-bottom: none; }\n\n.rc-field-label {\n  width: 140px;\n  min-width: 140px;\n  padding: 12px 16px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #6b7280;\n  background: #f9fafb;\n  display: flex;\n  align-items: center;\n  border-right: 1px solid #f3f4f6;\n}\n\n.rc-field-values {\n  flex: 1;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Atomic Change (numbers, dates) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-atomic-change {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.rc-val-old {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: #9ca3af;\n  text-decoration: line-through;\n  font-weight: 400;\n}\n\n.rc-val-arrow {\n  color: #d1d5db;\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.rc-val-new {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: #111827;\n  font-weight: 500;\n}\n\n/* \u2500\u2500\u2500 Boolean Change \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-bool-change {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-bool-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.rc-bool-dot.on { background: #10b981; }\n.rc-bool-dot.off { background: #d1d5db; }\n\n.rc-bool-label {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.rc-bool-label.old {\n  color: #9ca3af;\n  text-decoration: line-through;\n}\n\n.rc-bool-label.new.active { color: #059669; }\n.rc-bool-label.new.inactive { color: #9ca3af; }\n\n/* \u2500\u2500\u2500 Text Diff (strings only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-text-diff {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  line-height: 1.6;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.rc-diff-added {\n  background: #dcfce7;\n  color: #166534;\n  padding: 1px 3px;\n  border-radius: 3px;\n}\n\n.rc-diff-removed {\n  background: #fee2e2;\n  color: #991b1b;\n  padding: 1px 3px;\n  border-radius: 3px;\n  text-decoration: line-through;\n}\n\n.rc-diff-unchanged {\n  color: #374151;\n}\n\n/* \u2500\u2500\u2500 Deletion Note \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-deletion-note {\n  padding: 16px 18px;\n  color: #6b7280;\n  font-size: 13px;\n  font-style: italic;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-deletion-note i {\n  color: #ef4444;\n  font-size: 14px;\n}\n\n/* \u2500\u2500\u2500 Comments & Errors \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-comments {\n  padding: 12px 18px;\n  background: #eff6ff;\n  font-size: 13px;\n  color: #1e40af;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid #f3f4f6;\n}\n\n.rc-comments i {\n  color: #3b82f6;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-errors {\n  padding: 12px 18px;\n  background: #fef2f2;\n  font-size: 13px;\n  color: #991b1b;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid #f3f4f6;\n}\n\n.rc-errors i {\n  color: #ef4444;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-error-log {\n  background: #fff;\n  padding: 8px;\n  border-radius: 4px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  font-size: 12px;\n  color: #991b1b;\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-x: auto;\n  flex: 1;\n}\n\n/* \u2500\u2500\u2500 Create Wizard Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-wizard-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: rc-fadeIn 0.15s ease;\n}\n\n.rc-wizard-container {\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  width: 90%;\n  max-width: 600px;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 24px;\n  animation: rc-slideUp 0.2s ease;\n}\n\n@keyframes rc-fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes rc-slideUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 768px) {\n  .rc-card-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .rc-card-meta {\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .rc-field-row {\n    flex-direction: column;\n  }\n\n  .rc-field-label {\n    width: 100%;\n    min-width: unset;\n    border-right: none;\n    border-bottom: 1px solid #f3f4f6;\n    padding: 8px 16px;\n  }\n\n  .rc-field-values {\n    padding: 8px 16px;\n  }\n\n  .rc-atomic-change {\n    flex-wrap: wrap;\n  }\n\n  .rc-filter-bar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .rc-search-wrap { min-width: unset; }\n\n  .rc-filter-pill { justify-content: center; }\n\n  .rc-page-header {\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .rc-header-meta { text-align: left; }\n}\n\n@media (max-width: 480px) {\n  .rc-container { padding: 12px 16px; }\n\n  .rc-card { margin-left: 36px; }\n\n  .rc-date-label { padding-left: 36px; }\n\n  .rc-card::before { left: -19px; }\n\n  .rc-timeline::before { left: 12px; }\n\n  .rc-date-label::before { left: 7px; }\n}\n"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecordChangesComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-record-changes', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mj-slide-panel\n  [Mode]=\"'slide'\"\n  [Title]=\"'Record Changes History'\"\n  [Visible]=\"IsVisible\"\n  [Resizable]=\"true\"\n  [MinWidthPx]=\"400\"\n  [MaxWidthRatio]=\"0.6\"\n  (Closed)=\"OnClose()\">\n\n  @if (IsLoading) {\n    <mj-loading text=\"Loading history...\" size=\"medium\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <div class=\"record-changes-container\">\n      <!-- Version Labels Section -->\n      <div class=\"labels-section\">\n        <div class=\"labels-header\">\n          <div class=\"labels-title\">\n            <i class=\"fa-solid fa-tags\" aria-hidden=\"true\"></i>\n            <span>Version Labels</span>\n            @if (RecordLabels.length > 0) {\n              <span class=\"labels-count\">{{ RecordLabels.length }}</span>\n            }\n          </div>\n          <button class=\"create-label-btn\" (click)=\"OpenCreateWizard()\" title=\"Create a version label for this record\">\n            <i class=\"fa-solid fa-plus\"></i> Create Label\n          </button>\n        </div>\n        @if (IsLoadingLabels) {\n          <div class=\"labels-loading\">\n            <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading labels...\n          </div>\n        } @else if (RecordLabels.length === 0) {\n          <div class=\"labels-empty\">\n            No version labels for this record yet.\n          </div>\n        } @else {\n          <div class=\"labels-list\">\n            @for (label of RecordLabels; track label.ID) {\n              <div class=\"label-chip\" [title]=\"label.Description || label.Name\">\n                <i class=\"fa-solid fa-tag label-chip-icon\"></i>\n                <span class=\"label-chip-name\">{{ label.Name }}</span>\n                <span class=\"label-chip-meta\">\n                  <span class=\"label-chip-status\" [class]=\"getLabelStatusClass(label.Status)\">{{ label.Status }}</span>\n                  <span class=\"label-chip-items\">{{ label.ItemCount }} item{{ label.ItemCount !== 1 ? 's' : '' }}</span>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      @if (viewData.length === 0) {\n        <!-- Empty state \u2014 no changes ever recorded -->\n        <div class=\"empty-state\">\n          <div class=\"empty-state-icon\">\n            <i class=\"fa-solid fa-clock-rotate-left\"></i>\n          </div>\n          <h3 class=\"empty-state-title\">No Change History</h3>\n          <p class=\"empty-state-description\">\n            This record doesn't have any tracked changes yet.\n            Changes will appear here automatically as edits are made.\n          </p>\n          <div class=\"empty-state-hint\">\n            <i class=\"fa-solid fa-shield-halved\"></i>\n            <span>Record change tracking is managed at the entity level</span>\n          </div>\n        </div>\n      } @else {\n        <!-- Filter Panel -->\n        <div class=\"filter-panel\">\n          <div class=\"filter-controls\">\n            <input\n              type=\"text\"\n              class=\"search-input\"\n              placeholder=\"Search changes...\"\n              [(ngModel)]=\"searchTerm\"\n              (input)=\"onSearchChange()\"\n              aria-label=\"Search record changes\"\n              />\n            <select\n              class=\"filter-select\"\n              [(ngModel)]=\"selectedType\"\n              (change)=\"onFilterChange()\"\n              aria-label=\"Filter by change type\"\n              >\n              <option value=\"\">All Changes</option>\n              <option value=\"Create\">Created</option>\n              <option value=\"Update\">Updated</option>\n              <option value=\"Delete\">Deleted</option>\n            </select>\n            <select\n              class=\"filter-select\"\n              [(ngModel)]=\"selectedSource\"\n              (change)=\"onFilterChange()\"\n              aria-label=\"Filter by change source\"\n              >\n              <option value=\"\">All Sources</option>\n              <option value=\"Internal\">Internal</option>\n              <option value=\"External\">External</option>\n            </select>\n          </div>\n          @if (filteredData.length !== viewData.length) {\n            <div class=\"filter-results\">\n              Showing {{ filteredData.length }} of {{ viewData.length }} changes\n            </div>\n          }\n        </div>\n\n        <!-- Timeline Container -->\n        <div class=\"timeline-container\" [attr.aria-label]=\"'Timeline of changes for ' + record.EntityInfo.Name + ' record'\">\n          @if (filteredData.length === 0) {\n            <div class=\"no-changes-message\">\n              <i class=\"fa-solid fa-filter\"></i>\n              <p>No changes match your current filters.</p>\n              <button class=\"clear-filters-btn\" (click)=\"ClearFilters()\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear Filters\n              </button>\n            </div>\n          } @else {\n            <div class=\"timeline\">\n              @for (change of filteredData; track change.ID; let i = $index) {\n                <div\n                  class=\"timeline-item\"\n                  [class.expanded]=\"expandedItems.has(change.ID)\"\n                  [attr.tabindex]=\"0\"\n                  [attr.aria-expanded]=\"expandedItems.has(change.ID)\"\n                  [attr.aria-label]=\"getTimelineItemLabel(change)\"\n                  (click)=\"toggleExpansion(change.ID)\"\n                  (keydown)=\"onTimelineItemKeydown($event, change.ID)\"\n                  >\n                  <div class=\"timeline-marker\">\n                    <div class=\"timeline-icon\" [class]=\"getChangeTypeClass(change.Type)\">\n                      <i [class]=\"getChangeTypeIcon(change.Type)\" [attr.aria-hidden]=\"true\"></i>\n                    </div>\n                    @if (i < filteredData.length - 1) {\n                      <div class=\"timeline-line\"></div>\n                    }\n                  </div>\n\n                  <div class=\"timeline-content\">\n                    <div class=\"change-header\">\n                      <div class=\"change-title\">\n                        <span class=\"change-type-badge\" [class]=\"getChangeTypeBadgeClass(change.Type)\">\n                          {{ change.Type }}\n                        </span>\n                        <span class=\"change-user\">{{ change.User || 'Unknown User' }}</span>\n                        <span class=\"change-source\" [class]=\"getSourceClass(change.Source)\">\n                          {{ change.Source }}\n                        </span>\n                      </div>\n                      <div class=\"change-meta\">\n                        <span class=\"change-time\" [title]=\"formatFullDateTime(change.ChangedAt)\">\n                          {{ formatRelativeTime(change.ChangedAt) }}\n                        </span>\n                        <span class=\"change-status\" [class]=\"getStatusClass(change.Status)\">\n                          {{ change.Status }}\n                        </span>\n                        @if (change.Integration) {\n                          <span class=\"change-integration\">\n                            via {{ change.Integration }}\n                          </span>\n                        }\n                      </div>\n                    </div>\n\n                    @if (!expandedItems.has(change.ID)) {\n                      <div class=\"change-summary\">\n                        {{ getChangeSummary(change) }}\n                      </div>\n                    }\n\n                    @if (expandedItems.has(change.ID)) {\n                      <div class=\"change-details\">\n                        <div class=\"change-timestamp\">\n                          <i class=\"fa-solid fa-clock\" aria-hidden=\"true\"></i>\n                          <strong>{{ formatFullDateTime(change.ChangedAt) }}</strong>\n                        </div>\n                        @if (change.Type === 'Create') {\n                          <div class=\"creation-details\">\n                            <h4><i class=\"fa-solid fa-plus\"></i> Record Created</h4>\n                            @if (change.FullRecordJSON) {\n                              <div class=\"field-changes\">\n                                @for (field of getCreatedFields(change); track field.name) {\n                                  <div class=\"field-change created\">\n                                    <span class=\"field-name\">{{ field.displayName }}</span>\n                                    <span class=\"field-value new-value\">{{ field.value }}</span>\n                                  </div>\n                                }\n                              </div>\n                            }\n                          </div>\n                        } @else if (change.Type === 'Delete') {\n                          <div class=\"deletion-details\">\n                            <h4><i class=\"fa-solid fa-trash\"></i> Record Deleted</h4>\n                            <p class=\"deletion-note\">This record was permanently removed from the system.</p>\n                          </div>\n                        } @else {\n                          <div class=\"update-details\">\n                            <h4><i class=\"fa-solid fa-edit\"></i> Fields Changed</h4>\n                            <div class=\"field-changes\">\n                              @for (fieldChange of getFieldChanges(change); track fieldChange.field) {\n                                <div class=\"field-change\">\n                                  <div class=\"field-name\">{{ fieldChange.displayName }}</div>\n                                  @if (fieldChange.isBooleanField) {\n                                    <div class=\"boolean-change\">\n                                      <span class=\"new-value\">{{ fieldChange.newValue }}</span>\n                                    </div>\n                                  } @else if (fieldChange.diffHtml) {\n                                    <div class=\"diff-view\">\n                                      <div class=\"diff-content\" [innerHTML]=\"fieldChange.diffHtml\"></div>\n                                    </div>\n                                  } @else {\n                                    <div class=\"value-diff\">\n                                      <div class=\"old-value\">\n                                        <span class=\"value-label\">From:</span>\n                                        <span class=\"value\">{{ fieldChange.oldValue || '(empty)' }}</span>\n                                      </div>\n                                      <div class=\"diff-arrow\">\n                                        <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"></i>\n                                      </div>\n                                      <div class=\"new-value\">\n                                        <span class=\"value-label\">To:</span>\n                                        <span class=\"value\">{{ fieldChange.newValue || '(empty)' }}</span>\n                                      </div>\n                                    </div>\n                                  }\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        }\n\n                        @if (change.Comments) {\n                          <div class=\"change-comments\">\n                            <h5><i class=\"fa-solid fa-comment\"></i> Comments</h5>\n                            <p>{{ change.Comments }}</p>\n                          </div>\n                        }\n\n                        @if (change.ErrorLog) {\n                          <div class=\"change-errors\">\n                            <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Errors</h5>\n                            <pre class=\"error-log\">{{ change.ErrorLog }}</pre>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (ShowCreateWizard) {\n    <div class=\"create-wizard-overlay\" (click)=\"OnLabelCreateCancelled()\">\n      <div class=\"create-wizard-container\" (click)=\"$event.stopPropagation()\">\n        <mj-label-create\n          [PreselectedEntity]=\"record.EntityInfo\"\n          [PreselectedRecordIds]=\"[record.PrimaryKey.KeyValuePairs[0].Value]\"\n          (Created)=\"OnLabelCreated($event)\"\n          (Cancel)=\"OnLabelCreateCancelled()\">\n        </mj-label-create>\n      </div>\n    </div>\n  }\n</mj-slide-panel>\n", styles: ["/* Record Changes Timeline Styles */\n.record-changes-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 1rem;\n}\n\n/* Version Labels Section */\n.labels-section {\n  background: #f8f9fa;\n  border-radius: 8px;\n  padding: 0.75rem 1rem;\n  margin-bottom: 1rem;\n  border: 1px solid #e9ecef;\n}\n\n.labels-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0.5rem;\n}\n\n.labels-title {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  font-size: 0.9rem;\n  color: #495057;\n}\n\n.labels-title i {\n  color: #6f42c1;\n}\n\n.labels-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  height: 1.25rem;\n  padding: 0 0.35rem;\n  border-radius: 10px;\n  background: #6f42c1;\n  color: white;\n  font-size: 0.7rem;\n  font-weight: 700;\n}\n\n.create-label-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.35rem 0.75rem;\n  border: 1px solid #6f42c1;\n  border-radius: 6px;\n  background: white;\n  color: #6f42c1;\n  font-size: 0.8rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.create-label-btn:hover {\n  background: #6f42c1;\n  color: white;\n}\n\n.labels-loading {\n  font-size: 0.8rem;\n  color: #6c757d;\n  padding: 0.25rem 0;\n}\n\n.labels-loading i {\n  margin-right: 0.25rem;\n}\n\n.labels-empty {\n  font-size: 0.8rem;\n  color: #94a3b8;\n  font-style: italic;\n  padding: 0.25rem 0;\n}\n\n.labels-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.label-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.3rem 0.6rem;\n  background: white;\n  border: 1px solid #dee2e6;\n  border-radius: 16px;\n  font-size: 0.8rem;\n  color: #495057;\n  transition: all 0.15s ease;\n  cursor: default;\n}\n\n.label-chip:hover {\n  border-color: #6f42c1;\n  box-shadow: 0 1px 3px rgba(111, 66, 193, 0.15);\n}\n\n.label-chip-icon {\n  color: #6f42c1;\n  font-size: 0.7rem;\n}\n\n.label-chip-name {\n  font-weight: 600;\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label-chip-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.3rem;\n  font-size: 0.7rem;\n  color: #6c757d;\n}\n\n.label-chip-status {\n  padding: 0.1rem 0.3rem;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.6rem;\n  letter-spacing: 0.03em;\n}\n\n.label-status-active {\n  background: #d4edda;\n  color: #155724;\n}\n\n.label-status-archived {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.label-status-restored {\n  background: #cce7ff;\n  color: #004085;\n}\n\n.label-chip-items {\n  white-space: nowrap;\n}\n\n/* Create Wizard Overlay */\n.create-wizard-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: fadeIn 0.15s ease;\n}\n\n.create-wizard-container {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  width: 90%;\n  max-width: 600px;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 1.5rem;\n  animation: slideUp 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes slideUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* Filter Panel */\n.filter-panel {\n  background: #f8f9fa;\n  border-radius: 8px;\n  padding: 1rem;\n  margin-bottom: 1rem;\n  border: 1px solid #e9ecef;\n}\n\n.filter-controls {\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.search-input {\n  flex: 1;\n  min-width: 200px;\n  padding: 0.5rem 1rem;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  font-size: 0.9rem;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n}\n\n.filter-select {\n  padding: 0.5rem;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  background: white;\n  font-size: 0.9rem;\n  min-width: 120px;\n}\n\n.filter-select:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n}\n\n.filter-results {\n  margin-top: 0.5rem;\n  font-size: 0.85rem;\n  color: #6c757d;\n  font-style: italic;\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: 4rem 2rem;\n  text-align: center;\n  min-height: 400px;\n}\n\n.empty-state-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #e8edf2, #f0f4f8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 1.5rem;\n}\n\n.empty-state-icon i {\n  font-size: 2rem;\n  color: #94a3b8;\n}\n\n.empty-state-title {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: #334155;\n  margin: 0 0 0.75rem 0;\n}\n\n.empty-state-description {\n  font-size: 0.95rem;\n  color: #64748b;\n  line-height: 1.6;\n  max-width: 320px;\n  margin: 0 0 1.5rem 0;\n}\n\n.empty-state-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  background: #f1f5f9;\n  border-radius: 20px;\n  font-size: 0.8rem;\n  color: #64748b;\n}\n\n.empty-state-hint i {\n  color: #94a3b8;\n}\n\n/* No filtered results */\n.no-changes-message {\n  text-align: center;\n  padding: 3rem 1rem;\n  color: #6c757d;\n}\n\n.no-changes-message i {\n  display: block;\n  font-size: 2rem;\n  margin-bottom: 1rem;\n  color: #adb5bd;\n}\n\n.no-changes-message p {\n  font-size: 1rem;\n  margin: 0 0 1rem 0;\n}\n\n.clear-filters-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.4rem 1rem;\n  border: 1px solid #ced4da;\n  border-radius: 6px;\n  background: white;\n  color: #495057;\n  font-size: 0.85rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.clear-filters-btn:hover {\n  background: #f8f9fa;\n  border-color: #adb5bd;\n}\n\n/* Timeline Container */\n.timeline-container {\n  flex: 1;\n  overflow-y: auto;\n  padding-right: 0.5rem;\n}\n\n/* Timeline */\n.timeline {\n  position: relative;\n  padding-left: 2rem;\n}\n\n.timeline-item {\n  position: relative;\n  margin-bottom: 1.5rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n  transform: translateX(2px);\n}\n\n.timeline-item:focus {\n  outline: 2px solid #007bff;\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n.timeline-item.expanded {\n  margin-bottom: 2rem;\n}\n\n/* Timeline Marker */\n.timeline-marker {\n  position: absolute;\n  left: -2rem;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.timeline-icon {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.9rem;\n  color: white;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  z-index: 2;\n}\n\n.timeline-icon.change-create {\n  background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.timeline-icon.change-update {\n  background: linear-gradient(135deg, #007bff, #6f42c1);\n}\n\n.timeline-icon.change-delete {\n  background: linear-gradient(135deg, #dc3545, #fd7e14);\n}\n\n.timeline-icon.change-unknown {\n  background: linear-gradient(135deg, #6c757d, #adb5bd);\n}\n\n.timeline-line {\n  width: 2px;\n  height: 2rem;\n  background: #e9ecef;\n  margin-top: 0.5rem;\n}\n\n/* Timeline Content */\n.timeline-content {\n  background: white;\n  border: 1px solid #e9ecef;\n  border-radius: 8px;\n  padding: 1rem;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n  transition: box-shadow 0.2s ease;\n}\n\n.timeline-item:hover .timeline-content {\n  box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-item.expanded .timeline-content {\n  box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n}\n\n/* Change Header */\n.change-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 0.75rem;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.change-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex-wrap: wrap;\n}\n\n.change-type-badge {\n  font-size: 0.75rem;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem;\n  border-radius: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.badge-create {\n  background: #d4edda;\n  color: #155724;\n}\n\n.badge-update {\n  background: #cce7ff;\n  color: #004085;\n}\n\n.badge-delete {\n  background: #f8d7da;\n  color: #721c24;\n}\n\n.badge-unknown {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.change-user {\n  font-weight: 600;\n  color: #495057;\n}\n\n.change-source {\n  font-size: 0.8rem;\n  padding: 0.2rem 0.4rem;\n  border-radius: 8px;\n  font-weight: 500;\n}\n\n.source-internal {\n  background: #e7f3ff;\n  color: #0056b3;\n}\n\n.source-external {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.change-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 0.85rem;\n  color: #6c757d;\n  flex-wrap: wrap;\n}\n\n.change-time {\n  font-weight: 500;\n}\n\n.change-status {\n  padding: 0.2rem 0.4rem;\n  border-radius: 8px;\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-complete {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-pending {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-error {\n  background: #f8d7da;\n  color: #721c24;\n}\n\n.status-unknown {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.change-integration {\n  font-style: italic;\n  color: #495057;\n}\n\n/* Change Summary */\n.change-summary {\n  color: #6c757d;\n  font-size: 0.9rem;\n  line-height: 1.4;\n}\n\n/* Change Details */\n.change-details {\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid #e9ecef;\n}\n\n.change-timestamp {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 1rem;\n  padding: 0.5rem;\n  background: #f8f9fa;\n  border-radius: 6px;\n  border-left: 4px solid #6c757d;\n  font-size: 0.9rem;\n  color: #495057;\n}\n\n.change-timestamp i {\n  color: #6c757d;\n}\n\n.change-details h4 {\n  font-size: 1rem;\n  margin-bottom: 1rem;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.change-details h5 {\n  font-size: 0.9rem;\n  margin-bottom: 0.5rem;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Field Changes */\n.field-changes {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.field-change {\n  background: #f8f9fa;\n  border-radius: 6px;\n  padding: 0.75rem;\n  border-left: 4px solid #007bff;\n}\n\n.field-change.created {\n  border-left-color: #28a745;\n}\n\n.field-name {\n  font-weight: 600;\n  color: #495057;\n  margin-bottom: 0.5rem;\n  display: block;\n}\n\n.field-value {\n  font-family: 'Courier New', monospace;\n  font-size: 0.85rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  background: white;\n  border: 1px solid #dee2e6;\n}\n\n.value-diff {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 1rem;\n  align-items: center;\n}\n\n.old-value, .new-value {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.value-label {\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: #6c757d;\n}\n\n.old-value .value {\n  color: #6c757d;\n  background: #f8f9fa;\n  text-decoration: line-through;\n}\n\n.new-value .value {\n  color: #155724;\n  background: #d4edda;\n  font-weight: 500;\n}\n\n.value {\n  font-family: 'Courier New', monospace;\n  font-size: 0.85rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  border: 1px solid #dee2e6;\n  word-break: break-all;\n}\n\n.diff-arrow {\n  color: #007bff;\n  font-size: 1.2rem;\n}\n\n.boolean-change .new-value {\n  font-weight: 600;\n  color: #007bff;\n  font-size: 0.9rem;\n}\n\n/* Creation Details */\n.creation-details .field-change {\n  border-left-color: #28a745;\n}\n\n.creation-details .field-value {\n  color: #155724;\n  background: #d4edda;\n  font-weight: 500;\n}\n\n/* Deletion Details */\n.deletion-details {\n  text-align: center;\n  padding: 1rem;\n}\n\n.deletion-note {\n  color: #6c757d;\n  font-style: italic;\n  margin-bottom: 0;\n}\n\n/* Diff View Styles */\n.diff-view {\n  margin-top: 0.5rem;\n  border: 1px dashed #28a745;\n  border-radius: 4px;\n  padding: 0.25rem;\n}\n\n.diff-content {\n  background: #ffffff;\n  border: 2px solid #007bff;\n  border-radius: 6px;\n  padding: 0.75rem;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  font-size: 0.85rem;\n  line-height: 1.45;\n  overflow-x: auto;\n  min-height: 2rem;\n}\n\n.diff-container {\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.diff-added {\n  background-color: #d1f5d3;\n  color: #22863a;\n  text-decoration: none;\n  border-radius: 3px;\n  padding: 2px 4px;\n  font-weight: 600;\n  display: inline;\n  border: 1px solid #28a745;\n  position: relative;\n  margin: 0 1px;\n}\n\n.diff-removed {\n  background-color: #ffeef0;\n  color: #d73a49;\n  text-decoration: line-through;\n  border-radius: 3px;\n  padding: 2px 4px;\n  font-weight: 600;\n  display: inline;\n  border: 1px solid #dc3545;\n  position: relative;\n  margin: 0 1px;\n}\n\n.diff-unchanged {\n  color: #24292e;\n  display: inline;\n}\n\n/* Hover effects for diff elements */\n.diff-added:hover {\n  background-color: #c3f0c5;\n  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);\n}\n\n.diff-removed:hover {\n  background-color: #ffd6dd;\n  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);\n}\n\n/* Comments and Errors */\n.change-comments, .change-errors {\n  margin-top: 1rem;\n  padding: 0.75rem;\n  border-radius: 6px;\n}\n\n.change-comments {\n  background: #e7f3ff;\n  border-left: 4px solid #007bff;\n}\n\n.change-errors {\n  background: #f8d7da;\n  border-left: 4px solid #dc3545;\n}\n\n.error-log {\n  background: #ffffff;\n  padding: 0.5rem;\n  border-radius: 4px;\n  font-family: 'Courier New', monospace;\n  font-size: 0.8rem;\n  color: #721c24;\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-x: auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .filter-controls {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .search-input, .filter-select {\n    width: 100%;\n  }\n\n  .change-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .change-meta {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.25rem;\n  }\n\n  .value-diff {\n    grid-template-columns: 1fr;\n    gap: 0.5rem;\n  }\n\n  .diff-arrow {\n    justify-self: center;\n    transform: rotate(90deg);\n  }\n\n  .timeline {\n    padding-left: 1.5rem;\n  }\n\n  .timeline-marker {\n    left: -1.5rem;\n  }\n\n  .timeline-icon {\n    width: 2rem;\n    height: 2rem;\n    font-size: 0.8rem;\n  }\n\n  .diff-content {\n    font-size: 0.8rem;\n    padding: 0.5rem;\n  }\n\n  .diff-added, .diff-removed {\n    padding: 1px 2px;\n  }\n}\n\n@media (max-width: 480px) {\n  .record-changes-container {\n    padding: 0.5rem;\n  }\n\n  .timeline-content {\n    padding: 0.75rem;\n  }\n\n  .field-change {\n    padding: 0.5rem;\n  }\n}\n"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MJNotificationService }, { type: i2.DomSanitizer }], { dialogClosed: [{
+        args: [{ standalone: false, selector: 'mj-record-changes', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mj-slide-panel\n  [Mode]=\"'slide'\"\n  [Title]=\"'Record Changes History'\"\n  [Visible]=\"IsVisible\"\n  [Resizable]=\"true\"\n  [MinWidthPx]=\"400\"\n  [MaxWidthRatio]=\"0.6\"\n  (Closed)=\"OnClose()\">\n\n  @if (IsLoading) {\n    <mj-loading text=\"Loading history...\" size=\"medium\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <div class=\"rc-container\">\n      <!-- Version Labels Section -->\n      <div class=\"rc-labels-section\">\n        <div class=\"rc-labels-header\">\n          <div class=\"rc-labels-title\">\n            <i class=\"fa-solid fa-tags\" aria-hidden=\"true\"></i>\n            <span>Version Labels</span>\n            @if (RecordLabels.length > 0) {\n              <span class=\"rc-labels-count\">{{ RecordLabels.length }}</span>\n            }\n          </div>\n          <button class=\"rc-create-label-btn\" (click)=\"OpenCreateWizard()\" title=\"Create a version label for this record\">\n            <i class=\"fa-solid fa-plus\"></i> Create Label\n          </button>\n        </div>\n        @if (IsLoadingLabels) {\n          <div class=\"rc-labels-loading\">\n            <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading labels...\n          </div>\n        } @else if (RecordLabels.length === 0) {\n          <div class=\"rc-labels-empty\">\n            No version labels for this record yet.\n          </div>\n        } @else {\n          <div class=\"rc-labels-list\">\n            @for (label of RecordLabels; track label.ID) {\n              <div class=\"rc-label-chip\" [title]=\"label.Description || label.Name\">\n                <i class=\"fa-solid fa-tag rc-label-chip-icon\"></i>\n                <span class=\"rc-label-chip-name\">{{ label.Name }}</span>\n                <span class=\"rc-label-chip-meta\">\n                  <span class=\"rc-label-chip-status\" [class]=\"getLabelStatusClass(label.Status)\">{{ label.Status }}</span>\n                  <span class=\"rc-label-chip-items\">{{ label.ItemCount }} item{{ label.ItemCount !== 1 ? 's' : '' }}</span>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      @if (viewData.length === 0) {\n        <!-- Empty state -->\n        <div class=\"rc-empty-state\">\n          <div class=\"rc-empty-state-icon\">\n            <i class=\"fa-solid fa-clock-rotate-left\"></i>\n          </div>\n          <h3 class=\"rc-empty-state-title\">No Change History</h3>\n          <p class=\"rc-empty-state-description\">\n            This record doesn't have any tracked changes yet.\n            Changes will appear here automatically as edits are made.\n          </p>\n          <div class=\"rc-empty-state-hint\">\n            <i class=\"fa-solid fa-shield-halved\"></i>\n            <span>Record change tracking is managed at the entity level</span>\n          </div>\n        </div>\n      } @else {\n        <!-- Page Header -->\n        <div class=\"rc-page-header\">\n          <div>\n            <h2 class=\"rc-page-title\">Change History</h2>\n            <div class=\"rc-page-subtitle\">{{ record.EntityInfo.Name }}</div>\n          </div>\n          <div class=\"rc-header-meta\">\n            <div class=\"rc-entity-badge\">\n              <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n              {{ record.EntityInfo.Name }}\n            </div>\n            <div class=\"rc-change-count\">{{ viewData.length }} change{{ viewData.length !== 1 ? 's' : '' }} &middot; {{ getUniqueContributorCount() }} contributor{{ getUniqueContributorCount() !== 1 ? 's' : '' }}</div>\n          </div>\n        </div>\n\n        <!-- Filter Bar -->\n        <div class=\"rc-filter-bar\">\n          <div class=\"rc-search-wrap\">\n            <i class=\"fa-solid fa-search\" aria-hidden=\"true\"></i>\n            <input\n              class=\"rc-search-box\"\n              type=\"text\"\n              placeholder=\"Search changes...\"\n              [(ngModel)]=\"searchTerm\"\n              (input)=\"onSearchChange()\"\n              aria-label=\"Search record changes\"\n            />\n          </div>\n          <button class=\"rc-filter-pill\" [class.active]=\"!selectedType\" (click)=\"SetTypeFilter('')\">\n            <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"></i> All\n          </button>\n          <button class=\"rc-filter-pill\" [class.active]=\"selectedType === 'Update'\" (click)=\"SetTypeFilter('Update')\">\n            <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i> Updates\n          </button>\n          <button class=\"rc-filter-pill\" [class.active]=\"selectedType === 'Create'\" (click)=\"SetTypeFilter('Create')\">\n            <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i> Creates\n          </button>\n          <button class=\"rc-filter-pill\" [class.active]=\"selectedType === 'Delete'\" (click)=\"SetTypeFilter('Delete')\">\n            <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i> Deletes\n          </button>\n        </div>\n\n        @if (filteredData.length !== viewData.length) {\n          <div class=\"rc-filter-results\">\n            Showing {{ filteredData.length }} of {{ viewData.length }} changes\n            <button class=\"rc-clear-filters-link\" (click)=\"ClearFilters()\">Clear filters</button>\n          </div>\n        }\n\n        <!-- Timeline -->\n        <div class=\"rc-timeline\" [attr.aria-label]=\"'Timeline of changes for ' + record.EntityInfo.Name + ' record'\">\n          @if (filteredData.length === 0) {\n            <div class=\"rc-no-results\">\n              <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n              <p>No changes match your current filters.</p>\n              <button class=\"rc-clear-filters-btn\" (click)=\"ClearFilters()\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear Filters\n              </button>\n            </div>\n          } @else {\n            @for (group of dateGroups; track group.label) {\n              <div class=\"rc-date-group\">\n                <div class=\"rc-date-label\">{{ group.label }}</div>\n\n                @for (change of group.changes; track change.ID) {\n                  <div\n                    class=\"rc-card\"\n                    [class]=\"getChangeTypeCardClass(change.Type)\"\n                    [class.expanded]=\"expandedItems.has(change.ID)\"\n                    [attr.tabindex]=\"0\"\n                    [attr.aria-expanded]=\"expandedItems.has(change.ID)\"\n                    [attr.aria-label]=\"getTimelineItemLabel(change)\"\n                    (keydown)=\"onTimelineItemKeydown($event, change.ID)\"\n                  >\n                    <!-- Card Header -->\n                    <div class=\"rc-card-header\" (click)=\"toggleExpansion(change.ID)\">\n                      <div class=\"rc-card-header-left\">\n                        <span class=\"rc-card-type-badge\">{{ getChangeTypeBadgeText(change.Type) }}</span>\n                        <span class=\"rc-card-summary\">{{ getChangeSummary(change) }}</span>\n                      </div>\n                      <div class=\"rc-card-meta\">\n                        <div class=\"rc-card-user\">\n                          <div class=\"rc-avatar\">{{ getUserInitials(change.User) }}</div>\n                          {{ getUserDisplayName(change.User) }}\n                        </div>\n                        <span class=\"rc-card-time\" [title]=\"formatFullDateTime(change.ChangedAt)\">{{ formatTime(change.ChangedAt) }}</span>\n                        <span class=\"rc-card-source\" [class]=\"getSourceClass(change.Source)\">{{ change.Source }}</span>\n                        <span class=\"rc-card-status\" [class]=\"getStatusClass(change.Status)\">{{ change.Status }}</span>\n                        <i class=\"fa-solid fa-chevron-down rc-card-chevron\" aria-hidden=\"true\"></i>\n                      </div>\n                    </div>\n\n                    <!-- Card Body (expanded) -->\n                    @if (expandedItems.has(change.ID)) {\n                      <div class=\"rc-card-body\">\n                        @if (change.Type === 'Create') {\n                          <!-- Created record fields -->\n                          @if (change.FullRecordJSON) {\n                            @for (field of getCreatedFields(change); track field.name) {\n                              <div class=\"rc-field-row\">\n                                <div class=\"rc-field-label\">{{ field.displayName }}</div>\n                                <div class=\"rc-field-values\">\n                                  <span class=\"rc-val-new\">{{ field.value }}</span>\n                                </div>\n                              </div>\n                            }\n                          }\n                        } @else if (change.Type === 'Delete') {\n                          <div class=\"rc-deletion-note\">\n                            <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n                            This record was permanently removed from the system.\n                          </div>\n                        } @else {\n                          <!-- Update: type-aware field changes -->\n                          @for (fc of getFieldChanges(change); track fc.field) {\n                            <div class=\"rc-field-row\">\n                              <div class=\"rc-field-label\">{{ fc.displayName }}</div>\n                              <div class=\"rc-field-values\">\n                                @if (fc.fieldType === 'boolean') {\n                                  <!-- Boolean: dot indicators -->\n                                  <div class=\"rc-bool-change\">\n                                    <span class=\"rc-bool-dot\" [class.on]=\"fc.oldValue === 'true' || fc.oldValue === '1'\" [class.off]=\"fc.oldValue !== 'true' && fc.oldValue !== '1'\"></span>\n                                    <span class=\"rc-bool-label old\">{{ fc.oldValue === 'true' || fc.oldValue === '1' ? 'Yes' : 'No' }}</span>\n                                    <i class=\"fa-solid fa-arrow-right rc-val-arrow\" aria-hidden=\"true\"></i>\n                                    <span class=\"rc-bool-dot\" [class.on]=\"fc.newValue === 'true' || fc.newValue === '1'\" [class.off]=\"fc.newValue !== 'true' && fc.newValue !== '1'\"></span>\n                                    <span class=\"rc-bool-label new\" [class.active]=\"fc.newValue === 'true' || fc.newValue === '1'\" [class.inactive]=\"fc.newValue !== 'true' && fc.newValue !== '1'\">{{ fc.newValue === 'true' || fc.newValue === '1' ? 'Yes' : 'No' }}</span>\n                                  </div>\n                                } @else if (fc.fieldType === 'date' || fc.fieldType === 'number') {\n                                  <!-- Atomic: old \u2192 new -->\n                                  <div class=\"rc-atomic-change\">\n                                    <span class=\"rc-val-old\">{{ fc.oldValue || '(empty)' }}</span>\n                                    <i class=\"fa-solid fa-arrow-right rc-val-arrow\" aria-hidden=\"true\"></i>\n                                    <span class=\"rc-val-new\">{{ fc.newValue || '(empty)' }}</span>\n                                  </div>\n                                } @else if (fc.diffHtml) {\n                                  <!-- Text: word/char diff -->\n                                  <div class=\"rc-text-diff\" [innerHTML]=\"fc.diffHtml\"></div>\n                                } @else {\n                                  <!-- Fallback: old \u2192 new -->\n                                  <div class=\"rc-atomic-change\">\n                                    <span class=\"rc-val-old\">{{ fc.oldValue || '(empty)' }}</span>\n                                    <i class=\"fa-solid fa-arrow-right rc-val-arrow\" aria-hidden=\"true\"></i>\n                                    <span class=\"rc-val-new\">{{ fc.newValue || '(empty)' }}</span>\n                                  </div>\n                                }\n                              </div>\n                            </div>\n                          }\n                        }\n\n                        @if (change.Comments) {\n                          <div class=\"rc-comments\">\n                            <i class=\"fa-solid fa-comment\" aria-hidden=\"true\"></i>\n                            {{ change.Comments }}\n                          </div>\n                        }\n\n                        @if (change.ErrorLog) {\n                          <div class=\"rc-errors\">\n                            <i class=\"fa-solid fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n                            <pre class=\"rc-error-log\">{{ change.ErrorLog }}</pre>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (ShowCreateWizard) {\n    <div class=\"rc-wizard-overlay\" (click)=\"OnLabelCreateCancelled()\">\n      <div class=\"rc-wizard-container\" (click)=\"$event.stopPropagation()\">\n        <mj-label-create\n          [PreselectedEntity]=\"record.EntityInfo\"\n          [PreselectedRecordIds]=\"[record.PrimaryKey.KeyValuePairs[0].Value]\"\n          (Created)=\"OnLabelCreated($event)\"\n          (Cancel)=\"OnLabelCreateCancelled()\">\n        </mj-label-create>\n      </div>\n    </div>\n  }\n</mj-slide-panel>\n", styles: ["/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   Record Changes \u2014 Option A \"Clean Timeline\"\n   Linear / Notion-inspired minimal timeline design\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px 24px;\n  background: #fafbfc;\n}\n\n/* \u2500\u2500\u2500 Version Labels Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-labels-section {\n  background: #f8f9fa;\n  border-radius: 8px;\n  padding: 12px 16px;\n  margin-bottom: 20px;\n  border: 1px solid #e9ecef;\n}\n\n.rc-labels-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.rc-labels-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  font-size: 13px;\n  color: #495057;\n}\n\n.rc-labels-title i { color: #6f42c1; }\n\n.rc-labels-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 10px;\n  background: #6f42c1;\n  color: #fff;\n  font-size: 10px;\n  font-weight: 700;\n}\n\n.rc-create-label-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 12px;\n  border: 1px solid #6f42c1;\n  border-radius: 6px;\n  background: #fff;\n  color: #6f42c1;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-create-label-btn:hover {\n  background: #6f42c1;\n  color: #fff;\n}\n\n.rc-labels-loading {\n  font-size: 12px;\n  color: #6c757d;\n  padding: 4px 0;\n}\n\n.rc-labels-loading i { margin-right: 4px; }\n\n.rc-labels-empty {\n  font-size: 12px;\n  color: #94a3b8;\n  font-style: italic;\n  padding: 4px 0;\n}\n\n.rc-labels-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.rc-label-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  background: #fff;\n  border: 1px solid #dee2e6;\n  border-radius: 16px;\n  font-size: 12px;\n  color: #495057;\n  transition: all 0.15s ease;\n  cursor: default;\n}\n\n.rc-label-chip:hover {\n  border-color: #6f42c1;\n  box-shadow: 0 1px 3px rgba(111, 66, 193, 0.15);\n}\n\n.rc-label-chip-icon { color: #6f42c1; font-size: 10px; }\n\n.rc-label-chip-name {\n  font-weight: 600;\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-label-chip-meta {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 10px;\n  color: #6c757d;\n}\n\n.rc-label-chip-status {\n  padding: 1px 5px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 9px;\n  letter-spacing: 0.03em;\n}\n\n.label-status-active { background: #d4edda; color: #155724; }\n.label-status-archived { background: #e2e3e5; color: #383d41; }\n.label-status-restored { background: #cce7ff; color: #004085; }\n\n.rc-label-chip-items { white-space: nowrap; }\n\n/* \u2500\u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 64px 32px;\n  text-align: center;\n  min-height: 400px;\n}\n\n.rc-empty-state-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #e8edf2, #f0f4f8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.rc-empty-state-icon i { font-size: 32px; color: #94a3b8; }\n\n.rc-empty-state-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: #334155;\n  margin: 0 0 12px 0;\n}\n\n.rc-empty-state-description {\n  font-size: 14px;\n  color: #64748b;\n  line-height: 1.6;\n  max-width: 320px;\n  margin: 0 0 24px 0;\n}\n\n.rc-empty-state-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: #f1f5f9;\n  border-radius: 20px;\n  font-size: 12px;\n  color: #64748b;\n}\n\n.rc-empty-state-hint i { color: #94a3b8; }\n\n/* \u2500\u2500\u2500 Page Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-page-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 24px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid #e5e7eb;\n}\n\n.rc-page-title {\n  font-size: 20px;\n  font-weight: 700;\n  color: #111827;\n  margin: 0;\n}\n\n.rc-page-subtitle {\n  font-size: 13px;\n  color: #6b7280;\n  margin-top: 4px;\n}\n\n.rc-header-meta { text-align: right; }\n\n.rc-entity-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  background: #eff6ff;\n  color: #3b82f6;\n  border: 1px solid #dbeafe;\n}\n\n.rc-change-count {\n  font-size: 12px;\n  color: #9ca3af;\n  margin-top: 6px;\n}\n\n/* \u2500\u2500\u2500 Filter Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-filter-bar {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 20px;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.rc-search-wrap {\n  position: relative;\n  flex: 1;\n  min-width: 180px;\n}\n\n.rc-search-wrap i {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #9ca3af;\n  font-size: 13px;\n  pointer-events: none;\n}\n\n.rc-search-box {\n  width: 100%;\n  padding: 8px 12px 8px 36px;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  font-size: 13px;\n  background: #fff;\n  outline: none;\n  color: #111827;\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.rc-search-box:focus {\n  border-color: #6366f1;\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.rc-search-box::placeholder { color: #9ca3af; }\n\n.rc-filter-pill {\n  padding: 7px 14px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid #e5e7eb;\n  background: #fff;\n  cursor: pointer;\n  color: #374151;\n  transition: all 0.15s;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.rc-filter-pill:hover {\n  border-color: #6366f1;\n  color: #6366f1;\n}\n\n.rc-filter-pill.active {\n  background: #6366f1;\n  color: #fff;\n  border-color: #6366f1;\n}\n\n.rc-filter-results {\n  font-size: 12px;\n  color: #6b7280;\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-clear-filters-link {\n  background: none;\n  border: none;\n  color: #6366f1;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  padding: 0;\n  text-decoration: underline;\n}\n\n.rc-clear-filters-link:hover { color: #4f46e5; }\n\n/* \u2500\u2500\u2500 No Results \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-no-results {\n  text-align: center;\n  padding: 48px 16px;\n  color: #6c757d;\n}\n\n.rc-no-results i {\n  display: block;\n  font-size: 32px;\n  margin-bottom: 16px;\n  color: #adb5bd;\n}\n\n.rc-no-results p { font-size: 14px; margin: 0 0 16px 0; }\n\n.rc-clear-filters-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 16px;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  background: #fff;\n  color: #374151;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.rc-clear-filters-btn:hover {\n  border-color: #6366f1;\n  color: #6366f1;\n}\n\n/* \u2500\u2500\u2500 Timeline \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-timeline {\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n}\n\n/* Vertical line running through the timeline */\n.rc-timeline::before {\n  content: '';\n  position: absolute;\n  left: 15px;\n  top: 24px;\n  bottom: 0;\n  width: 2px;\n  background: #e5e7eb;\n}\n\n/* \u2500\u2500\u2500 Date Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-date-group { margin-bottom: 8px; }\n\n.rc-date-label {\n  position: relative;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.8px;\n  color: #9ca3af;\n  padding: 16px 0 12px 44px;\n}\n\n/* Date dot on the timeline line */\n.rc-date-label::before {\n  content: '';\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #e5e7eb;\n  border: 2px solid #fafbfc;\n}\n\n/* \u2500\u2500\u2500 Change Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card {\n  position: relative;\n  margin-left: 44px;\n  margin-bottom: 12px;\n  background: #fff;\n  border-radius: 12px;\n  border: 1px solid #e5e7eb;\n  transition: all 0.2s;\n  overflow: hidden;\n}\n\n.rc-card:hover {\n  border-color: #d1d5db;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);\n}\n\n.rc-card:focus {\n  outline: 2px solid #6366f1;\n  outline-offset: 2px;\n}\n\n/* Colored dot on the timeline line for each card */\n.rc-card::before {\n  content: '';\n  position: absolute;\n  left: -23px;\n  top: 20px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  z-index: 1;\n}\n\n.rc-card.type-update::before {\n  background: #6366f1;\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);\n}\n\n.rc-card.type-create::before {\n  background: #10b981;\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);\n}\n\n.rc-card.type-delete::before {\n  background: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);\n}\n\n/* \u2500\u2500\u2500 Card Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-header {\n  padding: 14px 18px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  gap: 12px;\n}\n\n.rc-card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.rc-card-type-badge {\n  padding: 3px 10px;\n  border-radius: 5px;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.3px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.type-update .rc-card-type-badge { background: #eef2ff; color: #6366f1; }\n.type-create .rc-card-type-badge { background: #ecfdf5; color: #059669; }\n.type-delete .rc-card-type-badge { background: #fef2f2; color: #dc2626; }\n\n.rc-card-summary {\n  font-size: 13px;\n  color: #374151;\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rc-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 12px;\n  color: #9ca3af;\n  flex-shrink: 0;\n}\n\n.rc-card-user {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  white-space: nowrap;\n}\n\n.rc-avatar {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #6366f1, #8b5cf6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  font-weight: 700;\n  color: #fff;\n  flex-shrink: 0;\n}\n\n.rc-card-time { white-space: nowrap; }\n\n.rc-card-source {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.source-internal { background: #eff6ff; color: #3b82f6; }\n.source-external { background: #fefce8; color: #a16207; }\n\n.rc-card-status {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.status-complete { background: #ecfdf5; color: #059669; }\n.status-pending { background: #fefce8; color: #a16207; }\n.status-error { background: #fef2f2; color: #dc2626; }\n.status-unknown { background: #f3f4f6; color: #6b7280; }\n\n.rc-card-chevron {\n  color: #9ca3af;\n  transition: transform 0.2s;\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.rc-card.expanded .rc-card-chevron { transform: rotate(180deg); }\n\n/* \u2500\u2500\u2500 Card Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-card-body {\n  border-top: 1px solid #f3f4f6;\n}\n\n/* \u2500\u2500\u2500 Field Row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-field-row {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid #f9fafb;\n}\n\n.rc-field-row:last-child { border-bottom: none; }\n\n.rc-field-label {\n  width: 140px;\n  min-width: 140px;\n  padding: 12px 16px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #6b7280;\n  background: #f9fafb;\n  display: flex;\n  align-items: center;\n  border-right: 1px solid #f3f4f6;\n}\n\n.rc-field-values {\n  flex: 1;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Atomic Change (numbers, dates) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-atomic-change {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.rc-val-old {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: #9ca3af;\n  text-decoration: line-through;\n  font-weight: 400;\n}\n\n.rc-val-arrow {\n  color: #d1d5db;\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.rc-val-new {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  color: #111827;\n  font-weight: 500;\n}\n\n/* \u2500\u2500\u2500 Boolean Change \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-bool-change {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-bool-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.rc-bool-dot.on { background: #10b981; }\n.rc-bool-dot.off { background: #d1d5db; }\n\n.rc-bool-label {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.rc-bool-label.old {\n  color: #9ca3af;\n  text-decoration: line-through;\n}\n\n.rc-bool-label.new.active { color: #059669; }\n.rc-bool-label.new.inactive { color: #9ca3af; }\n\n/* \u2500\u2500\u2500 Text Diff (strings only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-text-diff {\n  font-size: 13px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  line-height: 1.6;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.rc-diff-added {\n  background: #dcfce7;\n  color: #166534;\n  padding: 1px 3px;\n  border-radius: 3px;\n}\n\n.rc-diff-removed {\n  background: #fee2e2;\n  color: #991b1b;\n  padding: 1px 3px;\n  border-radius: 3px;\n  text-decoration: line-through;\n}\n\n.rc-diff-unchanged {\n  color: #374151;\n}\n\n/* \u2500\u2500\u2500 Deletion Note \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-deletion-note {\n  padding: 16px 18px;\n  color: #6b7280;\n  font-size: 13px;\n  font-style: italic;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.rc-deletion-note i {\n  color: #ef4444;\n  font-size: 14px;\n}\n\n/* \u2500\u2500\u2500 Comments & Errors \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-comments {\n  padding: 12px 18px;\n  background: #eff6ff;\n  font-size: 13px;\n  color: #1e40af;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid #f3f4f6;\n}\n\n.rc-comments i {\n  color: #3b82f6;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-errors {\n  padding: 12px 18px;\n  background: #fef2f2;\n  font-size: 13px;\n  color: #991b1b;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  border-top: 1px solid #f3f4f6;\n}\n\n.rc-errors i {\n  color: #ef4444;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n.rc-error-log {\n  background: #fff;\n  padding: 8px;\n  border-radius: 4px;\n  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;\n  font-size: 12px;\n  color: #991b1b;\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-x: auto;\n  flex: 1;\n}\n\n/* \u2500\u2500\u2500 Create Wizard Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.rc-wizard-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: rc-fadeIn 0.15s ease;\n}\n\n.rc-wizard-container {\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  width: 90%;\n  max-width: 600px;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 24px;\n  animation: rc-slideUp 0.2s ease;\n}\n\n@keyframes rc-fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes rc-slideUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 768px) {\n  .rc-card-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .rc-card-meta {\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .rc-field-row {\n    flex-direction: column;\n  }\n\n  .rc-field-label {\n    width: 100%;\n    min-width: unset;\n    border-right: none;\n    border-bottom: 1px solid #f3f4f6;\n    padding: 8px 16px;\n  }\n\n  .rc-field-values {\n    padding: 8px 16px;\n  }\n\n  .rc-atomic-change {\n    flex-wrap: wrap;\n  }\n\n  .rc-filter-bar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .rc-search-wrap { min-width: unset; }\n\n  .rc-filter-pill { justify-content: center; }\n\n  .rc-page-header {\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .rc-header-meta { text-align: left; }\n}\n\n@media (max-width: 480px) {\n  .rc-container { padding: 12px 16px; }\n\n  .rc-card { margin-left: 36px; }\n\n  .rc-date-label { padding-left: 36px; }\n\n  .rc-card::before { left: -19px; }\n\n  .rc-timeline::before { left: 12px; }\n\n  .rc-date-label::before { left: 7px; }\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.MJNotificationService }, { type: i2.DomSanitizer }], { dialogClosed: [{
             type: Output
         }], record: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordChangesComponent, { className: "RecordChangesComponent", filePath: "src/lib/ng-record-changes.component.ts", lineNumber: 27 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordChangesComponent, { className: "RecordChangesComponent", filePath: "src/lib/ng-record-changes.component.ts", lineNumber: 43 }); })();
 //# sourceMappingURL=ng-record-changes.component.js.map