@mj-biz-apps/common-ng 5.4.0

package/dist/lib/components/contact-method-list/contact-method-list.component.js

@@ -0,0 +1,788 @@
+import { Component, Input, Output, EventEmitter, inject, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { 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.ID;
+function ContactMethodListComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("(", ctx_r0.ContactMethods.length, ")");
+} }
+function ContactMethodListComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5);
+    i0.ɵɵelement(2, "i", 6);
+    i0.ɵɵtext(3, " Loading contacts... ");
+    i0.ɵɵelementEnd()();
+} }
+function ContactMethodListComponent_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelement(1, "i", 2);
+    i0.ɵɵtext(2, " No contact methods yet ");
+    i0.ɵɵelementEnd();
+} }
+function ContactMethodListComponent_Conditional_6_For_3_Conditional_0_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 15);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r3 = ctx.$implicit;
+    i0.ɵɵproperty("value", t_r3.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r3.Name);
+} }
+function ContactMethodListComponent_Conditional_6_For_3_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 25);
+} }
+function ContactMethodListComponent_Conditional_6_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 12)(2, "div", 13)(3, "label");
+    i0.ɵɵtext(4, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "select", 14);
+    i0.ɵɵtwoWayListener("ngModelChange", function ContactMethodListComponent_Conditional_6_For_3_Conditional_0_Template_select_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.EditForm.TypeID, $event) || (ctx_r0.EditForm.TypeID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵrepeaterCreate(6, ContactMethodListComponent_Conditional_6_For_3_Conditional_0_For_7_Template, 2, 2, "option", 15, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 16)(9, "label");
+    i0.ɵɵtext(10, "Value");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "input", 17);
+    i0.ɵɵtwoWayListener("ngModelChange", function ContactMethodListComponent_Conditional_6_For_3_Conditional_0_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.EditForm.Value, $event) || (ctx_r0.EditForm.Value = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 18)(13, "label");
+    i0.ɵɵtext(14, "Label");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "input", 19);
+    i0.ɵɵtwoWayListener("ngModelChange", function ContactMethodListComponent_Conditional_6_For_3_Conditional_0_Template_input_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.EditForm.Label, $event) || (ctx_r0.EditForm.Label = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 20)(17, "input", 21);
+    i0.ɵɵtwoWayListener("ngModelChange", function ContactMethodListComponent_Conditional_6_For_3_Conditional_0_Template_input_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.EditForm.IsPrimary, $event) || (ctx_r0.EditForm.IsPrimary = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "label", 22);
+    i0.ɵɵtext(19, "Primary");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "div", 23)(21, "button", 24);
+    i0.ɵɵlistener("click", function ContactMethodListComponent_Conditional_6_For_3_Conditional_0_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onSaveEdit()); });
+    i0.ɵɵconditionalCreate(22, ContactMethodListComponent_Conditional_6_For_3_Conditional_0_Conditional_22_Template, 1, 0, "i", 25);
+    i0.ɵɵtext(23, " Save ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "button", 26);
+    i0.ɵɵlistener("click", function ContactMethodListComponent_Conditional_6_For_3_Conditional_0_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onCancelEdit()); });
+    i0.ɵɵtext(25, "Cancel");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const cm_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.EditForm.TypeID);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.ContactTypes);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.EditForm.Value);
+    i0.ɵɵproperty("placeholder", ctx_r0.getPlaceholder(ctx_r0.EditForm.TypeID));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.EditForm.Label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("id", "primary-edit-" + cm_r4.ID);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.EditForm.IsPrimary);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("for", "primary-edit-" + cm_r4.ID);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r0.Saving);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.Saving ? 22 : -1);
+} }
+function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 33);
+    i0.ɵɵelement(1, "i", 38);
+    i0.ɵɵelementEnd();
+} }
+function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵlistener("click", function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const cm_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onSetPrimary(cm_r4)); });
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵelementEnd();
+} }
+function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 41);
+    i0.ɵɵlistener("click", function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const cm_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onOpenLink(cm_r4.Value)); });
+    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵelementEnd();
+} }
+function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const cm_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCopyValue(cm_r4.Value)); });
+    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelementEnd();
+} }
+function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 45);
+    i0.ɵɵlistener("click", function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const cm_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onEdit(cm_r4)); });
+    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 47);
+    i0.ɵɵlistener("click", function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_14_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r9); const cm_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onDelete(cm_r4)); });
+    i0.ɵɵelement(3, "i", 48);
+    i0.ɵɵelementEnd();
+} }
+function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27)(1, "div", 28);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 29)(4, "div", 30);
+    i0.ɵɵlistener("click", function ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Template_div_click_4_listener() { i0.ɵɵrestoreView(_r5); const cm_r4 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCopyValue(cm_r4.Value)); });
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 31);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 32);
+    i0.ɵɵconditionalCreate(9, ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_9_Template, 2, 0, "span", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 34);
+    i0.ɵɵconditionalCreate(11, ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_11_Template, 2, 0, "button", 35);
+    i0.ɵɵconditionalCreate(12, ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_12_Template, 2, 0, "button", 36)(13, ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_13_Template, 2, 0, "button", 37);
+    i0.ɵɵconditionalCreate(14, ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Conditional_14_Template, 4, 0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const cm_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("primary", cm_r4.IsPrimary);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.getIconColorClass(cm_r4.ContactTypeID));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.getContactTypeIcon(cm_r4.ContactTypeID));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(cm_r4.Value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.getContactMeta(cm_r4));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(cm_r4.IsPrimary ? 9 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.EditMode && !cm_r4.IsPrimary ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isLinkType(cm_r4.ContactTypeID) ? 12 : 13);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.EditMode ? 14 : -1);
+} }
+function ContactMethodListComponent_Conditional_6_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ContactMethodListComponent_Conditional_6_For_3_Conditional_0_Template, 26, 9, "div", 10)(1, ContactMethodListComponent_Conditional_6_For_3_Conditional_1_Template, 15, 11, "div", 11);
+} if (rf & 2) {
+    const cm_r4 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.EditingId === cm_r4.ID ? 0 : 1);
+} }
+function ContactMethodListComponent_Conditional_6_Conditional_4_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 15);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r11 = ctx.$implicit;
+    i0.ɵɵproperty("value", t_r11.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r11.Name);
+} }
+function ContactMethodListComponent_Conditional_6_Conditional_4_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 25);
+} }
+function ContactMethodListComponent_Conditional_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 13)(2, "label");
+    i0.ɵɵtext(3, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "select", 14);
+    i0.ɵɵtwoWayListener("ngModelChange", function ContactMethodListComponent_Conditional_6_Conditional_4_Template_select_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.AddForm.TypeID, $event) || (ctx_r0.AddForm.TypeID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵrepeaterCreate(5, ContactMethodListComponent_Conditional_6_Conditional_4_For_6_Template, 2, 2, "option", 15, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 16)(8, "label");
+    i0.ɵɵtext(9, "Value");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "input", 17);
+    i0.ɵɵtwoWayListener("ngModelChange", function ContactMethodListComponent_Conditional_6_Conditional_4_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.AddForm.Value, $event) || (ctx_r0.AddForm.Value = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 18)(12, "label");
+    i0.ɵɵtext(13, "Label");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "input", 49);
+    i0.ɵɵtwoWayListener("ngModelChange", function ContactMethodListComponent_Conditional_6_Conditional_4_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.AddForm.Label, $event) || (ctx_r0.AddForm.Label = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "div", 20)(16, "input", 50);
+    i0.ɵɵtwoWayListener("ngModelChange", function ContactMethodListComponent_Conditional_6_Conditional_4_Template_input_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.AddForm.IsPrimary, $event) || (ctx_r0.AddForm.IsPrimary = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "label", 51);
+    i0.ɵɵtext(18, "Primary");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "div", 23)(20, "button", 24);
+    i0.ɵɵlistener("click", function ContactMethodListComponent_Conditional_6_Conditional_4_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onSaveAdd()); });
+    i0.ɵɵconditionalCreate(21, ContactMethodListComponent_Conditional_6_Conditional_4_Conditional_21_Template, 1, 0, "i", 25);
+    i0.ɵɵtext(22, " Add ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "button", 26);
+    i0.ɵɵlistener("click", function ContactMethodListComponent_Conditional_6_Conditional_4_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCancelAdd()); });
+    i0.ɵɵtext(24, "Cancel");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.AddForm.TypeID);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.ContactTypes);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.AddForm.Value);
+    i0.ɵɵproperty("placeholder", ctx_r0.getPlaceholder(ctx_r0.AddForm.TypeID));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.AddForm.Label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.AddForm.IsPrimary);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("disabled", ctx_r0.Saving);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.Saving ? 21 : -1);
+} }
+function ContactMethodListComponent_Conditional_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 9)(1, "button", 52);
+    i0.ɵɵlistener("click", function ContactMethodListComponent_Conditional_6_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onShowAdd()); });
+    i0.ɵɵelement(2, "i", 53);
+    i0.ɵɵtext(3, " Add Contact ");
+    i0.ɵɵelementEnd()();
+} }
+function ContactMethodListComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵconditionalCreate(1, ContactMethodListComponent_Conditional_6_Conditional_1_Template, 3, 0, "div", 7);
+    i0.ɵɵrepeaterCreate(2, ContactMethodListComponent_Conditional_6_For_3_Template, 2, 1, null, null, _forTrack0);
+    i0.ɵɵconditionalCreate(4, ContactMethodListComponent_Conditional_6_Conditional_4_Template, 25, 7, "div", 8);
+    i0.ɵɵconditionalCreate(5, ContactMethodListComponent_Conditional_6_Conditional_5_Template, 4, 0, "div", 9);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ContactMethods.length === 0 && !ctx_r0.ShowAddForm ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.ContactMethods);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.ShowAddForm ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r0.ShowAddForm && ctx_r0.EditingId === null && ctx_r0.EditMode ? 5 : -1);
+} }
+/**
+ * Displays and manages contact methods (email, phone, social, etc.) for a
+ * Person or Organization record.
+ *
+ * Contact methods are loaded from the `MJ.BizApps.Common: Contact Methods`
+ * entity, filtered by either {@link PersonID} or {@link OrganizationID}.
+ * The component provides inline add, edit, delete, set-primary, copy-to-clipboard,
+ * and open-link functionality.
+ *
+ * Primary management is scoped per contact type -- setting a contact as primary
+ * only demotes other primaries of the **same** type.
+ *
+ * @example
+ * ```html
+ * <!-- For a Person -->
+ * <bizapps-contact-method-list
+ *     [PersonID]="person.ID">
+ * </bizapps-contact-method-list>
+ *
+ * <!-- For an Organization -->
+ * <bizapps-contact-method-list
+ *     [OrganizationID]="org.ID">
+ * </bizapps-contact-method-list>
+ * ```
+ */
+export class ContactMethodListComponent {
+    cdr = inject(ChangeDetectorRef);
+    /**
+     * Controls whether add, edit, delete, and set-primary actions are available.
+     * When `false`, the component renders in read-only display mode.
+     * Copy and open-link actions remain available regardless of this setting.
+     */
+    EditMode = false;
+    /** Emitted after any mutation (save, delete, set-primary) so the parent can refresh derived data. */
+    DataChanged = new EventEmitter();
+    _personID = null;
+    _organizationID = null;
+    /**
+     * The Person record ID whose contact methods 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 contact methods 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; }
+    /**
+     * The loaded contact method entities for the current Person or Organization,
+     * sorted with primaries first, then by contact type display rank.
+     */
+    ContactMethods = [];
+    /**
+     * All active contact types available for selection in type dropdowns.
+     * Loaded from `MJ.BizApps.Common: Contact Types`, sorted by `DisplayRank ASC`.
+     */
+    ContactTypes = [];
+    /**
+     * The ID of the contact method currently being edited, or `null` when
+     * not in edit mode.
+     */
+    EditingId = null;
+    /**
+     * Controls visibility of the inline add form. When `true`, the add form
+     * is displayed at the bottom of the contact list.
+     */
+    ShowAddForm = false;
+    /**
+     * 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 set-primary operation is in progress.
+     * Used to disable action buttons and show spinner feedback while `true`.
+     */
+    Saving = false;
+    /**
+     * The form model bound to the inline edit panel via two-way binding.
+     * Populated from the existing contact method record when editing begins.
+     */
+    EditForm = this.createEmptyForm();
+    /**
+     * The form model bound to the inline add panel via two-way binding.
+     * Reset to defaults each time the add form is opened.
+     */
+    AddForm = this.createEmptyForm();
+    /** Maps lowercase contact type names to CSS icon-color classes. */
+    iconColorMap = {
+        'email': 'icon-email',
+        'mobile phone': 'icon-mobile',
+        'work phone': 'icon-phone',
+        'home phone': 'icon-phone',
+        'phone': 'icon-phone',
+        'linkedin': 'icon-linkedin',
+        'twitter': 'icon-twitter',
+        'twitter / x': 'icon-twitter',
+        'website': 'icon-web',
+        'fax': 'icon-fax'
+    };
+    /** Contact type names (lowercase) that represent clickable URLs rather than copyable values. */
+    linkTypeNames = new Set(['linkedin', 'twitter', 'twitter / x', 'website']);
+    /** Creates a blank {@link ContactFormData} with empty defaults. */
+    createEmptyForm() {
+        return { TypeID: '', Value: '', Label: '', IsPrimary: false };
+    }
+    /**
+     * Loads contact methods and contact types from the server.
+     * 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
+            let filter = '';
+            if (this._personID) {
+                filter = `PersonID='${this._personID}'`;
+            }
+            else if (this._organizationID) {
+                filter = `OrganizationID='${this._organizationID}'`;
+            }
+            else {
+                return;
+            }
+            const [methodsResult, typesResult] = await rv.RunViews([
+                {
+                    EntityName: 'MJ.BizApps.Common: Contact Methods',
+                    ExtraFilter: filter,
+                    ResultType: 'entity_object'
+                },
+                {
+                    EntityName: 'MJ.BizApps.Common: Contact Types',
+                    ExtraFilter: 'IsActive=1',
+                    OrderBy: 'DisplayRank ASC',
+                    ResultType: 'entity_object'
+                }
+            ]);
+            this.ContactMethods = methodsResult.Success
+                ? methodsResult.Results
+                : [];
+            this.ContactTypes = typesResult.Success
+                ? typesResult.Results
+                : [];
+            // Sort: primary first, then by type rank
+            this.ContactMethods.sort((a, b) => {
+                if (a.IsPrimary && !b.IsPrimary)
+                    return -1;
+                if (!a.IsPrimary && b.IsPrimary)
+                    return 1;
+                return this.getTypeRank(a.ContactTypeID) - this.getTypeRank(b.ContactTypeID);
+            });
+            // Set default type for add form
+            if (this.ContactTypes.length > 0) {
+                this.AddForm.TypeID = this.ContactTypes[0].ID;
+            }
+        }
+        catch (err) {
+            console.error('ContactMethodList: Error loading data', err);
+        }
+        finally {
+            this.Loading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /** Returns the DisplayRank for a contact type, defaulting to 999 if not found. */
+    getTypeRank(typeID) {
+        const ct = this.ContactTypes.find(t => t.ID === typeID);
+        return ct?.DisplayRank ?? 999;
+    }
+    /**
+     * Resolves the Font Awesome icon class for a given contact type.
+     *
+     * Falls back to `'fa-solid fa-circle-info'` when the type is not found
+     * or has no icon configured.
+     *
+     * @param typeID - The ContactType record ID to look up
+     * @returns The CSS class string for the icon (e.g., `'fa-solid fa-envelope'`)
+     */
+    getContactTypeIcon(typeID) {
+        const ct = this.ContactTypes.find(t => t.ID === typeID);
+        return ct?.IconClass || 'fa-solid fa-circle-info';
+    }
+    /**
+     * Returns a CSS class name that applies a theme color to the contact
+     * type icon based on the type name.
+     *
+     * Falls back to `'icon-default'` for unrecognized type names.
+     *
+     * @param typeID - The ContactType record ID to look up
+     * @returns A CSS class string such as `'icon-email'` or `'icon-linkedin'`
+     */
+    getIconColorClass(typeID) {
+        const ct = this.ContactTypes.find(t => t.ID === typeID);
+        if (!ct)
+            return 'icon-default';
+        const key = ct.Name.toLowerCase();
+        return this.iconColorMap[key] || 'icon-default';
+    }
+    /**
+     * Builds a display-friendly metadata string for a contact method row,
+     * combining the optional label and the contact type name.
+     *
+     * @param cm - The contact method entity to format
+     * @returns A string such as `'Work · Email'` or just `'Email'`
+     */
+    getContactMeta(cm) {
+        const parts = [];
+        if (cm.Label)
+            parts.push(cm.Label);
+        if (cm.ContactType)
+            parts.push(cm.ContactType);
+        return parts.join(' · ') || cm.ContactType;
+    }
+    /**
+     * Returns a context-appropriate placeholder string for the value input
+     * field based on the selected contact type.
+     *
+     * @param typeID - The ContactType record ID to look up
+     * @returns A placeholder string such as `'Enter email address...'`
+     */
+    getPlaceholder(typeID) {
+        const ct = this.ContactTypes.find(t => t.ID === typeID);
+        if (!ct)
+            return 'Enter value...';
+        const name = ct.Name.toLowerCase();
+        if (name.includes('email'))
+            return 'Enter email address...';
+        if (name.includes('phone') || name.includes('mobile'))
+            return 'Enter phone number...';
+        if (name.includes('linkedin') || name.includes('twitter') || name.includes('website'))
+            return 'Enter URL...';
+        return 'Enter value...';
+    }
+    /**
+     * Determines whether a contact type represents a URL that should be
+     * opened in a new browser tab rather than copied to the clipboard.
+     *
+     * @param typeID - The ContactType record ID to check
+     * @returns `true` for LinkedIn, Twitter/X, and Website types; `false` otherwise
+     */
+    isLinkType(typeID) {
+        const ct = this.ContactTypes.find(t => t.ID === typeID);
+        if (!ct)
+            return false;
+        return this.linkTypeNames.has(ct.Name.toLowerCase());
+    }
+    /**
+     * Copies the given string value to the system clipboard.
+     *
+     * Silently ignores clipboard write failures (e.g., when the Clipboard
+     * API is not available).
+     *
+     * @param value - The text to copy to the clipboard
+     */
+    onCopyValue(value) {
+        navigator.clipboard.writeText(value).catch(() => {
+            // Fallback: silently fail
+        });
+    }
+    /**
+     * Opens the given URL in a new browser tab.
+     *
+     * Automatically prepends `'https://'` when the value does not already
+     * include a protocol prefix.
+     *
+     * @param value - The URL string to open
+     */
+    onOpenLink(value) {
+        let url = value;
+        if (!url.startsWith('http://') && !url.startsWith('https://')) {
+            url = 'https://' + url;
+        }
+        window.open(url, '_blank');
+    }
+    /**
+     * Opens the inline add form for creating a new contact method.
+     *
+     * Resets the add form to defaults and pre-selects the first available
+     * contact type.
+     */
+    onShowAdd() {
+        this.AddForm = this.createEmptyForm();
+        if (this.ContactTypes.length > 0) {
+            this.AddForm.TypeID = this.ContactTypes[0].ID;
+        }
+        this.ShowAddForm = true;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Closes the inline add form without saving.
+     */
+    onCancelAdd() {
+        this.ShowAddForm = false;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Persists the new contact method from the add form.
+     *
+     * When the "Primary" flag is set, other primaries of the same contact
+     * type are demoted first. The contact list is reloaded after saving.
+     */
+    async onSaveAdd() {
+        if (!this.AddForm.Value)
+            return;
+        this.Saving = true;
+        this.cdr.detectChanges();
+        try {
+            const md = new Metadata();
+            const cm = await md.GetEntityObject('MJ.BizApps.Common: Contact Methods');
+            cm.NewRecord();
+            cm.ContactTypeID = this.AddForm.TypeID;
+            cm.Value = this.AddForm.Value;
+            cm.Label = this.AddForm.Label || null;
+            cm.IsPrimary = this.AddForm.IsPrimary;
+            if (this._personID) {
+                cm.PersonID = this._personID;
+            }
+            else if (this._organizationID) {
+                cm.OrganizationID = this._organizationID;
+            }
+            // If setting primary, clear other primaries of same type
+            if (this.AddForm.IsPrimary) {
+                await this.clearPrimariesForType(this.AddForm.TypeID);
+            }
+            await cm.Save();
+            await this.loadData();
+            this.DataChanged.emit();
+        }
+        catch (err) {
+            console.error('ContactMethodList: Error adding contact', err);
+        }
+        finally {
+            this.Saving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Opens the inline edit form for an existing contact method, populating
+     * the form fields from the current entity data.
+     *
+     * Closes the add form if it is currently open.
+     *
+     * @param cm - The contact method entity to edit
+     */
+    onEdit(cm) {
+        this.EditForm = {
+            TypeID: cm.ContactTypeID,
+            Value: cm.Value,
+            Label: cm.Label || '',
+            IsPrimary: cm.IsPrimary
+        };
+        this.EditingId = cm.ID;
+        this.ShowAddForm = false;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Cancels the current edit operation and returns to display mode.
+     */
+    onCancelEdit() {
+        this.EditingId = null;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Persists the edited contact method from the edit form.
+     *
+     * When the "Primary" flag is newly set, other primaries of the same
+     * contact type are demoted first. The contact list is reloaded after saving.
+     */
+    async onSaveEdit() {
+        if (!this.EditForm.Value || !this.EditingId)
+            return;
+        this.Saving = true;
+        this.cdr.detectChanges();
+        try {
+            const cm = this.ContactMethods.find(c => c.ID === this.EditingId);
+            if (!cm)
+                return;
+            // If setting primary, clear other primaries of same type
+            if (this.EditForm.IsPrimary && !cm.IsPrimary) {
+                await this.clearPrimariesForType(this.EditForm.TypeID);
+            }
+            cm.ContactTypeID = this.EditForm.TypeID;
+            cm.Value = this.EditForm.Value;
+            cm.Label = this.EditForm.Label || null;
+            cm.IsPrimary = this.EditForm.IsPrimary;
+            await cm.Save();
+            await this.loadData();
+            this.DataChanged.emit();
+        }
+        catch (err) {
+            console.error('ContactMethodList: Error saving contact', err);
+        }
+        finally {
+            this.Saving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Promotes the given contact method to primary for its contact type,
+     * demoting all other primaries of the same type.
+     *
+     * After the update, the contact list is reloaded.
+     *
+     * @param cm - The contact method entity to promote
+     */
+    async onSetPrimary(cm) {
+        this.Saving = true;
+        this.cdr.detectChanges();
+        try {
+            // Clear other primaries of same type
+            await this.clearPrimariesForType(cm.ContactTypeID);
+            cm.IsPrimary = true;
+            await cm.Save();
+            await this.loadData();
+            this.DataChanged.emit();
+        }
+        catch (err) {
+            console.error('ContactMethodList: Error setting primary', err);
+        }
+        finally {
+            this.Saving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Permanently deletes the given contact method record.
+     *
+     * After deletion, the contact list is reloaded.
+     *
+     * @param cm - The contact method entity to delete
+     */
+    async onDelete(cm) {
+        this.Saving = true;
+        this.cdr.detectChanges();
+        try {
+            await cm.Delete();
+            await this.loadData();
+            this.DataChanged.emit();
+        }
+        catch (err) {
+            console.error('ContactMethodList: Error deleting contact', err);
+        }
+        finally {
+            this.Saving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /** Removes the primary flag from all contact methods of the given type. */
+    async clearPrimariesForType(typeID) {
+        const sameType = this.ContactMethods.filter(c => c.ContactTypeID === typeID && c.IsPrimary);
+        for (const c of sameType) {
+            c.IsPrimary = false;
+            await c.Save();
+        }
+    }
+    static ɵfac = function ContactMethodListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ContactMethodListComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContactMethodListComponent, selectors: [["bizapps-contact-method-list"]], inputs: { EditMode: "EditMode", PersonID: "PersonID", OrganizationID: "OrganizationID" }, outputs: { DataChanged: "DataChanged" }, decls: 7, vars: 2, consts: [[1, "section-header"], [1, "section-label"], [1, "fa-solid", "fa-address-card"], [1, "count"], [1, "cm-flat-list"], [1, "loading-row"], [1, "fa-solid", "fa-spinner"], [1, "empty-state"], [1, "cm-flat-add-form"], [1, "cm-flat-footer"], [1, "cm-flat-edit-row"], [1, "cm-flat-row", 3, "primary"], [1, "form-row"], [1, "form-field", "type-field"], [3, "ngModelChange", "ngModel"], [3, "value"], [1, "form-field", "flex-1"], ["type", "text", 3, "ngModelChange", "ngModel", "placeholder"], [1, "form-field", "label-field"], ["type", "text", "placeholder", "e.g., Work", 3, "ngModelChange", "ngModel"], [1, "checkbox-field"], ["type", "checkbox", 3, "ngModelChange", "id", "ngModel"], [3, "for"], [1, "form-actions"], [1, "btn", "btn-primary", "btn-sm", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "btn", "btn-cancel", "btn-sm", 3, "click"], [1, "cm-flat-row"], [1, "cm-flat-icon", 3, "ngClass"], [1, "cm-flat-content"], [1, "cm-flat-value", 3, "click"], [1, "cm-flat-meta"], [1, "cm-flat-badges"], [1, "badge", "badge-primary"], [1, "cm-flat-actions"], ["title", "Set Primary", 1, "btn-ghost"], ["title", "Open", 1, "btn-ghost"], ["title", "Copy", 1, "btn-ghost"], [1, "fa-solid", "fa-star"], ["title", "Set Primary", 1, "btn-ghost", 3, "click"], [1, "fa-regular", "fa-star"], ["title", "Open", 1, "btn-ghost", 3, "click"], [1, "fa-solid", "fa-external-link"], ["title", "Copy", 1, "btn-ghost", 3, "click"], [1, "fa-solid", "fa-copy"], ["title", "Edit", 1, "btn-ghost", 3, "click"], [1, "fa-solid", "fa-pen"], ["title", "Remove", 1, "btn-ghost", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], ["type", "text", "placeholder", "e.g., Direct Line", 3, "ngModelChange", "ngModel"], ["type", "checkbox", "id", "primary-add", 3, "ngModelChange", "ngModel"], ["for", "primary-add"], [1, "btn", "btn-outline", "full-width", 3, "click"], [1, "fa-solid", "fa-plus"]], template: function ContactMethodListComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
+            i0.ɵɵelement(2, "i", 2);
+            i0.ɵɵtext(3, " Contact Methods ");
+            i0.ɵɵconditionalCreate(4, ContactMethodListComponent_Conditional_4_Template, 2, 1, "span", 3);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(5, ContactMethodListComponent_Conditional_5_Template, 4, 0, "div", 4)(6, ContactMethodListComponent_Conditional_6_Template, 6, 3, "div", 4);
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(!ctx.Loading && ctx.ContactMethods.length > 0 ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Loading ? 5 : 6);
+        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, 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.count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #888;\n    font-weight: 400;\n}\n\n\n\n.cm-flat-list[_ngcontent-%COMP%] {\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n\n\n.cm-flat-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 10px 16px;\n    border-bottom: 1px solid #f0f0f0;\n    gap: 12px;\n    transition: background 0.1s;\n}\n\n.cm-flat-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.cm-flat-row[_ngcontent-%COMP%]:hover {\n    background: #fafafa;\n}\n\n.cm-flat-row.primary[_ngcontent-%COMP%] {\n    background: #f1f8e9;\n}\n\n\n\n.cm-flat-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    font-size: 15px;\n    flex-shrink: 0;\n}\n\n.cm-flat-icon.icon-email[_ngcontent-%COMP%] {\n    background: #e3f2fd;\n    color: #1565c0;\n}\n\n.cm-flat-icon.icon-phone[_ngcontent-%COMP%] {\n    background: #e8f5e9;\n    color: #2e7d32;\n}\n\n.cm-flat-icon.icon-mobile[_ngcontent-%COMP%] {\n    background: #e8f5e9;\n    color: #2e7d32;\n}\n\n.cm-flat-icon.icon-linkedin[_ngcontent-%COMP%] {\n    background: #e3f2fd;\n    color: #0077b5;\n}\n\n.cm-flat-icon.icon-twitter[_ngcontent-%COMP%] {\n    background: #e8e8e8;\n    color: #333;\n}\n\n.cm-flat-icon.icon-web[_ngcontent-%COMP%] {\n    background: #fff3e0;\n    color: #e65100;\n}\n\n.cm-flat-icon.icon-fax[_ngcontent-%COMP%] {\n    background: #f3e5f5;\n    color: #7b1fa2;\n}\n\n.cm-flat-icon.icon-default[_ngcontent-%COMP%] {\n    background: #f5f5f5;\n    color: #666;\n}\n\n\n\n.cm-flat-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.cm-flat-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #333;\n    cursor: pointer;\n}\n\n.cm-flat-value[_ngcontent-%COMP%]:hover {\n    color: #1976d2;\n}\n\n.cm-flat-meta[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #888;\n    margin-top: 1px;\n}\n\n\n\n.cm-flat-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\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-primary[_ngcontent-%COMP%] {\n    background: #e8f5e9;\n    color: #2e7d32;\n}\n\n\n\n.cm-flat-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 2px;\n    flex-shrink: 0;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.cm-flat-row[_ngcontent-%COMP%]:hover   .cm-flat-actions[_ngcontent-%COMP%] {\n    opacity: 1;\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.cm-flat-add-form[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    background: #f8f9ff;\n    border-top: 2px solid #1976d2;\n    display: flex;\n    gap: 10px;\n    align-items: flex-end;\n    flex-wrap: wrap;\n}\n\n\n\n.cm-flat-edit-row[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    background: #f8f9ff;\n    border-bottom: 2px solid #1976d2;\n}\n\n.cm-flat-edit-row[_ngcontent-%COMP%]   .form-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 10px;\n    align-items: flex-end;\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-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.btn-sm[_ngcontent-%COMP%] {\n    padding: 7px 14px;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.form-field.flex-1[_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: 160px;\n}\n\n.form-field.label-field[_ngcontent-%COMP%] {\n    max-width: 140px;\n}\n\n.checkbox-field[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding-top: 20px;\n}\n\n.checkbox-field[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n}\n\n.checkbox-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #555;\n    cursor: pointer;\n}\n\n.form-actions[_ngcontent-%COMP%] {\n    padding-top: 18px;\n    display: flex;\n    gap: 6px;\n}\n\n\n\n.copy-toast[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    background: #333;\n    color: white;\n    border-radius: 4px;\n    font-size: 11px;\n    margin-left: 8px;\n    animation: _ngcontent-%COMP%_fadeInOut 1.5s ease-in-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeInOut {\n    0% { opacity: 0; }\n    15% { opacity: 1; }\n    70% { opacity: 1; }\n    100% { opacity: 0; }\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-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    color: #888;\n    font-size: 13px;\n    gap: 8px;\n}\n\n.loading-row[_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\n\n.cm-flat-footer[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    border-top: 1px solid #e0e0e0;\n    background: #fafafa;\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-outline.full-width[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: center;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContactMethodListComponent, [{
+        type: Component,
+        args: [{ standalone: true, imports: [CommonModule, FormsModule], selector: 'bizapps-contact-method-list', template: "<!-- ContactMethodList - Flat List with Icons Design (Option B) -->\n\n<div class=\"section-header\">\n    <span class=\"section-label\">\n        <i class=\"fa-solid fa-address-card\"></i>\n        Contact Methods\n        @if (!Loading && ContactMethods.length > 0) {\n            <span class=\"count\">({{ ContactMethods.length }})</span>\n        }\n    </span>\n</div>\n\n@if (Loading) {\n    <div class=\"cm-flat-list\">\n        <div class=\"loading-row\">\n            <i class=\"fa-solid fa-spinner\"></i> Loading contacts...\n        </div>\n    </div>\n} @else {\n    <div class=\"cm-flat-list\">\n        @if (ContactMethods.length === 0 && !ShowAddForm) {\n            <div class=\"empty-state\">\n                <i class=\"fa-solid fa-address-card\"></i>\n                No contact methods yet\n            </div>\n        }\n\n        @for (cm of ContactMethods; track cm.ID) {\n            <!-- Edit mode for this row -->\n            @if (EditingId === cm.ID) {\n                <div class=\"cm-flat-edit-row\">\n                    <div class=\"form-row\">\n                        <div class=\"form-field type-field\">\n                            <label>Type</label>\n                            <select [(ngModel)]=\"EditForm.TypeID\">\n                                @for (t of ContactTypes; track t.ID) {\n                                    <option [value]=\"t.ID\">{{ t.Name }}</option>\n                                }\n                            </select>\n                        </div>\n                        <div class=\"form-field flex-1\">\n                            <label>Value</label>\n                            <input type=\"text\" [(ngModel)]=\"EditForm.Value\" [placeholder]=\"getPlaceholder(EditForm.TypeID)\">\n                        </div>\n                        <div class=\"form-field label-field\">\n                            <label>Label</label>\n                            <input type=\"text\" [(ngModel)]=\"EditForm.Label\" placeholder=\"e.g., Work\">\n                        </div>\n                        <div class=\"checkbox-field\">\n                            <input type=\"checkbox\" [id]=\"'primary-edit-' + cm.ID\" [(ngModel)]=\"EditForm.IsPrimary\">\n                            <label [for]=\"'primary-edit-' + cm.ID\">Primary</label>\n                        </div>\n                        <div class=\"form-actions\">\n                            <button class=\"btn btn-primary btn-sm\" (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 btn-sm\" (click)=\"onCancelEdit()\">Cancel</button>\n                        </div>\n                    </div>\n                </div>\n            } @else {\n                <!-- Display row -->\n                <div class=\"cm-flat-row\" [class.primary]=\"cm.IsPrimary\">\n                    <div class=\"cm-flat-icon\" [ngClass]=\"getIconColorClass(cm.ContactTypeID)\">\n                        <i [class]=\"getContactTypeIcon(cm.ContactTypeID)\"></i>\n                    </div>\n                    <div class=\"cm-flat-content\">\n                        <div class=\"cm-flat-value\" (click)=\"onCopyValue(cm.Value)\">{{ cm.Value }}</div>\n                        <div class=\"cm-flat-meta\">{{ getContactMeta(cm) }}</div>\n                    </div>\n                    <div class=\"cm-flat-badges\">\n                        @if (cm.IsPrimary) {\n                            <span class=\"badge badge-primary\"><i class=\"fa-solid fa-star\"></i></span>\n                        }\n                    </div>\n                    <div class=\"cm-flat-actions\">\n                        @if (EditMode && !cm.IsPrimary) {\n                            <button class=\"btn-ghost\" title=\"Set Primary\" (click)=\"onSetPrimary(cm)\">\n                                <i class=\"fa-regular fa-star\"></i>\n                            </button>\n                        }\n                        @if (isLinkType(cm.ContactTypeID)) {\n                            <button class=\"btn-ghost\" title=\"Open\" (click)=\"onOpenLink(cm.Value)\">\n                                <i class=\"fa-solid fa-external-link\"></i>\n                            </button>\n                        } @else {\n                            <button class=\"btn-ghost\" title=\"Copy\" (click)=\"onCopyValue(cm.Value)\">\n                                <i class=\"fa-solid fa-copy\"></i>\n                            </button>\n                        }\n                        @if (EditMode) {\n                        <button class=\"btn-ghost\" title=\"Edit\" (click)=\"onEdit(cm)\">\n                            <i class=\"fa-solid fa-pen\"></i>\n                        </button>\n                        <button class=\"btn-ghost danger\" title=\"Remove\" (click)=\"onDelete(cm)\">\n                            <i class=\"fa-solid fa-trash\"></i>\n                        </button>\n                        }\n                    </div>\n                </div>\n            }\n        }\n\n        <!-- Add form -->\n        @if (ShowAddForm) {\n            <div class=\"cm-flat-add-form\">\n                <div class=\"form-field type-field\">\n                    <label>Type</label>\n                    <select [(ngModel)]=\"AddForm.TypeID\">\n                        @for (t of ContactTypes; track t.ID) {\n                            <option [value]=\"t.ID\">{{ t.Name }}</option>\n                        }\n                    </select>\n                </div>\n                <div class=\"form-field flex-1\">\n                    <label>Value</label>\n                    <input type=\"text\" [(ngModel)]=\"AddForm.Value\" [placeholder]=\"getPlaceholder(AddForm.TypeID)\">\n                </div>\n                <div class=\"form-field label-field\">\n                    <label>Label</label>\n                    <input type=\"text\" [(ngModel)]=\"AddForm.Label\" placeholder=\"e.g., Direct Line\">\n                </div>\n                <div class=\"checkbox-field\">\n                    <input type=\"checkbox\" id=\"primary-add\" [(ngModel)]=\"AddForm.IsPrimary\">\n                    <label for=\"primary-add\">Primary</label>\n                </div>\n                <div class=\"form-actions\">\n                    <button class=\"btn btn-primary btn-sm\" (click)=\"onSaveAdd()\" [disabled]=\"Saving\">\n                        @if (Saving) {\n                            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                        }\n                        Add\n                    </button>\n                    <button class=\"btn btn-cancel btn-sm\" (click)=\"onCancelAdd()\">Cancel</button>\n                </div>\n            </div>\n        }\n\n        <!-- Add button footer -->\n        @if (!ShowAddForm && EditingId === null && EditMode) {\n            <div class=\"cm-flat-footer\">\n                <button class=\"btn btn-outline full-width\" (click)=\"onShowAdd()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    Add Contact\n                </button>\n            </div>\n        }\n    </div>\n}\n", styles: ["/* ============================================\n   ContactMethodList - Flat List with Icons Design\n   Pixel-perfect match to Option B 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.count {\n    font-size: 12px;\n    color: #888;\n    font-weight: 400;\n}\n\n/* Flat list container */\n.cm-flat-list {\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n/* Row */\n.cm-flat-row {\n    display: flex;\n    align-items: center;\n    padding: 10px 16px;\n    border-bottom: 1px solid #f0f0f0;\n    gap: 12px;\n    transition: background 0.1s;\n}\n\n.cm-flat-row:last-child {\n    border-bottom: none;\n}\n\n.cm-flat-row:hover {\n    background: #fafafa;\n}\n\n.cm-flat-row.primary {\n    background: #f1f8e9;\n}\n\n/* Icon */\n.cm-flat-icon {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    font-size: 15px;\n    flex-shrink: 0;\n}\n\n.cm-flat-icon.icon-email {\n    background: #e3f2fd;\n    color: #1565c0;\n}\n\n.cm-flat-icon.icon-phone {\n    background: #e8f5e9;\n    color: #2e7d32;\n}\n\n.cm-flat-icon.icon-mobile {\n    background: #e8f5e9;\n    color: #2e7d32;\n}\n\n.cm-flat-icon.icon-linkedin {\n    background: #e3f2fd;\n    color: #0077b5;\n}\n\n.cm-flat-icon.icon-twitter {\n    background: #e8e8e8;\n    color: #333;\n}\n\n.cm-flat-icon.icon-web {\n    background: #fff3e0;\n    color: #e65100;\n}\n\n.cm-flat-icon.icon-fax {\n    background: #f3e5f5;\n    color: #7b1fa2;\n}\n\n.cm-flat-icon.icon-default {\n    background: #f5f5f5;\n    color: #666;\n}\n\n/* Content */\n.cm-flat-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.cm-flat-value {\n    font-size: 14px;\n    color: #333;\n    cursor: pointer;\n}\n\n.cm-flat-value:hover {\n    color: #1976d2;\n}\n\n.cm-flat-meta {\n    font-size: 12px;\n    color: #888;\n    margin-top: 1px;\n}\n\n/* Badges */\n.cm-flat-badges {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\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-primary {\n    background: #e8f5e9;\n    color: #2e7d32;\n}\n\n/* Actions */\n.cm-flat-actions {\n    display: flex;\n    gap: 2px;\n    flex-shrink: 0;\n    opacity: 0;\n    transition: opacity 0.15s;\n}\n\n.cm-flat-row:hover .cm-flat-actions {\n    opacity: 1;\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/* Add form */\n.cm-flat-add-form {\n    padding: 14px 16px;\n    background: #f8f9ff;\n    border-top: 2px solid #1976d2;\n    display: flex;\n    gap: 10px;\n    align-items: flex-end;\n    flex-wrap: wrap;\n}\n\n/* Edit inline row */\n.cm-flat-edit-row {\n    padding: 14px 16px;\n    background: #f8f9ff;\n    border-bottom: 2px solid #1976d2;\n}\n\n.cm-flat-edit-row .form-row {\n    display: flex;\n    gap: 10px;\n    align-items: flex-end;\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-cancel {\n    background: #f5f5f5;\n    color: #666;\n    border: 1px solid #e0e0e0;\n}\n\n.btn-cancel:hover {\n    background: #eeeeee;\n}\n\n.btn-sm {\n    padding: 7px 14px;\n}\n\n/* Form fields */\n.form-field {\n    display: flex;\n    flex-direction: column;\n}\n\n.form-field.flex-1 {\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: 160px;\n}\n\n.form-field.label-field {\n    max-width: 140px;\n}\n\n.checkbox-field {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding-top: 20px;\n}\n\n.checkbox-field input[type=\"checkbox\"] {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n}\n\n.checkbox-field label {\n    font-size: 13px;\n    color: #555;\n    cursor: pointer;\n}\n\n.form-actions {\n    padding-top: 18px;\n    display: flex;\n    gap: 6px;\n}\n\n/* Copy toast */\n.copy-toast {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    background: #333;\n    color: white;\n    border-radius: 4px;\n    font-size: 11px;\n    margin-left: 8px;\n    animation: fadeInOut 1.5s ease-in-out;\n}\n\n@keyframes fadeInOut {\n    0% { opacity: 0; }\n    15% { opacity: 1; }\n    70% { opacity: 1; }\n    100% { opacity: 0; }\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-row {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    color: #888;\n    font-size: 13px;\n    gap: 8px;\n}\n\n.loading-row 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/* Footer add button area */\n.cm-flat-footer {\n    padding: 12px 16px;\n    border-top: 1px solid #e0e0e0;\n    background: #fafafa;\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-outline.full-width {\n    width: 100%;\n    justify-content: center;\n}\n"] }]
+    }], null, { EditMode: [{
+            type: Input
+        }], DataChanged: [{
+            type: Output
+        }], PersonID: [{
+            type: Input
+        }], OrganizationID: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContactMethodListComponent, { className: "ContactMethodListComponent", filePath: "lib/components/contact-method-list/contact-method-list.component.ts", lineNumber: 65 }); })();
+//# sourceMappingURL=contact-method-list.component.js.map