@memberjunction/ng-base-forms 1.8.0 → 2.0.0

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,7 +105,7 @@ 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();
@@ -192,7 +192,7 @@ function MJFormField_Conditional_0_div_1_Conditional_3_Template(rf, ctx) { if (r
 } }
 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, 8, 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);
@@ -313,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.
          */
@@ -353,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", "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) {
+    } }, 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 ('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  "] }]
+        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: [{
@@ -371,6 +375,8 @@ MJFormField.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFormField, se
             type: Input
         }], LinkType: [{
             type: Input
+        }], LinkComponentType: [{
+            type: Input
         }], ShowLabel: [{
             type: Input
         }], DisplayName: [{
@@ -385,4 +391,4 @@ MJFormField.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFormField, se
             type: ViewChild,
             args: ['markdown', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFormField, { className: "MJFormField", filePath: "src/lib/base-field-component.ts", lineNumber: 18 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFormField, { className: "MJFormField" }); })();

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;cAoDlC,oBAAoB;cA4BpB,gBAAgB;IAIzB,gBAAgB,CAAC,YAAY,EAAE,UAAU;yCAtOvC,WAAW;2CAAX,WAAW;CAuPvB"}

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,38 @@ 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 if (this.RelatedEntityInfo.FirstPrimaryKey.Type.trim().toLowerCase() !== 'uniqueidentifier') {
+                    // the pkey is a string that is NOT a unique identifier, so we can search on it no matter what the query is, a number, not a number, whatever
+                    filter = `[${this.RelatedEntityInfo.FirstPrimaryKey.Name}] = '${escapedQuery}'`;
+                }
+                else {
+                    // we can't search on the pkey so leave it alone
+                }
                 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 +261,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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJLinkField, { className: "MJLinkField" }); })();

package/dist/lib/section-loader-component.js

@@ -75,4 +75,4 @@ SectionLoaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sect
             type: ViewChild,
             args: ['container', { read: ViewContainerRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SectionLoaderComponent, { className: "SectionLoaderComponent", filePath: "src/lib/section-loader-component.ts", lineNumber: 10 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SectionLoaderComponent, { className: "SectionLoaderComponent" }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-base-forms",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "description": "MemberJunction: Angular Base Form Components",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -25,21 +25,21 @@
     "@angular/router": "18.0.2"
   },
   "dependencies": {
-    "@memberjunction/global": "1.8.0",
-    "@memberjunction/core": "1.8.0",
-    "@memberjunction/ng-code-editor": "1.8.0",
-    "@memberjunction/ng-shared": "1.8.0",
-    "@memberjunction/ng-tabstrip": "1.8.0",
-    "@memberjunction/ng-link-directives": "1.8.0",
-    "@memberjunction/ng-container-directives": "1.8.0",
-    "@memberjunction/ng-record-changes": "1.8.0",
-    "@memberjunction/ng-base-types": "1.8.0",
+    "@memberjunction/global": "2.0.0",
+    "@memberjunction/core": "2.0.0",
+    "@memberjunction/ng-code-editor": "2.0.0",
+    "@memberjunction/ng-shared": "2.0.0",
+    "@memberjunction/ng-tabstrip": "2.0.0",
+    "@memberjunction/ng-link-directives": "2.0.0",
+    "@memberjunction/ng-container-directives": "2.0.0",
+    "@memberjunction/ng-record-changes": "2.0.0",
+    "@memberjunction/ng-base-types": "2.0.0",
     "@progress/kendo-angular-buttons": "16.2.0",
     "@progress/kendo-angular-dropdowns": "16.2.0",
     "@progress/kendo-angular-inputs": "16.2.0",
     "@progress/kendo-angular-dateinputs": "16.2.0",
     "@progress/kendo-angular-dialog": "16.2.0",
-    "ngx-markdown": "18.0.0",
+    "ngx-markdown": "^18.0.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.3.0"
   },