@memberjunction/ng-base-forms 1.7.1 → 1.8.1

package/dist/lib/base-field-component.d.ts

@@ -33,6 +33,10 @@ export declare class MJFormField extends BaseRecordComponent implements AfterVie
      * valid when the FieldName field is a foreign key field to another entity.
      */
     LinkType: 'Email' | 'URL' | 'Record' | 'None';
+    /**
+     * Optional, when the field type is a linked field, you can specify if a search box is shown or a dropdown component is shown. The default is 'search'.
+     */
+    LinkComponentType: 'Search' | 'Dropdown';
     /**
      * If set to false, the label for the field will not be shown. The default is true.
      */
@@ -65,6 +69,6 @@ export declare class MJFormField extends BaseRecordComponent implements AfterVie
     constructor(renderer: Renderer2, cdr: ChangeDetectorRef);
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MJFormField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MJFormField, "mj-form-field", never, { "record": { "alias": "record"; "required": false; }; "EditMode": { "alias": "EditMode"; "required": false; }; "FieldName": { "alias": "FieldName"; "required": false; }; "Type": { "alias": "Type"; "required": false; }; "LinkType": { "alias": "LinkType"; "required": false; }; "ShowLabel": { "alias": "ShowLabel"; "required": false; }; "DisplayName": { "alias": "DisplayName"; "required": false; }; "PossibleValues": { "alias": "PossibleValues"; "required": false; }; "Value": { "alias": "Value"; "required": false; }; }, { "ValueChange": "ValueChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJFormField, "mj-form-field", never, { "record": { "alias": "record"; "required": false; }; "EditMode": { "alias": "EditMode"; "required": false; }; "FieldName": { "alias": "FieldName"; "required": false; }; "Type": { "alias": "Type"; "required": false; }; "LinkType": { "alias": "LinkType"; "required": false; }; "LinkComponentType": { "alias": "LinkComponentType"; "required": false; }; "ShowLabel": { "alias": "ShowLabel"; "required": false; }; "DisplayName": { "alias": "DisplayName"; "required": false; }; "PossibleValues": { "alias": "PossibleValues"; "required": false; }; "Value": { "alias": "Value"; "required": false; }; }, { "ValueChange": "ValueChange"; }, never, never, false, never>;
 }
 //# sourceMappingURL=base-field-component.d.ts.map

package/dist/lib/base-field-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-field-component.d.ts","sourceRoot":"","sources":["../../src/lib/base-field-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAyB,aAAa,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC3I,OAAO,EAAE,UAAU,EAAE,eAAe,EAAqB,MAAM,sBAAsB,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;;AAGjD;;;;;GAKG;AACH,qBAKa,WAAY,SAAQ,mBAAoB,YAAW,aAAa;IA8GzE,OAAO,CAAC,QAAQ;IAChB,OAAO,CAAC,GAAG;IA9Gb;;OAEG;IACM,MAAM,EAAG,UAAU,CAAC;IAC7B;;OAEG;IACM,QAAQ,EAAE,OAAO,CAAS;IACnC;;OAEG;IACM,SAAS,EAAE,MAAM,CAAM;IAChC;;OAEG;IACM,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,gBAAgB,GAAG,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAAa;IACxI;;;OAGG;IACM,QAAQ,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAU;IAEhE;;OAEG;IACM,SAAS,EAAE,OAAO,CAAQ;IAEnC,SAAS,uDAAa;IAEtB,OAAO,CAAC,YAAY,CAAuB;IAC3C;;OAEG;IACH,IACW,WAAW,IAAI,MAAM,CAO/B;IAED,IAAW,WAAW,CAAC,QAAQ,EAAE,MAAM,EAEtC;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAED,OAAO,CAAC,eAAe,CAAyB;IAChD;;;OAGG;IACH,IAAa,cAAc,IAAI,MAAM,EAAE,CAOtC;IAED,IAAI,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,EAEpC;IAED,IACW,KAAK,IAAI,GAAG,CAUtB;IACD,IAAW,KAAK,CAAC,QAAQ,EAAE,GAAG,EAM7B;IACS,WAAW,oBAA2B;IAEhD;;OAEG;IACH,IAAW,eAAe,IAAI,OAAO,CAIpC;IAED,IAAW,SAAS,IAAI,eAAe,CAItC;IAEyC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAClF,OAAO,CAAC,QAAQ,CAA+B;gBAGrC,QAAQ,EAAE,SAAS,EACnB,GAAG,EAAE,iBAAiB;IAKhC,eAAe,IAAI,IAAI;yCApHZ,WAAW;2CAAX,WAAW;CA2LvB"}
+{"version":3,"file":"base-field-component.d.ts","sourceRoot":"","sources":["../../src/lib/base-field-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAyB,aAAa,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC3I,OAAO,EAAE,UAAU,EAAE,eAAe,EAAqB,MAAM,sBAAsB,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;;AAGjD;;;;;GAKG;AACH,qBAKa,WAAY,SAAQ,mBAAoB,YAAW,aAAa;IAmHzE,OAAO,CAAC,QAAQ;IAChB,OAAO,CAAC,GAAG;IAnHb;;OAEG;IACM,MAAM,EAAG,UAAU,CAAC;IAC7B;;OAEG;IACM,QAAQ,EAAE,OAAO,CAAS;IACnC;;OAEG;IACM,SAAS,EAAE,MAAM,CAAM;IAChC;;OAEG;IACM,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,gBAAgB,GAAG,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAAa;IACxI;;;OAGG;IACM,QAAQ,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAU;IAEhE;;OAEG;IACM,iBAAiB,EAAE,QAAQ,GAAG,UAAU,CAAc;IAE/D;;OAEG;IACM,SAAS,EAAE,OAAO,CAAQ;IAEnC,SAAS,uDAAa;IAEtB,OAAO,CAAC,YAAY,CAAuB;IAC3C;;OAEG;IACH,IACW,WAAW,IAAI,MAAM,CAO/B;IAED,IAAW,WAAW,CAAC,QAAQ,EAAE,MAAM,EAEtC;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAED,OAAO,CAAC,eAAe,CAAyB;IAChD;;;OAGG;IACH,IAAa,cAAc,IAAI,MAAM,EAAE,CAOtC;IAED,IAAI,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,EAEpC;IAED,IACW,KAAK,IAAI,GAAG,CAUtB;IACD,IAAW,KAAK,CAAC,QAAQ,EAAE,GAAG,EAM7B;IACS,WAAW,oBAA2B;IAEhD;;OAEG;IACH,IAAW,eAAe,IAAI,OAAO,CAIpC;IAED,IAAW,SAAS,IAAI,eAAe,CAItC;IAEyC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAClF,OAAO,CAAC,QAAQ,CAA+B;gBAGrC,QAAQ,EAAE,SAAS,EACnB,GAAG,EAAE,iBAAiB;IAKhC,eAAe,IAAI,IAAI;yCAzHZ,WAAW;2CAAX,WAAW;CAgMvB"}

package/dist/lib/base-field-component.js

@@ -105,40 +105,41 @@ function MJFormField_Conditional_0_div_1_Conditional_2_Template(rf, ctx) { if (r
     i0.ɵɵelement(0, "mj-link-field", 9);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("record", ctx_r0.record)("FieldName", ctx_r0.FieldName);
+    i0.ɵɵproperty("record", ctx_r0.record)("FieldName", ctx_r0.FieldName)("LinkComponentType", ctx_r0.LinkComponentType);
 } }
 function MJFormField_Conditional_0_div_1_Conditional_3_Case_0_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-textbox", 16);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_0_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "mj-code-editor", 17);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_0_Template_mj_code_editor_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
+    i0.ɵɵproperty("languages", ctx_r0.languages)("language", "JavaScript");
 } }
 function MJFormField_Conditional_0_div_1_Conditional_3_Case_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-textarea", 17);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_1_Template_kendo_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-textbox", 18);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_1_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
-    i0.ɵɵproperty("fillWidth", ctx_r0.ShowLabel ? false : true)("fillHeight", ctx_r0.ShowLabel ? false : true);
 } }
 function MJFormField_Conditional_0_div_1_Conditional_3_Case_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-numerictextbox", 18);
-    i0.ɵɵtwoWayListener("valueChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_2_Template_kendo_numerictextbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-textarea", 19);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_2_Template_kendo_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵtwoWayProperty("value", ctx_r0.Value);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
+    i0.ɵɵproperty("fillWidth", ctx_r0.ShowLabel ? false : true)("fillHeight", ctx_r0.ShowLabel ? false : true);
 } }
 function MJFormField_Conditional_0_div_1_Conditional_3_Case_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-datepicker", 18);
