@mj-biz-apps/common-ng 5.45.0 → 5.46.0

package/dist/lib/components/relationship-list/relationship-list.component.js

@@ -47,7 +47,7 @@ function RelationshipListComponent_Conditional_6_Conditional_1_Conditional_0_Tem
 } }
 function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 31);
+    i0.ɵɵelementStart(0, "a", 33);
     i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_7_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onNavigateToTarget(item_r4, $event)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -76,7 +76,27 @@ function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Condi
 } }
 function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 28);
-    i0.ɵɵelement(1, "i", 32);
+    i0.ɵɵelement(1, "i", 34);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", item_r4.Relationship.JobFunction, " ");
+} }
+function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
+    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", item_r4.Relationship.SeniorityLevel, " ");
+} }
+function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵelement(1, "i", 36);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -84,27 +104,27 @@ function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Condi
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", item_r4.DateDisplay, " ");
 } }
-function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_14_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_16_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 37);
-    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_14_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const item_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onEndRelationship(item_r4.Relationship)); });
-    i0.ɵɵelement(1, "i", 38);
+    i0.ɵɵelementStart(0, "button", 41);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_16_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const item_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onEndRelationship(item_r4.Relationship)); });
+    i0.ɵɵelement(1, "i", 42);
     i0.ɵɵelementEnd();
 } }
-function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_14_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_16_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 39);
-    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_14_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const item_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onDelete(item_r4.Relationship)); });
-    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_16_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const item_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onDelete(item_r4.Relationship)); });
+    i0.ɵɵelement(1, "i", 44);
     i0.ɵɵelementEnd();
 } }
-function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 30)(1, "button", 33);
-    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_14_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onEdit(item_r4.Relationship)); });
-    i0.ɵɵelement(2, "i", 34);
+    i0.ɵɵelementStart(0, "div", 32)(1, "button", 37);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onEdit(item_r4.Relationship)); });
+    i0.ɵɵelement(2, "i", 38);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_14_Conditional_3_Template, 2, 0, "button", 35)(4, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_14_Conditional_4_Template, 2, 0, "button", 36);
+    i0.ɵɵconditionalCreate(3, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_16_Conditional_3_Template, 2, 0, "button", 39)(4, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_16_Conditional_4_Template, 2, 0, "button", 40);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r4 = i0.ɵɵnextContext().$implicit;
@@ -123,10 +143,12 @@ function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Templ
     i0.ɵɵelementStart(9, "div", 26);
     i0.ɵɵconditionalCreate(10, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_10_Template, 2, 1, "span", 27);
     i0.ɵɵconditionalCreate(11, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_11_Template, 3, 1, "span", 28);
-    i0.ɵɵelementStart(12, "span", 29);
-    i0.ɵɵtext(13);
+    i0.ɵɵconditionalCreate(12, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_12_Template, 3, 1, "span", 29);
+    i0.ɵɵconditionalCreate(13, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_13_Template, 3, 1, "span", 30);
+    i0.ɵɵelementStart(14, "span", 31);
+    i0.ɵɵtext(15);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(14, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_14_Template, 5, 1, "div", 30);
+    i0.ɵɵconditionalCreate(16, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Conditional_16_Template, 5, 1, "div", 32);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r4 = ctx.$implicit;
@@ -142,13 +164,17 @@ function RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Templ
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(item_r4.Relationship.Title ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r4.DateDisplay ? 11 : -1);
+    i0.ɵɵconditional(item_r4.Relationship.JobFunction ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r4.Relationship.SeniorityLevel ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r4.DateDisplay ? 13 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", "badge-" + item_r4.Relationship.Status.toLowerCase());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", item_r4.Relationship.Status, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.EditMode ? 14 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 16 : -1);
 } }
 function RelationshipListComponent_Conditional_6_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12)(1, "div", 15)(2, "div", 16);
@@ -160,7 +186,7 @@ function RelationshipListComponent_Conditional_6_Conditional_1_For_3_Template(rf
     i0.ɵɵelementStart(6, "span", 18);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(8, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Template, 15, 10, "div", 19, _forTrack1);
+    i0.ɵɵrepeaterCreate(8, RelationshipListComponent_Conditional_6_Conditional_1_For_3_For_9_Template, 17, 12, "div", 19, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r8 = ctx.$implicit;
@@ -193,7 +219,7 @@ function RelationshipListComponent_Conditional_6_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵconditional(ctx_r1.Loading ? 0 : 1);
 } }
 function RelationshipListComponent_Conditional_7_For_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 52);
+    i0.ɵɵelementStart(0, "option", 56);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -203,15 +229,15 @@ function RelationshipListComponent_Conditional_7_For_20_Template(rf, ctx) { if (
     i0.ɵɵtextInterpolate(t_r10.Name);
 } }
 function RelationshipListComponent_Conditional_7_Conditional_27_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 66)(1, "label");
+    i0.ɵɵelementStart(0, "div", 73)(1, "label");
     i0.ɵɵtext(2, "Target Person ");
-    i0.ɵɵelementStart(3, "span", 67);
+    i0.ɵɵelementStart(3, "span", 74);
     i0.ɵɵtext(4, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 68);
-    i0.ɵɵelement(6, "mj-form-field", 69);
+    i0.ɵɵelementStart(5, "div", 75);
+    i0.ɵɵelement(6, "mj-form-field", 76);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 70);
+    i0.ɵɵelementStart(7, "span", 77);
     i0.ɵɵtext(8, "Search person by name, job title, or email");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -220,15 +246,15 @@ function RelationshipListComponent_Conditional_7_Conditional_27_Conditional_1_Te
     i0.ɵɵproperty("Record", ctx_r1.DraftRelationship)("EditMode", true)("ShowLabel", false);
 } }
 function RelationshipListComponent_Conditional_7_Conditional_27_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 66)(1, "label");
+    i0.ɵɵelementStart(0, "div", 73)(1, "label");
     i0.ɵɵtext(2, "Target Organization ");
-    i0.ɵɵelementStart(3, "span", 67);
+    i0.ɵɵelementStart(3, "span", 74);
     i0.ɵɵtext(4, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 68);
-    i0.ɵɵelement(6, "mj-form-field", 71);
+    i0.ɵɵelementStart(5, "div", 75);
+    i0.ɵɵelement(6, "mj-form-field", 78);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 70);
+    i0.ɵɵelementStart(7, "span", 77);
     i0.ɵɵtext(8, "Search organization or company name");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -237,9 +263,9 @@ function RelationshipListComponent_Conditional_7_Conditional_27_Conditional_2_Te
     i0.ɵɵproperty("Record", ctx_r1.DraftRelationship)("EditMode", true)("ShowLabel", false);
 } }
 function RelationshipListComponent_Conditional_7_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56);
-    i0.ɵɵconditionalCreate(1, RelationshipListComponent_Conditional_7_Conditional_27_Conditional_1_Template, 9, 3, "div", 66);
-    i0.ɵɵconditionalCreate(2, RelationshipListComponent_Conditional_7_Conditional_27_Conditional_2_Template, 9, 3, "div", 66);
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵconditionalCreate(1, RelationshipListComponent_Conditional_7_Conditional_27_Conditional_1_Template, 9, 3, "div", 73);
+    i0.ɵɵconditionalCreate(2, RelationshipListComponent_Conditional_7_Conditional_27_Conditional_2_Template, 9, 3, "div", 73);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -248,68 +274,128 @@ function RelationshipListComponent_Conditional_7_Conditional_27_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.IsOrgTarget ? 2 : -1);
 } }
-function RelationshipListComponent_Conditional_7_Conditional_43_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 64);
+function RelationshipListComponent_Conditional_7_Conditional_45_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 56);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const jf_r12 = ctx.$implicit;
+    i0.ɵɵproperty("value", jf_r12.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(jf_r12.Name);
+} }
+function RelationshipListComponent_Conditional_7_Conditional_45_For_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 56);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const sl_r13 = ctx.$implicit;
+    i0.ɵɵproperty("value", sl_r13.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(sl_r13.Name);
+} }
+function RelationshipListComponent_Conditional_7_Conditional_45_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 68)(1, "div", 79)(2, "label");
+    i0.ɵɵtext(3, "Job Function");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "select", 54);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_7_Conditional_45_Template_select_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.AddForm.JobFunctionID, $event) || (ctx_r1.AddForm.JobFunctionID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(5, "option", 55);
+    i0.ɵɵtext(6, "\u2014 None \u2014");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(7, RelationshipListComponent_Conditional_7_Conditional_45_For_8_Template, 2, 2, "option", 56, _forTrack2);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 79)(10, "label");
+    i0.ɵɵtext(11, "Seniority Level");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "select", 54);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_7_Conditional_45_Template_select_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.AddForm.SeniorityLevelID, $event) || (ctx_r1.AddForm.SeniorityLevelID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(13, "option", 55);
+    i0.ɵɵtext(14, "\u2014 None \u2014");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(15, RelationshipListComponent_Conditional_7_Conditional_45_For_16_Template, 2, 2, "option", 56, _forTrack2);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.AddForm.JobFunctionID);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.JobFunctions);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.AddForm.SeniorityLevelID);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.SeniorityLevels);
+} }
+function RelationshipListComponent_Conditional_7_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 71);
 } }
 function RelationshipListComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 41)(2, "div", 42);
-    i0.ɵɵelement(3, "i", 43);
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 45)(2, "div", 46);
+    i0.ɵɵelement(3, "i", 47);
     i0.ɵɵelementStart(4, "div")(5, "h3");
     i0.ɵɵtext(6, "Add Relationship");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "p", 44);
+    i0.ɵɵelementStart(7, "p", 48);
     i0.ɵɵtext(8, "Create a connection to another person or organization");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "button", 45);
+    i0.ɵɵelementStart(9, "button", 49);
     i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_7_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelAdd()); });
-    i0.ɵɵelement(10, "i", 46);
+    i0.ɵɵelement(10, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 47)(12, "div", 48)(13, "div", 49)(14, "label");
+    i0.ɵɵelementStart(11, "div", 51)(12, "div", 52)(13, "div", 53)(14, "label");
     i0.ɵɵtext(15, "Relationship Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "select", 50);
+    i0.ɵɵelementStart(16, "select", 54);
     i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_7_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.AddForm.TypeID, $event) || (ctx_r1.AddForm.TypeID = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function RelationshipListComponent_Conditional_7_Template_select_ngModelChange_16_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAddTypeChange()); });
-    i0.ɵɵelementStart(17, "option", 51);
+    i0.ɵɵelementStart(17, "option", 55);
     i0.ɵɵtext(18, "-- Select Type --");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(19, RelationshipListComponent_Conditional_7_For_20_Template, 2, 2, "option", 52, _forTrack2);
+    i0.ɵɵrepeaterCreate(19, RelationshipListComponent_Conditional_7_For_20_Template, 2, 2, "option", 56, _forTrack2);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 53)(22, "label");
+    i0.ɵɵelementStart(21, "div", 57)(22, "label");
     i0.ɵɵtext(23, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 54);
