@mj-biz-apps/common-ng 5.4.0

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

@@ -0,0 +1,1171 @@
+import { Component, Input, Output, EventEmitter, inject, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CompositeKey, Metadata, RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+const _forTrack0 = ($index, $item) => $item.Category;
+const _forTrack1 = ($index, $item) => $item.Relationship.ID;
+const _forTrack2 = ($index, $item) => $item.ID;
+function RelationshipListComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 5);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onShowAdd()); });
+    i0.ɵɵelement(1, "i", 6);
+    i0.ɵɵtext(2, " Add Relationship ");
+    i0.ɵɵelementEnd();
+} }
+function RelationshipListComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵelement(1, "i", 7);
+    i0.ɵɵtext(2, " Loading relationships... ");
+    i0.ɵɵelementEnd();
+} }
+function RelationshipListComponent_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelement(1, "i", 2);
+    i0.ɵɵtext(2, " No relationships yet ");
+    i0.ɵɵelementEnd();
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 22);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r4 = ctx.$implicit;
+    i0.ɵɵproperty("value", t_r4.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r4.Name);
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 35);
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 17);
+    i0.ɵɵelement(2, "i", 18);
+    i0.ɵɵtext(3, " Edit Relationship ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 19)(5, "div", 20)(6, "label");
+    i0.ɵɵtext(7, "Relationship Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "select", 21);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Template_select_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.TypeID, $event) || (ctx_r1.EditForm.TypeID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Template_select_ngModelChange_8_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onEditTypeChange()); });
+    i0.ɵɵrepeaterCreate(9, RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_For_10_Template, 2, 2, "option", 22, _forTrack2);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 23)(12, "label");
+    i0.ɵɵtext(13, "Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 24);
+    i0.ɵɵelement(15, "i", 25);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(17, "div", 19)(18, "div", 26)(19, "label");
+    i0.ɵɵtext(20, "Title / Role");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "input", 27);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Template_input_ngModelChange_21_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.Title, $event) || (ctx_r1.EditForm.Title = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 28)(23, "label");
+    i0.ɵɵtext(24, "Start Date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "input", 29);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Template_input_ngModelChange_25_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.StartDate, $event) || (ctx_r1.EditForm.StartDate = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(26, "div", 28)(27, "label");
+    i0.ɵɵtext(28, "End Date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(29, "input", 29);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Template_input_ngModelChange_29_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.EndDate, $event) || (ctx_r1.EditForm.EndDate = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(30, "div", 19)(31, "div", 26)(32, "label");
+    i0.ɵɵtext(33, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "select", 21);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Template_select_ngModelChange_34_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.EditForm.Status, $event) || (ctx_r1.EditForm.Status = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(35, "option", 30);
+    i0.ɵɵtext(36, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(37, "option", 31);
+    i0.ɵɵtext(38, "Inactive");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(39, "option", 32);
+    i0.ɵɵtext(40, "Ended");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(41, "div", 33)(42, "button", 34);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onSaveEdit()); });
+    i0.ɵɵconditionalCreate(43, RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Conditional_43_Template, 1, 0, "i", 35);
+    i0.ɵɵtext(44, " Save ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(45, "button", 36);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onCancelEdit()); });
+    i0.ɵɵtext(46, "Cancel");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditForm.TypeID);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.RelationshipTypes);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getEditCategory(), " ");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditForm.Title);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditForm.StartDate);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditForm.EndDate);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditForm.Status);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("disabled", ctx_r1.Saving);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Saving ? 43 : -1);
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 48);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_7_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const item_r6 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onNavigateToTarget(item_r6, $event)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r6.TargetName);
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 42);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r6.TargetName);
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r6.Relationship.Title);
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 45);
+    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", item_r6.DateDisplay, " ");
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_14_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 53);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_14_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const item_r6 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEndRelationship(item_r6.Relationship)); });
+    i0.ɵɵelement(1, "i", 54);
+    i0.ɵɵelementEnd();
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_14_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_14_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const item_r6 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onDelete(item_r6.Relationship)); });
+    i0.ɵɵelement(1, "i", 56);
+    i0.ɵɵelementEnd();
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 47)(1, "button", 50);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_14_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const item_r6 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEdit(item_r6.Relationship)); });
+    i0.ɵɵelement(2, "i", 18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_14_Conditional_3_Template, 2, 0, "button", 51)(4, RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_14_Conditional_4_Template, 2, 0, "button", 52);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(item_r6.Relationship.Status === "Active" ? 3 : 4);
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16)(1, "div", 37);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 38)(4, "div", 39)(5, "span", 40);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_7_Template, 2, 1, "a", 41)(8, RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_8_Template, 2, 1, "span", 42);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 43);
+    i0.ɵɵconditionalCreate(10, RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_10_Template, 2, 1, "span", 44);
+    i0.ɵɵconditionalCreate(11, RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_11_Template, 3, 1, "span", 45);
+    i0.ɵɵelementStart(12, "span", 46);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(14, RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Conditional_14_Template, 5, 1, "div", 47);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext().$implicit;
+    const group_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", "status-" + item_r6.Relationship.Status.toLowerCase());
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(group_r10.Icon);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(item_r6.DirectionLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r6.TargetEntityName && item_r6.TargetID ? 7 : 8);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(item_r6.Relationship.Title ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r6.DateDisplay ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", "badge-" + item_r6.Relationship.Status.toLowerCase());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", item_r6.Relationship.Status, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.EditMode ? 14 : -1);
+} }
+function RelationshipListComponent_Conditional_6_For_2_For_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_0_Template, 47, 8, "div", 15)(1, RelationshipListComponent_Conditional_6_For_2_For_9_Conditional_1_Template, 15, 10, "div", 16);
+} if (rf & 2) {
+    const item_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r1.EditingId === item_r6.Relationship.ID ? 0 : 1);
+} }
+function RelationshipListComponent_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 11)(2, "div", 12);
+    i0.ɵɵelement(3, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 13);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 14);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(8, RelationshipListComponent_Conditional_6_For_2_For_9_Template, 2, 1, null, null, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r10 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", group_r10.IconClass);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(group_r10.Icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r10.Label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", group_r10.Items.length, " ", group_r10.Items.length === 1 ? "relationship" : "relationships");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(group_r10.Items);
+} }
+function RelationshipListComponent_Conditional_6_Conditional_3_For_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 22);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r12 = ctx.$implicit;
+    i0.ɵɵproperty("value", t_r12.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r12.Name);
+} }
+function RelationshipListComponent_Conditional_6_Conditional_3_Conditional_24_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 64);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const result_r14 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(result_r14.Detail);
+} }
+function RelationshipListComponent_Conditional_6_Conditional_3_Conditional_24_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_Conditional_3_Conditional_24_For_2_Template_div_click_0_listener() { const result_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onSelectTarget(result_r14)); });
+    i0.ɵɵelementStart(1, "div")(2, "div", 63);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, RelationshipListComponent_Conditional_6_Conditional_3_Conditional_24_For_2_Conditional_4_Template, 2, 1, "div", 64);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const result_r14 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵstyleProp("background", ctx_r1.AddForm.TargetID === result_r14.ID ? "#e3f2fd" : "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(result_r14.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(result_r14.Detail ? 4 : -1);
+} }
+function RelationshipListComponent_Conditional_6_Conditional_3_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 59);
+    i0.ɵɵrepeaterCreate(1, RelationshipListComponent_Conditional_6_Conditional_3_Conditional_24_For_2_Template, 5, 4, "div", 61, _forTrack2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.TargetSearchResults);
+} }
+function RelationshipListComponent_Conditional_6_Conditional_3_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60)(1, "span", 65);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementStart(3, "span", 66);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_Conditional_3_Conditional_25_Template_span_click_3_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onClearTarget()); });
+    i0.ɵɵelement(4, "i", 67);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.AddForm.TargetName, " ");
+} }
+function RelationshipListComponent_Conditional_6_Conditional_3_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 35);
+} }
+function RelationshipListComponent_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 17);
+    i0.ɵɵelement(2, "i", 6);
+    i0.ɵɵtext(3, " Add Relationship ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 19)(5, "div", 20)(6, "label");
+    i0.ɵɵtext(7, "Relationship Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "select", 21);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_6_Conditional_3_Template_select_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.AddForm.TypeID, $event) || (ctx_r1.AddForm.TypeID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function RelationshipListComponent_Conditional_6_Conditional_3_Template_select_ngModelChange_8_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAddTypeChange()); });
+    i0.ɵɵelementStart(9, "option", 57);
+    i0.ɵɵtext(10, "-- Select --");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(11, RelationshipListComponent_Conditional_6_Conditional_3_For_12_Template, 2, 2, "option", 22, _forTrack2);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 23)(14, "label");
+    i0.ɵɵtext(15, "Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 24);
+    i0.ɵɵelement(17, "i", 25);
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(19, "div", 19)(20, "div", 26)(21, "label");
+    i0.ɵɵtext(22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "input", 58);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_6_Conditional_3_Template_input_ngModelChange_23_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.AddForm.TargetSearch, $event) || (ctx_r1.AddForm.TargetSearch = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("input", function RelationshipListComponent_Conditional_6_Conditional_3_Template_input_input_23_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTargetSearch()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(24, RelationshipListComponent_Conditional_6_Conditional_3_Conditional_24_Template, 3, 0, "div", 59);
+    i0.ɵɵconditionalCreate(25, RelationshipListComponent_Conditional_6_Conditional_3_Conditional_25_Template, 5, 1, "div", 60);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(26, "div", 19)(27, "div", 26)(28, "label");
+    i0.ɵɵtext(29, "Title / Role");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "input", 27);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_6_Conditional_3_Template_input_ngModelChange_30_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.AddForm.Title, $event) || (ctx_r1.AddForm.Title = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(31, "div", 28)(32, "label");
+    i0.ɵɵtext(33, "Start Date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "input", 29);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_6_Conditional_3_Template_input_ngModelChange_34_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.AddForm.StartDate, $event) || (ctx_r1.AddForm.StartDate = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(35, "div", 28)(36, "label");
+    i0.ɵɵtext(37, "End Date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(38, "input", 29);
+    i0.ɵɵtwoWayListener("ngModelChange", function RelationshipListComponent_Conditional_6_Conditional_3_Template_input_ngModelChange_38_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.AddForm.EndDate, $event) || (ctx_r1.AddForm.EndDate = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(39, "div", 33)(40, "button", 34);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_Conditional_3_Template_button_click_40_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSaveAdd()); });
+    i0.ɵɵconditionalCreate(41, RelationshipListComponent_Conditional_6_Conditional_3_Conditional_41_Template, 1, 0, "i", 35);
+    i0.ɵɵtext(42, " Save ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(43, "button", 36);
+    i0.ɵɵlistener("click", function RelationshipListComponent_Conditional_6_Conditional_3_Template_button_click_43_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCancelAdd()); });
+    i0.ɵɵtext(44, "Cancel");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.AddForm.TypeID);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.RelationshipTypes);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getAddCategory(), " ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.getAddTargetLabel());
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.AddForm.TargetSearch);
+    i0.ɵɵproperty("placeholder", "Search " + ctx_r1.getAddTargetLabel().toLowerCase() + "...");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.TargetSearchResults.length > 0 ? 24 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.AddForm.TargetID && ctx_r1.AddForm.TargetName ? 25 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.AddForm.Title);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.AddForm.StartDate);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.AddForm.EndDate);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.Saving || !ctx_r1.AddForm.TypeID || !ctx_r1.AddForm.TargetID);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Saving ? 41 : -1);
+} }
+function RelationshipListComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RelationshipListComponent_Conditional_6_Conditional_0_Template, 3, 0, "div", 8);
+    i0.ɵɵrepeaterCreate(1, RelationshipListComponent_Conditional_6_For_2_Template, 10, 6, "div", 9, _forTrack0);
+    i0.ɵɵconditionalCreate(3, RelationshipListComponent_Conditional_6_Conditional_3_Template, 45, 12, "div", 10);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.GroupedRelationships.length === 0 && !ctx_r1.ShowAddForm ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.GroupedRelationships);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ShowAddForm ? 3 : -1);
+} }
+/**
+ * Display configuration for each relationship category, mapping category
+ * keys to their human-readable labels, Font Awesome icons, and CSS classes.
+ *
+ * Used by the template to render group headers with consistent iconography
+ * and color theming.
+ */
+const CATEGORY_CONFIG = {
+    'PersonToOrganization': { label: 'Employment', icon: 'fa-solid fa-briefcase', iconClass: 'cat-employment' },
+    'PersonToPerson': { label: 'Personal', icon: 'fa-solid fa-heart', iconClass: 'cat-personal' },
+    'OrganizationToOrganization': { label: 'Business', icon: 'fa-solid fa-building', iconClass: 'cat-business' }
+};
+/**
+ * Displays and manages relationships for a Person or Organization record,
+ * grouped by category (Employment, Personal, Business) in a timeline layout.
+ *
+ * Relationships are bidirectional: each record has From and To sides with
+ * optional Person and Organization foreign keys. The component automatically
+ * resolves direction labels and target names based on which side the current
+ * entity occupies.
+ *
+ * Supports adding new relationships with a typeahead target search, inline
+ * editing of relationship metadata, ending active relationships, and deletion.
+ *
+ * @example
+ * ```html
+ * <!-- For a Person -->
+ * <bizapps-relationship-list
+ *     [PersonID]="person.ID"
+ *     (Navigate)="onNavigate($event)">
+ * </bizapps-relationship-list>
+ *
+ * <!-- For an Organization -->
+ * <bizapps-relationship-list
+ *     [OrganizationID]="org.ID"
+ *     (Navigate)="onNavigate($event)">
+ * </bizapps-relationship-list>
+ * ```
+ */
+export class RelationshipListComponent {
+    cdr = inject(ChangeDetectorRef);
+    /**
+     * Emitted when the user clicks a relationship target name to navigate
+     * to that Person or Organization record.
+     *
+     * The event payload is a {@link FormNavigationEvent} (specifically a
+     * {@link RecordNavigationEvent}) containing the target entity name,
+     * composite key, and whether to open in a new tab.
+     *
+     * @fires Navigate When the user clicks a target entity link
+     *
+     * @example
+     * ```html
+     * <bizapps-relationship-list
+     *     [PersonID]="person.ID"
+     *     (Navigate)="onNavigate($event)">
+     * </bizapps-relationship-list>
+     * ```
+     */
+    Navigate = new EventEmitter();
+    /**
+     * Controls whether add, edit, delete, and end-relationship actions are available.
+     * When `false`, the component renders in read-only display mode.
+     * Navigation links to related entities remain available regardless of this setting.
+     */
+    EditMode = false;
+    /** Emitted after any mutation (save, delete, end-relationship) so the parent can refresh derived data. */
+    DataChanged = new EventEmitter();
+    _personID = null;
+    _organizationID = null;
+    /**
+     * The Person record ID whose relationships should be displayed.
+     *
+     * Mutually exclusive with {@link OrganizationID}. Setting this triggers
+     * a data reload unless the value has not changed.
+     *
+     * @example `'A1B2C3D4-E5F6-7890-ABCD-EF1234567890'`
+     */
+    set PersonID(value) {
+        const prev = this._personID;
+        this._personID = value;
+        if (value && value !== prev) {
+            this.loadData();
+        }
+    }
+    get PersonID() { return this._personID; }
+    /**
+     * The Organization record ID whose relationships should be displayed.
+     *
+     * Mutually exclusive with {@link PersonID}. Setting this triggers
+     * a data reload unless the value has not changed.
+     *
+     * @example `'B2C3D4E5-F6A7-8901-BCDE-F12345678901'`
+     */
+    set OrganizationID(value) {
+        const prev = this._organizationID;
+        this._organizationID = value;
+        if (value && value !== prev) {
+            this.loadData();
+        }
+    }
+    get OrganizationID() { return this._organizationID; }
+    /**
+     * Relationships grouped by category (Employment, Personal, Business),
+     * each containing an array of display items. This is the primary data
+     * structure consumed by the template for rendering the grouped timeline.
+     */
+    GroupedRelationships = [];
+    /**
+     * All active relationship types available for selection in type dropdowns.
+     * Loaded from `MJ.BizApps.Common: Relationship Types`, filtered to `IsActive=1`.
+     */
+    RelationshipTypes = [];
+    /**
+     * Indicates whether the component is performing the initial data load.
+     * The template shows a loading spinner while this is `true`.
+     */
+    Loading = false;
+    /**
+     * Indicates whether a save, delete, or end-relationship operation is in progress.
+     * Used to disable action buttons and show spinner feedback while `true`.
+     */
+    Saving = false;
+    /**
+     * Controls visibility of the "Add Relationship" form panel. When `true`,
+     * the add form is displayed below the existing relationship groups.
+     */
+    ShowAddForm = false;
+    /**
+     * The ID of the relationship currently being edited inline, or `null`
+     * when not in edit mode.
+     */
+    EditingId = null;
+    /**
+     * The form model bound to the "Add Relationship" panel via two-way
+     * binding. Reset to defaults each time the add form is opened.
+     */
+    AddForm = this.createEmptyAddForm();
+    /**
+     * The form model bound to the inline edit panel via two-way binding.
+     * Populated from the existing relationship record when editing begins.
+     */
+    EditForm = this.createEmptyEditForm();
+    /**
+     * Search results from the target entity typeahead, displayed as a
+     * dropdown below the search input in the add form.
+     */
+    TargetSearchResults = [];
+    /** Lookup map from RelationshipType ID to entity for quick access. */
+    relationshipTypeMap = new Map();
+    /** Handle for the debounce timer used in target search. */
+    searchDebounceTimer = null;
+    /** Creates a blank {@link AddFormData} with empty defaults. */
+    createEmptyAddForm() {
+        return { TypeID: '', TargetSearch: '', TargetID: '', TargetName: '', Title: '', StartDate: '', EndDate: '' };
+    }
+    /** Creates a blank {@link EditFormData} with default status of Active. */
+    createEmptyEditForm() {
+        return { TypeID: '', Title: '', StartDate: '', EndDate: '', Status: 'Active' };
+    }
+    /**
+     * Loads relationships and relationship types from the server,
+     * then groups them by category. Resets editing state before loading.
+     */
+    async loadData() {
+        this.Loading = true;
+        this.EditingId = null;
+        this.ShowAddForm = false;
+        this.cdr.detectChanges();
+        try {
+            const rv = new RunView();
+            // Build filter for relationships
+            let filter = '';
+            if (this._personID) {
+                filter = `FromPersonID='${this._personID}' OR ToPersonID='${this._personID}'`;
+            }
+            else if (this._organizationID) {
+                filter = `FromOrganizationID='${this._organizationID}' OR ToOrganizationID='${this._organizationID}'`;
+            }
+            else {
+                return;
+            }
+            const [relsResult, typesResult] = await rv.RunViews([
+                {
+                    EntityName: 'MJ.BizApps.Common: Relationships',
+                    ExtraFilter: filter,
+                    OrderBy: 'Status ASC, StartDate DESC',
+                    ResultType: 'entity_object'
+                },
+                {
+                    EntityName: 'MJ.BizApps.Common: Relationship Types',
+                    ExtraFilter: 'IsActive=1',
+                    ResultType: 'entity_object'
+                }
+            ]);
+            const relationships = relsResult.Success
+                ? relsResult.Results
+                : [];
+            this.RelationshipTypes = typesResult.Success
+                ? typesResult.Results
+                : [];
+            // Build type lookup map
+            this.relationshipTypeMap.clear();
+            for (const rt of this.RelationshipTypes) {
+                this.relationshipTypeMap.set(rt.ID, rt);
+            }
+            // Group relationships by category
+            this.GroupedRelationships = this.buildGroups(relationships);
+        }
+        catch (err) {
+            console.error('RelationshipList: Error loading data', err);
+        }
+        finally {
+            this.Loading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /** Organizes relationships into category groups with display-friendly items. */
+    buildGroups(relationships) {
+        const groupMap = new Map();
+        for (const rel of relationships) {
+            const relType = this.relationshipTypeMap.get(rel.RelationshipTypeID);
+            if (!relType)
+                continue;
+            const category = relType.Category;
+            if (!groupMap.has(category)) {
+                const config = CATEGORY_CONFIG[category] || { label: category, icon: 'fa-solid fa-link', iconClass: 'cat-default' };
+                groupMap.set(category, {
+                    Category: category,
+                    Label: config.label,
+                    Icon: config.icon,
+                    IconClass: config.iconClass,
+                    Items: []
+                });
+            }
+            const displayItem = this.buildDisplayItem(rel, relType);
+            groupMap.get(category).Items.push(displayItem);
+        }
+        // Sort groups by a fixed order
+        const order = ['PersonToOrganization', 'OrganizationToOrganization', 'PersonToPerson'];
+        return order
+            .filter(cat => groupMap.has(cat))
+            .map(cat => groupMap.get(cat));
+    }
+    /** Constructs a display item from a relationship and its type, resolving direction. */
+    buildDisplayItem(rel, relType) {
+        // Determine direction: is the current entity on the "From" or "To" side?
+        const isFromSide = this.isCurrentEntityOnFromSide(rel);
+        let directionLabel;
+        let targetName;
+        let targetEntityName;
+        let targetID;
+        if (!relType.IsDirectional) {
+            // Symmetric relationship (e.g., Spouse) -- always use ForwardLabel
+            directionLabel = relType.ForwardLabel || relType.Name;
+            targetName = this.getOtherSideName(rel, isFromSide);
+            const target = this.getOtherSideTarget(rel, isFromSide);
+            targetEntityName = target.entityName;
+            targetID = target.id;
+        }
+        else if (isFromSide) {
+            // Current entity is "From" -> use ForwardLabel, show "To" target
+            directionLabel = relType.ForwardLabel || relType.Name;
+            targetName = this.getToSideName(rel);
+            const target = this.getToSideTarget(rel);
+            targetEntityName = target.entityName;
+            targetID = target.id;
+        }
+        else {
+            // Current entity is "To" -> use ReverseLabel, show "From" target
+            directionLabel = relType.ReverseLabel || relType.Name;
+            targetName = this.getFromSideName(rel);
+            const target = this.getFromSideTarget(rel);
+            targetEntityName = target.entityName;
+            targetID = target.id;
+        }
+        return {
+            Relationship: rel,
+            DirectionLabel: directionLabel + ' ',
+            TargetName: targetName,
+            TargetEntityName: targetEntityName,
+            TargetID: targetID,
+            DateDisplay: this.formatDateRange(rel.StartDate, rel.EndDate, rel.Status)
+        };
+    }
+    /** Checks whether the current entity (Person or Org) is on the "From" side. */
+    isCurrentEntityOnFromSide(rel) {
+        if (this._personID) {
+            return rel.FromPersonID === this._personID;
+        }
+        if (this._organizationID) {
+            return rel.FromOrganizationID === this._organizationID;
+        }
+        return true;
+    }
+    /** Returns the display name of the "To" side entity. */
+    getToSideName(rel) {
+        return rel.ToPerson || rel.ToOrganization || 'Unknown';
+    }
+    /** Returns the display name of the "From" side entity. */
+    getFromSideName(rel) {
+        return rel.FromPerson || rel.FromOrganization || 'Unknown';
+    }
+    /** Returns the display name of whichever side is NOT the current entity. */
+    getOtherSideName(rel, isFromSide) {
+        return isFromSide ? this.getToSideName(rel) : this.getFromSideName(rel);
+    }
+    /** Returns the entity name and ID for the "To" side. */
+    getToSideTarget(rel) {
+        if (rel.ToPersonID)
+            return { entityName: 'MJ.BizApps.Common: People', id: rel.ToPersonID };
+        if (rel.ToOrganizationID)
+            return { entityName: 'MJ.BizApps.Common: Organizations', id: rel.ToOrganizationID };
+        return { entityName: '', id: '' };
+    }
+    /** Returns the entity name and ID for the "From" side. */
+    getFromSideTarget(rel) {
+        if (rel.FromPersonID)
+            return { entityName: 'MJ.BizApps.Common: People', id: rel.FromPersonID };
+        if (rel.FromOrganizationID)
+            return { entityName: 'MJ.BizApps.Common: Organizations', id: rel.FromOrganizationID };
+        return { entityName: '', id: '' };
+    }
+    /** Returns the entity name and ID for whichever side is NOT the current entity. */
+    getOtherSideTarget(rel, isFromSide) {
+        return isFromSide ? this.getToSideTarget(rel) : this.getFromSideTarget(rel);
+    }
+    /**
+     * Emits a {@link Navigate} event to navigate to the target entity record
+     * of a relationship row.
+     *
+     * Supports Ctrl+Click / Cmd+Click to open in a new tab.
+     *
+     * @param item - The relationship display item whose target should be navigated to
+     * @param event - The mouse event, used to detect modifier keys for new-tab behavior
+     *
+     * @fires Navigate With a {@link RecordNavigationEvent} payload
+     */
+    onNavigateToTarget(item, event) {
+        if (!item.TargetEntityName || !item.TargetID)
+            return;
+        event.stopPropagation();
+        const navEvent = {
+            Kind: 'record',
+            EntityName: item.TargetEntityName,
+            PrimaryKey: CompositeKey.FromKeyValuePair('ID', item.TargetID),
+            OpenInNewTab: event.ctrlKey || event.metaKey
+        };
+        this.Navigate.emit(navEvent);
+    }
+    /** Formats a date range into a compact display string. */
+    formatDateRange(start, end, status) {
+        if (!start && !end)
+            return '';
+        const formatDate = (d) => {
+            const date = new Date(d);
+            return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+        };
+        const startStr = start ? formatDate(start) : '';
+        const endStr = end ? formatDate(end) : (status === 'Active' ? 'Present' : '');
+        if (startStr && endStr)
+            return `${startStr} - ${endStr}`;
+        if (startStr)
+            return `${startStr} -`;
+        return '';
+    }
+    // --- Add Form ---
+    /**
+     * Opens the "Add Relationship" form panel.
+     *
+     * Resets the add form to defaults, clears any previous search results,
+     * and closes any active inline edit.
+     */
+    onShowAdd() {
+        this.AddForm = this.createEmptyAddForm();
+        this.TargetSearchResults = [];
+        this.ShowAddForm = true;
+        this.EditingId = null;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Closes the "Add Relationship" form panel without saving, and clears
+     * the target search results.
+     */
+    onCancelAdd() {
+        this.ShowAddForm = false;
+        this.TargetSearchResults = [];
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handles a change to the relationship type in the add form.
+     *
+     * Clears the currently selected target because the category (and
+     * therefore the target entity type) may have changed.
+     */
+    onAddTypeChange() {
+        // Clear target when type changes (category may differ)
+        this.AddForm.TargetID = '';
+        this.AddForm.TargetName = '';
+        this.AddForm.TargetSearch = '';
+        this.TargetSearchResults = [];
+        this.cdr.detectChanges();
+    }
+    /**
+     * Returns the category key of the currently selected relationship type
+     * in the add form (e.g., `'PersonToOrganization'`).
+     *
+     * @returns The category string, or `'--'` if no type is selected
+     */
+    getAddCategory() {
+        if (!this.AddForm.TypeID)
+            return '—';
+        const rt = this.relationshipTypeMap.get(this.AddForm.TypeID);
+        return rt?.Category || '—';
+    }
+    /**
+     * Returns a user-facing label for the target entity search field based
+     * on the current add form's relationship category.
+     *
+     * @returns `'Organization'`, `'Person'`, or `'Target'` depending on category
+     */
+    getAddTargetLabel() {
+        const category = this.getAddCategory();
+        if (category === 'PersonToOrganization')
+            return 'Organization';
+        if (category === 'OrganizationToOrganization')
+            return 'Organization';
+        if (category === 'PersonToPerson')
+            return 'Person';
+        return 'Target';
+    }
+    /**
+     * Debounces the target search input and triggers a server-side search
+     * after a 300ms pause in typing.
+     *
+     * Called on each keystroke in the target search field.
+     */
+    onTargetSearch() {
+        if (this.searchDebounceTimer) {
+            clearTimeout(this.searchDebounceTimer);
+        }
+        this.searchDebounceTimer = setTimeout(() => {
+            this.performTargetSearch();
+        }, 300);
+    }
+    /** Executes the debounced target search against Person or Organization entities. */
+    async performTargetSearch() {
+        const query = this.AddForm.TargetSearch?.trim();
+        if (!query || query.length < 2) {
+            this.TargetSearchResults = [];
+            this.cdr.detectChanges();
+            return;
+        }
+        const category = this.getAddCategory();
+        const escapedQuery = query.replace(/'/g, "''");
+        const rv = new RunView();
+        try {
+            if (category === 'PersonToPerson') {
+                const result = await rv.RunView({
+                    EntityName: 'MJ.BizApps.Common: People',
+                    ExtraFilter: `(FirstName LIKE '%${escapedQuery}%' OR LastName LIKE '%${escapedQuery}%' OR DisplayName LIKE '%${escapedQuery}%')`,
+                    MaxRows: 10,
+                    ResultType: 'entity_object'
+                });
+                this.TargetSearchResults = result.Success
+                    ? result.Results.map(p => ({
+                        ID: p.ID,
+                        Name: p.DisplayName || `${p.FirstName} ${p.LastName}`,
+                        Detail: p.Title || ''
+                    }))
+                    : [];
+            }
+            else {
+                const result = await rv.RunView({
+                    EntityName: 'MJ.BizApps.Common: Organizations',
+                    ExtraFilter: `Name LIKE '%${escapedQuery}%'`,
+                    MaxRows: 10,
+                    ResultType: 'entity_object'
+                });
+                this.TargetSearchResults = result.Success
+                    ? result.Results.map(o => ({
+                        ID: o.ID,
+                        Name: o.Name,
+                        Detail: o.OrganizationType || ''
+                    }))
+                    : [];
+            }
+        }
+        catch (err) {
+            console.error('RelationshipList: Search error', err);
+            this.TargetSearchResults = [];
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Selects a target entity from the search results dropdown, populating
+     * the add form's target fields and clearing the search input.
+     *
+     * @param result - The selected search result to use as the relationship target
+     */
+    onSelectTarget(result) {
+        this.AddForm.TargetID = result.ID;
+        this.AddForm.TargetName = result.Name;
+        this.AddForm.TargetSearch = '';
+        this.TargetSearchResults = [];
+        this.cdr.detectChanges();
+    }
+    /**
+     * Clears the currently selected target entity from the add form,
+     * allowing the user to search for a different target.
+     */
+    onClearTarget() {
+        this.AddForm.TargetID = '';
+        this.AddForm.TargetName = '';
+        this.cdr.detectChanges();
+    }
+    /**
+     * Persists the new relationship from the add form.
+     *
+     * Determines which From/To fields to populate based on the current
+     * entity type (Person or Organization) and the relationship category.
+     * After saving, the relationship list is reloaded.
+     */
+    async onSaveAdd() {
+        if (!this.AddForm.TypeID || !this.AddForm.TargetID)
+            return;
+        this.Saving = true;
+        this.cdr.detectChanges();
+        try {
+            const md = new Metadata();
+            const rel = await md.GetEntityObject('MJ.BizApps.Common: Relationships');
+            rel.NewRecord();
+            rel.RelationshipTypeID = this.AddForm.TypeID;
+            rel.Title = this.AddForm.Title || null;
+            rel.Status = 'Active';
+            if (this.AddForm.StartDate) {
+                rel.StartDate = new Date(this.AddForm.StartDate);
+            }
+            if (this.AddForm.EndDate) {
+                rel.EndDate = new Date(this.AddForm.EndDate);
+            }
+            // Set From/To based on which side we're on and category
+            const rt = this.relationshipTypeMap.get(this.AddForm.TypeID);
+            if (!rt)
+                return;
+            if (this._personID) {
+                rel.FromPersonID = this._personID;
+                if (rt.Category === 'PersonToOrganization') {
+                    rel.ToOrganizationID = this.AddForm.TargetID;
+                }
+                else if (rt.Category === 'PersonToPerson') {
+                    rel.ToPersonID = this.AddForm.TargetID;
+                }
+            }
+            else if (this._organizationID) {
+                rel.FromOrganizationID = this._organizationID;
+                rel.ToOrganizationID = this.AddForm.TargetID;
+            }
+            await rel.Save();
+            await this.loadData();
+            this.DataChanged.emit();
+        }
+        catch (err) {
+            console.error('RelationshipList: Error adding relationship', err);
+        }
+        finally {
+            this.Saving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    // --- Edit ---
+    /**
+     * Opens the inline edit form for an existing relationship, populating
+     * the form fields from the current entity data.
+     *
+     * Closes the add form if it is currently open.
+     *
+     * @param rel - The relationship entity to edit
+     */
+    onEdit(rel) {
+        this.EditForm = {
+            TypeID: rel.RelationshipTypeID,
+            Title: rel.Title || '',
+            StartDate: rel.StartDate ? this.formatDateForInput(rel.StartDate) : '',
+            EndDate: rel.EndDate ? this.formatDateForInput(rel.EndDate) : '',
+            Status: rel.Status
+        };
+        this.EditingId = rel.ID;
+        this.ShowAddForm = false;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Cancels the current edit operation and returns to display mode.
+     */
+    onCancelEdit() {
+        this.EditingId = null;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handles a change to the relationship type in the edit form.
+     *
+     * Triggers change detection so the category display updates.
+     */
+    onEditTypeChange() {
+        this.cdr.detectChanges();
+    }
+    /**
+     * Returns the category key of the currently selected relationship type
+     * in the edit form (e.g., `'PersonToOrganization'`).
+     *
+     * @returns The category string, or `'--'` if no type is selected
+     */
+    getEditCategory() {
+        if (!this.EditForm.TypeID)
+            return '—';
+        const rt = this.relationshipTypeMap.get(this.EditForm.TypeID);
+        return rt?.Category || '—';
+    }
+    /**
+     * Persists the edited relationship from the inline edit form.
+     *
+     * Locates the relationship entity within the grouped data, applies
+     * the form values, saves, and reloads the list.
+     */
+    async onSaveEdit() {
+        if (!this.EditingId)
+            return;
+        this.Saving = true;
+        this.cdr.detectChanges();
+        try {
+            // Find the relationship entity in our loaded data
+            let rel;
+            for (const group of this.GroupedRelationships) {
+                const found = group.Items.find(i => i.Relationship.ID === this.EditingId);
+                if (found) {
+                    rel = found.Relationship;
+                    break;
+                }
+            }
+            if (!rel)
+                return;
+            rel.RelationshipTypeID = this.EditForm.TypeID;
+            rel.Title = this.EditForm.Title || null;
+            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;
+            await rel.Save();
+            await this.loadData();
+            this.DataChanged.emit();
+        }
+        catch (err) {
+            console.error('RelationshipList: Error saving edit', err);
+        }
+        finally {
+            this.Saving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Ends an active relationship by setting its status to `'Ended'` and
+     * its end date to today. After saving, the relationship list is reloaded.
+     *
+     * @param rel - The active relationship entity to end
+     */
+    async onEndRelationship(rel) {
+        this.Saving = true;
+        this.cdr.detectChanges();
+        try {
+            rel.Status = 'Ended';
+            rel.EndDate = new Date();
+            await rel.Save();
+            await this.loadData();
+            this.DataChanged.emit();
+        }
+        catch (err) {
+            console.error('RelationshipList: Error ending relationship', err);
+        }
+        finally {
+            this.Saving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Permanently deletes the given relationship record.
+     *
+     * After deletion, the relationship list is reloaded.
+     *
+     * @param rel - The relationship entity to delete
+     */
+    async onDelete(rel) {
+        this.Saving = true;
+        this.cdr.detectChanges();
+        try {
+            await rel.Delete();
+            await this.loadData();
+            this.DataChanged.emit();
+        }
+        catch (err) {
+            console.error('RelationshipList: Error deleting relationship', err);
+        }
+        finally {
+            this.Saving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /** Converts a Date to an ISO date string (`YYYY-MM-DD`) for HTML date inputs. */
+    formatDateForInput(date) {
+        const d = new Date(date);
+        const year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        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", PersonID: "PersonID", OrganizationID: "OrganizationID" }, outputs: { Navigate: "Navigate", DataChanged: "DataChanged" }, decls: 7, vars: 2, consts: [[1, "section-header"], [1, "section-label"], [1, "fa-solid", "fa-diagram-project"], [1, "btn", "btn-outline"], [1, "loading-state"], [1, "btn", "btn-outline", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-spinner"], [1, "empty-state"], [1, "rel-category"], [1, "rel-add-form"], [1, "rel-category-header"], [1, "rel-category-icon", 3, "ngClass"], [1, "rel-category-title"], [1, "rel-category-count"], [1, "rel-add-form", 2, "margin-bottom", "8px"], [1, "rel-timeline-item", 3, "ngClass"], [1, "rel-add-form-title"], [1, "fa-solid", "fa-pen"], [1, "form-row"], [1, "form-field", "type-field"], [3, "ngModelChange", "ngModel"], [3, "value"], [1, "form-field", "category-field"], [1, "category-display"], [1, "fa-solid", "fa-lock"], [1, "form-field"], ["type", "text", "placeholder", "e.g., CEO, Primary Contact", 3, "ngModelChange", "ngModel"], [1, "form-field", "date-field"], ["type", "date", 3, "ngModelChange", "ngModel"], ["value", "Active"], ["value", "Inactive"], ["value", "Ended"], [1, "form-actions"], [1, "btn", "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "btn", "btn-cancel", 3, "click"], [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"], ["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"], ["value", ""], ["type", "text", 3, "ngModelChange", "input", "ngModel", "placeholder"], [2, "border", "1px solid #e0e0e0", "border-radius", "8px", "box-shadow", "0 4px 12px rgba(0,0,0,0.1)", "margin-top", "4px", "overflow", "hidden", "max-height", "200px", "overflow-y", "auto"], [2, "margin-top", "6px"], [2, "display", "flex", "align-items", "center", "gap", "10px", "padding", "10px 14px", "cursor", "pointer", "transition", "background 0.1s", 3, "background"], [2, "display", "flex", "align-items", "center", "gap", "10px", "padding", "10px 14px", "cursor", "pointer", "transition", "background 0.1s", 3, "click"], [2, "font-size", "14px", "font-weight", "500", "color", "#333"], [2, "font-size", "12px", "color", "#888"], [2, "display", "inline-flex", "align-items", "center", "gap", "6px", "padding", "4px 10px", "background", "#e3f2fd", "border-radius", "16px", "font-size", "13px", "color", "#1565c0", "font-weight", "500"], [2, "cursor", "pointer", "color", "#999", "font-size", "11px", 3, "click"], [1, "fa-solid", "fa-xmark"]], template: function RelationshipListComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
+            i0.ɵɵelement(2, "i", 2);
+            i0.ɵɵtext(3, " Relationships ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(4, RelationshipListComponent_Conditional_4_Template, 3, 0, "button", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(5, RelationshipListComponent_Conditional_5_Template, 3, 0, "div", 4)(6, RelationshipListComponent_Conditional_6_Template, 4, 2);
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(!ctx.Loading && ctx.EditMode ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Loading ? 5 : 6);
+        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n    display: block;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n    color: #333;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 16px;\n}\n\n.section-label[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    color: #333;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.section-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #1976d2;\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 #e8e8e8;\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: #e3f2fd;\n    color: #1565c0;\n}\n\n.rel-category-icon.cat-board[_ngcontent-%COMP%] {\n    background: #f3e5f5;\n    color: #7b1fa2;\n}\n\n.rel-category-icon.cat-personal[_ngcontent-%COMP%] {\n    background: #fce4ec;\n    color: #c62828;\n}\n\n.rel-category-icon.cat-business[_ngcontent-%COMP%] {\n    background: #e8f5e9;\n    color: #2e7d32;\n}\n\n.rel-category-icon.cat-default[_ngcontent-%COMP%] {\n    background: #f5f5f5;\n    color: #666;\n}\n\n.rel-category-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: #555;\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: #999;\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 #e8e8e8;\n    border-radius: 8px;\n    transition: all 0.15s;\n    position: relative;\n}\n\n.rel-timeline-item[_ngcontent-%COMP%]:hover {\n    border-color: #d0d0d0;\n    background: #fafafa;\n}\n\n.rel-timeline-item.status-active[_ngcontent-%COMP%] {\n    border-left: 3px solid #4caf50;\n}\n\n.rel-timeline-item.status-inactive[_ngcontent-%COMP%] {\n    border-left: 3px solid #ff9800;\n    opacity: 0.7;\n}\n\n.rel-timeline-item.status-ended[_ngcontent-%COMP%] {\n    border-left: 3px solid #bbb;\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: #f0f4f8;\n    color: #555;\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: #333;\n    line-height: 1.4;\n}\n\n.rel-timeline-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #1976d2;\n}\n\na.rel-timeline-target[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #1976d2;\n    cursor: pointer;\n    text-decoration: none;\n}\n\na.rel-timeline-target[_ngcontent-%COMP%]:hover {\n    color: #1565c0;\n    text-decoration: underline;\n}\n\nspan.rel-timeline-target[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #333;\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: #888;\n    flex-wrap: wrap;\n}\n\n.rel-timeline-title[_ngcontent-%COMP%] {\n    font-style: italic;\n    color: #555;\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: #e8f5e9;\n    color: #2e7d32;\n}\n\n.badge-inactive[_ngcontent-%COMP%] {\n    background: #fff3e0;\n    color: #e65100;\n}\n\n.badge-ended[_ngcontent-%COMP%] {\n    background: #f5f5f5;\n    color: #888;\n}\n\n\n\n.btn-ghost[_ngcontent-%COMP%] {\n    background: transparent;\n    color: #999;\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: #333;\n    background: #f5f5f5;\n}\n\n.btn-ghost.danger[_ngcontent-%COMP%]:hover {\n    color: #c62828;\n    background: #ffebee;\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: 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: #1976d2;\n    color: white;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: #1565c0;\n}\n\n.btn-outline[_ngcontent-%COMP%] {\n    background: transparent;\n    border: 1px dashed #ccc;\n    color: #666;\n}\n\n.btn-outline[_ngcontent-%COMP%]:hover {\n    border-color: #1976d2;\n    color: #1976d2;\n    background: #f5f9ff;\n}\n\n.btn-cancel[_ngcontent-%COMP%] {\n    background: #f5f5f5;\n    color: #666;\n    border: 1px solid #e0e0e0;\n}\n\n.btn-cancel[_ngcontent-%COMP%]:hover {\n    background: #eeeeee;\n}\n\n\n\n.rel-add-form[_ngcontent-%COMP%] {\n    border: 2px solid #1976d2;\n    border-radius: 10px;\n    padding: 20px;\n    background: white;\n    margin-top: 16px;\n}\n\n.rel-add-form-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #1976d2;\n    margin-bottom: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.form-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.form-field[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    font-weight: 600;\n    color: #666;\n    margin-bottom: 4px;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], \n.form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e0e0e0;\n    border-radius: 6px;\n    font-size: 14px;\n    font-family: inherit;\n    background: white;\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: #1976d2;\n    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n\n.form-field.type-field[_ngcontent-%COMP%] {\n    max-width: 200px;\n}\n\n.form-field.category-field[_ngcontent-%COMP%] {\n    max-width: 200px;\n}\n\n.form-field.date-field[_ngcontent-%COMP%] {\n    max-width: 140px;\n}\n\n\n\n.category-display[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    background: #f5f5f5;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #666;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.category-display[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n}\n\n.form-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-top: 4px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 32px 16px;\n    color: #888;\n    font-size: 14px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: #ccc;\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: #888;\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}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RelationshipListComponent, [{
+        type: Component,
+        args: [{ standalone: true, imports: [CommonModule, FormsModule], selector: 'bizapps-relationship-list', template: "<!-- RelationshipList - Grouped Timeline Design (Option A) -->\n\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) {\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@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 && !ShowAddForm) {\n        <div class=\"empty-state\">\n            <i class=\"fa-solid fa-diagram-project\"></i>\n            No relationships yet\n        </div>\n    }\n\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                @if (EditingId === item.Relationship.ID) {\n                    <!-- Inline edit form -->\n                    <div class=\"rel-add-form\" style=\"margin-bottom: 8px;\">\n                        <div class=\"rel-add-form-title\">\n                            <i class=\"fa-solid fa-pen\"></i>\n                            Edit Relationship\n                        </div>\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-lock\"></i>\n                                    {{ getEditCategory() }}\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"form-row\">\n                            <div class=\"form-field\">\n                                <label>Title / Role</label>\n                                <input type=\"text\" [(ngModel)]=\"EditForm.Title\" placeholder=\"e.g., CEO, Primary Contact\">\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 class=\"form-row\">\n                            <div class=\"form-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                        <div class=\"form-actions\">\n                            <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\n                            </button>\n                            <button class=\"btn btn-cancel\" (click)=\"onCancelEdit()\">Cancel</button>\n                        </div>\n                    </div>\n                } @else {\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            }\n        </div>\n    }\n\n    <!-- Add Relationship Form -->\n    @if (ShowAddForm) {\n        <div class=\"rel-add-form\">\n            <div class=\"rel-add-form-title\">\n                <i class=\"fa-solid fa-plus\"></i>\n                Add Relationship\n            </div>\n\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 --</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-lock\"></i>\n                        {{ getAddCategory() }}\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"form-row\">\n                <div class=\"form-field\">\n                    <label>{{ getAddTargetLabel() }}</label>\n                    <input type=\"text\" [(ngModel)]=\"AddForm.TargetSearch\"\n                           [placeholder]=\"'Search ' + getAddTargetLabel().toLowerCase() + '...'\"\n                           (input)=\"onTargetSearch()\">\n                    <!-- Search results dropdown -->\n                    @if (TargetSearchResults.length > 0) {\n                        <div style=\"border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-top: 4px; overflow: hidden; max-height: 200px; overflow-y: auto;\">\n                            @for (result of TargetSearchResults; track result.ID) {\n                                <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background 0.1s;\"\n                                     [style.background]=\"AddForm.TargetID === result.ID ? '#e3f2fd' : ''\"\n                                     (click)=\"onSelectTarget(result)\">\n                                    <div>\n                                        <div style=\"font-size: 14px; font-weight: 500; color: #333;\">{{ result.Name }}</div>\n                                        @if (result.Detail) {\n                                            <div style=\"font-size: 12px; color: #888;\">{{ result.Detail }}</div>\n                                        }\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                    @if (AddForm.TargetID && AddForm.TargetName) {\n                        <div style=\"margin-top: 6px;\">\n                            <span style=\"display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #e3f2fd; border-radius: 16px; font-size: 13px; color: #1565c0; font-weight: 500;\">\n                                {{ AddForm.TargetName }}\n                                <span style=\"cursor: pointer; color: #999; font-size: 11px;\" (click)=\"onClearTarget()\">\n                                    <i class=\"fa-solid fa-xmark\"></i>\n                                </span>\n                            </span>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"form-row\">\n                <div class=\"form-field\">\n                    <label>Title / Role</label>\n                    <input type=\"text\" [(ngModel)]=\"AddForm.Title\" placeholder=\"e.g., CEO, Primary Contact\">\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            <div class=\"form-actions\">\n                <button class=\"btn btn-primary\" (click)=\"onSaveAdd()\" [disabled]=\"Saving || !AddForm.TypeID || !AddForm.TargetID\">\n                    @if (Saving) {\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                    }\n                    Save\n                </button>\n                <button class=\"btn btn-cancel\" (click)=\"onCancelAdd()\">Cancel</button>\n            </div>\n        </div>\n    }\n}\n", styles: ["/* ============================================\n   RelationshipList - Grouped Timeline Design\n   Pixel-perfect match to Option A mockup\n   ============================================ */\n\n:host {\n    display: block;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n    color: #333;\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 16px;\n}\n\n.section-label {\n    font-size: 15px;\n    font-weight: 600;\n    color: #333;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.section-label i {\n    color: #1976d2;\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 #e8e8e8;\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: #e3f2fd;\n    color: #1565c0;\n}\n\n.rel-category-icon.cat-board {\n    background: #f3e5f5;\n    color: #7b1fa2;\n}\n\n.rel-category-icon.cat-personal {\n    background: #fce4ec;\n    color: #c62828;\n}\n\n.rel-category-icon.cat-business {\n    background: #e8f5e9;\n    color: #2e7d32;\n}\n\n.rel-category-icon.cat-default {\n    background: #f5f5f5;\n    color: #666;\n}\n\n.rel-category-title {\n    font-size: 13px;\n    font-weight: 600;\n    color: #555;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    flex: 1;\n}\n\n.rel-category-count {\n    font-size: 12px;\n    color: #999;\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 #e8e8e8;\n    border-radius: 8px;\n    transition: all 0.15s;\n    position: relative;\n}\n\n.rel-timeline-item:hover {\n    border-color: #d0d0d0;\n    background: #fafafa;\n}\n\n.rel-timeline-item.status-active {\n    border-left: 3px solid #4caf50;\n}\n\n.rel-timeline-item.status-inactive {\n    border-left: 3px solid #ff9800;\n    opacity: 0.7;\n}\n\n.rel-timeline-item.status-ended {\n    border-left: 3px solid #bbb;\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: #f0f4f8;\n    color: #555;\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: #333;\n    line-height: 1.4;\n}\n\n.rel-timeline-label {\n    font-weight: 600;\n    color: #1976d2;\n}\n\na.rel-timeline-target {\n    font-weight: 600;\n    color: #1976d2;\n    cursor: pointer;\n    text-decoration: none;\n}\n\na.rel-timeline-target:hover {\n    color: #1565c0;\n    text-decoration: underline;\n}\n\nspan.rel-timeline-target {\n    font-weight: 600;\n    color: #333;\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: #888;\n    flex-wrap: wrap;\n}\n\n.rel-timeline-title {\n    font-style: italic;\n    color: #555;\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: #e8f5e9;\n    color: #2e7d32;\n}\n\n.badge-inactive {\n    background: #fff3e0;\n    color: #e65100;\n}\n\n.badge-ended {\n    background: #f5f5f5;\n    color: #888;\n}\n\n/* Ghost buttons */\n.btn-ghost {\n    background: transparent;\n    color: #999;\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: #333;\n    background: #f5f5f5;\n}\n\n.btn-ghost.danger:hover {\n    color: #c62828;\n    background: #ffebee;\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: 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: #1976d2;\n    color: white;\n}\n\n.btn-primary:hover {\n    background: #1565c0;\n}\n\n.btn-outline {\n    background: transparent;\n    border: 1px dashed #ccc;\n    color: #666;\n}\n\n.btn-outline:hover {\n    border-color: #1976d2;\n    color: #1976d2;\n    background: #f5f9ff;\n}\n\n.btn-cancel {\n    background: #f5f5f5;\n    color: #666;\n    border: 1px solid #e0e0e0;\n}\n\n.btn-cancel:hover {\n    background: #eeeeee;\n}\n\n/* Add form */\n.rel-add-form {\n    border: 2px solid #1976d2;\n    border-radius: 10px;\n    padding: 20px;\n    background: white;\n    margin-top: 16px;\n}\n\n.rel-add-form-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: #1976d2;\n    margin-bottom: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.form-row {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.form-field {\n    flex: 1;\n}\n\n.form-field label {\n    display: block;\n    font-size: 12px;\n    font-weight: 600;\n    color: #666;\n    margin-bottom: 4px;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.form-field input,\n.form-field select {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e0e0e0;\n    border-radius: 6px;\n    font-size: 14px;\n    font-family: inherit;\n    background: white;\n}\n\n.form-field input:focus,\n.form-field select:focus {\n    outline: none;\n    border-color: #1976d2;\n    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n\n.form-field.type-field {\n    max-width: 200px;\n}\n\n.form-field.category-field {\n    max-width: 200px;\n}\n\n.form-field.date-field {\n    max-width: 140px;\n}\n\n/* Category auto-fill display */\n.category-display {\n    padding: 8px 12px;\n    background: #f5f5f5;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #666;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.category-display i {\n    font-size: 11px;\n}\n\n.form-actions {\n    display: flex;\n    gap: 8px;\n    margin-top: 4px;\n}\n\n/* Empty state */\n.empty-state {\n    text-align: center;\n    padding: 32px 16px;\n    color: #888;\n    font-size: 14px;\n}\n\n.empty-state i {\n    font-size: 24px;\n    color: #ccc;\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: #888;\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"] }]
+    }], null, { Navigate: [{
+            type: Output
+        }], EditMode: [{
+            type: Input
+        }], DataChanged: [{
+            type: Output
+        }], PersonID: [{
+            type: Input
+        }], OrganizationID: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelationshipListComponent, { className: "RelationshipListComponent", filePath: "lib/components/relationship-list/relationship-list.component.ts", lineNumber: 188 }); })();
+//# sourceMappingURL=relationship-list.component.js.map