-    i0.ɵɵtwoWayListener("valueChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_3_Template_kendo_datepicker_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-numerictextbox", 20);
+    i0.ɵɵtwoWayListener("valueChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_3_Template_kendo_numerictextbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -146,27 +147,36 @@ function MJFormField_Conditional_0_div_1_Conditional_3_Case_3_Template(rf, ctx)
 } }
 function MJFormField_Conditional_0_div_1_Conditional_3_Case_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 19);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_4_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-datepicker", 20);
+    i0.ɵɵtwoWayListener("valueChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_4_Template_kendo_datepicker_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
+    i0.ɵɵtwoWayProperty("value", ctx_r0.Value);
 } }
 function MJFormField_Conditional_0_div_1_Conditional_3_Case_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 20);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_5_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "input", 21);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_5_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("data", ctx_r0.PossibleValues);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
 } }
 function MJFormField_Conditional_0_div_1_Conditional_3_Case_6_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-combobox", 21);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_6_Template_kendo_combobox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 22);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_6_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("data", ctx_r0.PossibleValues);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
+} }
+function MJFormField_Conditional_0_div_1_Conditional_3_Case_7_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-combobox", 23);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_7_Template_kendo_combobox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -174,15 +184,15 @@ function MJFormField_Conditional_0_div_1_Conditional_3_Case_6_Template(rf, ctx)
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
 } }
 function MJFormField_Conditional_0_div_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MJFormField_Conditional_0_div_1_Conditional_3_Case_0_Template, 1, 1, "kendo-textbox", 10)(1, MJFormField_Conditional_0_div_1_Conditional_3_Case_1_Template, 1, 3, "kendo-textarea", 11)(2, MJFormField_Conditional_0_div_1_Conditional_3_Case_2_Template, 1, 1, "kendo-numerictextbox", 12)(3, MJFormField_Conditional_0_div_1_Conditional_3_Case_3_Template, 1, 1, "kendo-datepicker", 12)(4, MJFormField_Conditional_0_div_1_Conditional_3_Case_4_Template, 1, 1, "input", 13)(5, MJFormField_Conditional_0_div_1_Conditional_3_Case_5_Template, 1, 2, "kendo-dropdownlist", 14)(6, MJFormField_Conditional_0_div_1_Conditional_3_Case_6_Template, 1, 3, "kendo-combobox", 15);
+    i0.ɵɵtemplate(0, MJFormField_Conditional_0_div_1_Conditional_3_Case_0_Template, 1, 3, "mj-code-editor", 10)(1, MJFormField_Conditional_0_div_1_Conditional_3_Case_1_Template, 1, 1, "kendo-textbox", 11)(2, MJFormField_Conditional_0_div_1_Conditional_3_Case_2_Template, 1, 3, "kendo-textarea", 12)(3, MJFormField_Conditional_0_div_1_Conditional_3_Case_3_Template, 1, 1, "kendo-numerictextbox", 13)(4, MJFormField_Conditional_0_div_1_Conditional_3_Case_4_Template, 1, 1, "kendo-datepicker", 13)(5, MJFormField_Conditional_0_div_1_Conditional_3_Case_5_Template, 1, 1, "input", 14)(6, MJFormField_Conditional_0_div_1_Conditional_3_Case_6_Template, 1, 2, "kendo-dropdownlist", 15)(7, MJFormField_Conditional_0_div_1_Conditional_3_Case_7_Template, 1, 3, "kendo-combobox", 16);
 } if (rf & 2) {
     let tmp_3_0;
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵconditional((tmp_3_0 = ctx_r0.Type) === "textbox" ? 0 : tmp_3_0 === "textarea" ? 1 : tmp_3_0 === "numerictextbox" ? 2 : tmp_3_0 === "datepicker" ? 3 : tmp_3_0 === "checkbox" ? 4 : tmp_3_0 === "dropdownlist" ? 5 : tmp_3_0 === "combobox" ? 6 : -1);
+    i0.ɵɵconditional((tmp_3_0 = ctx_r0.Type) === "code" ? 0 : tmp_3_0 === "textbox" ? 1 : tmp_3_0 === "textarea" ? 2 : tmp_3_0 === "numerictextbox" ? 3 : tmp_3_0 === "datepicker" ? 4 : tmp_3_0 === "checkbox" ? 5 : tmp_3_0 === "dropdownlist" ? 6 : tmp_3_0 === "combobox" ? 7 : -1);
 } }
 function MJFormField_Conditional_0_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵtemplate(1, MJFormField_Conditional_0_div_1_Conditional_1_Template, 2, 1, "label")(2, MJFormField_Conditional_0_div_1_Conditional_2_Template, 1, 2, "mj-link-field", 9)(3, MJFormField_Conditional_0_div_1_Conditional_3_Template, 7, 1);
