@memberjunction/ng-entity-viewer 5.43.0 → 5.45.0

package/dist/lib/entity-record-detail-panel/entity-record-detail-panel.component.js

@@ -4,33 +4,40 @@ import { EntityInfo, RunView, EntityFieldValueListType } from '@memberjunction/c
 import { buildCompositeKey, buildPkString } from '../utils/record.util';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared-generic";
-import * as i2 from "../pill/pill.component";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "../pill/pill.component";
 const _forTrack0 = ($index, $item) => $item.name;
 const _forTrack1 = ($index, $item) => $item.relatedEntityName;
 function EntityRecordDetailPanelComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 18);
+    i0.ɵɵelement(0, "i", 17);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r0.getEntityIconClass());
 } }
-function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function EntityRecordDetailPanelComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 18);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Details");
+    i0.ɵɵelementEnd();
+} }
+function EntityRecordDetailPanelComponent_For_12_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 23);
-    i0.ɵɵelement(2, "i", 24);
-    i0.ɵɵelementStart(3, "span", 25);
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 22);
+    i0.ɵɵelement(2, "i", 23);
+    i0.ɵɵelementStart(3, "span", 24);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 26);
-    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_0_Template_button_click_5_listener($event) { i0.ɵɵrestoreView(_r2); const field_r3 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.copyToClipboard(field_r3.value, $event)); });
-    i0.ɵɵelement(6, "i", 27);
+    i0.ɵɵelementStart(5, "button", 25);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_For_12_Conditional_0_Template_button_click_5_listener($event) { i0.ɵɵrestoreView(_r2); const field_r3 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.copyToClipboard(field_r3.value, $event)); });
+    i0.ɵɵelement(6, "i", 26);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const field_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(field_r3.label);
 } }
-function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 29);
+function EntityRecordDetailPanelComponent_For_12_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 28);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -38,8 +45,8 @@ function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Con
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(field_r3.displayValue);
 } }
-function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30);
+function EntityRecordDetailPanelComponent_For_12_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -47,27 +54,27 @@ function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Con
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(field_r3.value);
 } }
-function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function EntityRecordDetailPanelComponent_For_12_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 32);
-    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_6_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const field_r3 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onForeignKeyClick(field_r3, $event)); });
-    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_For_12_Conditional_1_Conditional_6_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const field_r3 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onForeignKeyClick(field_r3, $event)); });
+    i0.ɵɵelement(1, "i", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r3 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵproperty("title", i0.ɵɵinterpolate1("Open ", field_r3.relatedEntityName, " record"));
 } }
-function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "span", 25);
+function EntityRecordDetailPanelComponent_For_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "span", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 28);
-    i0.ɵɵconditionalCreate(4, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_4_Template, 2, 1, "span", 29)(5, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_5_Template, 2, 1, "span", 30);
-    i0.ɵɵconditionalCreate(6, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_6_Template, 2, 2, "button", 31);
+    i0.ɵɵelementStart(3, "div", 27);
+    i0.ɵɵconditionalCreate(4, EntityRecordDetailPanelComponent_For_12_Conditional_1_Conditional_4_Template, 2, 1, "span", 28)(5, EntityRecordDetailPanelComponent_For_12_Conditional_1_Conditional_5_Template, 2, 1, "span", 29);
+    i0.ɵɵconditionalCreate(6, EntityRecordDetailPanelComponent_For_12_Conditional_1_Conditional_6_Template, 2, 2, "button", 30);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const field_r3 = i0.ɵɵnextContext().$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(field_r3.label);
     i0.ɵɵadvance();
@@ -77,11 +84,11 @@ function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(field_r3.relatedEntityName ? 6 : -1);
 } }
-function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "span", 25);
+function EntityRecordDetailPanelComponent_For_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "span", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "mj-pill", 33);
+    i0.ɵɵelement(3, "mj-pill", 32);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r3 = i0.ɵɵnextContext().$implicit;
@@ -90,11 +97,11 @@ function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_2_Tem
     i0.ɵɵadvance();
     i0.ɵɵproperty("value", field_r3.value);
 } }
-function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "span", 25);
+function EntityRecordDetailPanelComponent_For_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "span", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 34);
+    i0.ɵɵelementStart(3, "span", 33);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -104,121 +111,111 @@ function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_3_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(field_r3.value);
 } }
-function EntityRecordDetailPanelComponent_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_0_Template, 7, 1, "div", 20)(1, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Template, 7, 5, "div", 21)(2, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_2_Template, 4, 2, "div", 22)(3, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_3_Template, 5, 2, "div", 22);
+function EntityRecordDetailPanelComponent_For_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, EntityRecordDetailPanelComponent_For_12_Conditional_0_Template, 7, 1, "div", 19)(1, EntityRecordDetailPanelComponent_For_12_Conditional_1_Template, 7, 5, "div", 20)(2, EntityRecordDetailPanelComponent_For_12_Conditional_2_Template, 4, 2, "div", 21)(3, EntityRecordDetailPanelComponent_For_12_Conditional_3_Template, 5, 2, "div", 21);
 } if (rf & 2) {
     const field_r3 = ctx.$implicit;
     i0.ɵɵconditional(field_r3.type === "primary-key" ? 0 : field_r3.type === "foreign-key" ? 1 : field_r3.type === "enum" ? 2 : 3);
 } }
-function EntityRecordDetailPanelComponent_Conditional_15_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵtext(1, "No details available");
-    i0.ɵɵelementEnd();
+function EntityRecordDetailPanelComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 10);
 } }
-function EntityRecordDetailPanelComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵrepeaterCreate(1, EntityRecordDetailPanelComponent_Conditional_15_For_2_Template, 4, 1, null, null, _forTrack0);
-    i0.ɵɵconditionalCreate(3, EntityRecordDetailPanelComponent_Conditional_15_Conditional_3_Template, 2, 0, "div", 19);
+function EntityRecordDetailPanelComponent_ng_template_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 34);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Related Records");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.displayFields);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.displayFields.length === 0 ? 3 : -1);
 } }
-function EntityRecordDetailPanelComponent_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵelement(1, "mj-loading", 36);
+function EntityRecordDetailPanelComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "mj-loading", 35);
     i0.ɵɵelementEnd();
 } }
-function EntityRecordDetailPanelComponent_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵtext(1, "No related records");
-    i0.ɵɵelementEnd();
+function EntityRecordDetailPanelComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 12);
 } }
-function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵelement(1, "mj-loading", 45);
+function EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "mj-loading", 44);
     i0.ɵɵelementEnd();
 } }
-function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 51);
+function EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_2_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 50);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx);
 } }
-function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
+function EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 48);
-    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Template_div_click_0_listener($event) { const rec_r8 = i0.ɵɵrestoreView(_r7).$implicit; const relEntity_r6 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onRelatedRecordClick(relEntity_r6, rec_r8, $event)); });
-    i0.ɵɵelementStart(1, "div", 49)(2, "span", 50);
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_2_For_1_Template_div_click_0_listener($event) { const rec_r8 = i0.ɵɵrestoreView(_r7).$implicit; const relEntity_r6 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onRelatedRecordClick(relEntity_r6, rec_r8, $event)); });
+    i0.ɵɵelementStart(1, "div", 48)(2, "span", 49);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Conditional_4_Template, 2, 1, "span", 51);
+    i0.ɵɵconditionalCreate(4, EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_2_For_1_Conditional_4_Template, 2, 1, "span", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 52);
+    i0.ɵɵelement(5, "i", 51);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    let tmp_25_0;
+    let tmp_24_0;
     const rec_r8 = ctx.$implicit;
     const relEntity_r6 = i0.ɵɵnextContext(3).$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.getRelatedRecordDisplayName(relEntity_r6, rec_r8));
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_25_0 = ctx_r0.getRelatedRecordSubtitle(relEntity_r6, rec_r8)) ? 4 : -1, tmp_25_0);
+    i0.ɵɵconditional((tmp_24_0 = ctx_r0.getRelatedRecordSubtitle(relEntity_r6, rec_r8)) ? 4 : -1, tmp_24_0);
 } }