-    i0.ɵɵelement(25, "i", 55);
+    i0.ɵɵelementStart(24, "div", 58);
+    i0.ɵɵelement(25, "i", 59);
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(27, RelationshipListComponent_Conditional_7_Conditional_27_Template, 3, 2, "div", 56);
-    i0.ɵɵelementStart(28, "div", 57)(29, "div", 58)(30, "label");
+    i0.ɵɵconditionalCreate(27, RelationshipListComponent_Conditional_7_Conditional_27_Template, 3, 2, "div", 60);
+    i0.ɵɵelementStart(28, "div", 61)(29, "div", 62)(30, "label");
     i0.ɵɵtext(31, "Title / Role (Optional)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "input", 59);
+    i0.ɵɵelementStart(32, "input", 63);
     i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_7_Template_input_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.AddForm.Title, $event) || (ctx_r1.AddForm.Title = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div", 60)(34, "label");
+    i0.ɵɵelementStart(33, "div", 64)(34, "label");
     i0.ɵɵtext(35, "Start Date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "input", 61);
+    i0.ɵɵelementStart(36, "input", 65);
     i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_7_Template_input_ngModelChange_36_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.AddForm.StartDate, $event) || (ctx_r1.AddForm.StartDate = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(37, "div", 60)(38, "label");
+    i0.ɵɵelementStart(37, "div", 64)(38, "label");
     i0.ɵɵtext(39, "End Date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(40, "input", 61);
+    i0.ɵɵelementStart(40, "input", 65);
     i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_7_Template_input_ngModelChange_40_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.AddForm.EndDate, $event) || (ctx_r1.AddForm.EndDate = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(41, "div", 62)(42, "button", 63);
-    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_7_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveAdd()); });
-    i0.ɵɵconditionalCreate(43, RelationshipListComponent_Conditional_7_Conditional_43_Template, 1, 0, "i", 64);
-    i0.ɵɵtext(44, " Save Relationship ");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(41, "div", 66)(42, "button", 67);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_7_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShowAddAdvanced = !ctx_r1.ShowAddAdvanced); });
+    i0.ɵɵelement(43, "i");
+    i0.ɵɵtext(44, " Role Classification (Function & Seniority) ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "button", 65);
-    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_7_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelAdd()); });
-    i0.ɵɵtext(46, "Cancel");
+    i0.ɵɵconditionalCreate(45, RelationshipListComponent_Conditional_7_Conditional_45_Template, 17, 2, "div", 68);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(46, "div", 69)(47, "button", 70);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_7_Template_button_click_47_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveAdd()); });
+    i0.ɵɵconditionalCreate(48, RelationshipListComponent_Conditional_7_Conditional_48_Template, 1, 0, "i", 71);
+    i0.ɵɵtext(49, " Save Relationship ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(50, "button", 72);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_7_Template_button_click_50_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelAdd()); });
+    i0.ɵɵtext(51, "Cancel");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -327,93 +413,157 @@ function RelationshipListComponent_Conditional_7_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.AddForm.StartDate);
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.AddForm.EndDate);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap(ctx_r1.ShowAddAdvanced ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ShowAddAdvanced ? 45 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.Saving || !ctx_r1.AddForm.TypeID || !ctx_r1.HasValidAddTarget);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.Saving ? 43 : -1);
+    i0.ɵɵconditional(ctx_r1.Saving ? 48 : -1);
 } }
 function RelationshipListComponent_Conditional_8_For_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 52);
+    i0.ɵɵelementStart(0, "option", 56);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r15 = ctx.$implicit;
+    i0.ɵɵproperty("value", t_r15.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r15.Name);
+} }
+function RelationshipListComponent_Conditional_8_Conditional_52_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 56);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const t_r12 = ctx.$implicit;
-    i0.ɵɵproperty("value", t_r12.ID);
+    const jf_r17 = ctx.$implicit;
+    i0.ɵɵproperty("value", jf_r17.ID);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(t_r12.Name);
+    i0.ɵɵtextInterpolate(jf_r17.Name);
 } }
-function RelationshipListComponent_Conditional_8_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 64);
+function RelationshipListComponent_Conditional_8_Conditional_52_For_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 56);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const sl_r18 = ctx.$implicit;
+    i0.ɵɵproperty("value", sl_r18.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(sl_r18.Name);
+} }
+function RelationshipListComponent_Conditional_8_Conditional_52_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 68)(1, "div", 79)(2, "label");
+    i0.ɵɵtext(3, "Job Function");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "select", 54);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Conditional_52_Template_select_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.JobFunctionID, $event) || (ctx_r1.EditForm.JobFunctionID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(5, "option", 55);
+    i0.ɵɵtext(6, "\u2014 None \u2014");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(7, RelationshipListComponent_Conditional_8_Conditional_52_For_8_Template, 2, 2, "option", 56, _forTrack2);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 79)(10, "label");
+    i0.ɵɵtext(11, "Seniority Level");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "select", 54);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Conditional_52_Template_select_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.SeniorityLevelID, $event) || (ctx_r1.EditForm.SeniorityLevelID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(13, "option", 55);
+    i0.ɵɵtext(14, "\u2014 None \u2014");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(15, RelationshipListComponent_Conditional_8_Conditional_52_For_16_Template, 2, 2, "option", 56, _forTrack2);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditForm.JobFunctionID);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.JobFunctions);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditForm.SeniorityLevelID);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.SeniorityLevels);
+} }
+function RelationshipListComponent_Conditional_8_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 71);
 } }
 function RelationshipListComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 41)(2, "div", 42);
-    i0.ɵɵelement(3, "i", 72);
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 45)(2, "div", 46);
+    i0.ɵɵelement(3, "i", 80);
     i0.ɵɵelementStart(4, "div")(5, "h3");
     i0.ɵɵtext(6, "Edit Relationship");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "p", 44);
+    i0.ɵɵelementStart(7, "p", 48);
     i0.ɵɵtext(8, "Update relationship details, dates, or status");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "button", 45);
-    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_8_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelEdit()); });
-    i0.ɵɵelement(10, "i", 46);
+    i0.ɵɵelementStart(9, "button", 49);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_8_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelEdit()); });
+    i0.ɵɵelement(10, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 47)(12, "div", 48)(13, "div", 49)(14, "label");
+    i0.ɵɵelementStart(11, "div", 51)(12, "div", 52)(13, "div", 53)(14, "label");
     i0.ɵɵtext(15, "Relationship Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "select", 50);
-    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.TypeID, $event) || (ctx_r1.EditForm.TypeID = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_select_ngModelChange_16_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEditTypeChange()); });
-    i0.ɵɵrepeaterCreate(17, RelationshipListComponent_Conditional_8_For_18_Template, 2, 2, "option", 52, _forTrack2);
+    i0.ɵɵelementStart(16, "select", 54);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.TypeID, $event) || (ctx_r1.EditForm.TypeID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_select_ngModelChange_16_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEditTypeChange()); });
+    i0.ɵɵrepeaterCreate(17, RelationshipListComponent_Conditional_8_For_18_Template, 2, 2, "option", 56, _forTrack2);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 53)(20, "label");
+    i0.ɵɵelementStart(19, "div", 57)(20, "label");
     i0.ɵɵtext(21, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "div", 54);
-    i0.ɵɵelement(23, "i", 55);
+    i0.ɵɵelementStart(22, "div", 58);
+    i0.ɵɵelement(23, "i", 59);
     i0.ɵɵtext(24);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 73)(26, "label");
+    i0.ɵɵelementStart(25, "div", 81)(26, "label");
     i0.ɵɵtext(27, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "select", 50);
-    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_select_ngModelChange_28_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.Status, $event) || (ctx_r1.EditForm.Status = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(29, "option", 74);
+    i0.ɵɵelementStart(28, "select", 54);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_select_ngModelChange_28_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.Status, $event) || (ctx_r1.EditForm.Status = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(29, "option", 82);
     i0.ɵɵtext(30, "Active");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "option", 75);
+    i0.ɵɵelementStart(31, "option", 83);
     i0.ɵɵtext(32, "Inactive");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "option", 76);
+    i0.ɵɵelementStart(33, "option", 84);
     i0.ɵɵtext(34, "Ended");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(35, "div", 57)(36, "div", 58)(37, "label");
+    i0.ɵɵelementStart(35, "div", 61)(36, "div", 62)(37, "label");
     i0.ɵɵtext(38, "Title / Role");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "input", 77);
-    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_input_ngModelChange_39_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.Title, $event) || (ctx_r1.EditForm.Title = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(39, "input", 85);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_input_ngModelChange_39_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.Title, $event) || (ctx_r1.EditForm.Title = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(40, "div", 60)(41, "label");
+    i0.ɵɵelementStart(40, "div", 64)(41, "label");
     i0.ɵɵtext(42, "Start Date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(43, "input", 61);
-    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_input_ngModelChange_43_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.StartDate, $event) || (ctx_r1.EditForm.StartDate = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(43, "input", 65);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_input_ngModelChange_43_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.StartDate, $event) || (ctx_r1.EditForm.StartDate = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(44, "div", 60)(45, "label");
+    i0.ɵɵelementStart(44, "div", 64)(45, "label");
     i0.ɵɵtext(46, "End Date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "input", 61);
-    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_input_ngModelChange_47_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.EndDate, $event) || (ctx_r1.EditForm.EndDate = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(48, "div", 62)(49, "button", 63);
-    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_8_Template_button_click_49_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveEdit()); });
-    i0.ɵɵconditionalCreate(50, RelationshipListComponent_Conditional_8_Conditional_50_Template, 1, 0, "i", 64);
-    i0.ɵɵtext(51, " Save Changes ");
+    i0.ɵɵelementStart(47, "input", 65);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_8_Template_input_ngModelChange_47_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.EndDate, $event) || (ctx_r1.EditForm.EndDate = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(48, "div", 66)(49, "button", 67);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_8_Template_button_click_49_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShowEditAdvanced = !ctx_r1.ShowEditAdvanced); });
+    i0.ɵɵelement(50, "i");
+    i0.ɵɵtext(51, " Role Classification (Function & Seniority) ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(52, RelationshipListComponent_Conditional_8_Conditional_52_Template, 17, 2, "div", 68);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(53, "div", 69)(54, "button", 70);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_8_Template_button_click_54_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveEdit()); });
+    i0.ɵɵconditionalCreate(55, RelationshipListComponent_Conditional_8_Conditional_55_Template, 1, 0, "i", 71);
+    i0.ɵɵtext(56, " Save Changes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "button", 65);
-    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_8_Template_button_click_52_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelEdit()); });
-    i0.ɵɵtext(53, "Cancel");
+    i0.ɵɵelementStart(57, "button", 72);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_8_Template_button_click_57_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelEdit()); });
+    i0.ɵɵtext(58, "Cancel");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -431,10 +581,14 @@ function RelationshipListComponent_Conditional_8_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditForm.StartDate);
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditForm.EndDate);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap(ctx_r1.ShowEditAdvanced ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ShowEditAdvanced ? 52 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.Saving);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.Saving ? 50 : -1);
+    i0.ɵɵconditional(ctx_r1.Saving ? 55 : -1);
 } }
 /**
  * Display configuration for each relationship category, mapping category
@@ -568,6 +722,22 @@ export class RelationshipListComponent {
      * Loaded from `MJ_BizApps_Common: Relationship Types`, filtered to `IsActive=1`.
      */
     RelationshipTypes = [];