+    i0.ɵɵtemplate(1, MJFormField_Conditional_0_div_1_Conditional_1_Template, 2, 1, "label")(2, MJFormField_Conditional_0_div_1_Conditional_2_Template, 1, 3, "mj-link-field", 9)(3, MJFormField_Conditional_0_div_1_Conditional_3_Template, 8, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -303,6 +313,10 @@ export class MJFormField extends BaseRecordComponent {
          * valid when the FieldName field is a foreign key field to another entity.
          */
         this.LinkType = 'None';
+        /**
+         * Optional, when the field type is a linked field, you can specify if a search box is shown or a dropdown component is shown. The default is 'search'.
+         */
+        this.LinkComponentType = 'Dropdown';
         /**
          * If set to false, the label for the field will not be shown. The default is true.
          */
@@ -343,14 +357,14 @@ MJFormField.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFormField, se
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.markdown = _t.first);
-    } }, inputs: { record: "record", EditMode: "EditMode", FieldName: "FieldName", Type: "Type", LinkType: "LinkType", ShowLabel: "ShowLabel", DisplayName: "DisplayName", PossibleValues: "PossibleValues", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["markdown", ""], ["class", "record-form-row", 4, "ngIf"], [1, "record-form-row"], [4, "ngIf"], ["mjEmailLink", "", 3, "field"], ["mjWebLink", "", 3, "field"], ["mjFieldLink", "", 3, "record", "fieldName"], [3, "value", "readonly", "languages", "language"], [3, "data"], [3, "record", "FieldName"], [3, "ngModel"], ["mjFillContainer", "", 3, "ngModel", "fillWidth", "fillHeight"], [3, "value"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModel"], [3, "data", "ngModel"], [3, "data", "allowCustom", "ngModel"], [3, "ngModelChange", "ngModel"], ["mjFillContainer", "", 3, "ngModelChange", "ngModel", "fillWidth", "fillHeight"], [3, "valueChange", "value"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "ngModel"], [3, "ngModelChange", "data", "ngModel"], [3, "ngModelChange", "data", "allowCustom", "ngModel"]], template: function MJFormField_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { record: "record", EditMode: "EditMode", FieldName: "FieldName", Type: "Type", LinkType: "LinkType", LinkComponentType: "LinkComponentType", ShowLabel: "ShowLabel", DisplayName: "DisplayName", PossibleValues: "PossibleValues", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["markdown", ""], ["class", "record-form-row", 4, "ngIf"], [1, "record-form-row"], [4, "ngIf"], ["mjEmailLink", "", 3, "field"], ["mjWebLink", "", 3, "field"], ["mjFieldLink", "", 3, "record", "fieldName"], [3, "value", "readonly", "languages", "language"], [3, "data"], [3, "record", "FieldName", "LinkComponentType"], [3, "ngModel", "languages", "language"], [3, "ngModel"], ["mjFillContainer", "", 3, "ngModel", "fillWidth", "fillHeight"], [3, "value"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModel"], [3, "data", "ngModel"], [3, "data", "allowCustom", "ngModel"], [3, "ngModelChange", "ngModel", "languages", "language"], [3, "ngModelChange", "ngModel"], ["mjFillContainer", "", 3, "ngModelChange", "ngModel", "fillWidth", "fillHeight"], [3, "valueChange", "value"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "ngModel"], [3, "ngModelChange", "data", "ngModel"], [3, "ngModelChange", "data", "allowCustom", "ngModel"]], template: function MJFormField_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, MJFormField_Conditional_0_Template, 2, 2);
     } if (rf & 2) {
         i0.ɵɵconditional(ctx.record.IsSaved || !ctx.IsFieldReadOnly ? 0 : -1);
     } }, dependencies: [i1.NgIf, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.TextAreaComponent, i3.TextBoxComponent, i3.NumericTextBoxComponent, i3.CheckBoxDirective, i4.DatePickerComponent, i5.ComboBoxComponent, i5.DropDownListComponent, i6.EmailLink, i6.FieldLink, i6.WebLink, i7.FillContainer, i8.CodeEditorComponent, i9.MarkdownComponent, i10.MJLinkField], styles: [".record-form-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: start;\n    gap: 10px;\n    margin-bottom: 12px;\n    padding-top: 5px;\n    padding-bottom: 5px;\n    align-items: start; \n\n} \n  \n  \n.record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    font-weight: bold;\n    padding-right: 10px;\n    width: 240px;\n    margin-bottom: 0;\n    align-self: start; \n\n}\n\n\n\n\n\n.record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > p[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > h1[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > h2[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > h3[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > h4[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > h5[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > h6[_ngcontent-%COMP%] {\n  margin:0 !important;\n}\n\nmarkdown[_ngcontent-%COMP%] {\n  font-size: 1rem; \n\n}\n\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    display: grid; \n\n    grid-template-columns: auto 1fr;\n    align-items: start; \n\n    gap: 10px;\n    margin-bottom: 12px;\n    padding-top: 5px;\n    padding-bottom: 5px;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n    align-self: start; \n\n  }\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJFormField, [{
         type: Component,
-        args: [{ selector: 'mj-form-field', template: "<!--\n    Using a blend of *ngIf and the new @switch control flow because of a bug in early Angular 17 where\n    the @if wrapping the @switch didn't fully remove elements when swtiching back and forth. In the future if Angular fixes the bug\n    we can get rid of the *ngIf outer div blocks and instead use @if and contain the @switch within the same div block.\n-->\n@if (record.IsSaved || !IsFieldReadOnly) {\n    <!-- We only render a field if the record is either saved, or the field is editable. Meaning, for NEW records, we only show editable fields -->\n    <div class=\"record-form-row\" *ngIf=\"!EditMode || IsFieldReadOnly\">\n        <label *ngIf=\"ShowLabel\">{{DisplayName}}</label>\n        @switch (LinkType) {\n            @case ('None') {\n                @if (ExtendedType === 'Code') {\n                    <mj-code-editor [value]=\"record.Get(FieldName)\" [readonly]=\"true\" [languages]=\"languages\" [language]=\"'JavaScript'\"></mj-code-editor>\n                }\n                @else if (FieldInfo.Length === -1) {\n                    <!-- this is a varchar(max) type of field -->\n                    <markdown #markdown [data]=\"record.Get(FieldName)\"></markdown>\n                    <!-- <span [innerHTML]=\"record.Get(FieldName) | formatText\"></span> -->\n                }\n                @else {\n                    <span>{{FormatValue(FieldName, 0)}}</span>\n                }\n            }\n            @case ('Email') {\n                <span mjEmailLink [field]=\"record.GetFieldByName(FieldName)\" >{{FormatValue(FieldName, 0)}}</span>\n            }\n            @case ('URL') {\n                <span mjWebLink [field]=\"record.GetFieldByName(FieldName)\" >{{FormatValue(FieldName, 0)}}</span>\n            }\n            @case ('Record') {\n                <span mjFieldLink [record]=\"record\" [fieldName]=\"FieldName\" >{{FormatValue(FieldName, 0)}}</span>\n            }\n        }\n    </div>\n    <div class=\"record-form-row\" *ngIf=\"EditMode && !IsFieldReadOnly\">\n        @if (ShowLabel) {\n            <label>{{DisplayName}}</label>\n        }\n        @if (FieldInfo && FieldInfo.RelatedEntity && FieldInfo.RelatedEntity.length > 0) {\n            <!-- Foreign Key Link here -->\n             <mj-link-field [record]=\"record\" [FieldName]=\"FieldName\"></mj-link-field>\n        }\n        @else {\n            <!-- Not a foreign key -->\n            @switch (Type) {\n                @case ('textbox') {\n                    <kendo-textbox [(ngModel)]=\"Value\"  />\n                }\n                @case ('textarea') {\n                    <kendo-textarea [(ngModel)]=\"Value\" mjFillContainer [fillWidth]=\"ShowLabel ? false : true\" [fillHeight]=\"ShowLabel ? false : true\" ></kendo-textarea>\n                }\n                @case ('numerictextbox') {\n                    <kendo-numerictextbox [(value)]=\"Value\"  />\n                }\n                @case ('datepicker') {\n                    <kendo-datepicker [(value)]=\"Value\"></kendo-datepicker>\n                }\n                @case ('checkbox') {\n                    <input type=\"checkbox\" [(ngModel)]=\"Value\" kendoCheckBox />\n                }\n                @case ('dropdownlist') {\n                    <kendo-dropdownlist [data]=\"PossibleValues\" [(ngModel)]=\"Value\"></kendo-dropdownlist>\n                }\n                @case ('combobox') {\n                    <kendo-combobox [data]=\"PossibleValues\" [allowCustom]=\"true\" [(ngModel)]=\"Value\"></kendo-combobox>\n                }\n            }\n        }\n    </div>\n}\n", styles: [".record-form-row {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: start;\n    gap: 10px;\n    margin-bottom: 12px;\n    padding-top: 5px;\n    padding-bottom: 5px;\n    align-items: start; /* Ensure items are aligned at the top */\n} \n  \n  \n.record-form-row label {\n    font-weight: bold;\n    padding-right: 10px;\n    width: 240px;\n    margin-bottom: 0;\n    align-self: start; /* Align the label to the start (top) */\n}\n\n/*\n  Eliminate the default margin and padding for the markdown elements\n */\n.record-form-row markdown > p,\n.record-form-row markdown > h1,\n.record-form-row markdown > h2,\n.record-form-row markdown > h3,\n.record-form-row markdown > h4,\n.record-form-row markdown > h5,\n.record-form-row markdown > h6 {\n  margin:0 !important;\n}\n\nmarkdown {\n  font-size: 1rem; /* Adjust this value to match your app's regular text size */\n}\n\n\n@media (min-width: 768px) {\n  .record-form-row {\n    display: grid; /* Ensure grid display is used for larger screens as well */\n    grid-template-columns: auto 1fr;\n    align-items: start; /* Keep the alignment at the top */\n    gap: 10px;\n    margin-bottom: 12px;\n    padding-top: 5px;\n    padding-bottom: 5px;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n    align-self: start; /* Ensure the label is aligned to the top */\n  }\n}\n  "] }]
+        args: [{ selector: 'mj-form-field', template: "<!--\n    Using a blend of *ngIf and the new @switch control flow because of a bug in early Angular 17 where\n    the @if wrapping the @switch didn't fully remove elements when swtiching back and forth. In the future if Angular fixes the bug\n    we can get rid of the *ngIf outer div blocks and instead use @if and contain the @switch within the same div block.\n-->\n@if (record.IsSaved || !IsFieldReadOnly) {\n    <!-- We only render a field if the record is either saved, or the field is editable. Meaning, for NEW records, we only show editable fields -->\n    <div class=\"record-form-row\" *ngIf=\"!EditMode || IsFieldReadOnly\">\n        <label *ngIf=\"ShowLabel\">{{DisplayName}}</label>\n        @switch (LinkType) {\n            @case ('None') {\n                @if (ExtendedType === 'Code') {\n                    <mj-code-editor [value]=\"record.Get(FieldName)\" [readonly]=\"true\" [languages]=\"languages\" [language]=\"'JavaScript'\"></mj-code-editor>\n                }\n                @else if (FieldInfo.Length === -1) {\n                    <!-- this is a varchar(max) type of field -->\n                    <markdown #markdown [data]=\"record.Get(FieldName)\"></markdown>\n                    <!-- <span [innerHTML]=\"record.Get(FieldName) | formatText\"></span> -->\n                }\n                @else {\n                    <span>{{FormatValue(FieldName, 0)}}</span>\n                }\n            }\n            @case ('Email') {\n                <span mjEmailLink [field]=\"record.GetFieldByName(FieldName)\" >{{FormatValue(FieldName, 0)}}</span>\n            }\n            @case ('URL') {\n                <span mjWebLink [field]=\"record.GetFieldByName(FieldName)\" >{{FormatValue(FieldName, 0)}}</span>\n            }\n            @case ('Record') {\n                <span mjFieldLink [record]=\"record\" [fieldName]=\"FieldName\" >{{FormatValue(FieldName, 0)}}</span>\n            }\n        }\n    </div>\n    <div class=\"record-form-row\" *ngIf=\"EditMode && !IsFieldReadOnly\">\n        @if (ShowLabel) {\n            <label>{{DisplayName}}</label>\n        }\n        @if (FieldInfo && FieldInfo.RelatedEntity && FieldInfo.RelatedEntity.length > 0) {\n            <!-- Foreign Key Link here -->\n             <mj-link-field [record]=\"record\" [FieldName]=\"FieldName\" [LinkComponentType]=\"LinkComponentType\"></mj-link-field>\n        }\n        @else {\n            <!-- Not a foreign key -->\n            @switch (Type) {\n                @case ('code') {\n                    <mj-code-editor [(ngModel)]=\"Value\" [languages]=\"languages\" [language]=\"'JavaScript'\"></mj-code-editor>\n                }\n                @case ('textbox') {\n                    <kendo-textbox [(ngModel)]=\"Value\"  />\n                }\n                @case ('textarea') {\n                    <kendo-textarea [(ngModel)]=\"Value\" mjFillContainer [fillWidth]=\"ShowLabel ? false : true\" [fillHeight]=\"ShowLabel ? false : true\" ></kendo-textarea>\n                }\n                @case ('numerictextbox') {\n                    <kendo-numerictextbox [(value)]=\"Value\"  />\n                }\n                @case ('datepicker') {\n                    <kendo-datepicker [(value)]=\"Value\"></kendo-datepicker>\n                }\n                @case ('checkbox') {\n                    <input type=\"checkbox\" [(ngModel)]=\"Value\" kendoCheckBox />\n                }\n                @case ('dropdownlist') {\n                    <kendo-dropdownlist [data]=\"PossibleValues\" [(ngModel)]=\"Value\"></kendo-dropdownlist>\n                }\n                @case ('combobox') {\n                    <kendo-combobox [data]=\"PossibleValues\" [allowCustom]=\"true\" [(ngModel)]=\"Value\"></kendo-combobox>\n                }\n            }\n        }\n    </div>\n}\n", styles: [".record-form-row {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: start;\n    gap: 10px;\n    margin-bottom: 12px;\n    padding-top: 5px;\n    padding-bottom: 5px;\n    align-items: start; /* Ensure items are aligned at the top */\n} \n  \n  \n.record-form-row label {\n    font-weight: bold;\n    padding-right: 10px;\n    width: 240px;\n    margin-bottom: 0;\n    align-self: start; /* Align the label to the start (top) */\n}\n\n/*\n  Eliminate the default margin and padding for the markdown elements\n */\n.record-form-row markdown > p,\n.record-form-row markdown > h1,\n.record-form-row markdown > h2,\n.record-form-row markdown > h3,\n.record-form-row markdown > h4,\n.record-form-row markdown > h5,\n.record-form-row markdown > h6 {\n  margin:0 !important;\n}\n\nmarkdown {\n  font-size: 1rem; /* Adjust this value to match your app's regular text size */\n}\n\n\n@media (min-width: 768px) {\n  .record-form-row {\n    display: grid; /* Ensure grid display is used for larger screens as well */\n    grid-template-columns: auto 1fr;\n    align-items: start; /* Keep the alignment at the top */\n    gap: 10px;\n    margin-bottom: 12px;\n    padding-top: 5px;\n    padding-bottom: 5px;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n    align-self: start; /* Ensure the label is aligned to the top */\n  }\n}\n  "] }]
     }], () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], { record: [{
             type: Input
         }], EditMode: [{
@@ -361,6 +375,8 @@ MJFormField.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFormField, se
             type: Input
         }], LinkType: [{
             type: Input
+        }], LinkComponentType: [{
+            type: Input
         }], ShowLabel: [{
             type: Input
         }], DisplayName: [{

package/dist/lib/base-form-component.d.ts

@@ -1,9 +1,10 @@
 import { AfterViewInit, OnInit, OnDestroy, QueryList, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { EntityInfo, ValidationResult, BaseEntity, EntityPermissionType, EntityRelationshipInfo, RunViewParams, RecordDependency } from '@memberjunction/core';
+import { EntityInfo, ValidationResult, EntityPermissionType, EntityRelationshipInfo, RunViewParams, RecordDependency } from '@memberjunction/core';
 import { BaseRecordComponent } from './base-record-component';
-import { BaseFormComponentEventCodes, SharedService } from '@memberjunction/ng-shared';
+import { SharedService } from '@memberjunction/ng-shared';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MJTabStripComponent } from '@memberjunction/ng-tabstrip';
+import { FormEditingCompleteEvent, PendingRecordItem, BaseFormComponentEventCodes } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
 export declare abstract class BaseFormComponent extends BaseRecordComponent implements AfterViewInit, OnInit, OnDestroy {
     protected elementRef: ElementRef;
@@ -42,7 +43,7 @@ export declare abstract class BaseFormComponent extends BaseRecordComponent impl
     CalcTopAreaHeight(): void;
     private resizeSub;
     ngOnDestroy(): void;
-    protected get PendingRecords(): BaseEntity[];
+    protected get PendingRecords(): PendingRecordItem[];
     onTabSelect(e: any): void;
     StartEditMode(): void;
     handleHistoryDialog(): void;
@@ -52,6 +53,7 @@ export declare abstract class BaseFormComponent extends BaseRecordComponent impl
     SetFavoriteStatus(isFavorite: boolean): Promise<void>;
     private _isFavorite;
     get IsFavorite(): boolean;
+    private _userPermissions;
     CheckUserPermission(type: EntityPermissionType): boolean;
     get UserCanEdit(): boolean;
     get UserCanRead(): boolean;
@@ -87,12 +89,12 @@ export declare abstract class BaseFormComponent extends BaseRecordComponent impl
     GetRelatedEntityTabDisplayName(relatedEntityName: string): string;
     protected ValidatePendingRecords(): ValidationResult[];
     Validate(): ValidationResult;
-    protected RaiseEvent(eventCode: BaseFormComponentEventCodes): any;
+    protected RaiseEvent(eventCode: BaseFormComponentEventCodes): FormEditingCompleteEvent;
     SaveRecord(StopEditModeAfterSave: boolean): Promise<boolean>;
     Wait(duration: number): Promise<void>;
     CancelEdit(): void;
     protected PendingRecordsDirty(): boolean;
-    protected PopulatePendingRecords(): Promise<void>;
+    protected PopulatePendingRecords(): void;
     protected InternalSaveRecord(): Promise<boolean>;
     protected GetTabTopPosition(): number;
     private _tabMargin;

package/dist/lib/base-form-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-form-component.d.ts","sourceRoot":"","sources":["../../src/lib/base-form-component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-form-component.d.ts","sourceRoot":"","sources":["../../src/lib/base-form-component.ts"],"names":[],"mappings":"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"}

package/dist/lib/base-form-component.js

@@ -11,9 +11,9 @@ import { Directive, ViewChildren, ViewChild } from '@angular/core';
 import { Subject, debounceTime, fromEvent } from 'rxjs';
 import { EntityInfo, EntityPermissionType, Metadata, LogError } from '@memberjunction/core';
 import { BaseRecordComponent } from './base-record-component';
-import { BaseFormComponentEventCodes } from '@memberjunction/ng-shared';
 import { MJTabStripComponent } from '@memberjunction/ng-tabstrip';
 import { MJEventType, MJGlobal } from '@memberjunction/global';
+import { FormEditingCompleteEvent, BaseFormComponentEventCodes } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
@@ -46,6 +46,7 @@ export class BaseFormComponent extends BaseRecordComponent {
         this.__debug = false;
         this.resizeSub = null;
         this._isFavorite = false;
+        this._userPermissions = [];
         this._tabMargin = 10;
         this.setupSplitterLayoutDebounce();
     }
@@ -176,8 +177,16 @@ export class BaseFormComponent extends BaseRecordComponent {
     }
     CheckUserPermission(type) {
         try {
-            if (this.record)
-                return this.record.CheckPermissions(type, false);
+            if (this.record) {
+                const perm = this._userPermissions.find(x => x.permission === type);
+                if (perm)
+                    return perm.canDo;
+                else {
+                    const result = this.record.CheckPermissions(type, false);
+                    this._userPermissions.push({ permission: type, canDo: result });
+                    return result;
+                }
+            }
             else
                 return false;
         }
@@ -264,7 +273,7 @@ export class BaseFormComponent extends BaseRecordComponent {
         const results = [];
         for (let i = 0; i < this._pendingRecords.length; i++) {
             const pendingRecord = this._pendingRecords[i];
-            results.push(pendingRecord.Validate());
+            results.push(pendingRecord.entityObject.Validate());
         }
         return results;
     }
@@ -281,21 +290,16 @@ export class BaseFormComponent extends BaseRecordComponent {
         return valResults;
     }
     RaiseEvent(eventCode) {
-        const p = [];
-        const event = {
-            subEventCode: eventCode,
-            elementRef: this.elementRef,
-            returnValue: {
-                pendingRecords: p
-            }
-        };
+        const event = new FormEditingCompleteEvent();
+        event.elementRef = this.elementRef;
+        event.subEventCode = eventCode;
         MJGlobal.Instance.RaiseEvent({
             event: MJEventType.ComponentEvent,
             component: this,
             eventCode: BaseFormComponentEventCodes.BASE_CODE,
             args: event
         });
-        return event.returnValue; // if the recipients of the event provided any values, we have them now 
+        return event; // if the recipients of the event provided any values, we have them now 
     }
     SaveRecord(StopEditModeAfterSave) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -304,13 +308,13 @@ export class BaseFormComponent extends BaseRecordComponent {
                     // atempt to blur the active element to force any pending changes to be committed
                     document.activeElement.blur();
                     // notify child components of this component that they must stop editing with an EDITING_COMPLETE message via MJ_global
-                    this.RaiseEvent('EDITING_COMPLETE');
+                    this.RaiseEvent(BaseFormComponentEventCodes.EDITING_COMPLETE);
                 }
                 catch (e2) {
                     // ignore
                 }
                 if (this.record) {
-                    yield this.PopulatePendingRecords(); // do this before we validate as we must validate pending records too
+                    this.PopulatePendingRecords(); // do this before we validate as we must validate pending records too
                     const valResults = this.Validate();
                     if (valResults.Success) {
                         const result = yield this.InternalSaveRecord();
@@ -322,13 +326,15 @@ export class BaseFormComponent extends BaseRecordComponent {
                             this.sharedService.CreateSimpleNotification('Record saved succesfully', 'success', 2500);
                             return true;
                         }
-                        else
+                        else {
                             this.sharedService.CreateSimpleNotification('Error saving record', 'error', 5000);
+                        }
                     }
                     else {
                         this.sharedService.CreateSimpleNotification('Validation Errors\n' + valResults.Errors.map(x => x.Message).join('\n'), 'warning', 10000);
                     }
                 }
+                LogError("Could not save reocrd: Record not found");
                 return false; // if we get here, we have failed/validation error/etc
             }
             catch (e) {
@@ -355,10 +361,11 @@ export class BaseFormComponent extends BaseRecordComponent {
                 if (pendingRecords && pendingRecords.length > 0) {
                     // we have pending records, so we need to revert them as well
                     pendingRecords.forEach(p => {
-                        p.Revert();
+                        if (p.action === 'save')
+                            p.entityObject.Revert(); // only do this if we are saving the record, ignore deletes
                     });
                 }
-                this.RaiseEvent('REVERT_PENDING_CHANGES');
+                this.RaiseEvent(BaseFormComponentEventCodes.REVERT_PENDING_CHANGES);
             }
             // if we get here we are good to go
             this.EditMode = false;
@@ -368,32 +375,31 @@ export class BaseFormComponent extends BaseRecordComponent {
         this.PopulatePendingRecords();
         const pendingRecords = this.PendingRecords;
         if (pendingRecords && pendingRecords.length > 0) {
-            for (let i = 0; i < pendingRecords.length; i++) {
-                if (pendingRecords[i].Dirty)
+            for (const p of pendingRecords) {
+                if (p.action === 'delete')
+                    return true;
+                else if (p.entityObject.Dirty)
                     return true;
             }
         }
         return false;
     }
     PopulatePendingRecords() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // this method is called by the parent class at the right time to populate all of the pending records for a transaction
-            // all we do is talk to all of our child compoennts and get their pending records and xfer them over to the PendingRecords array
-            // the parent class will then take care of the rest...
-            this._pendingRecords = []; // wipe out our array first
-            this.RaiseEvent('EDITING_COMPLETE'); // first tell the child components to finish up their editing
-            const result = this.RaiseEvent('POPULATE_PENDING_RECORDS');
-            if (result && result.pendingRecords) {
-                for (const p of result.pendingRecords)
-                    this.PendingRecords.push(p);
-            }
-        });
+        // this method is called by the parent class at the right time to populate all of the pending records for a transaction
+        // all we do is talk to all of our child compoennts and get their pending records and xfer them over to the PendingRecords array
+        // the parent class will then take care of the rest...
+        this._pendingRecords = []; // wipe out our array first
+        this.RaiseEvent(BaseFormComponentEventCodes.EDITING_COMPLETE); // first tell the child components to finish up their editing
+        const result = this.RaiseEvent(BaseFormComponentEventCodes.POPULATE_PENDING_RECORDS);
+        if (result && result.pendingChanges) {
+            for (const p of result.pendingChanges)
+                this.PendingRecords.push(p);
+        }
     }
     InternalSaveRecord() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.record) {
-                // save the record, but first create a transaction group if we have any other stuf to submit
-                yield this.PopulatePendingRecords();
+                // DONT POPULATE PENDING RECORDS AGAIN HERE AS IT WAS DONE before Validate() was called
                 if (this._pendingRecords.length > 0) {
                     // we need to create a transaction group
                     const md = new Metadata();
@@ -401,10 +407,12 @@ export class BaseFormComponent extends BaseRecordComponent {
                     this.record.TransactionGroup = tg;
                     this.record.Save(); // DO NOT USE await - trans group.submit() is where we await
                     // now add to the rest of the pending records
-                    for (let i = 0; i < this._pendingRecords.length; i++) {
-                        const x = this._pendingRecords[i];
-                        x.TransactionGroup = tg;
-                        x.Save(); // DO NOT USE await - trans group.submit() is where we await
+                    for (const x of this._pendingRecords) {
+                        x.entityObject.TransactionGroup = tg;
+                        if (x.action === 'save')
+                            x.entityObject.Save(); // DO NOT AWAIT, part of a TG
+                        else
+                            x.entityObject.Delete(); // DO NOT AWAIT, part of a TG
                     }
                     // finally submit the TG
                     return yield tg.Submit();

package/dist/lib/link-field.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ElementRef } from "@angular/core";
+import { AfterViewInit, ElementRef, ChangeDetectorRef } from "@angular/core";
 import { BaseRecordComponent } from "./base-record-component";
 import { BaseEntity, EntityFieldInfo, EntityInfo } from "@memberjunction/core";
 import * as i0 from "@angular/core";
@@ -9,6 +9,8 @@ import * as i0 from "@angular/core";
  * components for field rendering/editing when needed.
  */
 export declare class MJLinkField extends BaseRecordComponent implements AfterViewInit {
+    private cdr;
+    constructor(cdr: ChangeDetectorRef);
     /**
      * The record object that contains the field to be rendered. This object should be an instance of BaseEntity or a derived class.
      */
@@ -21,11 +23,21 @@ export declare class MJLinkField extends BaseRecordComponent implements AfterVie
      * For users of this component, if you already know the name of the record we are linking to, provide it here to reduce DB overhead
      */
     RecordName?: string;
+    /**
+     * The type of component to show, search is a user input field that searches for records, dropdown is a dropdown list of records. The default is 'search'. If the related entity has
+     * a small list of possible records, it is often desirable to show a dropdown list instead of a search box.
+     */
+    LinkComponentType?: 'Search' | 'Dropdown';
     RelatedEntityInfo: EntityInfo | undefined;
+    private _SelectedRecord;
+    get SelectedRecord(): BaseEntity | undefined;
+    set SelectedRecord(val: BaseEntity | undefined);
     RecordLinked: boolean;
-    matchingRecords: BaseEntity[];
+    RelatedEntityRecords: BaseEntity[];
     showMatchingRecords: boolean;
+    dropDownColumns: EntityFieldInfo[];
     inputBox: ElementRef;
+    private initComponent;
     ngAfterViewInit(): Promise<void>;
     protected AttemptToLinkValue(): Promise<void>;
     get Value(): any;
@@ -35,8 +47,10 @@ export declare class MJLinkField extends BaseRecordComponent implements AfterVie
     onClearClicked(): void;
     RelatedEntityNameField: string;
     protected fetchMatchingRecords(query: string): Promise<void>;
+    protected populateDropdownList(): Promise<void>;
+    protected SetDropdownValue(): Promise<void>;
     onRecordSelected(linkedRecord: BaseEntity): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MJLinkField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MJLinkField, "mj-link-field", never, { "record": { "alias": "record"; "required": false; }; "FieldName": { "alias": "FieldName"; "required": false; }; "RecordName": { "alias": "RecordName"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJLinkField, "mj-link-field", never, { "record": { "alias": "record"; "required": false; }; "FieldName": { "alias": "FieldName"; "required": false; }; "RecordName": { "alias": "RecordName"; "required": false; }; "LinkComponentType": { "alias": "LinkComponentType"; "required": false; }; }, {}, never, never, false, never>;
 }
 //# sourceMappingURL=link-field.component.d.ts.map

package/dist/lib/link-field.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-field.component.d.ts","sourceRoot":"","sources":["../../src/lib/link-field.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAoB,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAgB,eAAe,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAC;;AAGhH;;;;;GAKG;AACH,qBAKa,WAAY,SAAQ,mBAAoB,YAAW,aAAa;IACzE;;OAEG;IACM,MAAM,EAAG,UAAU,CAAC;IAE7B;;OAEG;IACM,SAAS,EAAE,MAAM,CAAM;IAEhC;;OAEG;IACM,UAAU,CAAC,EAAE,MAAM,CAAM;IAE3B,iBAAiB,EAAE,UAAU,GAAG,SAAS,CAAa;IACtD,YAAY,EAAE,OAAO,CAAS;IAC9B,eAAe,EAAE,UAAU,EAAE,CAAM;IACnC,mBAAmB,EAAE,OAAO,CAAS;IAEH,QAAQ,EAAG,UAAU,CAAC;IAGzD,eAAe;cA4BL,kBAAkB;IAoBlC,IAAW,KAAK,IAAI,GAAG,CAEtB;IAED,IAAW,KAAK,CAAC,GAAG,EAAE,GAAG,EAGxB;IAED,IAAW,WAAW,IAAI,eAAe,GAAG,SAAS,CAEpD;IACD,IAAW,WAAW,IAAI,MAAM,CAM/B;IAGM,cAAc;IAOd,sBAAsB,EAAE,MAAM,CAAM;cAC3B,oBAAoB,CAAC,KAAK,EAAE,MAAM;IA0B3C,gBAAgB,CAAC,YAAY,EAAE,UAAU;yCA/HvC,WAAW;2CAAX,WAAW;CAqIvB"}
+{"version":3,"file":"link-field.component.d.ts","sourceRoot":"","sources":["../../src/lib/link-field.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAoB,iBAAiB,EAA4B,MAAM,eAAe,CAAC;AACpI,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAgB,eAAe,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAC;;AAGhH;;;;;GAKG;AACH,qBAKa,WAAY,SAAQ,mBAAoB,YAAW,aAAa;IAC7D,OAAO,CAAC,GAAG;gBAAH,GAAG,EAAE,iBAAiB;IAG1C;;OAEG;IACM,MAAM,EAAG,UAAU,CAAC;IAE7B;;OAEG;IACM,SAAS,EAAE,MAAM,CAAM;IAEhC;;OAEG;IACM,UAAU,CAAC,EAAE,MAAM,CAAM;IAElC;;;OAGG;IACM,iBAAiB,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvD,iBAAiB,EAAE,UAAU,GAAG,SAAS,CAAa;IAE7D,OAAO,CAAC,eAAe,CAAqC;IAC5D,IAAW,cAAc,IAAI,UAAU,GAAG,SAAS,CAElD;IACD,IAAW,cAAc,CAAC,GAAG,EAAE,UAAU,GAAG,SAAS,EAOpD;IACM,YAAY,EAAE,OAAO,CAAS;IAC9B,oBAAoB,EAAE,UAAU,EAAE,CAAM;IACxC,mBAAmB,EAAE,OAAO,CAAS;IACrC,eAAe,EAAE,eAAe,EAAE,CAAM;IAEL,QAAQ,EAAG,UAAU,CAAC;YAElD,aAAa;IA0CrB,eAAe;cAIL,kBAAkB;IAoBlC,IAAW,KAAK,IAAI,GAAG,CAEtB;IAED,IAAW,KAAK,CAAC,GAAG,EAAE,GAAG,EAQxB;IAED,IAAW,WAAW,IAAI,eAAe,GAAG,SAAS,CAEpD;IACD,IAAW,WAAW,IAAI,MAAM,CAM/B;IAGM,cAAc;IAOd,sBAAsB,EAAE,MAAM,CAAM;cAC3B,oBAAoB,CAAC,KAAK,EAAE,MAAM;cAiDlC,oBAAoB;cA4BpB,gBAAgB;IAIzB,gBAAgB,CAAC,YAAY,EAAE,UAAU;yCAnOvC,WAAW;2CAAX,WAAW;CAoPvB"}

package/dist/lib/link-field.component.js

@@ -16,27 +16,70 @@ import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
 import * as i3 from "@progress/kendo-angular-buttons";
 import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-dropdowns";
 const _c0 = ["inputBox"];
-function MJLinkField_ul_5_li_1_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
+function MJLinkField_Conditional_1_ul_4_li_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 6);
-    i0.ɵɵlistener("click", function MJLinkField_ul_5_li_1_Template_li_click_0_listener() { const record_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onRecordSelected(record_r3)); });
+    i0.ɵɵlistener("click", function MJLinkField_Conditional_1_ul_4_li_1_Template_li_click_0_listener() { const record_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onRecordSelected(record_r4)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const record_r3 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext(2);
+    const record_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r3.RelatedEntityNameField ? record_r3.Get(ctx_r3.RelatedEntityNameField) : "No Value", " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.RelatedEntityNameField ? record_r4.Get(ctx_r1.RelatedEntityNameField) : record_r4.PrimaryKey.ToString(), " ");
 } }
-function MJLinkField_ul_5_Template(rf, ctx) { if (rf & 1) {
+function MJLinkField_Conditional_1_ul_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "ul", 4);
-    i0.ɵɵtemplate(1, MJLinkField_ul_5_li_1_Template, 2, 1, "li", 5);
+    i0.ɵɵtemplate(1, MJLinkField_Conditional_1_ul_4_li_1_Template, 2, 1, "li", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r3.matchingRecords);
+    i0.ɵɵproperty("ngForOf", ctx_r1.RelatedEntityRecords);
+} }
+function MJLinkField_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 1, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJLinkField_Conditional_1_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.RecordName, $event) || (ctx_r1.RecordName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 2);
+    i0.ɵɵlistener("click", function MJLinkField_Conditional_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClearClicked()); });
+    i0.ɵɵtext(3, "Clear");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, MJLinkField_Conditional_1_ul_4_Template, 2, 1, "ul", 3);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.RecordLinked ? "record-linked" : "");
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.RecordName);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", ctx_r1.showMatchingRecords);
+} }
+function MJLinkField_Conditional_2_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-combobox-column", 9);
+} if (rf & 2) {
+    const d_r6 = ctx.$implicit;
+    i0.ɵɵproperty("field", d_r6.Name)("title", d_r6.DisplayNameOrName);
+} }
+function MJLinkField_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-multicolumncombobox", 8);
+    i0.ɵɵtwoWayListener("valueChange", function MJLinkField_Conditional_2_Conditional_0_Template_kendo_multicolumncombobox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.SelectedRecord, $event) || (ctx_r1.SelectedRecord = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵrepeaterCreate(1, MJLinkField_Conditional_2_Conditional_0_For_2_Template, 1, 2, "kendo-combobox-column", 9, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("data", ctx_r1.RelatedEntityRecords)("textField", ctx_r1.RelatedEntityInfo.NameField ? ctx_r1.RelatedEntityInfo.NameField.Name : ctx_r1.RelatedEntityInfo.FirstPrimaryKey.Name)("valueField", ctx_r1.RelatedEntityInfo.FirstPrimaryKey.Name);
+    i0.ɵɵtwoWayProperty("value", ctx_r1.SelectedRecord);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.dropDownColumns);
+} }
+function MJLinkField_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MJLinkField_Conditional_2_Conditional_0_Template, 3, 4, "kendo-multicolumncombobox", 7);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.RelatedEntityInfo ? 0 : -1);
 } }
 /**
  * This component is used to automatically generate a UI for any field in a given BaseEntity object. The CodeGen tool will generate forms and form sections that
@@ -45,8 +88,9 @@ function MJLinkField_ul_5_Template(rf, ctx) { if (rf & 1) {
  * components for field rendering/editing when needed.
  */
 export class MJLinkField extends BaseRecordComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         /**
          * The name of the field in the entity to be rendered.
          */