-function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 53);
-    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_Conditional_2_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const relEntity_r6 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onViewAllRelated(relEntity_r6, $event)); });
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_2_Conditional_2_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const relEntity_r6 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onViewAllRelated(relEntity_r6, $event)); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "i", 54);
+    i0.ɵɵelement(3, "i", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const relEntity_r6 = i0.ɵɵnextContext(3).$implicit;
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", relEntity_r6.count, " records");
 } }
-function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Template, 6, 2, "div", 46, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵconditionalCreate(2, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_Conditional_2_Template, 4, 1, "div", 47);
+function EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_2_For_1_Template, 6, 2, "div", 45, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵconditionalCreate(2, EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_2_Conditional_2_Template, 4, 1, "div", 46);
 } if (rf & 2) {
     const relEntity_r6 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵrepeater(relEntity_r6.records);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(relEntity_r6.count > 10 ? 2 : -1);
 } }
-function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43);
-    i0.ɵɵconditionalCreate(1, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_1_Template, 2, 0, "div", 44)(2, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_Template, 3, 1);
+function EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵconditionalCreate(1, EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_1_Template, 2, 0, "div", 43)(2, EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Conditional_2_Template, 3, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const relEntity_r6 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
     i0.ɵɵconditional(relEntity_r6.isLoadingRecords ? 1 : 2);
 } }
-function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Template(rf, ctx) { if (rf & 1) {
+function EntityRecordDetailPanelComponent_Conditional_18_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "div", 39);
-    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Template_div_click_1_listener($event) { const relEntity_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.toggleRelatedEntityExpansion(relEntity_r6, $event)); });
-    i0.ɵɵelement(2, "i", 40)(3, "i");
-    i0.ɵɵelementStart(4, "span", 41);
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 38);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_18_For_1_Template_div_click_1_listener($event) { const relEntity_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleRelatedEntityExpansion(relEntity_r6, $event)); });
+    i0.ɵɵelement(2, "i", 39)(3, "i");
+    i0.ɵɵelementStart(4, "span", 40);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 42);
+    i0.ɵɵelementStart(6, "span", 41);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Template, 3, 1, "div", 43);
+    i0.ɵɵconditionalCreate(8, EntityRecordDetailPanelComponent_Conditional_18_For_1_Conditional_8_Template, 3, 1, "div", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const relEntity_r6 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵclassProp("expanded", relEntity_r6.isExpanded);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("clickable", relEntity_r6.count > 0);
@@ -233,113 +230,108 @@ function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Tem
     i0.ɵɵadvance();
     i0.ɵɵconditional(relEntity_r6.isExpanded ? 8 : -1);
 } }
-function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Template, 9, 13, "div", 37, _forTrack1);
+function EntityRecordDetailPanelComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, EntityRecordDetailPanelComponent_Conditional_18_For_1_Template, 9, 13, "div", 36, _forTrack1);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r0.relatedEntitiesWithRecords);
 } }
-function EntityRecordDetailPanelComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵconditionalCreate(1, EntityRecordDetailPanelComponent_Conditional_22_Conditional_1_Template, 2, 0, "div", 35)(2, EntityRecordDetailPanelComponent_Conditional_22_Conditional_2_Template, 2, 0, "div", 19)(3, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_Template, 2, 0);
+function EntityRecordDetailPanelComponent_Conditional_19_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 55);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Organic Key Matches");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.isLoadingRelationships ? 1 : ctx_r0.relatedEntitiesWithRecords.length === 0 ? 2 : 3);
 } }
-function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
+function EntityRecordDetailPanelComponent_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
     i0.ɵɵelement(1, "mj-loading", 56);
     i0.ɵɵelementEnd();
 } }
-function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵtext(1, "No organic key matches");
-    i0.ɵɵelementEnd();
+function EntityRecordDetailPanelComponent_Conditional_19_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 54);
 } }
-function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵelement(1, "mj-loading", 45);
+function EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "mj-loading", 44);
     i0.ɵɵelementEnd();
 } }
-function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 51);
+function EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_2_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 50);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx);
 } }
-function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
+function EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 48);
-    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Template_div_click_0_listener($event) { const rec_r14 = i0.ɵɵrestoreView(_r13).$implicit; const match_r12 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onOrganicKeyRecordClick(match_r12, rec_r14, $event)); });
-    i0.ɵɵelementStart(1, "div", 49)(2, "span", 50);
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_2_For_1_Template_div_click_0_listener($event) { const rec_r14 = i0.ɵɵrestoreView(_r13).$implicit; const match_r12 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onOrganicKeyRecordClick(match_r12, rec_r14, $event)); });
+    i0.ɵɵelementStart(1, "div", 48)(2, "span", 49);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Conditional_4_Template, 2, 1, "span", 51);
+    i0.ɵɵconditionalCreate(4, EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_2_For_1_Conditional_4_Template, 2, 1, "span", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 52);
+    i0.ɵɵelement(5, "i", 51);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    let tmp_26_0;
+    let tmp_25_0;
     const rec_r14 = ctx.$implicit;
     const match_r12 = i0.ɵɵnextContext(3).$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(4);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.getOrganicKeyRecordDisplayName(match_r12, rec_r14));
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_26_0 = ctx_r0.getOrganicKeyRecordSubtitle(match_r12, rec_r14)) ? 4 : -1, tmp_26_0);
+    i0.ɵɵconditional((tmp_25_0 = ctx_r0.getOrganicKeyRecordSubtitle(match_r12, rec_r14)) ? 4 : -1, tmp_25_0);
 } }
-function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 53);
-    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_2_Conditional_2_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const match_r12 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onViewAllOrganicKey(match_r12, $event)); });
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_2_Conditional_2_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const match_r12 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onViewAllOrganicKey(match_r12, $event)); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "i", 54);
+    i0.ɵɵelement(3, "i", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const match_r12 = i0.ɵɵnextContext(3).$implicit;
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", match_r12.count, " records");
 } }
-function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Template, 6, 2, "div", 46, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵconditionalCreate(2, EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_2_Conditional_2_Template, 4, 1, "div", 47);
+function EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_2_For_1_Template, 6, 2, "div", 45, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵconditionalCreate(2, EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_2_Conditional_2_Template, 4, 1, "div", 46);
 } if (rf & 2) {
     const match_r12 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵrepeater(match_r12.records);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(match_r12.count > 10 ? 2 : -1);
 } }
-function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43);
-    i0.ɵɵconditionalCreate(1, EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_1_Template, 2, 0, "div", 44)(2, EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Conditional_2_Template, 3, 1);
+function EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵconditionalCreate(1, EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_1_Template, 2, 0, "div", 43)(2, EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Conditional_2_Template, 3, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const match_r12 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
     i0.ɵɵconditional(match_r12.isLoadingRecords ? 1 : 2);
 } }