+    /**
+     * All active job functions available for selection.
+     */
+    JobFunctions = [];
+    /**
+     * All active seniority levels available for selection.
+     */
+    SeniorityLevels = [];
+    /**
+     * Progressive disclosure toggle for advanced role fields in Add Form.
+     */
+    ShowAddAdvanced = false;
+    /**
+     * Progressive disclosure toggle for advanced role fields in Edit Form.
+     */
+    ShowEditAdvanced = false;
     /**
      * Indicates whether the component is performing the initial data load.
      * The template shows a loading spinner while this is `true`.
@@ -602,11 +772,11 @@ export class RelationshipListComponent {
     relationshipTypeMap = new Map();
     /** Creates a blank {@link AddFormData} with empty defaults. */
     createEmptyAddForm() {
-        return { TypeID: '', TargetSearch: '', TargetID: '', TargetName: '', Title: '', StartDate: '', EndDate: '' };
+        return { TypeID: '', TargetSearch: '', TargetID: '', TargetName: '', Title: '', StartDate: '', EndDate: '', JobFunctionID: '', SeniorityLevelID: '' };
     }
     /** Creates a blank {@link EditFormData} with default status of Active. */
     createEmptyEditForm() {
-        return { TypeID: '', Title: '', StartDate: '', EndDate: '', Status: 'Active' };
+        return { TypeID: '', Title: '', StartDate: '', EndDate: '', Status: 'Active', JobFunctionID: '', SeniorityLevelID: '' };
     }
     /**
      * Loads relationships and relationship types from the server,
@@ -634,6 +804,28 @@ export class RelationshipListComponent {
                     }
                 }
             }
+            if (this.JobFunctions.length === 0) {
+                const jfResult = await rv.RunView({
+                    EntityName: 'MJ_BizApps_Common: Job Functions',
+                    ExtraFilter: "Status='Active'",
+                    OrderBy: 'Sequence ASC, Name ASC',
+                    ResultType: 'entity_object'
+                });
+                if (jfResult.Success && jfResult.Results) {
+                    this.JobFunctions = jfResult.Results;
+                }
+            }
+            if (this.SeniorityLevels.length === 0) {
+                const slResult = await rv.RunView({
+                    EntityName: 'MJ_BizApps_Common: Seniority Levels',
+                    ExtraFilter: "Status='Active'",
+                    OrderBy: 'Sequence ASC, Name ASC',
+                    ResultType: 'entity_object'
+                });
+                if (slResult.Success && slResult.Results) {
+                    this.SeniorityLevels = slResult.Results;
+                }
+            }
             let relationships = [];
             if (this._collection) {
                 if (!this._collection.IsLoaded) {
@@ -965,6 +1157,8 @@ export class RelationshipListComponent {
             this.DraftRelationship.RelationshipTypeID = this.AddForm.TypeID;
             this.DraftRelationship.Title = this.AddForm.Title || null;
             this.DraftRelationship.Status = 'Active';
+            this.DraftRelationship.JobFunctionID = this.AddForm.JobFunctionID || null;
+            this.DraftRelationship.SeniorityLevelID = this.AddForm.SeniorityLevelID || null;
             if (this.AddForm.StartDate) {
                 this.DraftRelationship.StartDate = new Date(this.AddForm.StartDate);
             }
@@ -1009,8 +1203,11 @@ export class RelationshipListComponent {
             Title: rel.Title || '',
             StartDate: rel.StartDate ? this.formatDateForInput(rel.StartDate) : '',
             EndDate: rel.EndDate ? this.formatDateForInput(rel.EndDate) : '',
-            Status: rel.Status
+            Status: rel.Status,
+            JobFunctionID: rel.JobFunctionID || '',
+            SeniorityLevelID: rel.SeniorityLevelID || '',
         };
+        this.ShowEditAdvanced = !!(rel.JobFunctionID || rel.SeniorityLevelID);
         this.EditingId = rel.ID;
         this.ShowAddForm = false;
         this.cdr.detectChanges();
@@ -1070,6 +1267,8 @@ export class RelationshipListComponent {
             rel.Status = this.EditForm.Status;
             rel.StartDate = this.EditForm.StartDate ? new Date(this.EditForm.StartDate) : null;
             rel.EndDate = this.EditForm.EndDate ? new Date(this.EditForm.EndDate) : null;
+            rel.JobFunctionID = this.EditForm.JobFunctionID || null;
+            rel.SeniorityLevelID = this.EditForm.SeniorityLevelID || null;
             if (this._collection && this._collection.Items.some(i => i.ID === rel.ID)) {
                 this.EditingId = null;
                 this.GroupedRelationships = this.buildGroups([...this._collection.Items, ...this._incomingRelationships]);
@@ -1155,7 +1354,7 @@ export class RelationshipListComponent {
         return `${year}-${month}-${day}`;
     }
     static ɵfac = function RelationshipListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RelationshipListComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RelationshipListComponent, selectors: [["bizapps-relationship-list"]], inputs: { EditMode: "EditMode", Collection: "Collection", PersonID: "PersonID", OrganizationID: "OrganizationID" }, outputs: { Navigate: "Navigate", DataChanged: "DataChanged" }, decls: 9, vars: 4, consts: [[1, "rel-widget-root"], [1, "section-header"], [1, "section-label"], [1, "fa-solid", "fa-diagram-project"], [1, "btn", "btn-outline"], [1, "rel-form-card"], [1, "btn", "btn-outline", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "loading-state"], [1, "fa-solid", "fa-spinner"], [1, "empty-state"], [1, "rel-timeline-container"], [1, "rel-category"], [1, "empty-state__title"], [1, "empty-state__hint"], [1, "rel-category-header"], [1, "rel-category-icon", 3, "ngClass"], [1, "rel-category-title"], [1, "rel-category-count"], [1, "rel-timeline-item", 3, "ngClass"], [1, "rel-timeline-icon"], [1, "rel-timeline-content"], [1, "rel-timeline-sentence"], [1, "rel-timeline-label"], ["href", "javascript:void(0)", 1, "rel-timeline-target"], [1, "rel-timeline-target"], [1, "rel-timeline-meta"], [1, "rel-timeline-title"], [1, "rel-timeline-dates"], [1, "badge", 3, "ngClass"], [1, "rel-timeline-actions"], ["href", "javascript:void(0)", 1, "rel-timeline-target", 3, "click"], [1, "fa-regular", "fa-calendar"], ["title", "Edit", 1, "btn-ghost", 3, "click"], [1, "fa-solid", "fa-pen"], ["title", "End Relationship", 1, "btn-ghost", "danger"], ["title", "Delete", 1, "btn-ghost", "danger"], ["title", "End Relationship", 1, "btn-ghost", "danger", 3, "click"], [1, "fa-solid", "fa-circle-xmark"], ["title", "Delete", 1, "btn-ghost", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "rel-form-header"], [1, "rel-form-header-title"], [1, "fa-solid", "fa-circle-plus"], [1, "rel-form-header-subtitle"], ["type", "button", "title", "Cancel", 1, "rel-form-close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "rel-form-body"], [1, "form-row"], [1, "form-field", "type-field"], [3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], [1, "form-field", "category-field"], [1, "category-display"], [1, "fa-solid", "fa-link"], [1, "form-row", "form-row--target"], [1, "form-row", "form-row--meta"], [1, "form-field", "title-field"], ["type", "text", "placeholder", "e.g., Board Director, Spouse, Manager", 3, "ngModelChange", "ngModel"], [1, "form-field", "date-field"], ["type", "date", 3, "ngModelChange", "ngModel"], [1, "rel-form-footer"], ["type", "button", 1, "btn", "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["type", "button", 1, "btn", "btn-cancel", 3, "click"], [1, "form-field", "form-field--target"], [1, "required-star"], [1, "target-field-wrapper"], ["FieldName", "ToPersonID", "Type", "textbox", "LinkType", "Record", 3, "Record", "EditMode", "ShowLabel"], [1, "field-hint"], ["FieldName", "ToOrganizationID", "Type", "textbox", "LinkType", "Record", 3, "Record", "EditMode", "ShowLabel"], [1, "fa-solid", "fa-pen-to-square"], [1, "form-field", "status-field"], ["value", "Active"], ["value", "Inactive"], ["value", "Ended"], ["type", "text", "placeholder", "e.g., Board Director, Spouse", 3, "ngModelChange", "ngModel"]], template: function RelationshipListComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RelationshipListComponent, selectors: [["bizapps-relationship-list"]], inputs: { EditMode: "EditMode", Collection: "Collection", PersonID: "PersonID", OrganizationID: "OrganizationID" }, outputs: { Navigate: "Navigate", DataChanged: "DataChanged" }, decls: 9, vars: 4, consts: [[1, "rel-widget-root"], [1, "section-header"], [1, "section-label"], [1, "fa-solid", "fa-diagram-project"], [1, "btn", "btn-outline"], [1, "rel-form-card"], [1, "btn", "btn-outline", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "loading-state"], [1, "fa-solid", "fa-spinner"], [1, "empty-state"], [1, "rel-timeline-container"], [1, "rel-category"], [1, "empty-state__title"], [1, "empty-state__hint"], [1, "rel-category-header"], [1, "rel-category-icon", 3, "ngClass"], [1, "rel-category-title"], [1, "rel-category-count"], [1, "rel-timeline-item", 3, "ngClass"], [1, "rel-timeline-icon"], [1, "rel-timeline-content"], [1, "rel-timeline-sentence"], [1, "rel-timeline-label"], ["href", "javascript:void(0)", 1, "rel-timeline-target"], [1, "rel-timeline-target"], [1, "rel-timeline-meta"], [1, "rel-timeline-title"], ["title", "Job Function", 1, "badge", "badge-subtle"], ["title", "Seniority Level", 1, "badge", "badge-subtle"], [1, "rel-timeline-dates"], [1, "badge", 3, "ngClass"], [1, "rel-timeline-actions"], ["href", "javascript:void(0)", 1, "rel-timeline-target", 3, "click"], [1, "fa-solid", "fa-briefcase"], [1, "fa-solid", "fa-layer-group"], [1, "fa-regular", "fa-calendar"], ["title", "Edit", 1, "btn-ghost", 3, "click"], [1, "fa-solid", "fa-pen"], ["title", "End Relationship", 1, "btn-ghost", "danger"], ["title", "Delete", 1, "btn-ghost", "danger"], ["title", "End Relationship", 1, "btn-ghost", "danger", 3, "click"], [1, "fa-solid", "fa-circle-xmark"], ["title", "Delete", 1, "btn-ghost", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "rel-form-header"], [1, "rel-form-header-title"], [1, "fa-solid", "fa-circle-plus"], [1, "rel-form-header-subtitle"], ["type", "button", "title", "Cancel", 1, "rel-form-close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "rel-form-body"], [1, "form-row"], [1, "form-field", "type-field"], [3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], [1, "form-field", "category-field"], [1, "category-display"], [1, "fa-solid", "fa-link"], [1, "form-row", "form-row--target"], [1, "form-row", "form-row--meta"], [1, "form-field", "title-field"], ["type", "text", "placeholder", "e.g., Board Director, Spouse, Manager", 3, "ngModelChange", "ngModel"], [1, "form-field", "date-field"], ["type", "date", 3, "ngModelChange", "ngModel"], [1, "rel-form-progressive"], ["type", "button", 1, "rel-form-progressive-toggle", 3, "click"], [1, "form-row", "form-row--classification"], [1, "rel-form-footer"], ["type", "button", 1, "btn", "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["type", "button", 1, "btn", "btn-cancel", 3, "click"], [1, "form-field", "form-field--target"], [1, "required-star"], [1, "target-field-wrapper"], ["FieldName", "ToPersonID", "Type", "textbox", "LinkType", "Record", 3, "Record", "EditMode", "ShowLabel"], [1, "field-hint"], ["FieldName", "ToOrganizationID", "Type", "textbox", "LinkType", "Record", 3, "Record", "EditMode", "ShowLabel"], [1, "form-field"], [1, "fa-solid", "fa-pen-to-square"], [1, "form-field", "status-field"], ["value", "Active"], ["value", "Inactive"], ["value", "Ended"], ["type", "text", "placeholder", "e.g., Board Director, Spouse", 3, "ngModelChange", "ngModel"]], template: function RelationshipListComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
             i0.ɵɵelement(3, "i", 3);
             i0.ɵɵtext(4, " Relationships ");
@@ -1163,8 +1362,8 @@ export class RelationshipListComponent {
             i0.ɵɵconditionalCreate(5, RelationshipListComponent_Conditional_5_Template, 3, 0, "button", 4);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(6, RelationshipListComponent_Conditional_6_Template, 2, 1);
-            i0.ɵɵconditionalCreate(7, RelationshipListComponent_Conditional_7_Template, 47, 8, "div", 5);
-            i0.ɵɵconditionalCreate(8, RelationshipListComponent_Conditional_8_Template, 54, 8, "div", 5);
+            i0.ɵɵconditionalCreate(7, RelationshipListComponent_Conditional_7_Template, 52, 11, "div", 5);
+            i0.ɵɵconditionalCreate(8, RelationshipListComponent_Conditional_8_Template, 59, 11, "div", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(5);
@@ -1175,11 +1374,11 @@ export class RelationshipListComponent {
             i0.ɵɵconditional(ctx.ShowAddForm ? 7 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.EditingId ? 8 : -1);
-        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, BaseFormsModule, i3.MjFormFieldComponent], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    font-family: var(--mj-font-family);\n    color: var(--mj-text-primary);\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.section-label[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.section-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n\n\n.rel-category[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.rel-category[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.rel-category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 0;\n    margin-bottom: 12px;\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.rel-category-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    font-size: 13px;\n}\n\n.rel-category-icon.cat-employment[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary-hover);\n}\n\n.rel-category-icon.cat-board[_ngcontent-%COMP%] {\n    background: var(--mj-status-info-bg);\n    color: var(--mj-status-info-text);\n}\n\n.rel-category-icon.cat-personal[_ngcontent-%COMP%] {\n    background: var(--mj-status-info-bg);\n    color: var(--mj-status-error-text);\n}\n\n.rel-category-icon.cat-business[_ngcontent-%COMP%] {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n}\n\n.rel-category-icon.cat-default[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n}\n\n.rel-category-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    flex: 1;\n}\n\n.rel-category-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n}\n\n\n\n.rel-timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 12px 16px;\n    margin-bottom: 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    transition: all 0.15s;\n    position: relative;\n}\n\n.rel-timeline-item[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-border-strong);\n    background: var(--mj-bg-surface-card);\n}\n\n.rel-timeline-item.status-active[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-status-success);\n}\n\n.rel-timeline-item.status-inactive[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-status-warning);\n    opacity: 0.7;\n}\n\n.rel-timeline-item.status-ended[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-text-disabled);\n    opacity: 0.5;\n}\n\n\n\n.rel-timeline-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n\n\n.rel-timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.rel-timeline-sentence[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n}\n\n.rel-timeline-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n}\n\na.rel-timeline-target[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    text-decoration: none;\n}\n\na.rel-timeline-target[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary-hover);\n    text-decoration: underline;\n}\n\nspan.rel-timeline-target[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.rel-timeline-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-top: 4px;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    flex-wrap: wrap;\n}\n\n.rel-timeline-title[_ngcontent-%COMP%] {\n    font-style: italic;\n    color: var(--mj-text-secondary);\n}\n\n.rel-timeline-dates[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n.rel-timeline-actions[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    display: flex;\n    gap: 2px;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.rel-timeline-item[_ngcontent-%COMP%]:hover   .rel-timeline-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.badge-active[_ngcontent-%COMP%] {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n}\n\n.badge-inactive[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning-bg);\n    color: var(--mj-status-warning-text);\n}\n\n.badge-ended[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n}\n\n\n\n.btn-ghost[_ngcontent-%COMP%] {\n    background: transparent;\n    color: var(--mj-text-disabled);\n    padding: 6px 8px;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n    font-size: 13px;\n    transition: all 0.15s ease;\n}\n\n.btn-ghost[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-ghost.danger[_ngcontent-%COMP%]:hover {\n    color: var(--mj-status-error-text);\n    background: var(--mj-status-error-bg);\n}\n\n\n\n.btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: none;\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary, #0284c7);\n    color: #fff;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover, #0369a1);\n}\n\n.btn-primary[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.btn-outline[_ngcontent-%COMP%] {\n    background: transparent;\n    border: 1px dashed var(--mj-border-strong, #334155);\n    color: var(--mj-text-secondary, #94a3b8);\n}\n\n.btn-outline[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary, #0284c7);\n    color: var(--mj-brand-primary, #38bdf8);\n    background: color-mix(in srgb, var(--mj-brand-primary, #0284c7) 8%, transparent);\n}\n\n.btn-cancel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card, #141f36);\n    color: var(--mj-text-secondary, #94a3b8);\n    border: 1px solid var(--mj-border-default, #223254);\n}\n\n.btn-cancel[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-subtle, #1e293b);\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n\n\n\n\n\n\n.rel-widget-root[_ngcontent-%COMP%] {\n    position: relative;\n    width: 100%;\n}\n\n.rel-timeline-container[_ngcontent-%COMP%] {\n    transition: opacity 0.2s ease;\n}\n\n.rel-form-card[_ngcontent-%COMP%] {\n    width: 100%;\n    background: var(--mj-bg-surface-card, #141f36);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-lg, 10px);\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: _ngcontent-%COMP%_relFadeIn 0.18s ease-out;\n    margin-bottom: 12px;\n}\n\n@keyframes _ngcontent-%COMP%_relFadeIn {\n    from { opacity: 0; transform: translateY(-4px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.rel-form-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, #223254);\n    background: color-mix(in srgb, var(--mj-brand-primary, #0284c7) 8%, var(--mj-bg-surface-card, #141f36));\n}\n\n.rel-form-header-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.rel-form-header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-brand-primary, #38bdf8);\n}\n\n.rel-form-header-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n.rel-form-header-subtitle[_ngcontent-%COMP%] {\n    margin: 2px 0 0;\n    font-size: 12px;\n    color: var(--mj-text-secondary, #94a3b8);\n}\n\n.rel-form-close-btn[_ngcontent-%COMP%] {\n    background: transparent;\n    border: none;\n    font-size: 16px;\n    color: var(--mj-text-muted, #64748b);\n    cursor: pointer;\n    border-radius: var(--mj-radius-sm, 6px);\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.15s ease;\n}\n\n.rel-form-close-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary, #f1f5f9);\n    background: var(--mj-bg-surface-sunken, #0b1220);\n}\n\n.rel-form-body[_ngcontent-%COMP%] {\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n}\n\n.form-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 14px;\n    align-items: flex-start;\n}\n\n.form-row--target[_ngcontent-%COMP%] {\n    display: block;\n    width: 100%;\n}\n\n.form-field[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.form-field--target[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-secondary, #94a3b8);\n    margin-bottom: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n}\n\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], \n.form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 9px 12px;\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    font-family: inherit;\n    background: var(--mj-bg-surface-sunken, #0b1220);\n    color: var(--mj-text-primary, #f1f5f9);\n    box-sizing: border-box;\n}\n\n.form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]   option[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card, #141f36);\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus, \n.form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary, #0284c7);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary, #0284c7) 15%, transparent);\n}\n\n.form-field.type-field[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 200px;\n}\n\n.form-field.category-field[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 200px;\n}\n\n.form-field.status-field[_ngcontent-%COMP%] {\n    max-width: 160px;\n}\n\n.form-field.date-field[_ngcontent-%COMP%] {\n    max-width: 180px;\n}\n\n.form-field.title-field[_ngcontent-%COMP%] {\n    flex: 2;\n}\n\n\n\n.category-display[_ngcontent-%COMP%] {\n    padding: 9px 12px;\n    background: var(--mj-bg-surface-sunken, #0b1220);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    color: var(--mj-text-secondary, #94a3b8);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-height: 38px;\n    box-sizing: border-box;\n}\n\n.category-display[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-brand-primary, #38bdf8);\n}\n\n\n\n.target-field-wrapper[_ngcontent-%COMP%] {\n    width: 100%;\n    min-width: 0;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     mj-form-field {\n    width: 100%;\n    display: block;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     .mj-forms-field {\n    display: block !important;\n    width: 100% !important;\n    padding: 0 !important;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     .mj-forms-field-control {\n    width: 100% !important;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     .mj-fk-search {\n    width: 100% !important;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     .mj-forms-input-wrapper {\n    width: 100% !important;\n    min-height: 40px !important;\n    border-radius: var(--mj-radius-sm, 6px) !important;\n    background: var(--mj-bg-surface-sunken, #0b1220) !important;\n    border: 1px solid var(--mj-border-default, #223254) !important;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     input.mj-forms-field-input {\n    font-size: 13px !important;\n    padding: 9px 12px !important;\n    color: var(--mj-text-primary, #f1f5f9) !important;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     .mj-fk-dropdown {\n    width: 100% !important;\n    max-width: none !important;\n}\n\n.field-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 11px;\n    color: var(--mj-text-muted, #64748b);\n    margin-top: 4px;\n}\n\n.required-star[_ngcontent-%COMP%] {\n    color: var(--mj-status-error, #ef4444);\n    font-weight: 700;\n}\n\n.rel-form-footer[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 14px 20px;\n    border-top: 1px solid var(--mj-border-default, #223254);\n    background: var(--mj-bg-surface-sunken, #0b1220);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 40px 20px;\n    color: var(--mj-text-muted);\n    font-size: 14px;\n    border: 1px dashed var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface);\n}\n\n.empty-state__title[_ngcontent-%COMP%] {\n    margin: 8px 0 4px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.empty-state__hint[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    max-width: 28rem;\n    margin-inline: auto;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--mj-border-strong);\n    margin-bottom: 8px;\n    display: block;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 32px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    gap: 8px;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}"] });
+        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, BaseFormsModule, i3.MjFormFieldComponent], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    font-family: var(--mj-font-family);\n    color: var(--mj-text-primary);\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.section-label[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.section-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n\n\n.rel-category[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.rel-category[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.rel-category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 0;\n    margin-bottom: 12px;\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.rel-category-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    font-size: 13px;\n}\n\n.rel-category-icon.cat-employment[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary-hover);\n}\n\n.rel-category-icon.cat-board[_ngcontent-%COMP%] {\n    background: var(--mj-status-info-bg);\n    color: var(--mj-status-info-text);\n}\n\n.rel-category-icon.cat-personal[_ngcontent-%COMP%] {\n    background: var(--mj-status-info-bg);\n    color: var(--mj-status-error-text);\n}\n\n.rel-category-icon.cat-business[_ngcontent-%COMP%] {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n}\n\n.rel-category-icon.cat-default[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n}\n\n.rel-category-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    flex: 1;\n}\n\n.rel-category-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n}\n\n\n\n.rel-timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 12px 16px;\n    margin-bottom: 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    transition: all 0.15s;\n    position: relative;\n}\n\n.rel-timeline-item[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-border-strong);\n    background: var(--mj-bg-surface-card);\n}\n\n.rel-timeline-item.status-active[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-status-success);\n}\n\n.rel-timeline-item.status-inactive[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-status-warning);\n    opacity: 0.7;\n}\n\n.rel-timeline-item.status-ended[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-text-disabled);\n    opacity: 0.5;\n}\n\n\n\n.rel-timeline-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n\n\n.rel-timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.rel-timeline-sentence[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n}\n\n.rel-timeline-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n}\n\na.rel-timeline-target[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    text-decoration: none;\n}\n\na.rel-timeline-target[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary-hover);\n    text-decoration: underline;\n}\n\nspan.rel-timeline-target[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.rel-timeline-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-top: 4px;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    flex-wrap: wrap;\n}\n\n.rel-timeline-title[_ngcontent-%COMP%] {\n    font-style: italic;\n    color: var(--mj-text-secondary);\n}\n\n.rel-timeline-dates[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n.rel-timeline-actions[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    display: flex;\n    gap: 2px;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.rel-timeline-item[_ngcontent-%COMP%]:hover   .rel-timeline-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.badge-active[_ngcontent-%COMP%] {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n}\n\n.badge-inactive[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning-bg);\n    color: var(--mj-status-warning-text);\n}\n\n.badge-ended[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n}\n\n\n\n.btn-ghost[_ngcontent-%COMP%] {\n    background: transparent;\n    color: var(--mj-text-disabled);\n    padding: 6px 8px;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n    font-size: 13px;\n    transition: all 0.15s ease;\n}\n\n.btn-ghost[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-ghost.danger[_ngcontent-%COMP%]:hover {\n    color: var(--mj-status-error-text);\n    background: var(--mj-status-error-bg);\n}\n\n\n\n.btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: none;\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary, #0284c7);\n    color: #fff;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover, #0369a1);\n}\n\n.btn-primary[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.btn-outline[_ngcontent-%COMP%] {\n    background: transparent;\n    border: 1px dashed var(--mj-border-strong, #334155);\n    color: var(--mj-text-secondary, #94a3b8);\n}\n\n.btn-outline[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary, #0284c7);\n    color: var(--mj-brand-primary, #38bdf8);\n    background: color-mix(in srgb, var(--mj-brand-primary, #0284c7) 8%, transparent);\n}\n\n.btn-cancel[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card, #141f36);\n    color: var(--mj-text-secondary, #94a3b8);\n    border: 1px solid var(--mj-border-default, #223254);\n}\n\n.btn-cancel[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-subtle, #1e293b);\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n\n\n\n\n\n\n.rel-widget-root[_ngcontent-%COMP%] {\n    position: relative;\n    width: 100%;\n}\n\n.rel-timeline-container[_ngcontent-%COMP%] {\n    transition: opacity 0.2s ease;\n}\n\n.rel-form-card[_ngcontent-%COMP%] {\n    width: 100%;\n    background: var(--mj-bg-surface-card, #141f36);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-lg, 10px);\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: _ngcontent-%COMP%_relFadeIn 0.18s ease-out;\n    margin-bottom: 12px;\n}\n\n@keyframes _ngcontent-%COMP%_relFadeIn {\n    from { opacity: 0; transform: translateY(-4px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.rel-form-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, #223254);\n    background: color-mix(in srgb, var(--mj-brand-primary, #0284c7) 8%, var(--mj-bg-surface-card, #141f36));\n}\n\n.rel-form-header-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.rel-form-header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-brand-primary, #38bdf8);\n}\n\n.rel-form-header-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n.rel-form-header-subtitle[_ngcontent-%COMP%] {\n    margin: 2px 0 0;\n    font-size: 12px;\n    color: var(--mj-text-secondary, #94a3b8);\n}\n\n.rel-form-close-btn[_ngcontent-%COMP%] {\n    background: transparent;\n    border: none;\n    font-size: 16px;\n    color: var(--mj-text-muted, #64748b);\n    cursor: pointer;\n    border-radius: var(--mj-radius-sm, 6px);\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.15s ease;\n}\n\n.rel-form-close-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary, #f1f5f9);\n    background: var(--mj-bg-surface-sunken, #0b1220);\n}\n\n.rel-form-body[_ngcontent-%COMP%] {\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n}\n\n.form-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 14px;\n    align-items: flex-start;\n}\n\n.form-row--target[_ngcontent-%COMP%] {\n    display: block;\n    width: 100%;\n}\n\n.form-field[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.form-field--target[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-secondary, #94a3b8);\n    margin-bottom: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n}\n\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], \n.form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 9px 12px;\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    font-family: inherit;\n    background: var(--mj-bg-surface-sunken, #0b1220);\n    color: var(--mj-text-primary, #f1f5f9);\n    box-sizing: border-box;\n}\n\n.form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]   option[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card, #141f36);\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus, \n.form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary, #0284c7);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary, #0284c7) 15%, transparent);\n}\n\n.form-field.type-field[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 200px;\n}\n\n.form-field.category-field[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 200px;\n}\n\n.form-field.status-field[_ngcontent-%COMP%] {\n    max-width: 160px;\n}\n\n.form-field.date-field[_ngcontent-%COMP%] {\n    max-width: 180px;\n}\n\n.form-field.title-field[_ngcontent-%COMP%] {\n    flex: 2;\n}\n\n\n\n.category-display[_ngcontent-%COMP%] {\n    padding: 9px 12px;\n    background: var(--mj-bg-surface-sunken, #0b1220);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    color: var(--mj-text-secondary, #94a3b8);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-height: 38px;\n    box-sizing: border-box;\n}\n\n.category-display[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-brand-primary, #38bdf8);\n}\n\n\n\n.target-field-wrapper[_ngcontent-%COMP%] {\n    width: 100%;\n    min-width: 0;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     mj-form-field {\n    width: 100%;\n    display: block;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     .mj-forms-field {\n    display: block !important;\n    width: 100% !important;\n    padding: 0 !important;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     .mj-forms-field-control {\n    width: 100% !important;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     .mj-fk-search {\n    width: 100% !important;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     .mj-forms-input-wrapper {\n    width: 100% !important;\n    min-height: 40px !important;\n    border-radius: var(--mj-radius-sm, 6px) !important;\n    background: var(--mj-bg-surface-sunken, #0b1220) !important;\n    border: 1px solid var(--mj-border-default, #223254) !important;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     input.mj-forms-field-input {\n    font-size: 13px !important;\n    padding: 9px 12px !important;\n    color: var(--mj-text-primary, #f1f5f9) !important;\n}\n\n.target-field-wrapper[_ngcontent-%COMP%]     .mj-fk-dropdown {\n    width: 100% !important;\n    max-width: none !important;\n}\n\n.field-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 11px;\n    color: var(--mj-text-muted, #64748b);\n    margin-top: 4px;\n}\n\n.required-star[_ngcontent-%COMP%] {\n    color: var(--mj-status-error, #ef4444);\n    font-weight: 700;\n}\n\n.rel-form-footer[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 14px 20px;\n    border-top: 1px solid var(--mj-border-default, #223254);\n    background: var(--mj-bg-surface-sunken, #0b1220);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 40px 20px;\n    color: var(--mj-text-muted);\n    font-size: 14px;\n    border: 1px dashed var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface);\n}\n\n.empty-state__title[_ngcontent-%COMP%] {\n    margin: 8px 0 4px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.empty-state__hint[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    max-width: 28rem;\n    margin-inline: auto;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--mj-border-strong);\n    margin-bottom: 8px;\n    display: block;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 32px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    gap: 8px;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n.badge-subtle[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n    text-transform: none;\n    font-weight: 500;\n}\n\n.rel-form-progressive[_ngcontent-%COMP%] {\n    margin-top: 12px;\n    padding-top: 10px;\n    border-top: 1px dashed var(--mj-border-default);\n}\n\n.rel-form-progressive-toggle[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    background: none;\n    border: none;\n    padding: 4px 0;\n}\n\n.rel-form-progressive-toggle[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.form-row--classification[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    margin-top: 8px;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RelationshipListComponent, [{
         type: Component,
-        args: [{ standalone: true, imports: [CommonModule, FormsModule, BaseFormsModule], selector: 'bizapps-relationship-list', template: "<!-- RelationshipList - Grouped Timeline Design with Slide-In Overlay -->\n\n<div class=\"rel-widget-root\">\n    <!-- Header -->\n    <div class=\"section-header\">\n        <span class=\"section-label\">\n            <i class=\"fa-solid fa-diagram-project\"></i>\n            Relationships\n        </span>\n        @if (!Loading && EditMode && !ShowAddForm && !EditingId) {\n            <button class=\"btn btn-outline\" (click)=\"onShowAdd()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                Add Relationship\n            </button>\n        }\n    </div>\n\n    <!-- Timeline List Content (when not adding or editing) -->\n    @if (!ShowAddForm && !EditingId) {\n        @if (Loading) {\n            <div class=\"loading-state\">\n                <i class=\"fa-solid fa-spinner\"></i> Loading relationships...\n            </div>\n        } @else {\n            @if (GroupedRelationships.length === 0) {\n                <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-diagram-project\"></i>\n                    <p class=\"empty-state__title\">No relationships</p>\n                    <p class=\"empty-state__hint\">\n                        @if (EditMode) {\n                            This record has no relationship links yet. Click \"Add Relationship\" above to connect it to a person or organization.\n                        } @else {\n                            This record has no relationship links yet.\n                        }\n                    </p>\n                </div>\n            }\n\n            <div class=\"rel-timeline-container\">\n                @for (group of GroupedRelationships; track group.Category) {\n                    <div class=\"rel-category\">\n                        <div class=\"rel-category-header\">\n                            <div class=\"rel-category-icon\" [ngClass]=\"group.IconClass\">\n                                <i [class]=\"group.Icon\"></i>\n                            </div>\n                            <span class=\"rel-category-title\">{{ group.Label }}</span>\n                            <span class=\"rel-category-count\">{{ group.Items.length }} {{ group.Items.length === 1 ? 'relationship' : 'relationships' }}</span>\n                        </div>\n\n                        @for (item of group.Items; track item.Relationship.ID) {\n                            <div class=\"rel-timeline-item\"\n                                 [ngClass]=\"'status-' + item.Relationship.Status.toLowerCase()\">\n                                <div class=\"rel-timeline-icon\">\n                                    <i [class]=\"group.Icon\"></i>\n                                </div>\n                                <div class=\"rel-timeline-content\">\n                                    <div class=\"rel-timeline-sentence\">\n                                        <span class=\"rel-timeline-label\">{{ item.DirectionLabel }}</span>\n                                        @if (item.TargetEntityName && item.TargetID) {\n                                            <a class=\"rel-timeline-target\" href=\"javascript:void(0)\"\n                                               (click)=\"onNavigateToTarget(item, $event)\">{{ item.TargetName }}</a>\n                                        } @else {\n                                            <span class=\"rel-timeline-target\">{{ item.TargetName }}</span>\n                                        }\n                                    </div>\n                                    <div class=\"rel-timeline-meta\">\n                                        @if (item.Relationship.Title) {\n                                            <span class=\"rel-timeline-title\">{{ item.Relationship.Title }}</span>\n                                        }\n                                        @if (item.DateDisplay) {\n                                            <span class=\"rel-timeline-dates\">\n                                                <i class=\"fa-regular fa-calendar\"></i> {{ item.DateDisplay }}\n                                            </span>\n                                        }\n                                        <span class=\"badge\" [ngClass]=\"'badge-' + item.Relationship.Status.toLowerCase()\">\n                                            {{ item.Relationship.Status }}\n                                        </span>\n                                    </div>\n                                </div>\n                                @if (EditMode) {\n                                <div class=\"rel-timeline-actions\">\n                                    <button class=\"btn-ghost\" title=\"Edit\" (click)=\"onEdit(item.Relationship)\">\n                                        <i class=\"fa-solid fa-pen\"></i>\n                                    </button>\n                                    @if (item.Relationship.Status === 'Active') {\n                                        <button class=\"btn-ghost danger\" title=\"End Relationship\" (click)=\"onEndRelationship(item.Relationship)\">\n                                            <i class=\"fa-solid fa-circle-xmark\"></i>\n                                        </button>\n                                    } @else {\n                                        <button class=\"btn-ghost danger\" title=\"Delete\" (click)=\"onDelete(item.Relationship)\">\n                                            <i class=\"fa-solid fa-trash\"></i>\n                                        </button>\n                                    }\n                                </div>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    }\n\n    <!-- ============================================\n         ADD RELATIONSHIP FORM CARD\n         ============================================ -->\n    @if (ShowAddForm) {\n        <div class=\"rel-form-card\">\n            <div class=\"rel-form-header\">\n                <div class=\"rel-form-header-title\">\n                    <i class=\"fa-solid fa-circle-plus\"></i>\n                    <div>\n                        <h3>Add Relationship</h3>\n                        <p class=\"rel-form-header-subtitle\">Create a connection to another person or organization</p>\n                    </div>\n                </div>\n                <button type=\"button\" class=\"rel-form-close-btn\" (click)=\"onCancelAdd()\" title=\"Cancel\">\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            </div>\n\n            <div class=\"rel-form-body\">\n                <!-- Type & Category Row -->\n                <div class=\"form-row\">\n                    <div class=\"form-field type-field\">\n                        <label>Relationship Type</label>\n                        <select [(ngModel)]=\"AddForm.TypeID\" (ngModelChange)=\"onAddTypeChange()\">\n                            <option value=\"\">-- Select Type --</option>\n                            @for (t of RelationshipTypes; track t.ID) {\n                                <option [value]=\"t.ID\">{{ t.Name }}</option>\n                            }\n                        </select>\n                    </div>\n                    <div class=\"form-field category-field\">\n                        <label>Category</label>\n                        <div class=\"category-display\">\n                            <i class=\"fa-solid fa-link\"></i>\n                            {{ getCategoryFriendlyName(getAddCategory()) }}\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Target Search (Prominent Full Width) -->\n                @if (DraftRelationship && AddForm.TypeID) {\n                    <div class=\"form-row form-row--target\">\n                        @if (IsPersonTarget) {\n                            <div class=\"form-field form-field--target\">\n                                <label>Target Person <span class=\"required-star\">*</span></label>\n                                <div class=\"target-field-wrapper\">\n                                    <mj-form-field\n                                        [Record]=\"DraftRelationship\"\n                                        FieldName=\"ToPersonID\"\n                                        Type=\"textbox\"\n                                        LinkType=\"Record\"\n                                        [EditMode]=\"true\"\n                                        [ShowLabel]=\"false\">\n                                    </mj-form-field>\n                                </div>\n                                <span class=\"field-hint\">Search person by name, job title, or email</span>\n                            </div>\n                        }\n                        @if (IsOrgTarget) {\n                            <div class=\"form-field form-field--target\">\n                                <label>Target Organization <span class=\"required-star\">*</span></label>\n                                <div class=\"target-field-wrapper\">\n                                    <mj-form-field\n                                        [Record]=\"DraftRelationship\"\n                                        FieldName=\"ToOrganizationID\"\n                                        Type=\"textbox\"\n                                        LinkType=\"Record\"\n                                        [EditMode]=\"true\"\n                                        [ShowLabel]=\"false\">\n                                    </mj-form-field>\n                                </div>\n                                <span class=\"field-hint\">Search organization or company name</span>\n                            </div>\n                        }\n                    </div>\n                }\n\n                <!-- Details & Dates Row -->\n                <div class=\"form-row form-row--meta\">\n                    <div class=\"form-field title-field\">\n                        <label>Title / Role (Optional)</label>\n                        <input type=\"text\" [(ngModel)]=\"AddForm.Title\" placeholder=\"e.g., Board Director, Spouse, Manager\">\n                    </div>\n                    <div class=\"form-field date-field\">\n                        <label>Start Date</label>\n                        <input type=\"date\" [(ngModel)]=\"AddForm.StartDate\">\n                    </div>\n                    <div class=\"form-field date-field\">\n                        <label>End Date</label>\n                        <input type=\"date\" [(ngModel)]=\"AddForm.EndDate\">\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"rel-form-footer\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSaveAdd()\" [disabled]=\"Saving || !AddForm.TypeID || !HasValidAddTarget\">\n                    @if (Saving) {\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                    }\n                    Save Relationship\n                </button>\n                <button type=\"button\" class=\"btn btn-cancel\" (click)=\"onCancelAdd()\">Cancel</button>\n            </div>\n        </div>\n    }\n\n    <!-- ============================================\n         EDIT RELATIONSHIP FORM CARD\n         ============================================ -->\n    @if (EditingId) {\n        <div class=\"rel-form-card\">\n            <div class=\"rel-form-header\">\n                <div class=\"rel-form-header-title\">\n                    <i class=\"fa-solid fa-pen-to-square\"></i>\n                    <div>\n                        <h3>Edit Relationship</h3>\n                        <p class=\"rel-form-header-subtitle\">Update relationship details, dates, or status</p>\n                    </div>\n                </div>\n                <button type=\"button\" class=\"rel-form-close-btn\" (click)=\"onCancelEdit()\" title=\"Cancel\">\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            </div>\n\n            <div class=\"rel-form-body\">\n                <div class=\"form-row\">\n                    <div class=\"form-field type-field\">\n                        <label>Relationship Type</label>\n                        <select [(ngModel)]=\"EditForm.TypeID\" (ngModelChange)=\"onEditTypeChange()\">\n                            @for (t of RelationshipTypes; track t.ID) {\n                                <option [value]=\"t.ID\">{{ t.Name }}</option>\n                            }\n                        </select>\n                    </div>\n                    <div class=\"form-field category-field\">\n                        <label>Category</label>\n                        <div class=\"category-display\">\n                            <i class=\"fa-solid fa-link\"></i>\n                            {{ getCategoryFriendlyName(getEditCategory()) }}\n                        </div>\n                    </div>\n                    <div class=\"form-field status-field\">\n                        <label>Status</label>\n                        <select [(ngModel)]=\"EditForm.Status\">\n                            <option value=\"Active\">Active</option>\n                            <option value=\"Inactive\">Inactive</option>\n                            <option value=\"Ended\">Ended</option>\n                        </select>\n                    </div>\n                </div>\n\n                <div class=\"form-row form-row--meta\">\n                    <div class=\"form-field title-field\">\n                        <label>Title / Role</label>\n                        <input type=\"text\" [(ngModel)]=\"EditForm.Title\" placeholder=\"e.g., Board Director, Spouse\">\n                    </div>\n                    <div class=\"form-field date-field\">\n                        <label>Start Date</label>\n                        <input type=\"date\" [(ngModel)]=\"EditForm.StartDate\">\n                    </div>\n                    <div class=\"form-field date-field\">\n                        <label>End Date</label>\n                        <input type=\"date\" [(ngModel)]=\"EditForm.EndDate\">\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"rel-form-footer\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSaveEdit()\" [disabled]=\"Saving\">\n                    @if (Saving) {\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                    }\n                    Save Changes\n                </button>\n                <button type=\"button\" class=\"btn btn-cancel\" (click)=\"onCancelEdit()\">Cancel</button>\n            </div>\n        </div>\n    }\n</div>\n", styles: ["/* ============================================\n   RelationshipList - Grouped Timeline Design\n   Pixel-perfect match to Option A mockup\n   ============================================ */\n\n:host {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    font-family: var(--mj-font-family);\n    color: var(--mj-text-primary);\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.section-label {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.section-label i {\n    color: var(--mj-brand-primary);\n}\n\n/* Category group */\n.rel-category {\n    margin-bottom: 24px;\n}\n\n.rel-category:last-child {\n    margin-bottom: 0;\n}\n\n.rel-category-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 0;\n    margin-bottom: 12px;\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.rel-category-icon {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    font-size: 13px;\n}\n\n.rel-category-icon.cat-employment {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary-hover);\n}\n\n.rel-category-icon.cat-board {\n    background: var(--mj-status-info-bg);\n    color: var(--mj-status-info-text);\n}\n\n.rel-category-icon.cat-personal {\n    background: var(--mj-status-info-bg);\n    color: var(--mj-status-error-text);\n}\n\n.rel-category-icon.cat-business {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n}\n\n.rel-category-icon.cat-default {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n}\n\n.rel-category-title {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    flex: 1;\n}\n\n.rel-category-count {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n}\n\n/* Timeline item */\n.rel-timeline-item {\n    display: flex;\n    gap: 12px;\n    padding: 12px 16px;\n    margin-bottom: 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    transition: all 0.15s;\n    position: relative;\n}\n\n.rel-timeline-item:hover {\n    border-color: var(--mj-border-strong);\n    background: var(--mj-bg-surface-card);\n}\n\n.rel-timeline-item.status-active {\n    border-left: 3px solid var(--mj-status-success);\n}\n\n.rel-timeline-item.status-inactive {\n    border-left: 3px solid var(--mj-status-warning);\n    opacity: 0.7;\n}\n\n.rel-timeline-item.status-ended {\n    border-left: 3px solid var(--mj-text-disabled);\n    opacity: 0.5;\n}\n\n/* Timeline icon */\n.rel-timeline-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n/* Content */\n.rel-timeline-content {\n    flex: 1;\n}\n\n.rel-timeline-sentence {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n}\n\n.rel-timeline-label {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n}\n\na.rel-timeline-target {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    text-decoration: none;\n}\n\na.rel-timeline-target:hover {\n    color: var(--mj-brand-primary-hover);\n    text-decoration: underline;\n}\n\nspan.rel-timeline-target {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.rel-timeline-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-top: 4px;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    flex-wrap: wrap;\n}\n\n.rel-timeline-title {\n    font-style: italic;\n    color: var(--mj-text-secondary);\n}\n\n.rel-timeline-dates {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Actions */\n.rel-timeline-actions {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    display: flex;\n    gap: 2px;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.rel-timeline-item:hover .rel-timeline-actions {\n    opacity: 1;\n}\n\n/* Badges */\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.badge-active {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n}\n\n.badge-inactive {\n    background: var(--mj-status-warning-bg);\n    color: var(--mj-status-warning-text);\n}\n\n.badge-ended {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n}\n\n/* Ghost buttons */\n.btn-ghost {\n    background: transparent;\n    color: var(--mj-text-disabled);\n    padding: 6px 8px;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n    font-size: 13px;\n    transition: all 0.15s ease;\n}\n\n.btn-ghost:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-ghost.danger:hover {\n    color: var(--mj-status-error-text);\n    background: var(--mj-status-error-bg);\n}\n\n/* Buttons */\n.btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: none;\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.btn-primary {\n    background: var(--mj-brand-primary, #0284c7);\n    color: #fff;\n}\n\n.btn-primary:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover, #0369a1);\n}\n\n.btn-primary:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.btn-outline {\n    background: transparent;\n    border: 1px dashed var(--mj-border-strong, #334155);\n    color: var(--mj-text-secondary, #94a3b8);\n}\n\n.btn-outline:hover {\n    border-color: var(--mj-brand-primary, #0284c7);\n    color: var(--mj-brand-primary, #38bdf8);\n    background: color-mix(in srgb, var(--mj-brand-primary, #0284c7) 8%, transparent);\n}\n\n.btn-cancel {\n    background: var(--mj-bg-surface-card, #141f36);\n    color: var(--mj-text-secondary, #94a3b8);\n    border: 1px solid var(--mj-border-default, #223254);\n}\n\n.btn-cancel:hover {\n    background: var(--mj-border-subtle, #1e293b);\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n/* ============================================\n   OVERLAY SLIDE-IN PANEL\n/* ============================================\n   RELATIONSHIP FORM CARD (ADD / EDIT)\n   ============================================ */\n.rel-widget-root {\n    position: relative;\n    width: 100%;\n}\n\n.rel-timeline-container {\n    transition: opacity 0.2s ease;\n}\n\n.rel-form-card {\n    width: 100%;\n    background: var(--mj-bg-surface-card, #141f36);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-lg, 10px);\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: relFadeIn 0.18s ease-out;\n    margin-bottom: 12px;\n}\n\n@keyframes relFadeIn {\n    from { opacity: 0; transform: translateY(-4px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.rel-form-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, #223254);\n    background: color-mix(in srgb, var(--mj-brand-primary, #0284c7) 8%, var(--mj-bg-surface-card, #141f36));\n}\n\n.rel-form-header-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.rel-form-header-title i {\n    font-size: 20px;\n    color: var(--mj-brand-primary, #38bdf8);\n}\n\n.rel-form-header-title h3 {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n.rel-form-header-subtitle {\n    margin: 2px 0 0;\n    font-size: 12px;\n    color: var(--mj-text-secondary, #94a3b8);\n}\n\n.rel-form-close-btn {\n    background: transparent;\n    border: none;\n    font-size: 16px;\n    color: var(--mj-text-muted, #64748b);\n    cursor: pointer;\n    border-radius: var(--mj-radius-sm, 6px);\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.15s ease;\n}\n\n.rel-form-close-btn:hover {\n    color: var(--mj-text-primary, #f1f5f9);\n    background: var(--mj-bg-surface-sunken, #0b1220);\n}\n\n.rel-form-body {\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n}\n\n.form-row {\n    display: flex;\n    gap: 14px;\n    align-items: flex-start;\n}\n\n.form-row--target {\n    display: block;\n    width: 100%;\n}\n\n.form-field {\n    flex: 1;\n    min-width: 0;\n}\n\n.form-field--target {\n    width: 100%;\n}\n\n.form-field label {\n    display: block;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-secondary, #94a3b8);\n    margin-bottom: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n}\n\n.form-field input,\n.form-field select {\n    width: 100%;\n    padding: 9px 12px;\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    font-family: inherit;\n    background: var(--mj-bg-surface-sunken, #0b1220);\n    color: var(--mj-text-primary, #f1f5f9);\n    box-sizing: border-box;\n}\n\n.form-field select option {\n    background: var(--mj-bg-surface-card, #141f36);\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n.form-field input:focus,\n.form-field select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary, #0284c7);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary, #0284c7) 15%, transparent);\n}\n\n.form-field.type-field {\n    flex: 1;\n    min-width: 200px;\n}\n\n.form-field.category-field {\n    flex: 1;\n    min-width: 200px;\n}\n\n.form-field.status-field {\n    max-width: 160px;\n}\n\n.form-field.date-field {\n    max-width: 180px;\n}\n\n.form-field.title-field {\n    flex: 2;\n}\n\n/* Category auto-fill display */\n.category-display {\n    padding: 9px 12px;\n    background: var(--mj-bg-surface-sunken, #0b1220);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    color: var(--mj-text-secondary, #94a3b8);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-height: 38px;\n    box-sizing: border-box;\n}\n\n.category-display i {\n    font-size: 12px;\n    color: var(--mj-brand-primary, #38bdf8);\n}\n\n/* Target Search Field Wrapper (Full Width) */\n.target-field-wrapper {\n    width: 100%;\n    min-width: 0;\n}\n\n.target-field-wrapper ::ng-deep mj-form-field {\n    width: 100%;\n    display: block;\n}\n\n.target-field-wrapper ::ng-deep .mj-forms-field {\n    display: block !important;\n    width: 100% !important;\n    padding: 0 !important;\n}\n\n.target-field-wrapper ::ng-deep .mj-forms-field-control {\n    width: 100% !important;\n}\n\n.target-field-wrapper ::ng-deep .mj-fk-search {\n    width: 100% !important;\n}\n\n.target-field-wrapper ::ng-deep .mj-forms-input-wrapper {\n    width: 100% !important;\n    min-height: 40px !important;\n    border-radius: var(--mj-radius-sm, 6px) !important;\n    background: var(--mj-bg-surface-sunken, #0b1220) !important;\n    border: 1px solid var(--mj-border-default, #223254) !important;\n}\n\n.target-field-wrapper ::ng-deep input.mj-forms-field-input {\n    font-size: 13px !important;\n    padding: 9px 12px !important;\n    color: var(--mj-text-primary, #f1f5f9) !important;\n}\n\n.target-field-wrapper ::ng-deep .mj-fk-dropdown {\n    width: 100% !important;\n    max-width: none !important;\n}\n\n.field-hint {\n    display: block;\n    font-size: 11px;\n    color: var(--mj-text-muted, #64748b);\n    margin-top: 4px;\n}\n\n.required-star {\n    color: var(--mj-status-error, #ef4444);\n    font-weight: 700;\n}\n\n.rel-form-footer {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 14px 20px;\n    border-top: 1px solid var(--mj-border-default, #223254);\n    background: var(--mj-bg-surface-sunken, #0b1220);\n}\n\n/* Empty state */\n.empty-state {\n    text-align: center;\n    padding: 40px 20px;\n    color: var(--mj-text-muted);\n    font-size: 14px;\n    border: 1px dashed var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface);\n}\n\n.empty-state__title {\n    margin: 8px 0 4px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.empty-state__hint {\n    margin: 0;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    max-width: 28rem;\n    margin-inline: auto;\n}\n\n.empty-state i {\n    font-size: 24px;\n    color: var(--mj-border-strong);\n    margin-bottom: 8px;\n    display: block;\n}\n\n/* Loading */\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 32px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    gap: 8px;\n}\n\n.loading-state i {\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n"] }]
+        args: [{ standalone: true, imports: [CommonModule, FormsModule, BaseFormsModule], selector: 'bizapps-relationship-list', template: "<!-- RelationshipList - Grouped Timeline Design with Slide-In Overlay -->\n\n<div class=\"rel-widget-root\">\n    <!-- Header -->\n    <div class=\"section-header\">\n        <span class=\"section-label\">\n            <i class=\"fa-solid fa-diagram-project\"></i>\n            Relationships\n        </span>\n        @if (!Loading && EditMode && !ShowAddForm && !EditingId) {\n            <button class=\"btn btn-outline\" (click)=\"onShowAdd()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                Add Relationship\n            </button>\n        }\n    </div>\n\n    <!-- Timeline List Content (when not adding or editing) -->\n    @if (!ShowAddForm && !EditingId) {\n        @if (Loading) {\n            <div class=\"loading-state\">\n                <i class=\"fa-solid fa-spinner\"></i> Loading relationships...\n            </div>\n        } @else {\n            @if (GroupedRelationships.length === 0) {\n                <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-diagram-project\"></i>\n                    <p class=\"empty-state__title\">No relationships</p>\n                    <p class=\"empty-state__hint\">\n                        @if (EditMode) {\n                            This record has no relationship links yet. Click \"Add Relationship\" above to connect it to a person or organization.\n                        } @else {\n                            This record has no relationship links yet.\n                        }\n                    </p>\n                </div>\n            }\n\n            <div class=\"rel-timeline-container\">\n                @for (group of GroupedRelationships; track group.Category) {\n                    <div class=\"rel-category\">\n                        <div class=\"rel-category-header\">\n                            <div class=\"rel-category-icon\" [ngClass]=\"group.IconClass\">\n                                <i [class]=\"group.Icon\"></i>\n                            </div>\n                            <span class=\"rel-category-title\">{{ group.Label }}</span>\n                            <span class=\"rel-category-count\">{{ group.Items.length }} {{ group.Items.length === 1 ? 'relationship' : 'relationships' }}</span>\n                        </div>\n\n                        @for (item of group.Items; track item.Relationship.ID) {\n                            <div class=\"rel-timeline-item\"\n                                 [ngClass]=\"'status-' + item.Relationship.Status.toLowerCase()\">\n                                <div class=\"rel-timeline-icon\">\n                                    <i [class]=\"group.Icon\"></i>\n                                </div>\n                                <div class=\"rel-timeline-content\">\n                                    <div class=\"rel-timeline-sentence\">\n                                        <span class=\"rel-timeline-label\">{{ item.DirectionLabel }}</span>\n                                        @if (item.TargetEntityName && item.TargetID) {\n                                            <a class=\"rel-timeline-target\" href=\"javascript:void(0)\"\n                                               (click)=\"onNavigateToTarget(item, $event)\">{{ item.TargetName }}</a>\n                                        } @else {\n                                            <span class=\"rel-timeline-target\">{{ item.TargetName }}</span>\n                                        }\n                                    </div>\n                                    <div class=\"rel-timeline-meta\">\n                                        @if (item.Relationship.Title) {\n                                            <span class=\"rel-timeline-title\">{{ item.Relationship.Title }}</span>\n                                        }\n                                        @if (item.Relationship.JobFunction) {\n                                            <span class=\"badge badge-subtle\" title=\"Job Function\">\n                                                <i class=\"fa-solid fa-briefcase\"></i> {{ item.Relationship.JobFunction }}\n                                            </span>\n                                        }\n                                        @if (item.Relationship.SeniorityLevel) {\n                                            <span class=\"badge badge-subtle\" title=\"Seniority Level\">\n                                                <i class=\"fa-solid fa-layer-group\"></i> {{ item.Relationship.SeniorityLevel }}\n                                            </span>\n                                        }\n                                        @if (item.DateDisplay) {\n                                            <span class=\"rel-timeline-dates\">\n                                                <i class=\"fa-regular fa-calendar\"></i> {{ item.DateDisplay }}\n                                            </span>\n                                        }\n                                        <span class=\"badge\" [ngClass]=\"'badge-' + item.Relationship.Status.toLowerCase()\">\n                                            {{ item.Relationship.Status }}\n                                        </span>\n                                    </div>\n                                </div>\n                                @if (EditMode) {\n                                <div class=\"rel-timeline-actions\">\n                                    <button class=\"btn-ghost\" title=\"Edit\" (click)=\"onEdit(item.Relationship)\">\n                                        <i class=\"fa-solid fa-pen\"></i>\n                                    </button>\n                                    @if (item.Relationship.Status === 'Active') {\n                                        <button class=\"btn-ghost danger\" title=\"End Relationship\" (click)=\"onEndRelationship(item.Relationship)\">\n                                            <i class=\"fa-solid fa-circle-xmark\"></i>\n                                        </button>\n                                    } @else {\n                                        <button class=\"btn-ghost danger\" title=\"Delete\" (click)=\"onDelete(item.Relationship)\">\n                                            <i class=\"fa-solid fa-trash\"></i>\n                                        </button>\n                                    }\n                                </div>\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    }\n\n    <!-- ============================================\n         ADD RELATIONSHIP FORM CARD\n         ============================================ -->\n    @if (ShowAddForm) {\n        <div class=\"rel-form-card\">\n            <div class=\"rel-form-header\">\n                <div class=\"rel-form-header-title\">\n                    <i class=\"fa-solid fa-circle-plus\"></i>\n                    <div>\n                        <h3>Add Relationship</h3>\n                        <p class=\"rel-form-header-subtitle\">Create a connection to another person or organization</p>\n                    </div>\n                </div>\n                <button type=\"button\" class=\"rel-form-close-btn\" (click)=\"onCancelAdd()\" title=\"Cancel\">\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            </div>\n\n            <div class=\"rel-form-body\">\n                <!-- Type & Category Row -->\n                <div class=\"form-row\">\n                    <div class=\"form-field type-field\">\n                        <label>Relationship Type</label>\n                        <select [(ngModel)]=\"AddForm.TypeID\" (ngModelChange)=\"onAddTypeChange()\">\n                            <option value=\"\">-- Select Type --</option>\n                            @for (t of RelationshipTypes; track t.ID) {\n                                <option [value]=\"t.ID\">{{ t.Name }}</option>\n                            }\n                        </select>\n                    </div>\n                    <div class=\"form-field category-field\">\n                        <label>Category</label>\n                        <div class=\"category-display\">\n                            <i class=\"fa-solid fa-link\"></i>\n                            {{ getCategoryFriendlyName(getAddCategory()) }}\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Target Search (Prominent Full Width) -->\n                @if (DraftRelationship && AddForm.TypeID) {\n                    <div class=\"form-row form-row--target\">\n                        @if (IsPersonTarget) {\n                            <div class=\"form-field form-field--target\">\n                                <label>Target Person <span class=\"required-star\">*</span></label>\n                                <div class=\"target-field-wrapper\">\n                                    <mj-form-field\n                                        [Record]=\"DraftRelationship\"\n                                        FieldName=\"ToPersonID\"\n                                        Type=\"textbox\"\n                                        LinkType=\"Record\"\n                                        [EditMode]=\"true\"\n                                        [ShowLabel]=\"false\">\n                                    </mj-form-field>\n                                </div>\n                                <span class=\"field-hint\">Search person by name, job title, or email</span>\n                            </div>\n                        }\n                        @if (IsOrgTarget) {\n                            <div class=\"form-field form-field--target\">\n                                <label>Target Organization <span class=\"required-star\">*</span></label>\n                                <div class=\"target-field-wrapper\">\n                                    <mj-form-field\n                                        [Record]=\"DraftRelationship\"\n                                        FieldName=\"ToOrganizationID\"\n                                        Type=\"textbox\"\n                                        LinkType=\"Record\"\n                                        [EditMode]=\"true\"\n                                        [ShowLabel]=\"false\">\n                                    </mj-form-field>\n                                </div>\n                                <span class=\"field-hint\">Search organization or company name</span>\n                            </div>\n                        }\n                    </div>\n                }\n\n                <!-- Details & Dates Row -->\n                <div class=\"form-row form-row--meta\">\n                    <div class=\"form-field title-field\">\n                        <label>Title / Role (Optional)</label>\n                        <input type=\"text\" [(ngModel)]=\"AddForm.Title\" placeholder=\"e.g., Board Director, Spouse, Manager\">\n                    </div>\n                    <div class=\"form-field date-field\">\n                        <label>Start Date</label>\n                        <input type=\"date\" [(ngModel)]=\"AddForm.StartDate\">\n                    </div>\n                    <div class=\"form-field date-field\">\n                        <label>End Date</label>\n                        <input type=\"date\" [(ngModel)]=\"AddForm.EndDate\">\n                    </div>\n                </div>\n\n                <!-- Progressive Disclosure: Role Details (Function & Seniority) -->\n                <div class=\"rel-form-progressive\">\n                    <button type=\"button\" class=\"rel-form-progressive-toggle\" (click)=\"ShowAddAdvanced = !ShowAddAdvanced\">\n                        <i [class]=\"ShowAddAdvanced ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n                        Role Classification (Function & Seniority)\n                    </button>\n                    @if (ShowAddAdvanced) {\n                        <div class=\"form-row form-row--classification\">\n                            <div class=\"form-field\">\n                                <label>Job Function</label>\n                                <select [(ngModel)]=\"AddForm.JobFunctionID\">\n                                    <option value=\"\">\u2014 None \u2014</option>\n                                    @for (jf of JobFunctions; track jf.ID) {\n                                        <option [value]=\"jf.ID\">{{ jf.Name }}</option>\n                                    }\n                                </select>\n                            </div>\n                            <div class=\"form-field\">\n                                <label>Seniority Level</label>\n                                <select [(ngModel)]=\"AddForm.SeniorityLevelID\">\n                                    <option value=\"\">\u2014 None \u2014</option>\n                                    @for (sl of SeniorityLevels; track sl.ID) {\n                                        <option [value]=\"sl.ID\">{{ sl.Name }}</option>\n                                    }\n                                </select>\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"rel-form-footer\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSaveAdd()\" [disabled]=\"Saving || !AddForm.TypeID || !HasValidAddTarget\">\n                    @if (Saving) {\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                    }\n                    Save Relationship\n                </button>\n                <button type=\"button\" class=\"btn btn-cancel\" (click)=\"onCancelAdd()\">Cancel</button>\n            </div>\n        </div>\n    }\n\n    <!-- ============================================\n         EDIT RELATIONSHIP FORM CARD\n         ============================================ -->\n    @if (EditingId) {\n        <div class=\"rel-form-card\">\n            <div class=\"rel-form-header\">\n                <div class=\"rel-form-header-title\">\n                    <i class=\"fa-solid fa-pen-to-square\"></i>\n                    <div>\n                        <h3>Edit Relationship</h3>\n                        <p class=\"rel-form-header-subtitle\">Update relationship details, dates, or status</p>\n                    </div>\n                </div>\n                <button type=\"button\" class=\"rel-form-close-btn\" (click)=\"onCancelEdit()\" title=\"Cancel\">\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            </div>\n\n            <div class=\"rel-form-body\">\n                <div class=\"form-row\">\n                    <div class=\"form-field type-field\">\n                        <label>Relationship Type</label>\n                        <select [(ngModel)]=\"EditForm.TypeID\" (ngModelChange)=\"onEditTypeChange()\">\n                            @for (t of RelationshipTypes; track t.ID) {\n                                <option [value]=\"t.ID\">{{ t.Name }}</option>\n                            }\n                        </select>\n                    </div>\n                    <div class=\"form-field category-field\">\n                        <label>Category</label>\n                        <div class=\"category-display\">\n                            <i class=\"fa-solid fa-link\"></i>\n                            {{ getCategoryFriendlyName(getEditCategory()) }}\n                        </div>\n                    </div>\n                    <div class=\"form-field status-field\">\n                        <label>Status</label>\n                        <select [(ngModel)]=\"EditForm.Status\">\n                            <option value=\"Active\">Active</option>\n                            <option value=\"Inactive\">Inactive</option>\n                            <option value=\"Ended\">Ended</option>\n                        </select>\n                    </div>\n                </div>\n\n                <div class=\"form-row form-row--meta\">\n                    <div class=\"form-field title-field\">\n                        <label>Title / Role</label>\n                        <input type=\"text\" [(ngModel)]=\"EditForm.Title\" placeholder=\"e.g., Board Director, Spouse\">\n                    </div>\n                    <div class=\"form-field date-field\">\n                        <label>Start Date</label>\n                        <input type=\"date\" [(ngModel)]=\"EditForm.StartDate\">\n                    </div>\n                    <div class=\"form-field date-field\">\n                        <label>End Date</label>\n                        <input type=\"date\" [(ngModel)]=\"EditForm.EndDate\">\n                    </div>\n                </div>\n\n                <!-- Progressive Disclosure: Role Details (Function & Seniority) -->\n                <div class=\"rel-form-progressive\">\n                    <button type=\"button\" class=\"rel-form-progressive-toggle\" (click)=\"ShowEditAdvanced = !ShowEditAdvanced\">\n                        <i [class]=\"ShowEditAdvanced ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n                        Role Classification (Function & Seniority)\n                    </button>\n                    @if (ShowEditAdvanced) {\n                        <div class=\"form-row form-row--classification\">\n                            <div class=\"form-field\">\n                                <label>Job Function</label>\n                                <select [(ngModel)]=\"EditForm.JobFunctionID\">\n                                    <option value=\"\">\u2014 None \u2014</option>\n                                    @for (jf of JobFunctions; track jf.ID) {\n                                        <option [value]=\"jf.ID\">{{ jf.Name }}</option>\n                                    }\n                                </select>\n                            </div>\n                            <div class=\"form-field\">\n                                <label>Seniority Level</label>\n                                <select [(ngModel)]=\"EditForm.SeniorityLevelID\">\n                                    <option value=\"\">\u2014 None \u2014</option>\n                                    @for (sl of SeniorityLevels; track sl.ID) {\n                                        <option [value]=\"sl.ID\">{{ sl.Name }}</option>\n                                    }\n                                </select>\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"rel-form-footer\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSaveEdit()\" [disabled]=\"Saving\">\n                    @if (Saving) {\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                    }\n                    Save Changes\n                </button>\n                <button type=\"button\" class=\"btn btn-cancel\" (click)=\"onCancelEdit()\">Cancel</button>\n            </div>\n        </div>\n    }\n</div>\n", styles: ["/* ============================================\n   RelationshipList - Grouped Timeline Design\n   Pixel-perfect match to Option A mockup\n   ============================================ */\n\n:host {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    font-family: var(--mj-font-family);\n    color: var(--mj-text-primary);\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 16px;\n    flex-shrink: 0;\n}\n\n.section-label {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.section-label i {\n    color: var(--mj-brand-primary);\n}\n\n/* Category group */\n.rel-category {\n    margin-bottom: 24px;\n}\n\n.rel-category:last-child {\n    margin-bottom: 0;\n}\n\n.rel-category-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 0;\n    margin-bottom: 12px;\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.rel-category-icon {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    font-size: 13px;\n}\n\n.rel-category-icon.cat-employment {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary-hover);\n}\n\n.rel-category-icon.cat-board {\n    background: var(--mj-status-info-bg);\n    color: var(--mj-status-info-text);\n}\n\n.rel-category-icon.cat-personal {\n    background: var(--mj-status-info-bg);\n    color: var(--mj-status-error-text);\n}\n\n.rel-category-icon.cat-business {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n}\n\n.rel-category-icon.cat-default {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n}\n\n.rel-category-title {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    flex: 1;\n}\n\n.rel-category-count {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n}\n\n/* Timeline item */\n.rel-timeline-item {\n    display: flex;\n    gap: 12px;\n    padding: 12px 16px;\n    margin-bottom: 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    transition: all 0.15s;\n    position: relative;\n}\n\n.rel-timeline-item:hover {\n    border-color: var(--mj-border-strong);\n    background: var(--mj-bg-surface-card);\n}\n\n.rel-timeline-item.status-active {\n    border-left: 3px solid var(--mj-status-success);\n}\n\n.rel-timeline-item.status-inactive {\n    border-left: 3px solid var(--mj-status-warning);\n    opacity: 0.7;\n}\n\n.rel-timeline-item.status-ended {\n    border-left: 3px solid var(--mj-text-disabled);\n    opacity: 0.5;\n}\n\n/* Timeline icon */\n.rel-timeline-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n/* Content */\n.rel-timeline-content {\n    flex: 1;\n}\n\n.rel-timeline-sentence {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    line-height: 1.4;\n}\n\n.rel-timeline-label {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n}\n\na.rel-timeline-target {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    text-decoration: none;\n}\n\na.rel-timeline-target:hover {\n    color: var(--mj-brand-primary-hover);\n    text-decoration: underline;\n}\n\nspan.rel-timeline-target {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.rel-timeline-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-top: 4px;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    flex-wrap: wrap;\n}\n\n.rel-timeline-title {\n    font-style: italic;\n    color: var(--mj-text-secondary);\n}\n\n.rel-timeline-dates {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Actions */\n.rel-timeline-actions {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    display: flex;\n    gap: 2px;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.rel-timeline-item:hover .rel-timeline-actions {\n    opacity: 1;\n}\n\n/* Badges */\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.badge-active {\n    background: var(--mj-status-success-bg);\n    color: var(--mj-status-success-text);\n}\n\n.badge-inactive {\n    background: var(--mj-status-warning-bg);\n    color: var(--mj-status-warning-text);\n}\n\n.badge-ended {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-muted);\n}\n\n/* Ghost buttons */\n.btn-ghost {\n    background: transparent;\n    color: var(--mj-text-disabled);\n    padding: 6px 8px;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n    font-size: 13px;\n    transition: all 0.15s ease;\n}\n\n.btn-ghost:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-ghost.danger:hover {\n    color: var(--mj-status-error-text);\n    background: var(--mj-status-error-bg);\n}\n\n/* Buttons */\n.btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: none;\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.btn-primary {\n    background: var(--mj-brand-primary, #0284c7);\n    color: #fff;\n}\n\n.btn-primary:hover:not(:disabled) {\n    background: var(--mj-brand-primary-hover, #0369a1);\n}\n\n.btn-primary:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.btn-outline {\n    background: transparent;\n    border: 1px dashed var(--mj-border-strong, #334155);\n    color: var(--mj-text-secondary, #94a3b8);\n}\n\n.btn-outline:hover {\n    border-color: var(--mj-brand-primary, #0284c7);\n    color: var(--mj-brand-primary, #38bdf8);\n    background: color-mix(in srgb, var(--mj-brand-primary, #0284c7) 8%, transparent);\n}\n\n.btn-cancel {\n    background: var(--mj-bg-surface-card, #141f36);\n    color: var(--mj-text-secondary, #94a3b8);\n    border: 1px solid var(--mj-border-default, #223254);\n}\n\n.btn-cancel:hover {\n    background: var(--mj-border-subtle, #1e293b);\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n/* ============================================\n   OVERLAY SLIDE-IN PANEL\n/* ============================================\n   RELATIONSHIP FORM CARD (ADD / EDIT)\n   ============================================ */\n.rel-widget-root {\n    position: relative;\n    width: 100%;\n}\n\n.rel-timeline-container {\n    transition: opacity 0.2s ease;\n}\n\n.rel-form-card {\n    width: 100%;\n    background: var(--mj-bg-surface-card, #141f36);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-lg, 10px);\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: relFadeIn 0.18s ease-out;\n    margin-bottom: 12px;\n}\n\n@keyframes relFadeIn {\n    from { opacity: 0; transform: translateY(-4px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.rel-form-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, #223254);\n    background: color-mix(in srgb, var(--mj-brand-primary, #0284c7) 8%, var(--mj-bg-surface-card, #141f36));\n}\n\n.rel-form-header-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.rel-form-header-title i {\n    font-size: 20px;\n    color: var(--mj-brand-primary, #38bdf8);\n}\n\n.rel-form-header-title h3 {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n.rel-form-header-subtitle {\n    margin: 2px 0 0;\n    font-size: 12px;\n    color: var(--mj-text-secondary, #94a3b8);\n}\n\n.rel-form-close-btn {\n    background: transparent;\n    border: none;\n    font-size: 16px;\n    color: var(--mj-text-muted, #64748b);\n    cursor: pointer;\n    border-radius: var(--mj-radius-sm, 6px);\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.15s ease;\n}\n\n.rel-form-close-btn:hover {\n    color: var(--mj-text-primary, #f1f5f9);\n    background: var(--mj-bg-surface-sunken, #0b1220);\n}\n\n.rel-form-body {\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n}\n\n.form-row {\n    display: flex;\n    gap: 14px;\n    align-items: flex-start;\n}\n\n.form-row--target {\n    display: block;\n    width: 100%;\n}\n\n.form-field {\n    flex: 1;\n    min-width: 0;\n}\n\n.form-field--target {\n    width: 100%;\n}\n\n.form-field label {\n    display: block;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-text-secondary, #94a3b8);\n    margin-bottom: 6px;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n}\n\n.form-field input,\n.form-field select {\n    width: 100%;\n    padding: 9px 12px;\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    font-family: inherit;\n    background: var(--mj-bg-surface-sunken, #0b1220);\n    color: var(--mj-text-primary, #f1f5f9);\n    box-sizing: border-box;\n}\n\n.form-field select option {\n    background: var(--mj-bg-surface-card, #141f36);\n    color: var(--mj-text-primary, #f1f5f9);\n}\n\n.form-field input:focus,\n.form-field select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary, #0284c7);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary, #0284c7) 15%, transparent);\n}\n\n.form-field.type-field {\n    flex: 1;\n    min-width: 200px;\n}\n\n.form-field.category-field {\n    flex: 1;\n    min-width: 200px;\n}\n\n.form-field.status-field {\n    max-width: 160px;\n}\n\n.form-field.date-field {\n    max-width: 180px;\n}\n\n.form-field.title-field {\n    flex: 2;\n}\n\n/* Category auto-fill display */\n.category-display {\n    padding: 9px 12px;\n    background: var(--mj-bg-surface-sunken, #0b1220);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: var(--mj-radius-sm, 6px);\n    font-size: 13px;\n    color: var(--mj-text-secondary, #94a3b8);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-height: 38px;\n    box-sizing: border-box;\n}\n\n.category-display i {\n    font-size: 12px;\n    color: var(--mj-brand-primary, #38bdf8);\n}\n\n/* Target Search Field Wrapper (Full Width) */\n.target-field-wrapper {\n    width: 100%;\n    min-width: 0;\n}\n\n.target-field-wrapper ::ng-deep mj-form-field {\n    width: 100%;\n    display: block;\n}\n\n.target-field-wrapper ::ng-deep .mj-forms-field {\n    display: block !important;\n    width: 100% !important;\n    padding: 0 !important;\n}\n\n.target-field-wrapper ::ng-deep .mj-forms-field-control {\n    width: 100% !important;\n}\n\n.target-field-wrapper ::ng-deep .mj-fk-search {\n    width: 100% !important;\n}\n\n.target-field-wrapper ::ng-deep .mj-forms-input-wrapper {\n    width: 100% !important;\n    min-height: 40px !important;\n    border-radius: var(--mj-radius-sm, 6px) !important;\n    background: var(--mj-bg-surface-sunken, #0b1220) !important;\n    border: 1px solid var(--mj-border-default, #223254) !important;\n}\n\n.target-field-wrapper ::ng-deep input.mj-forms-field-input {\n    font-size: 13px !important;\n    padding: 9px 12px !important;\n    color: var(--mj-text-primary, #f1f5f9) !important;\n}\n\n.target-field-wrapper ::ng-deep .mj-fk-dropdown {\n    width: 100% !important;\n    max-width: none !important;\n}\n\n.field-hint {\n    display: block;\n    font-size: 11px;\n    color: var(--mj-text-muted, #64748b);\n    margin-top: 4px;\n}\n\n.required-star {\n    color: var(--mj-status-error, #ef4444);\n    font-weight: 700;\n}\n\n.rel-form-footer {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 14px 20px;\n    border-top: 1px solid var(--mj-border-default, #223254);\n    background: var(--mj-bg-surface-sunken, #0b1220);\n}\n\n/* Empty state */\n.empty-state {\n    text-align: center;\n    padding: 40px 20px;\n    color: var(--mj-text-muted);\n    font-size: 14px;\n    border: 1px dashed var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface);\n}\n\n.empty-state__title {\n    margin: 8px 0 4px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.empty-state__hint {\n    margin: 0;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    max-width: 28rem;\n    margin-inline: auto;\n}\n\n.empty-state i {\n    font-size: 24px;\n    color: var(--mj-border-strong);\n    margin-bottom: 8px;\n    display: block;\n}\n\n/* Loading */\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 32px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    gap: 8px;\n}\n\n.loading-state i {\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n.badge-subtle {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n    text-transform: none;\n    font-weight: 500;\n}\n\n.rel-form-progressive {\n    margin-top: 12px;\n    padding-top: 10px;\n    border-top: 1px dashed var(--mj-border-default);\n}\n\n.rel-form-progressive-toggle {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    background: none;\n    border: none;\n    padding: 4px 0;\n}\n\n.rel-form-progressive-toggle:hover {\n    text-decoration: underline;\n}\n\n.form-row--classification {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    margin-top: 8px;\n}\n"] }]
     }], null, { Navigate: [{
             type: Output
         }], EditMode: [{
@@ -1193,5 +1392,5 @@ export class RelationshipListComponent {
         }], OrganizationID: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelationshipListComponent, { className: "RelationshipListComponent", filePath: "lib/components/relationship-list/relationship-list.component.ts", lineNumber: 190 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelationshipListComponent, { className: "RelationshipListComponent", filePath: "lib/components/relationship-list/relationship-list.component.ts", lineNumber: 204 }); })();
 //# sourceMappingURL=relationship-list.component.js.map