@@ -55,37 +99,74 @@ export class MJLinkField extends BaseRecordComponent {
          * For users of this component, if you already know the name of the record we are linking to, provide it here to reduce DB overhead
          */
         this.RecordName = '';
+        /**
+         * The type of component to show, search is a user input field that searches for records, dropdown is a dropdown list of records. The default is 'search'. If the related entity has
+         * a small list of possible records, it is often desirable to show a dropdown list instead of a search box.
+         */
+        this.LinkComponentType = 'Search';
         this.RelatedEntityInfo = undefined;
+        this._SelectedRecord = undefined;
         this.RecordLinked = false;
-        this.matchingRecords = [];
+        this.RelatedEntityRecords = [];
         this.showMatchingRecords = false;
+        this.dropDownColumns = [];
         this.RelatedEntityNameField = '';
     }
-    ngAfterViewInit() {
+    get SelectedRecord() {
+        return this._SelectedRecord;
+    }
+    set SelectedRecord(val) {
+        this._SelectedRecord = val;
+        if (val) {
+            this.Value = val.FirstPrimaryKey.Value;
+        }
+        else
+            this.Value = null;
+    }
+    initComponent() {
         return __awaiter(this, void 0, void 0, function* () {
+            var _a;
             if (!this.record)
                 throw new Error('record property is required');
             if (!this.FieldName)
                 throw new Error('FieldName property is required');
-            yield this.AttemptToLinkValue();
-            fromEvent(this.inputBox.nativeElement, 'input')
-                .pipe(debounceTime(300))
-                .subscribe(() => {
-                if (!this.RecordLinked) {
-                    this.showMatchingRecords = true;
-                    this.fetchMatchingRecords(this.inputBox.nativeElement.value);
-                }
-            });
-            fromEvent(this.inputBox.nativeElement, 'keydown').subscribe((event) => {
-                if (this.RecordLinked && !['Backspace', 'Delete'].includes(event.key)) {
-                    event.preventDefault();
-                }
-                else if (['Backspace', 'Delete'].includes(event.key)) {
-                    this.RecordName = '';
-                    this.Value = null;
-                    this.RecordLinked = false;
+            const relatedEntityID = (_a = this.EntityField) === null || _a === void 0 ? void 0 : _a.RelatedEntityID;
+            const md = new Metadata();
+            if (relatedEntityID) {
+                this.RelatedEntityInfo = md.EntityByID(relatedEntityID);
+                this.cdr.detectChanges();
+            }
+            if (this.LinkComponentType === 'Search') {
+                yield this.AttemptToLinkValue();
+                if (this.inputBox) {
+                    fromEvent(this.inputBox.nativeElement, 'input')
+                        .pipe(debounceTime(300))
+                        .subscribe(() => {
+                        if (!this.RecordLinked) {
+                            this.showMatchingRecords = true;
+                            this.fetchMatchingRecords(this.inputBox.nativeElement.value);
+                        }
+                    });
+                    fromEvent(this.inputBox.nativeElement, 'keydown').subscribe((event) => {
+                        if (this.RecordLinked && !['Backspace', 'Delete'].includes(event.key)) {
+                            event.preventDefault();
+                        }
+                        else if (['Backspace', 'Delete'].includes(event.key)) {
+                            this.RecordName = '';
+                            this.Value = null;
+                            this.RecordLinked = false;
+                        }
+                    });
                 }
-            });
+            }
+            else {
+                yield this.populateDropdownList();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.initComponent();
         });
     }
     AttemptToLinkValue() {
@@ -114,7 +195,12 @@ export class MJLinkField extends BaseRecordComponent {
     }
     set Value(val) {
         this.record.Set(this.FieldName, val);
-        this.AttemptToLinkValue();
+        if (this.LinkComponentType === 'Search') {
+            this.AttemptToLinkValue();
+        }
+        else {
+            this.SetDropdownValue();
+        }
     }
     get EntityField() {
         var _a;
@@ -135,17 +221,35 @@ export class MJLinkField extends BaseRecordComponent {
     }
     fetchMatchingRecords(query) {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            const relatedEntityID = (_a = this.EntityField) === null || _a === void 0 ? void 0 : _a.RelatedEntityID;
-            const md = new Metadata();
+            var _a;
             this.RecordLinked = false;
-            this.matchingRecords = [];
-            if (relatedEntityID) {
-                this.RelatedEntityInfo = md.EntityByID(relatedEntityID);
-                // do a lookup using runView for records that have the Name field that start with the query
+            this.RelatedEntityRecords = [];
+            if (this.RelatedEntityInfo) {
                 this.RelatedEntityNameField = this.RelatedEntityInfo.NameField ? this.RelatedEntityInfo.NameField.Name : '';
+                const escapedQuery = query.replace(/'/g, "''");
+                let filter = '';
+                if (!this.RelatedEntityInfo.FirstPrimaryKey.NeedsQuotes) {
+                    // the pkey is a number, so let's see if the query is a number
+                    if (isNaN(Number(query)) && this.RelatedEntityNameField === '') {
+                        // if the query is not a number (for number pkeys) and we don't have a name field to search on, then we can't search
+                        return;
+                    }
+                    else {
+                        // if we get here it means we either have a RelatedEntityNameField to search on or the query is a number
+                        if (!isNaN(Number(query))) {
+                            // if the query is a number, then we can search on the pkey
+                            filter = `[${this.RelatedEntityInfo.FirstPrimaryKey.Name}] = ${query}`;
+                        }
+                    }
+                }
+                else {
+                    // the pkey is a string, so we can search on it no matter what the query is, a number, not a number, whatever
+                    filter = `[${this.RelatedEntityInfo.FirstPrimaryKey.Name}] = '${escapedQuery}'`;
+                }
                 if (this.RelatedEntityNameField) {
-                    const filter = `[${this.RelatedEntityNameField}] LIKE '${query}%'`;
+                    filter = `[${this.RelatedEntityNameField}] LIKE '${escapedQuery}%'${filter.length > 0 ? ' OR ' + filter : ''}`;
+                }
+                if (filter && filter.length > 0) {
                     const rv = new RunView();
                     const result = yield rv.RunView({
                         EntityName: this.RelatedEntityInfo.Name,
@@ -154,55 +258,90 @@ export class MJLinkField extends BaseRecordComponent {
                         ResultType: 'entity_object',
                         MaxRows: 5
                     });
-                    if (result && ((_b = result.Results) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                        this.matchingRecords = result.Results.filter(record => record[this.RelatedEntityNameField].toLowerCase().includes(query.toLowerCase()));
+                    if (result && ((_a = result.Results) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                        this.RelatedEntityRecords = result.Results;
                     }
                 }
+                else {
+                    this.RelatedEntityRecords = [{ Name: "Can't search on " + this.RelatedEntityInfo.Name + ' records' }]; // this will have the effect of a single record in the list that says "Can't search on..."
+                }
             }
         });
     }
+    populateDropdownList() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.RelatedEntityInfo) {
+                this.dropDownColumns = this.RelatedEntityInfo.Fields.filter(f => f.DefaultInView || f.IsPrimaryKey || f.IsNameField);
+                this.cdr.detectChanges();
+                // run a view to get the records
+                const rv = new RunView();
+                const result = yield rv.RunView({
+                    EntityName: this.RelatedEntityInfo.Name,
+                    ExtraFilter: '',
+                    OrderBy: this.RelatedEntityNameField,
+                    ResultType: 'entity_object',
+                });
+                if (result && result.Success) {
+                    this.RelatedEntityRecords = result.Results;
+                    // look for a match between the records we have, finding a match between our this.Value and the pkey of the record
+                    const match = this.RelatedEntityRecords.find(r => r.FirstPrimaryKey.Value === this.Value);
+                    if (match) {
+                        this.SelectedRecord = match;
+                        this.SetDropdownValue();
+                    }
+                    this.cdr.detectChanges();
+                }
+            }
+        });
+    }
+    SetDropdownValue() {
+        return __awaiter(this, void 0, void 0, function* () {
+        });
+    }
     onRecordSelected(linkedRecord) {
-        this.RecordName = linkedRecord.Get(this.RelatedEntityNameField);
-        this.RecordLinked = true;
-        this.showMatchingRecords = false;
-        this.record.Set(this.FieldName, linkedRecord.FirstPrimaryKey.Value);
+        if (linkedRecord.EntityInfo) {
+            this.SelectedRecord = linkedRecord;
+            this.RecordName = this.RelatedEntityNameField ? linkedRecord.Get(this.RelatedEntityNameField) : linkedRecord.PrimaryKey.ToString();
+            this.RecordLinked = true;
+            this.showMatchingRecords = false;
+            this.record.Set(this.FieldName, linkedRecord.FirstPrimaryKey.Value);
+        }
+        else {
+            // this means that we really don't have a selected record and we were just showing the "Can't search on..." record
+            this.showMatchingRecords = false;
+            this.RecordLinked = false;
+            this.RecordName = '';
+        }
+        this.cdr.detectChanges();
     }
 }
-MJLinkField.ɵfac = /*@__PURE__*/ (() => { let ɵMJLinkField_BaseFactory; return function MJLinkField_Factory(t) { return (ɵMJLinkField_BaseFactory || (ɵMJLinkField_BaseFactory = i0.ɵɵgetInheritedFactory(MJLinkField)))(t || MJLinkField); }; })();
+MJLinkField.ɵfac = function MJLinkField_Factory(t) { return new (t || MJLinkField)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 MJLinkField.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJLinkField, selectors: [["mj-link-field"]], viewQuery: function MJLinkField_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0, 7);
+        i0.ɵɵviewQuery(_c0, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputBox = _t.first);
-    } }, inputs: { record: "record", FieldName: "FieldName", RecordName: "RecordName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 3, consts: [["inputBox", ""], ["type", "text", "kendoTextBox", "", 1, "input-box", 3, "ngModelChange", "ngClass", "ngModel"], ["kendoButton", "", 3, "click"], ["class", "matching-records", 4, "ngIf"], [1, "matching-records"], [3, "click", 4, "ngFor", "ngForOf"], [3, "click"]], template: function MJLinkField_Template(rf, ctx) { if (rf & 1) {
-        const _r1 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div")(1, "input", 1, 0);
-        i0.ɵɵtwoWayListener("ngModelChange", function MJLinkField_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.RecordName, $event) || (ctx.RecordName = $event); return i0.ɵɵresetView($event); });
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "button", 2);
-        i0.ɵɵlistener("click", function MJLinkField_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onClearClicked()); });
-        i0.ɵɵtext(4, "Clear");
-        i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(5, MJLinkField_ul_5_Template, 2, 1, "ul", 3);
+    } }, inputs: { record: "record", FieldName: "FieldName", RecordName: "RecordName", LinkComponentType: "LinkComponentType" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["inputBox", ""], ["type", "text", "kendoTextBox", "", 1, "input-box", 3, "ngModelChange", "ngClass", "ngModel"], ["kendoButton", "", 3, "click"], ["class", "matching-records", 4, "ngIf"], [1, "matching-records"], [3, "click", 4, "ngFor", "ngForOf"], [3, "click"], [3, "data", "textField", "valueField", "value"], [3, "valueChange", "data", "textField", "valueField", "value"], [3, "field", "title"]], template: function MJLinkField_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div");
+        i0.ɵɵtemplate(1, MJLinkField_Conditional_1_Template, 5, 3)(2, MJLinkField_Conditional_2_Template, 1, 1);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance();
-        i0.ɵɵproperty("ngClass", ctx.RecordLinked ? "record-linked" : "");
-        i0.ɵɵtwoWayProperty("ngModel", ctx.RecordName);
-        i0.ɵɵadvance(4);
-        i0.ɵɵproperty("ngIf", ctx.showMatchingRecords);
-    } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.TextBoxDirective], styles: [".record-linked[_ngcontent-%COMP%] {\n  color: darkblue;\n  text-decoration: underline;\n}\n\n.input-box[_ngcontent-%COMP%] {\n    width: 400px;\n}\n\nbutton[_ngcontent-%COMP%] {\n    width: 50px;\n}\n\n\n.matching-records[_ngcontent-%COMP%] {\n    width: 400px;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid #ccc;\n}\n\n.matching-records[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    padding: 8px;\n    cursor: pointer;\n}\n\n.matching-records[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {\n    background-color: #f0f0f0;\n}"] });
+        i0.ɵɵconditional(ctx.LinkComponentType === "Search" ? 1 : 2);
+    } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.TextBoxDirective, i5.MultiColumnComboBoxComponent, i5.ComboBoxColumnComponent], styles: [".record-linked[_ngcontent-%COMP%] {\n  color: darkblue;\n  text-decoration: underline;\n}\n\n.input-box[_ngcontent-%COMP%] {\n    width: 400px;\n}\n\nbutton[_ngcontent-%COMP%] {\n    width: 50px;\n}\n\n\n.matching-records[_ngcontent-%COMP%] {\n    width: 400px;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid #ccc;\n}\n\n.matching-records[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    padding: 8px;\n    cursor: pointer;\n}\n\n.matching-records[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {\n    background-color: #f0f0f0;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJLinkField, [{
         type: Component,
-        args: [{ selector: 'mj-link-field', template: "<!-- <input type=\"text\" class=\"input-box\" [ngClass]=\"RecordLinked ? 'record-linked' : ''\" [(ngModel)]=\"RecordName\" kendoTextBox /><button kendoButton (click)=\"onClearClicked()\">Clear</button>\n -->\n\n<div>\n    <input \n        #inputBox\n        type=\"text\" \n        class=\"input-box\" \n        [ngClass]=\"RecordLinked ? 'record-linked' : ''\" \n        [(ngModel)]=\"RecordName\" \n        kendoTextBox \n    />\n    <button kendoButton (click)=\"onClearClicked()\">Clear</button>\n\n    <ul *ngIf=\"showMatchingRecords\" class=\"matching-records\">\n        <li *ngFor=\"let record of matchingRecords\" (click)=\"onRecordSelected(record)\">\n            {{ RelatedEntityNameField ? record.Get(RelatedEntityNameField) : 'No Value' }}\n        </li>\n    </ul>\n</div>\n", styles: [".record-linked {\n  color: darkblue;\n  text-decoration: underline;\n}\n\n.input-box {\n    width: 400px;\n}\n\nbutton {\n    width: 50px;\n}\n\n\n.matching-records {\n    width: 400px;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid #ccc;\n}\n\n.matching-records li {\n    padding: 8px;\n    cursor: pointer;\n}\n\n.matching-records li:hover {\n    background-color: #f0f0f0;\n}\n"] }]
-    }], null, { record: [{
+        args: [{ selector: 'mj-link-field', template: "<div>\n    @if (LinkComponentType === 'Search') {\n        <input \n            #inputBox\n            type=\"text\" \n            class=\"input-box\" \n            [ngClass]=\"RecordLinked ? 'record-linked' : ''\" \n            [(ngModel)]=\"RecordName\" \n            kendoTextBox \n        />\n        <button kendoButton (click)=\"onClearClicked()\">Clear</button>\n\n        <ul *ngIf=\"showMatchingRecords\" class=\"matching-records\">\n            <li *ngFor=\"let record of RelatedEntityRecords\" (click)=\"onRecordSelected(record)\">\n                {{ RelatedEntityNameField ? record.Get(RelatedEntityNameField) : record.PrimaryKey.ToString() }}\n            </li>\n        </ul>\n    }\n    @else {\n        @if (RelatedEntityInfo) {\n            <kendo-multicolumncombobox \n                [data]=\"RelatedEntityRecords\"\n                [textField]=\"RelatedEntityInfo.NameField ? RelatedEntityInfo.NameField.Name : RelatedEntityInfo.FirstPrimaryKey.Name\"\n                [valueField]=\"RelatedEntityInfo.FirstPrimaryKey.Name\"\n                [(value)]=\"SelectedRecord\"\n                >\n                @for (d of dropDownColumns; track d) {\n                    <kendo-combobox-column\n                        [field]=\"d.Name\"\n                        [title]=\"d.DisplayNameOrName\"\n                    >\n                    </kendo-combobox-column>\n                }\n            </kendo-multicolumncombobox> \n        }\n    }\n</div>", styles: [".record-linked {\n  color: darkblue;\n  text-decoration: underline;\n}\n\n.input-box {\n    width: 400px;\n}\n\nbutton {\n    width: 50px;\n}\n\n\n.matching-records {\n    width: 400px;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid #ccc;\n}\n\n.matching-records li {\n    padding: 8px;\n    cursor: pointer;\n}\n\n.matching-records li:hover {\n    background-color: #f0f0f0;\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { record: [{
             type: Input
         }], FieldName: [{
             type: Input
         }], RecordName: [{
             type: Input
+        }], LinkComponentType: [{
+            type: Input
         }], inputBox: [{
             type: ViewChild,
-            args: ['inputBox', { static: true }]
+            args: ['inputBox', { static: false }]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJLinkField, { className: "MJLinkField", filePath: "src/lib/link-field.component.ts", lineNumber: 17 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-base-forms",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "description": "MemberJunction: Angular Base Form Components",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -25,14 +25,15 @@
     "@angular/router": "18.0.2"
   },
   "dependencies": {
-    "@memberjunction/global": "1.7.1",
-    "@memberjunction/core": "1.7.1",
-    "@memberjunction/ng-code-editor": "1.7.1",
-    "@memberjunction/ng-shared": "1.7.1",
-    "@memberjunction/ng-tabstrip": "1.7.1",
-    "@memberjunction/ng-link-directives": "1.7.1",
-    "@memberjunction/ng-container-directives": "1.7.1",
-    "@memberjunction/ng-record-changes": "1.7.1",
+    "@memberjunction/global": "1.8.1",
+    "@memberjunction/core": "1.8.1",
+    "@memberjunction/ng-code-editor": "1.8.1",
+    "@memberjunction/ng-shared": "1.8.1",
+    "@memberjunction/ng-tabstrip": "1.8.1",
+    "@memberjunction/ng-link-directives": "1.8.1",
+    "@memberjunction/ng-container-directives": "1.8.1",
+    "@memberjunction/ng-record-changes": "1.8.1",
+    "@memberjunction/ng-base-types": "1.8.1",
     "@progress/kendo-angular-buttons": "16.2.0",
     "@progress/kendo-angular-dropdowns": "16.2.0",
     "@progress/kendo-angular-inputs": "16.2.0",