-function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Template(rf, ctx) { if (rf & 1) {
+function EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "div", 39);
-    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Template_div_click_1_listener($event) { const match_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleOrganicKeyExpansion(match_r12, $event)); });
-    i0.ɵɵelement(2, "i", 40)(3, "i");
-    i0.ɵɵelementStart(4, "span", 41);
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 38);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Template_div_click_1_listener($event) { const match_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.toggleOrganicKeyExpansion(match_r12, $event)); });
+    i0.ɵɵelement(2, "i", 39)(3, "i");
+    i0.ɵɵelementStart(4, "span", 40);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 42);
+    i0.ɵɵelementStart(6, "span", 41);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Conditional_8_Template, 3, 1, "div", 43);
+    i0.ɵɵconditionalCreate(8, EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Conditional_8_Template, 3, 1, "div", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const match_r12 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(4);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵclassProp("expanded", match_r12.isExpanded);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("clickable", match_r12.count > 0);
@@ -354,39 +346,25 @@ function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Condition
     i0.ɵɵadvance();
     i0.ɵɵconditional(match_r12.isExpanded ? 8 : -1);
 } }
-function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_For_1_Template, 9, 13, "div", 37, _forTrack1);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵrepeater(ctx_r0.organicKeyMatchesWithRecords);
-} }
-function EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵconditionalCreate(1, EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_1_Template, 2, 0, "div", 35)(2, EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_2_Template, 2, 0, "div", 19)(3, EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Conditional_3_Template, 2, 0);
-    i0.ɵɵelementEnd();
+function EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_For_1_Template, 9, 13, "div", 36, _forTrack1);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.isLoadingOrganicKeys ? 1 : ctx_r0.organicKeyMatchesWithRecords.length === 0 ? 2 : 3);
+    i0.ɵɵrepeater(ctx_r0.organicKeyMatchesWithRecords);
 } }
-function EntityRecordDetailPanelComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function EntityRecordDetailPanelComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 9);
-    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_23_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleSection("organicKeys")); });
-    i0.ɵɵelement(2, "i", 55);
-    i0.ɵɵelementStart(3, "span", 11);
-    i0.ɵɵtext(4, "Organic Key Matches");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 12);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, EntityRecordDetailPanelComponent_Conditional_23_Conditional_6_Template, 4, 1, "div", 13);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 8);
+    i0.ɵɵtwoWayListener("ExpandedChange", function EntityRecordDetailPanelComponent_Conditional_19_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.organicKeysSectionExpanded, $event) || (ctx_r0.organicKeysSectionExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtemplate(1, EntityRecordDetailPanelComponent_Conditional_19_ng_template_1_Template, 3, 0, "ng-template", 9);
+    i0.ɵɵconditionalCreate(2, EntityRecordDetailPanelComponent_Conditional_19_Conditional_2_Template, 2, 0, "div", 11)(3, EntityRecordDetailPanelComponent_Conditional_19_Conditional_3_Template, 1, 0, "mj-empty-state", 54)(4, EntityRecordDetailPanelComponent_Conditional_19_Conditional_4_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.organicKeysSectionExpanded)("fa-chevron-right", !ctx_r0.organicKeysSectionExpanded);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.organicKeysSectionExpanded ? 6 : -1);
+    i0.ɵɵtwoWayProperty("Expanded", ctx_r0.organicKeysSectionExpanded);
+    i0.ɵɵproperty("TitleIconMuted", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.isLoadingOrganicKeys ? 2 : ctx_r0.organicKeyMatchesWithRecords.length === 0 ? 3 : 4);
 } }
 /**
  * EntityRecordDetailPanelComponent - A reusable panel for displaying entity record details
@@ -1024,20 +1002,6 @@ export class EntityRecordDetailPanelComponent extends BaseAngularComponent {
         }
         return '';
     }
-    /**
-     * Toggle section expansion
-     */
-    toggleSection(section) {
-        if (section === 'details') {
-            this.detailsSectionExpanded = !this.detailsSectionExpanded;
-        }
-        else if (section === 'relationships') {
-            this.relationshipsSectionExpanded = !this.relationshipsSectionExpanded;
-        }
-        else {
-            this.organicKeysSectionExpanded = !this.organicKeysSectionExpanded;
-        }
-    }
     /**
      * Get only related entities that have records (count > 0)
      */
@@ -1085,7 +1049,7 @@ export class EntityRecordDetailPanelComponent extends BaseAngularComponent {
         return `fa-solid fa-${icon}`;
     }
     static ɵfac = function EntityRecordDetailPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EntityRecordDetailPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityRecordDetailPanelComponent, selectors: [["mj-entity-record-detail-panel"]], inputs: { entity: "entity", record: "record" }, outputs: { close: "close", openRecord: "openRecord", navigateToRelated: "navigateToRelated", openRelatedRecord: "openRelatedRecord", openForeignKeyRecord: "openForeignKeyRecord" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 28, vars: 13, consts: [[1, "entity-record-card-container"], [1, "panel-header"], [1, "panel-title-row"], [1, "entity-icon", 3, "class"], [1, "panel-title"], ["title", "Close", "aria-label", "Close panel", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "panel-content"], [1, "section"], [1, "section-header", 3, "click"], [1, "fa-solid", "fa-info-circle", "section-icon"], [1, "section-title"], [1, "fa-solid", "expand-icon"], [1, "section-content"], [1, "fa-solid", "fa-project-diagram", "section-icon"], [1, "panel-footer"], [1, "open-record-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "entity-icon"], [1, "empty-section"], [1, "field-row", "field-row-pk"], [1, "field-row", "field-row-fk"], [1, "field-row"], [1, "pk-row"], [1, "fa-solid", "fa-key", "pk-icon"], [1, "field-label"], ["title", "Copy ID", 1, "copy-btn", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "fk-value-row"], [1, "field-value", "fk-display-value"], [1, "field-value", "fk-id-value"], [1, "fk-link-btn", 3, "title"], [1, "fk-link-btn", 3, "click", "title"], [3, "value"], [1, "field-value"], [1, "relationships-loading"], ["text", "Loading related records...", "size", "small"], [1, "related-entity-group", 3, "expanded"], [1, "related-entity-group"], [1, "related-entity-header", 3, "click"], [1, "fa-solid", "expand-chevron"], [1, "related-entity-name"], [1, "related-entity-count"], [1, "related-records-list"], [1, "records-loading"], ["text", "Loading...", "size", "small"], [1, "related-record-item"], [1, "view-all-link"], [1, "related-record-item", 3, "click"], [1, "record-info"], [1, "record-name"], [1, "record-subtitle"], [1, "fa-solid", "fa-external-link-alt", "record-open-icon"], [1, "view-all-link", 3, "click"], [1, "fa-solid", "fa-arrow-right"], [1, "fa-solid", "fa-link", "section-icon"], ["text", "Loading organic key matches...", "size", "small"]], template: function EntityRecordDetailPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityRecordDetailPanelComponent, selectors: [["mj-entity-record-detail-panel"]], inputs: { entity: "entity", record: "record" }, outputs: { close: "close", openRecord: "openRecord", navigateToRelated: "navigateToRelated", openRelatedRecord: "openRelatedRecord", openForeignKeyRecord: "openForeignKeyRecord" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 24, vars: 9, consts: [[1, "entity-record-card-container"], [1, "panel-header"], [1, "panel-title-row"], [1, "entity-icon", 3, "class"], [1, "panel-title"], ["title", "Close", "aria-label", "Close panel", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "panel-content"], [3, "ExpandedChange", "Expanded", "TitleIconMuted"], ["mjAccordionTitle", ""], ["Size", "compact", "Icon", "fa-solid fa-circle-info", "Title", "No details available"], [1, "relationships-loading"], ["Size", "compact", "Icon", "fa-solid fa-diagram-project", "Title", "No related records"], [3, "Expanded", "TitleIconMuted"], [1, "panel-footer"], [1, "open-record-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "entity-icon"], [1, "fa-solid", "fa-info-circle"], [1, "field-row", "field-row-pk"], [1, "field-row", "field-row-fk"], [1, "field-row"], [1, "pk-row"], [1, "fa-solid", "fa-key", "pk-icon"], [1, "field-label"], ["title", "Copy ID", 1, "copy-btn", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "fk-value-row"], [1, "field-value", "fk-display-value"], [1, "field-value", "fk-id-value"], [1, "fk-link-btn", 3, "title"], [1, "fk-link-btn", 3, "click", "title"], [3, "value"], [1, "field-value"], [1, "fa-solid", "fa-project-diagram"], ["text", "Loading related records...", "size", "small"], [1, "related-entity-group", 3, "expanded"], [1, "related-entity-group"], [1, "related-entity-header", 3, "click"], [1, "fa-solid", "expand-chevron"], [1, "related-entity-name"], [1, "related-entity-count"], [1, "related-records-list"], [1, "records-loading"], ["text", "Loading...", "size", "small"], [1, "related-record-item"], [1, "view-all-link"], [1, "related-record-item", 3, "click"], [1, "record-info"], [1, "record-name"], [1, "record-subtitle"], [1, "fa-solid", "fa-external-link-alt", "record-open-icon"], [1, "view-all-link", 3, "click"], [1, "fa-solid", "fa-arrow-right"], ["Size", "compact", "Icon", "fa-solid fa-link", "Title", "No organic key matches"], [1, "fa-solid", "fa-link"], ["text", "Loading organic key matches...", "size", "small"]], template: function EntityRecordDetailPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
             i0.ɵɵconditionalCreate(3, EntityRecordDetailPanelComponent_Conditional_3_Template, 1, 2, "i", 3);
             i0.ɵɵelementStart(4, "h3", 4);
@@ -1095,53 +1059,48 @@ export class EntityRecordDetailPanelComponent extends BaseAngularComponent {
             i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Template_button_click_6_listener() { return ctx.onClose(); });
             i0.ɵɵelement(7, "i", 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(8, "div", 7)(9, "div", 8)(10, "div", 9);
-            i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Template_div_click_10_listener() { return ctx.toggleSection("details"); });
-            i0.ɵɵelement(11, "i", 10);
-            i0.ɵɵelementStart(12, "span", 11);
-            i0.ɵɵtext(13, "Details");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(14, "i", 12);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(15, EntityRecordDetailPanelComponent_Conditional_15_Template, 4, 1, "div", 13);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "div", 8)(17, "div", 9);
-            i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Template_div_click_17_listener() { return ctx.toggleSection("relationships"); });
-            i0.ɵɵelement(18, "i", 14);
-            i0.ɵɵelementStart(19, "span", 11);
-            i0.ɵɵtext(20, "Related Records");
+            i0.ɵɵelementStart(8, "div", 7)(9, "mj-accordion-panel", 8);
+            i0.ɵɵtwoWayListener("ExpandedChange", function EntityRecordDetailPanelComponent_Template_mj_accordion_panel_ExpandedChange_9_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.detailsSectionExpanded, $event) || (ctx.detailsSectionExpanded = $event); return $event; });
+            i0.ɵɵtemplate(10, EntityRecordDetailPanelComponent_ng_template_10_Template, 3, 0, "ng-template", 9);
+            i0.ɵɵrepeaterCreate(11, EntityRecordDetailPanelComponent_For_12_Template, 4, 1, null, null, _forTrack0);
+            i0.ɵɵconditionalCreate(13, EntityRecordDetailPanelComponent_Conditional_13_Template, 1, 0, "mj-empty-state", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(21, "i", 12);
+            i0.ɵɵelementStart(14, "mj-accordion-panel", 8);
+            i0.ɵɵtwoWayListener("ExpandedChange", function EntityRecordDetailPanelComponent_Template_mj_accordion_panel_ExpandedChange_14_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.relationshipsSectionExpanded, $event) || (ctx.relationshipsSectionExpanded = $event); return $event; });
+            i0.ɵɵtemplate(15, EntityRecordDetailPanelComponent_ng_template_15_Template, 3, 0, "ng-template", 9);
+            i0.ɵɵconditionalCreate(16, EntityRecordDetailPanelComponent_Conditional_16_Template, 2, 0, "div", 11)(17, EntityRecordDetailPanelComponent_Conditional_17_Template, 1, 0, "mj-empty-state", 12)(18, EntityRecordDetailPanelComponent_Conditional_18_Template, 2, 0);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(22, EntityRecordDetailPanelComponent_Conditional_22_Template, 4, 1, "div", 13);
+            i0.ɵɵconditionalCreate(19, EntityRecordDetailPanelComponent_Conditional_19_Template, 5, 3, "mj-accordion-panel", 13);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(23, EntityRecordDetailPanelComponent_Conditional_23_Template, 7, 5, "div", 8);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "div", 15)(25, "button", 16);
-            i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Template_button_click_25_listener() { return ctx.onOpenRecord(); });
-            i0.ɵɵelement(26, "i", 17);
-            i0.ɵɵtext(27, " Open Full Record ");
+            i0.ɵɵelementStart(20, "div", 14)(21, "button", 15);
+            i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Template_button_click_21_listener() { return ctx.onOpenRecord(); });
+            i0.ɵɵelement(22, "i", 16);
+            i0.ɵɵtext(23, " Open Full Record ");
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵconditional((ctx.entity == null ? null : ctx.entity.Icon) ? 3 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.recordTitle);
-            i0.ɵɵadvance(9);
-            i0.ɵɵclassProp("fa-chevron-down", ctx.detailsSectionExpanded)("fa-chevron-right", !ctx.detailsSectionExpanded);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.detailsSectionExpanded ? 15 : -1);
-            i0.ɵɵadvance(6);
-            i0.ɵɵclassProp("fa-chevron-down", ctx.relationshipsSectionExpanded)("fa-chevron-right", !ctx.relationshipsSectionExpanded);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.relationshipsSectionExpanded ? 22 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtwoWayProperty("Expanded", ctx.detailsSectionExpanded);
+            i0.ɵɵproperty("TitleIconMuted", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.displayFields);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.displayFields.length === 0 ? 13 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.organicKeyMatches.length > 0 || ctx.isLoadingOrganicKeys ? 23 : -1);
-        } }, dependencies: [i1.LoadingComponent, i2.PillComponent], styles: [".entity-record-card-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.panel-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.section[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 12px 20px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n.section-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.section-icon[_ngcontent-%COMP%] {\n  width: 20px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  margin-right: 10px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.loading-icon[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.section-content[_ngcontent-%COMP%] {\n  padding: 0 20px 12px 20px;\n}\n\n.empty-section[_ngcontent-%COMP%] {\n  padding: 12px 0;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n.relationships-loading[_ngcontent-%COMP%] {\n  padding: 20px 0;\n  display: flex;\n  justify-content: center;\n}\n\n.field-row[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n  border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n.field-row[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.field-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.field-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  word-break: break-word;\n}\n\n\n\n.field-row-pk[_ngcontent-%COMP%] {\n  flex-direction: row;\n  padding: 6px 0;\n}\n\n.pk-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.pk-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.pk-row[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n  flex: 1;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.copy-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n.copy-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.field-row-fk[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.fk-value-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fk-display-value[_ngcontent-%COMP%] {\n  flex: 1;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.fk-link-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.fk-link-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.fk-link-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n\n.fk-id-only[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n  padding: 4px 8px;\n}\n\n.fk-id-value[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-family: monospace;\n  color: var(--mj-text-muted);\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.related-entity-group[_ngcontent-%COMP%] {\n  margin-bottom: 4px;\n  border-radius: 6px;\n  overflow: hidden;\n}\n.related-entity-group.expanded[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  margin-bottom: 8px;\n}\n\n\n\n.related-entity-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 8px;\n  transition: background 0.15s ease;\n}\n.related-entity-header.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n.related-entity-header.clickable[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.related-entity-header.loading[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n.expand-chevron[_ngcontent-%COMP%] {\n  width: 12px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.related-entity-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(2) {\n  width: 16px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.related-entity-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.related-entity-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  min-width: 24px;\n  text-align: right;\n}\n\n\n\n.related-records-list[_ngcontent-%COMP%] {\n  padding: 4px 8px 8px 32px;\n}\n\n.records-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 0;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.related-record-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  margin-bottom: 2px;\n  background: var(--mj-bg-surface);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid var(--mj-border-default);\n}\n.related-record-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 1px 4px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.related-record-item[_ngcontent-%COMP%]:hover   .record-open-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.record-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.record-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-open-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: color 0.15s ease;\n}\n\n.view-all-link[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px;\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n.view-all-link[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.panel-footer[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.open-record-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition: all 0.15s ease;\n}\n.open-record-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n.open-record-btn[_ngcontent-%COMP%]:active {\n  transform: scale(0.98);\n}"] });
+            i0.ɵɵtwoWayProperty("Expanded", ctx.relationshipsSectionExpanded);
+            i0.ɵɵproperty("TitleIconMuted", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoadingRelationships ? 16 : ctx.relatedEntitiesWithRecords.length === 0 ? 17 : 18);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.organicKeyMatches.length > 0 || ctx.isLoadingOrganicKeys ? 19 : -1);
+        } }, dependencies: [i1.LoadingComponent, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJEmptyStateComponent, i3.PillComponent], styles: [".entity-record-card-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.panel-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n\n\n\n.loading-icon[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.relationships-loading[_ngcontent-%COMP%] {\n  padding: 20px 0;\n  display: flex;\n  justify-content: center;\n}\n\n.field-row[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n  border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n.field-row[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.field-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.field-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  word-break: break-word;\n}\n\n\n\n.field-row-pk[_ngcontent-%COMP%] {\n  flex-direction: row;\n  padding: 6px 0;\n}\n\n.pk-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.pk-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.pk-row[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n  flex: 1;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.copy-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n.copy-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.field-row-fk[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.fk-value-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fk-display-value[_ngcontent-%COMP%] {\n  flex: 1;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.fk-link-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.fk-link-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.fk-link-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n\n.fk-id-only[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n  padding: 4px 8px;\n}\n\n.fk-id-value[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-family: monospace;\n  color: var(--mj-text-muted);\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.related-entity-group[_ngcontent-%COMP%] {\n  margin-bottom: 4px;\n  border-radius: 6px;\n  overflow: hidden;\n}\n.related-entity-group.expanded[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  margin-bottom: 8px;\n}\n\n\n\n.related-entity-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 8px;\n  transition: background 0.15s ease;\n}\n.related-entity-header.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n.related-entity-header.clickable[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.related-entity-header.loading[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n.expand-chevron[_ngcontent-%COMP%] {\n  width: 12px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.related-entity-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(2) {\n  width: 16px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.related-entity-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.related-entity-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  min-width: 24px;\n  text-align: right;\n}\n\n\n\n.related-records-list[_ngcontent-%COMP%] {\n  padding: 4px 8px 8px 32px;\n}\n\n.records-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 0;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.related-record-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  margin-bottom: 2px;\n  background: var(--mj-bg-surface);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid var(--mj-border-default);\n}\n.related-record-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 1px 4px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.related-record-item[_ngcontent-%COMP%]:hover   .record-open-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.record-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.record-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-open-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: color 0.15s ease;\n}\n\n.view-all-link[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px;\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n.view-all-link[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.panel-footer[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.open-record-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition: all 0.15s ease;\n}\n.open-record-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n.open-record-btn[_ngcontent-%COMP%]:active {\n  transform: scale(0.98);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityRecordDetailPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-entity-record-detail-panel', template: "<div class=\"entity-record-card-container\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-title-row\">\n      @if (entity?.Icon) {\n        <i [class]=\"getEntityIconClass()\" class=\"entity-icon\"></i>\n      }\n      <h3 class=\"panel-title\">{{ recordTitle }}</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\" aria-label=\"Close panel\">\n      <i class=\"fa-solid fa-times\"></i>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Details Section -->\n    <div class=\"section\">\n      <div class=\"section-header\" (click)=\"toggleSection('details')\">\n        <i class=\"fa-solid fa-info-circle section-icon\"></i>\n        <span class=\"section-title\">Details</span>\n        <i class=\"fa-solid expand-icon\" [class.fa-chevron-down]=\"detailsSectionExpanded\" [class.fa-chevron-right]=\"!detailsSectionExpanded\"></i>\n      </div>\n\n      @if (detailsSectionExpanded) {\n        <div class=\"section-content\">\n          @for (field of displayFields; track field.name) {\n            <!-- Primary Key Field - Compact with copy button -->\n            @if (field.type === 'primary-key') {\n              <div class=\"field-row field-row-pk\">\n                <div class=\"pk-row\">\n                  <i class=\"fa-solid fa-key pk-icon\"></i>\n                  <span class=\"field-label\">{{ field.label }}</span>\n                  <button class=\"copy-btn\" (click)=\"copyToClipboard(field.value, $event)\" title=\"Copy ID\">\n                    <i class=\"fa-solid fa-copy\"></i>\n                  </button>\n                </div>\n              </div>\n            }\n            <!-- Foreign Key Field - Show friendly name with open button -->\n            @else if (field.type === 'foreign-key') {\n              <div class=\"field-row field-row-fk\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <div class=\"fk-value-row\" [class.fk-id-only]=\"!hasFriendlyName(field)\">\n                  @if (hasFriendlyName(field)) {\n                    <span class=\"field-value fk-display-value\">{{ field.displayValue }}</span>\n                  } @else {\n                    <!-- No friendly name available, show ID in muted style -->\n                    <span class=\"field-value fk-id-value\">{{ field.value }}</span>\n                  }\n                  <!-- Always show open button for FK fields that have a related entity -->\n                  @if (field.relatedEntityName) {\n                    <button class=\"fk-link-btn\" (click)=\"onForeignKeyClick(field, $event)\" title=\"Open {{ field.relatedEntityName }} record\">\n                      <i class=\"fa-solid fa-external-link-alt\"></i>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n            <!-- Enum Field - Show as pill -->\n            @else if (field.type === 'enum') {\n              <div class=\"field-row\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <mj-pill [value]=\"field.value\"></mj-pill>\n              </div>\n            }\n            <!-- Regular Field -->\n            @else {\n              <div class=\"field-row\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <span class=\"field-value\">{{ field.value }}</span>\n              </div>\n            }\n          }\n\n          @if (displayFields.length === 0) {\n            <div class=\"empty-section\">No details available</div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Relationships Section -->\n    <div class=\"section\">\n      <div class=\"section-header\" (click)=\"toggleSection('relationships')\">\n        <i class=\"fa-solid fa-project-diagram section-icon\"></i>\n        <span class=\"section-title\">Related Records</span>\n        <i class=\"fa-solid expand-icon\" [class.fa-chevron-down]=\"relationshipsSectionExpanded\" [class.fa-chevron-right]=\"!relationshipsSectionExpanded\"></i>\n      </div>\n\n      @if (relationshipsSectionExpanded) {\n        <div class=\"section-content\">\n          @if (isLoadingRelationships) {\n            <div class=\"relationships-loading\">\n              <mj-loading text=\"Loading related records...\" size=\"small\"></mj-loading>\n            </div>\n          } @else if (relatedEntitiesWithRecords.length === 0) {\n            <div class=\"empty-section\">No related records</div>\n          } @else {\n            @for (relEntity of relatedEntitiesWithRecords; track relEntity.relatedEntityName) {\n              <div class=\"related-entity-group\" [class.expanded]=\"relEntity.isExpanded\">\n                <!-- Header row - click to expand -->\n                <div\n                  class=\"related-entity-header\"\n                  [class.clickable]=\"relEntity.count > 0\"\n                  (click)=\"toggleRelatedEntityExpansion(relEntity, $event)\">\n                  <i class=\"fa-solid expand-chevron\"\n                     [class.fa-chevron-down]=\"relEntity.isExpanded\"\n                     [class.fa-chevron-right]=\"!relEntity.isExpanded\"></i>\n                  <i [class]=\"getRelatedEntityIcon(relEntity)\"></i>\n                  <span class=\"related-entity-name\">{{ relEntity.relatedEntityName }}</span>\n                  <span class=\"related-entity-count\">{{ relEntity.count }}</span>\n                </div>\n\n                <!-- Expanded records list -->\n                @if (relEntity.isExpanded) {\n                  <div class=\"related-records-list\">\n                    @if (relEntity.isLoadingRecords) {\n                      <div class=\"records-loading\">\n                        <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n                      </div>\n                    } @else {\n                      @for (rec of relEntity.records; track $index) {\n                        <div class=\"related-record-item\" (click)=\"onRelatedRecordClick(relEntity, rec, $event)\">\n                          <div class=\"record-info\">\n                            <span class=\"record-name\">{{ getRelatedRecordDisplayName(relEntity, rec) }}</span>\n                            @if (getRelatedRecordSubtitle(relEntity, rec); as subtitle) {\n                              <span class=\"record-subtitle\">{{ subtitle }}</span>\n                            }\n                          </div>\n                          <i class=\"fa-solid fa-external-link-alt record-open-icon\"></i>\n                        </div>\n                      }\n\n                      <!-- View All link if there are more records -->\n                      @if (relEntity.count > 10) {\n                        <div class=\"view-all-link\" (click)=\"onViewAllRelated(relEntity, $event)\">\n                          <span>View all {{ relEntity.count }} records</span>\n                          <i class=\"fa-solid fa-arrow-right\"></i>\n                        </div>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Organic Key Matches Section -->\n    @if (organicKeyMatches.length > 0 || isLoadingOrganicKeys) {\n    <div class=\"section\">\n      <div class=\"section-header\" (click)=\"toggleSection('organicKeys')\">\n        <i class=\"fa-solid fa-link section-icon\"></i>\n        <span class=\"section-title\">Organic Key Matches</span>\n        <i class=\"fa-solid expand-icon\" [class.fa-chevron-down]=\"organicKeysSectionExpanded\" [class.fa-chevron-right]=\"!organicKeysSectionExpanded\"></i>\n      </div>\n\n      @if (organicKeysSectionExpanded) {\n        <div class=\"section-content\">\n          @if (isLoadingOrganicKeys) {\n            <div class=\"relationships-loading\">\n              <mj-loading text=\"Loading organic key matches...\" size=\"small\"></mj-loading>\n            </div>\n          } @else if (organicKeyMatchesWithRecords.length === 0) {\n            <div class=\"empty-section\">No organic key matches</div>\n          } @else {\n            @for (match of organicKeyMatchesWithRecords; track match.relatedEntityName) {\n              <div class=\"related-entity-group\" [class.expanded]=\"match.isExpanded\">\n                <div\n                  class=\"related-entity-header\"\n                  [class.clickable]=\"match.count > 0\"\n                  (click)=\"toggleOrganicKeyExpansion(match, $event)\">\n                  <i class=\"fa-solid expand-chevron\"\n                     [class.fa-chevron-down]=\"match.isExpanded\"\n                     [class.fa-chevron-right]=\"!match.isExpanded\"></i>\n                  <i [class]=\"getOrganicKeyEntityIcon(match)\"></i>\n                  <span class=\"related-entity-name\">{{ match.relatedEntityName }}</span>\n                  <span class=\"related-entity-count\">{{ match.count }}</span>\n                </div>\n\n                @if (match.isExpanded) {\n                  <div class=\"related-records-list\">\n                    @if (match.isLoadingRecords) {\n                      <div class=\"records-loading\">\n                        <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n                      </div>\n                    } @else {\n                      @for (rec of match.records; track $index) {\n                        <div class=\"related-record-item\" (click)=\"onOrganicKeyRecordClick(match, rec, $event)\">\n                          <div class=\"record-info\">\n                            <span class=\"record-name\">{{ getOrganicKeyRecordDisplayName(match, rec) }}</span>\n                            @if (getOrganicKeyRecordSubtitle(match, rec); as subtitle) {\n                              <span class=\"record-subtitle\">{{ subtitle }}</span>\n                            }\n                          </div>\n                          <i class=\"fa-solid fa-external-link-alt record-open-icon\"></i>\n                        </div>\n                      }\n\n                      @if (match.count > 10) {\n                        <div class=\"view-all-link\" (click)=\"onViewAllOrganicKey(match, $event)\">\n                          <span>View all {{ match.count }} records</span>\n                          <i class=\"fa-solid fa-arrow-right\"></i>\n                        </div>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"panel-footer\">\n    <button class=\"open-record-btn\" (click)=\"onOpenRecord()\">\n      <i class=\"fa-solid fa-external-link-alt\"></i>\n      Open Full Record\n    </button>\n  </div>\n</div>\n", styles: [".entity-record-card-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.panel-title-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.entity-icon {\n  font-size: 18px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.panel-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.close-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.section {\n  margin-bottom: 8px;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  padding: 12px 20px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n.section-header:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.section-icon {\n  width: 20px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  margin-right: 10px;\n}\n\n.section-title {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.loading-icon {\n  margin-right: 8px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.expand-icon {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.section-content {\n  padding: 0 20px 12px 20px;\n}\n\n.empty-section {\n  padding: 12px 0;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n.relationships-loading {\n  padding: 20px 0;\n  display: flex;\n  justify-content: center;\n}\n\n.field-row {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n  border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n.field-row:last-child {\n  border-bottom: none;\n}\n\n.field-label {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.field-value {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  word-break: break-word;\n}\n\n/* Primary Key Field - Compact row with key icon and copy button */\n.field-row-pk {\n  flex-direction: row;\n  padding: 6px 0;\n}\n\n.pk-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.pk-icon {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.pk-row .field-label {\n  margin-bottom: 0;\n  flex: 1;\n}\n\n.copy-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.copy-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n.copy-btn i {\n  font-size: 12px;\n}\n\n/* Foreign Key Field - Display name with link button */\n.field-row-fk {\n  padding: 8px 0;\n}\n\n.fk-value-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fk-display-value {\n  flex: 1;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.fk-link-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.fk-link-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.fk-link-btn i {\n  font-size: 11px;\n}\n\n/* FK without friendly name - show ID in muted style */\n.fk-id-only {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n  padding: 4px 8px;\n}\n\n.fk-id-value {\n  font-size: 12px;\n  font-family: monospace;\n  color: var(--mj-text-muted);\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Related Entity Group - expandable container */\n.related-entity-group {\n  margin-bottom: 4px;\n  border-radius: 6px;\n  overflow: hidden;\n}\n.related-entity-group.expanded {\n  background: var(--mj-bg-surface-card);\n  margin-bottom: 8px;\n}\n\n/* Header row */\n.related-entity-header {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 8px;\n  transition: background 0.15s ease;\n}\n.related-entity-header.clickable {\n  cursor: pointer;\n}\n.related-entity-header.clickable:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.related-entity-header.loading {\n  opacity: 0.7;\n}\n\n.expand-chevron {\n  width: 12px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.related-entity-header i:nth-child(2) {\n  width: 16px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.related-entity-name {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.related-entity-count {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  min-width: 24px;\n  text-align: right;\n}\n\n/* Expanded records list */\n.related-records-list {\n  padding: 4px 8px 8px 32px;\n}\n\n.records-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 0;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.related-record-item {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  margin-bottom: 2px;\n  background: var(--mj-bg-surface);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid var(--mj-border-default);\n}\n.related-record-item:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 1px 4px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.related-record-item:hover .record-open-icon {\n  color: var(--mj-brand-primary);\n}\n\n.record-info {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.record-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-open-icon {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: color 0.15s ease;\n}\n\n.view-all-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px;\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n.view-all-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.panel-footer {\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.open-record-btn {\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition: all 0.15s ease;\n}\n.open-record-btn:hover {\n  background: var(--mj-brand-primary-hover);\n}\n.open-record-btn:active {\n  transform: scale(0.98);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-entity-record-detail-panel', template: "<div class=\"entity-record-card-container\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-title-row\">\n      @if (entity?.Icon) {\n        <i [class]=\"getEntityIconClass()\" class=\"entity-icon\"></i>\n      }\n      <h3 class=\"panel-title\">{{ recordTitle }}</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\" aria-label=\"Close panel\">\n      <i class=\"fa-solid fa-times\"></i>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Details Section -->\n    <mj-accordion-panel [(Expanded)]=\"detailsSectionExpanded\" [TitleIconMuted]=\"true\">\n      <ng-template mjAccordionTitle>\n        <i class=\"fa-solid fa-info-circle\"></i>\n        <span>Details</span>\n      </ng-template>\n\n      @for (field of displayFields; track field.name) {\n        <!-- Primary Key Field - Compact with copy button -->\n        @if (field.type === 'primary-key') {\n          <div class=\"field-row field-row-pk\">\n            <div class=\"pk-row\">\n              <i class=\"fa-solid fa-key pk-icon\"></i>\n              <span class=\"field-label\">{{ field.label }}</span>\n              <button class=\"copy-btn\" (click)=\"copyToClipboard(field.value, $event)\" title=\"Copy ID\">\n                <i class=\"fa-solid fa-copy\"></i>\n              </button>\n            </div>\n          </div>\n        }\n        <!-- Foreign Key Field - Show friendly name with open button -->\n        @else if (field.type === 'foreign-key') {\n          <div class=\"field-row field-row-fk\">\n            <span class=\"field-label\">{{ field.label }}</span>\n            <div class=\"fk-value-row\" [class.fk-id-only]=\"!hasFriendlyName(field)\">\n              @if (hasFriendlyName(field)) {\n                <span class=\"field-value fk-display-value\">{{ field.displayValue }}</span>\n              } @else {\n                <!-- No friendly name available, show ID in muted style -->\n                <span class=\"field-value fk-id-value\">{{ field.value }}</span>\n              }\n              <!-- Always show open button for FK fields that have a related entity -->\n              @if (field.relatedEntityName) {\n                <button class=\"fk-link-btn\" (click)=\"onForeignKeyClick(field, $event)\" title=\"Open {{ field.relatedEntityName }} record\">\n                  <i class=\"fa-solid fa-external-link-alt\"></i>\n                </button>\n              }\n            </div>\n          </div>\n        }\n        <!-- Enum Field - Show as pill -->\n        @else if (field.type === 'enum') {\n          <div class=\"field-row\">\n            <span class=\"field-label\">{{ field.label }}</span>\n            <mj-pill [value]=\"field.value\"></mj-pill>\n          </div>\n        }\n        <!-- Regular Field -->\n        @else {\n          <div class=\"field-row\">\n            <span class=\"field-label\">{{ field.label }}</span>\n            <span class=\"field-value\">{{ field.value }}</span>\n          </div>\n        }\n      }\n\n      @if (displayFields.length === 0) {\n        <mj-empty-state\n          Size=\"compact\"\n          Icon=\"fa-solid fa-circle-info\"\n          Title=\"No details available\" />\n      }\n    </mj-accordion-panel>\n\n    <!-- Relationships Section -->\n    <mj-accordion-panel [(Expanded)]=\"relationshipsSectionExpanded\" [TitleIconMuted]=\"true\">\n      <ng-template mjAccordionTitle>\n        <i class=\"fa-solid fa-project-diagram\"></i>\n        <span>Related Records</span>\n      </ng-template>\n\n      @if (isLoadingRelationships) {\n        <div class=\"relationships-loading\">\n          <mj-loading text=\"Loading related records...\" size=\"small\"></mj-loading>\n        </div>\n      } @else if (relatedEntitiesWithRecords.length === 0) {\n        <mj-empty-state\n          Size=\"compact\"\n          Icon=\"fa-solid fa-diagram-project\"\n          Title=\"No related records\" />\n      } @else {\n        @for (relEntity of relatedEntitiesWithRecords; track relEntity.relatedEntityName) {\n          <div class=\"related-entity-group\" [class.expanded]=\"relEntity.isExpanded\">\n            <!-- Header row - click to expand -->\n            <div\n              class=\"related-entity-header\"\n              [class.clickable]=\"relEntity.count > 0\"\n              (click)=\"toggleRelatedEntityExpansion(relEntity, $event)\">\n              <i class=\"fa-solid expand-chevron\"\n                 [class.fa-chevron-down]=\"relEntity.isExpanded\"\n                 [class.fa-chevron-right]=\"!relEntity.isExpanded\"></i>\n              <i [class]=\"getRelatedEntityIcon(relEntity)\"></i>\n              <span class=\"related-entity-name\">{{ relEntity.relatedEntityName }}</span>\n              <span class=\"related-entity-count\">{{ relEntity.count }}</span>\n            </div>\n\n            <!-- Expanded records list -->\n            @if (relEntity.isExpanded) {\n              <div class=\"related-records-list\">\n                @if (relEntity.isLoadingRecords) {\n                  <div class=\"records-loading\">\n                    <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n                  </div>\n                } @else {\n                  @for (rec of relEntity.records; track $index) {\n                    <div class=\"related-record-item\" (click)=\"onRelatedRecordClick(relEntity, rec, $event)\">\n                      <div class=\"record-info\">\n                        <span class=\"record-name\">{{ getRelatedRecordDisplayName(relEntity, rec) }}</span>\n                        @if (getRelatedRecordSubtitle(relEntity, rec); as subtitle) {\n                          <span class=\"record-subtitle\">{{ subtitle }}</span>\n                        }\n                      </div>\n                      <i class=\"fa-solid fa-external-link-alt record-open-icon\"></i>\n                    </div>\n                  }\n\n                  <!-- View All link if there are more records -->\n                  @if (relEntity.count > 10) {\n                    <div class=\"view-all-link\" (click)=\"onViewAllRelated(relEntity, $event)\">\n                      <span>View all {{ relEntity.count }} records</span>\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </div>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      }\n    </mj-accordion-panel>\n\n    <!-- Organic Key Matches Section -->\n    @if (organicKeyMatches.length > 0 || isLoadingOrganicKeys) {\n    <mj-accordion-panel [(Expanded)]=\"organicKeysSectionExpanded\" [TitleIconMuted]=\"true\">\n      <ng-template mjAccordionTitle>\n        <i class=\"fa-solid fa-link\"></i>\n        <span>Organic Key Matches</span>\n      </ng-template>\n\n      @if (isLoadingOrganicKeys) {\n        <div class=\"relationships-loading\">\n          <mj-loading text=\"Loading organic key matches...\" size=\"small\"></mj-loading>\n        </div>\n      } @else if (organicKeyMatchesWithRecords.length === 0) {\n        <mj-empty-state\n          Size=\"compact\"\n          Icon=\"fa-solid fa-link\"\n          Title=\"No organic key matches\" />\n      } @else {\n        @for (match of organicKeyMatchesWithRecords; track match.relatedEntityName) {\n          <div class=\"related-entity-group\" [class.expanded]=\"match.isExpanded\">\n            <div\n              class=\"related-entity-header\"\n              [class.clickable]=\"match.count > 0\"\n              (click)=\"toggleOrganicKeyExpansion(match, $event)\">\n              <i class=\"fa-solid expand-chevron\"\n                 [class.fa-chevron-down]=\"match.isExpanded\"\n                 [class.fa-chevron-right]=\"!match.isExpanded\"></i>\n              <i [class]=\"getOrganicKeyEntityIcon(match)\"></i>\n              <span class=\"related-entity-name\">{{ match.relatedEntityName }}</span>\n              <span class=\"related-entity-count\">{{ match.count }}</span>\n            </div>\n\n            @if (match.isExpanded) {\n              <div class=\"related-records-list\">\n                @if (match.isLoadingRecords) {\n                  <div class=\"records-loading\">\n                    <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n                  </div>\n                } @else {\n                  @for (rec of match.records; track $index) {\n                    <div class=\"related-record-item\" (click)=\"onOrganicKeyRecordClick(match, rec, $event)\">\n                      <div class=\"record-info\">\n                        <span class=\"record-name\">{{ getOrganicKeyRecordDisplayName(match, rec) }}</span>\n                        @if (getOrganicKeyRecordSubtitle(match, rec); as subtitle) {\n                          <span class=\"record-subtitle\">{{ subtitle }}</span>\n                        }\n                      </div>\n                      <i class=\"fa-solid fa-external-link-alt record-open-icon\"></i>\n                    </div>\n                  }\n\n                  @if (match.count > 10) {\n                    <div class=\"view-all-link\" (click)=\"onViewAllOrganicKey(match, $event)\">\n                      <span>View all {{ match.count }} records</span>\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </div>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      }\n    </mj-accordion-panel>\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"panel-footer\">\n    <button class=\"open-record-btn\" (click)=\"onOpenRecord()\">\n      <i class=\"fa-solid fa-external-link-alt\"></i>\n      Open Full Record\n    </button>\n  </div>\n</div>\n", styles: [".entity-record-card-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.panel-title-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.entity-icon {\n  font-size: 18px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.panel-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.close-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n/* Section header / chevron / title / icon / body chrome is fully provided by\n   <mj-accordion-panel> (muted icons via [TitleIconMuted]). No bespoke chrome here. */\n.loading-icon {\n  margin-right: 8px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.relationships-loading {\n  padding: 20px 0;\n  display: flex;\n  justify-content: center;\n}\n\n.field-row {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n  border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n.field-row:last-child {\n  border-bottom: none;\n}\n\n.field-label {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.field-value {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  word-break: break-word;\n}\n\n/* Primary Key Field - Compact row with key icon and copy button */\n.field-row-pk {\n  flex-direction: row;\n  padding: 6px 0;\n}\n\n.pk-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.pk-icon {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.pk-row .field-label {\n  margin-bottom: 0;\n  flex: 1;\n}\n\n.copy-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.copy-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n.copy-btn i {\n  font-size: 12px;\n}\n\n/* Foreign Key Field - Display name with link button */\n.field-row-fk {\n  padding: 8px 0;\n}\n\n.fk-value-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fk-display-value {\n  flex: 1;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.fk-link-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.fk-link-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.fk-link-btn i {\n  font-size: 11px;\n}\n\n/* FK without friendly name - show ID in muted style */\n.fk-id-only {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n  padding: 4px 8px;\n}\n\n.fk-id-value {\n  font-size: 12px;\n  font-family: monospace;\n  color: var(--mj-text-muted);\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Related Entity Group - expandable container */\n.related-entity-group {\n  margin-bottom: 4px;\n  border-radius: 6px;\n  overflow: hidden;\n}\n.related-entity-group.expanded {\n  background: var(--mj-bg-surface-card);\n  margin-bottom: 8px;\n}\n\n/* Header row */\n.related-entity-header {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 8px;\n  transition: background 0.15s ease;\n}\n.related-entity-header.clickable {\n  cursor: pointer;\n}\n.related-entity-header.clickable:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.related-entity-header.loading {\n  opacity: 0.7;\n}\n\n.expand-chevron {\n  width: 12px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.related-entity-header i:nth-child(2) {\n  width: 16px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.related-entity-name {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.related-entity-count {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  min-width: 24px;\n  text-align: right;\n}\n\n/* Expanded records list */\n.related-records-list {\n  padding: 4px 8px 8px 32px;\n}\n\n.records-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 0;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.related-record-item {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  margin-bottom: 2px;\n  background: var(--mj-bg-surface);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid var(--mj-border-default);\n}\n.related-record-item:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 1px 4px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.related-record-item:hover .record-open-icon {\n  color: var(--mj-brand-primary);\n}\n\n.record-info {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.record-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-open-icon {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: color 0.15s ease;\n}\n\n.view-all-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px;\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n.view-all-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.panel-footer {\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.open-record-btn {\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition: all 0.15s ease;\n}\n.open-record-btn:hover {\n  background: var(--mj-brand-primary-hover);\n}\n.open-record-btn:active {\n  transform: scale(0.98);\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], { entity: [{
             type: Input
         }], record: [{