@memberjunction/ng-base-forms 1.4.0 → 1.5.0

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

@@ -1,6 +1,7 @@
-import { EventEmitter } from '@angular/core';
-import { BaseEntity } from '@memberjunction/core';
+import { EventEmitter, AfterViewInit, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { BaseEntity, EntityFieldInfo } from '@memberjunction/core';
 import { BaseRecordComponent } from './base-record-component';
+import { MarkdownComponent } from 'ngx-markdown';
 import * as i0 from "@angular/core";
 /**
  * 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
@@ -8,7 +9,9 @@ import * as i0 from "@angular/core";
  * elements to render a field as desired in a custom form, think of this component as a nice "base" component you can use for many cases, and you can create custom
  * components for field rendering/editing when needed.
  */
-export declare class MJFormField extends BaseRecordComponent {
+export declare class MJFormField extends BaseRecordComponent implements AfterViewInit {
+    private renderer;
+    private cdr;
     /**
      * The record object that contains the field to be rendered. This object should be an instance of BaseEntity or a derived class.
      */
@@ -40,6 +43,7 @@ export declare class MJFormField extends BaseRecordComponent {
      */
     get DisplayName(): string;
     set DisplayName(newValue: string);
+    get ExtendedType(): string;
     private _possibleValues;
     /**
      * The possible values for the field. This is only used when the field is a dropdownlist or combobox. The possible values are derived from the EntityFieldValues in the entity field metadata.
@@ -54,6 +58,11 @@ export declare class MJFormField extends BaseRecordComponent {
      * Returns true if the field is read only. This is determined by the ReadOnly property in the entity field metadata.
      */
     get IsFieldReadOnly(): boolean;
+    get FieldInfo(): EntityFieldInfo;
+    markdown: MarkdownComponent | undefined;
+    private observer;
+    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>;
 }

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,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAG9D;;;;;GAKG;AACH,qBAKa,WAAY,SAAQ,mBAAmB;IAChD;;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,CAAa;IAC/H;;;OAGG;IACM,QAAQ,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAU;IAEhE;;OAEG;IACM,SAAS,EAAE,OAAO,CAAQ;IAEnC,OAAO,CAAC,YAAY,CAAuB;IAC3C;;OAEG;IACH,IACW,WAAW,IAAI,MAAM,CAS/B;IAED,IAAW,WAAW,CAAC,QAAQ,EAAE,MAAM,EAEtC;IAED,OAAO,CAAC,eAAe,CAAyB;IAChD;;;OAGG;IACH,IAAa,cAAc,IAAI,MAAM,EAAE,CAStC;IAED,IAAI,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,EAEpC;IAED,IACW,KAAK,IAAI,GAAG,CAWtB;IACD,IAAW,KAAK,CAAC,QAAQ,EAAE,GAAG,EAM7B;IACS,WAAW,oBAA2B;IAEhD;;OAEG;IACH,IAAW,eAAe,IAAI,OAAO,CAMpC;yCAnGQ,WAAW;2CAAX,WAAW;CAoGvB"}
+{"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;IAqH7D,OAAO,CAAC,QAAQ;IAAa,OAAO,CAAC,GAAG;IApHpD;;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,CAAa;IAC/H;;;OAGG;IACM,QAAQ,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAU;IAEhE;;OAEG;IACM,SAAS,EAAE,OAAO,CAAQ;IAEnC,OAAO,CAAC,YAAY,CAAuB;IAC3C;;OAEG;IACH,IACW,WAAW,IAAI,MAAM,CAS/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,CAStC;IAED,IAAI,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,EAEpC;IAED,IACW,KAAK,IAAI,GAAG,CAWtB;IACD,IAAW,KAAK,CAAC,QAAQ,EAAE,GAAG,EAM7B;IACS,WAAW,oBAA2B;IAEhD;;OAEG;IACH,IAAW,eAAe,IAAI,OAAO,CAMpC;IAED,IAAW,SAAS,IAAI,eAAe,CAMtC;IAGyC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAClF,OAAO,CAAC,QAAQ,CAA+B;gBAE3B,QAAQ,EAAE,SAAS,EAAU,GAAG,EAAE,iBAAiB;IAIvE,eAAe,IAAI,IAAI;yCAzHd,WAAW;2CAAX,WAAW;CAiMvB"}

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

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { EntityFieldTSType } from '@memberjunction/core';
 import { BaseRecordComponent } from './base-record-component';
 import * as i0 from "@angular/core";
@@ -8,6 +8,10 @@ import * as i3 from "@progress/kendo-angular-inputs";
 import * as i4 from "@progress/kendo-angular-dateinputs";
 import * as i5 from "@progress/kendo-angular-dropdowns";
 import * as i6 from "@memberjunction/ng-link-directives";
+import * as i7 from "@memberjunction/ng-container-directives";
+import * as i8 from "ngx-markdown";
+import * as i9 from "./link-field.component";
+const _c0 = ["markdown"];
 function MJFormField_Conditional_0_div_0_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label");
     i0.ɵɵtext(1);
@@ -17,17 +21,38 @@ function MJFormField_Conditional_0_div_0_label_1_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r3.DisplayName);
 } }
-function MJFormField_Conditional_0_div_0_Case_2_Template(rf, ctx) { if (rf & 1) {
+function MJFormField_Conditional_0_div_0_Case_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "pre");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r8 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r8.record.Get(ctx_r8.FieldName));
+} }
+function MJFormField_Conditional_0_div_0_Case_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "markdown", 3, 4);
+} if (rf & 2) {
+    const ctx_r9 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("data", ctx_r9.record.Get(ctx_r9.FieldName));
+} }
+function MJFormField_Conditional_0_div_0_Case_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext(3);
+    const ctx_r10 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r4.FormatValue(ctx_r4.FieldName, 0));
+    i0.ɵɵtextInterpolate(ctx_r10.FormatValue(ctx_r10.FieldName, 0));
+} }
+function MJFormField_Conditional_0_div_0_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MJFormField_Conditional_0_div_0_Case_2_Conditional_0_Template, 2, 1, "pre")(1, MJFormField_Conditional_0_div_0_Case_2_Conditional_1_Template, 2, 1)(2, MJFormField_Conditional_0_div_0_Case_2_Conditional_2_Template, 2, 1);
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(0, ctx_r4.ExtendedType === "Code" ? 0 : ctx_r4.FieldInfo.Length === -1 ? 1 : 2);
 } }
 function MJFormField_Conditional_0_div_0_Case_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 3);
+    i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -37,7 +62,7 @@ function MJFormField_Conditional_0_div_0_Case_3_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtextInterpolate(ctx_r5.FormatValue(ctx_r5.FieldName, 0));
 } }
 function MJFormField_Conditional_0_div_0_Case_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 4);
+    i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -47,7 +72,7 @@ function MJFormField_Conditional_0_div_0_Case_4_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtextInterpolate(ctx_r6.FormatValue(ctx_r6.FieldName, 0));
 } }
 function MJFormField_Conditional_0_div_0_Case_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 5);
+    i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -58,7 +83,7 @@ function MJFormField_Conditional_0_div_0_Case_5_Template(rf, ctx) { if (rf & 1)
 } }
 function MJFormField_Conditional_0_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵtemplate(1, MJFormField_Conditional_0_div_0_label_1_Template, 2, 1, "label", 2)(2, MJFormField_Conditional_0_div_0_Case_2_Template, 2, 1)(3, MJFormField_Conditional_0_div_0_Case_3_Template, 2, 2)(4, MJFormField_Conditional_0_div_0_Case_4_Template, 2, 2)(5, MJFormField_Conditional_0_div_0_Case_5_Template, 2, 3);
+    i0.ɵɵtemplate(1, MJFormField_Conditional_0_div_0_label_1_Template, 2, 1, "label", 2)(2, MJFormField_Conditional_0_div_0_Case_2_Template, 3, 1)(3, MJFormField_Conditional_0_div_0_Case_3_Template, 2, 2)(4, MJFormField_Conditional_0_div_0_Case_4_Template, 2, 2)(5, MJFormField_Conditional_0_div_0_Case_5_Template, 2, 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -68,94 +93,107 @@ function MJFormField_Conditional_0_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(2, (MJFormField_Conditional_0_div_0_contFlowTmp = ctx_r1.LinkType) === "None" ? 2 : MJFormField_Conditional_0_div_0_contFlowTmp === "Email" ? 3 : MJFormField_Conditional_0_div_0_contFlowTmp === "URL" ? 4 : MJFormField_Conditional_0_div_0_contFlowTmp === "Record" ? 5 : -1);
 } }
-function MJFormField_Conditional_0_div_1_label_1_Template(rf, ctx) { if (rf & 1) {
+function MJFormField_Conditional_0_div_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r8 = i0.ɵɵnextContext(3);
+    const ctx_r12 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r8.DisplayName);
+    i0.ɵɵtextInterpolate(ctx_r12.DisplayName);
+} }
+function MJFormField_Conditional_0_div_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-link-field", 8);
+} if (rf & 2) {
+    const ctx_r13 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("record", ctx_r13.record)("FieldName", ctx_r13.FieldName);
 } }
-function MJFormField_Conditional_0_div_1_Case_2_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-textbox", 6);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Case_2_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r16 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r16.Value, $event) || (ctx_r16.Value = $event); return i0.ɵɵresetView($event); });
+function MJFormField_Conditional_0_div_1_Conditional_3_Case_0_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-textbox", 9);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_0_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r22 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r22.Value, $event) || (ctx_r22.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext(3);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r9.Value);
+    const ctx_r15 = i0.ɵɵnextContext(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r15.Value);
 } }
-function MJFormField_Conditional_0_div_1_Case_3_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-textarea", 6);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Case_3_Template_kendo_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r18 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r18.Value, $event) || (ctx_r18.Value = $event); return i0.ɵɵresetView($event); });
+function MJFormField_Conditional_0_div_1_Conditional_3_Case_1_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-textarea", 10);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_1_Template_kendo_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r24 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r24.Value, $event) || (ctx_r24.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r10 = i0.ɵɵnextContext(3);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r10.Value);
+    const ctx_r16 = i0.ɵɵnextContext(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r16.Value);
+    i0.ɵɵproperty("fillWidth", ctx_r16.ShowLabel ? false : true)("fillHeight", ctx_r16.ShowLabel ? false : true);
 } }
-function MJFormField_Conditional_0_div_1_Case_4_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-numerictextbox", 7);
-    i0.ɵɵtwoWayListener("valueChange", function MJFormField_Conditional_0_div_1_Case_4_Template_kendo_numerictextbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r20.Value, $event) || (ctx_r20.Value = $event); return i0.ɵɵresetView($event); });
+function MJFormField_Conditional_0_div_1_Conditional_3_Case_2_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-numerictextbox", 11);
+    i0.ɵɵtwoWayListener("valueChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_2_Template_kendo_numerictextbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r26 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r26.Value, $event) || (ctx_r26.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r11 = i0.ɵɵnextContext(3);
-    i0.ɵɵtwoWayProperty("value", ctx_r11.Value);
+    const ctx_r17 = i0.ɵɵnextContext(4);
+    i0.ɵɵtwoWayProperty("value", ctx_r17.Value);
 } }
-function MJFormField_Conditional_0_div_1_Case_5_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-datepicker", 7);
-    i0.ɵɵtwoWayListener("valueChange", function MJFormField_Conditional_0_div_1_Case_5_Template_kendo_datepicker_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r22 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r22.Value, $event) || (ctx_r22.Value = $event); return i0.ɵɵresetView($event); });
+function MJFormField_Conditional_0_div_1_Conditional_3_Case_3_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-datepicker", 11);
+    i0.ɵɵtwoWayListener("valueChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_3_Template_kendo_datepicker_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r28 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r28.Value, $event) || (ctx_r28.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r12 = i0.ɵɵnextContext(3);
-    i0.ɵɵtwoWayProperty("value", ctx_r12.Value);
+    const ctx_r18 = i0.ɵɵnextContext(4);
+    i0.ɵɵtwoWayProperty("value", ctx_r18.Value);
 } }
-function MJFormField_Conditional_0_div_1_Case_6_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 8);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Case_6_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r24 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r24.Value, $event) || (ctx_r24.Value = $event); return i0.ɵɵresetView($event); });
+function MJFormField_Conditional_0_div_1_Conditional_3_Case_4_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 12);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_4_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r30 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r30.Value, $event) || (ctx_r30.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r13 = i0.ɵɵnextContext(3);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r13.Value);
+    const ctx_r19 = i0.ɵɵnextContext(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r19.Value);
 } }
-function MJFormField_Conditional_0_div_1_Case_7_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 9);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Case_7_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r26 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r26.Value, $event) || (ctx_r26.Value = $event); return i0.ɵɵresetView($event); });
+function MJFormField_Conditional_0_div_1_Conditional_3_Case_5_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 13);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_5_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r32 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r32.Value, $event) || (ctx_r32.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r14 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("data", ctx_r14.PossibleValues);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r14.Value);
+    const ctx_r20 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("data", ctx_r20.PossibleValues);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r20.Value);
 } }
-function MJFormField_Conditional_0_div_1_Case_8_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-combobox", 10);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Case_8_Template_kendo_combobox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r28 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r28.Value, $event) || (ctx_r28.Value = $event); return i0.ɵɵresetView($event); });
+function MJFormField_Conditional_0_div_1_Conditional_3_Case_6_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-combobox", 14);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Case_6_Template_kendo_combobox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r34 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r34.Value, $event) || (ctx_r34.Value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r15 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("data", ctx_r15.PossibleValues)("allowCustom", true);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r15.Value);
+    const ctx_r21 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("data", ctx_r21.PossibleValues)("allowCustom", true);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r21.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)(1, MJFormField_Conditional_0_div_1_Conditional_3_Case_1_Template, 1, 3)(2, MJFormField_Conditional_0_div_1_Conditional_3_Case_2_Template, 1, 1)(3, MJFormField_Conditional_0_div_1_Conditional_3_Case_3_Template, 1, 1)(4, MJFormField_Conditional_0_div_1_Conditional_3_Case_4_Template, 1, 1)(5, MJFormField_Conditional_0_div_1_Conditional_3_Case_5_Template, 1, 2)(6, MJFormField_Conditional_0_div_1_Conditional_3_Case_6_Template, 1, 3);
+} if (rf & 2) {
+    const ctx_r14 = i0.ɵɵnextContext(3);
+    let MJFormField_Conditional_0_div_1_Conditional_3_contFlowTmp;
+    i0.ɵɵconditional(0, (MJFormField_Conditional_0_div_1_Conditional_3_contFlowTmp = ctx_r14.Type) === "textbox" ? 0 : MJFormField_Conditional_0_div_1_Conditional_3_contFlowTmp === "textarea" ? 1 : MJFormField_Conditional_0_div_1_Conditional_3_contFlowTmp === "numerictextbox" ? 2 : MJFormField_Conditional_0_div_1_Conditional_3_contFlowTmp === "datepicker" ? 3 : MJFormField_Conditional_0_div_1_Conditional_3_contFlowTmp === "checkbox" ? 4 : MJFormField_Conditional_0_div_1_Conditional_3_contFlowTmp === "dropdownlist" ? 5 : MJFormField_Conditional_0_div_1_Conditional_3_contFlowTmp === "combobox" ? 6 : -1);
 } }
 function MJFormField_Conditional_0_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵtemplate(1, MJFormField_Conditional_0_div_1_label_1_Template, 2, 1, "label", 2)(2, MJFormField_Conditional_0_div_1_Case_2_Template, 1, 1)(3, MJFormField_Conditional_0_div_1_Case_3_Template, 1, 1)(4, MJFormField_Conditional_0_div_1_Case_4_Template, 1, 1)(5, MJFormField_Conditional_0_div_1_Case_5_Template, 1, 1)(6, MJFormField_Conditional_0_div_1_Case_6_Template, 1, 1)(7, MJFormField_Conditional_0_div_1_Case_7_Template, 1, 2)(8, MJFormField_Conditional_0_div_1_Case_8_Template, 1, 3);
+    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", 8)(3, MJFormField_Conditional_0_div_1_Conditional_3_Template, 7, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    let MJFormField_Conditional_0_div_1_contFlowTmp;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.ShowLabel);
+    i0.ɵɵconditional(1, ctx_r2.ShowLabel ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(2, (MJFormField_Conditional_0_div_1_contFlowTmp = ctx_r2.Type) === "textbox" ? 2 : MJFormField_Conditional_0_div_1_contFlowTmp === "textarea" ? 3 : MJFormField_Conditional_0_div_1_contFlowTmp === "numerictextbox" ? 4 : MJFormField_Conditional_0_div_1_contFlowTmp === "datepicker" ? 5 : MJFormField_Conditional_0_div_1_contFlowTmp === "checkbox" ? 6 : MJFormField_Conditional_0_div_1_contFlowTmp === "dropdownlist" ? 7 : MJFormField_Conditional_0_div_1_contFlowTmp === "combobox" ? 8 : -1);
+    i0.ɵɵconditional(2, ctx_r2.FieldInfo && ctx_r2.FieldInfo.RelatedEntity && ctx_r2.FieldInfo.RelatedEntity.length > 0 ? 2 : 3);
 } }
 function MJFormField_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MJFormField_Conditional_0_div_0_Template, 6, 2, "div", 0)(1, MJFormField_Conditional_0_div_1_Template, 9, 2, "div", 0);
+    i0.ɵɵtemplate(0, MJFormField_Conditional_0_div_0_Template, 6, 2, "div", 0)(1, MJFormField_Conditional_0_div_1_Template, 4, 2, "div", 0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngIf", !ctx_r0.EditMode || ctx_r0.IsFieldReadOnly);
@@ -169,40 +207,13 @@ function MJFormField_Conditional_0_Template(rf, ctx) { if (rf & 1) {
  * components for field rendering/editing when needed.
  */
 export class MJFormField extends BaseRecordComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * EditMode must be bound to the containing form's edit mode/state. When the form is in edit mode, the field will be rendered as an editable control (if not a read only field), otherwise the field will be rendered read-only.
-         */
-        this.EditMode = false;
-        /**
-         * The name of the field in the entity to be rendered.
-         */
-        this.FieldName = '';
-        /**
-         * The type of control to be rendered for the field. The default is 'textbox'. Other possible values are 'textarea', 'numerictextbox', 'datepicker', 'checkbox', 'dropdownlist', 'combobox'.
-         */
-        this.Type = 'textbox';
-        /**
-         * Optional, the type of link field that should be shown. Email and URL fields will be rendered as hyperlinks, Record fields will be rendered as links to the record. The default is 'None'. Record Fields are only
-         * valid when the FieldName field is a foreign key field to another entity.
-         */
-        this.LinkType = 'None';
-        /**
-         * If set to false, the label for the field will not be shown. The default is true.
-         */
-        this.ShowLabel = true;
-        this._displayName = null;
-        this._possibleValues = null;
-        this.ValueChange = new EventEmitter();
-    }
     /**
      * Display Name to show on the the control. By default, this is derived from the DisplayName in the entity field metadata, and can be overridden if desired by setting this property manually. Leave it empty to use the default.
      */
     get DisplayName() {
         var _a;
         if (!this._displayName) {
-            const ef = (_a = this.record.Fields.find(f => f.Name == this.FieldName)) === null || _a === void 0 ? void 0 : _a.EntityFieldInfo;
+            const ef = (_a = this.record.Fields.find(f => f.CodeName == this.FieldName)) === null || _a === void 0 ? void 0 : _a.EntityFieldInfo;
             if (ef)
                 this._displayName = ef.DisplayNameOrName;
             else
@@ -214,6 +225,10 @@ export class MJFormField extends BaseRecordComponent {
     set DisplayName(newValue) {
         this._displayName = newValue;
     }
+    get ExtendedType() {
+        var _a;
+        return (_a = this.record.GetFieldByName(this.FieldName)) === null || _a === void 0 ? void 0 : _a.EntityFieldInfo.ExtendedType;
+    }
     /**
      * The possible values for the field. This is only used when the field is a dropdownlist or combobox. The possible values are derived from the EntityFieldValues in the entity field metadata.
      * If the field is not a dropdownlist or combobox, this property is ignored. If you would like to specify a custom list of values, you can set this property manually.
@@ -221,7 +236,7 @@ export class MJFormField extends BaseRecordComponent {
     get PossibleValues() {
         var _a;
         if (!this._possibleValues) {
-            const ef = (_a = this.record.Fields.find(f => f.Name == this.FieldName)) === null || _a === void 0 ? void 0 : _a.EntityFieldInfo;
+            const ef = (_a = this.record.Fields.find(f => f.CodeName == this.FieldName)) === null || _a === void 0 ? void 0 : _a.EntityFieldInfo;
             if (ef && ef.ValueListType !== 'None')
                 this._possibleValues = ef.EntityFieldValues.map(v => v.Value);
             else
@@ -235,7 +250,7 @@ export class MJFormField extends BaseRecordComponent {
     }
     get Value() {
         const v = this.record.Get(this.FieldName);
-        const f = this.record.Fields.find(f => f.Name == this.FieldName);
+        const f = this.record.Fields.find(f => f.CodeName == this.FieldName);
         if (v === null || v === undefined) {
             // check to see if this is a text type of field
             if ((f === null || f === void 0 ? void 0 : f.EntityFieldInfo.TSType) === EntityFieldTSType.String)
@@ -255,23 +270,88 @@ export class MJFormField extends BaseRecordComponent {
      * Returns true if the field is read only. This is determined by the ReadOnly property in the entity field metadata.
      */
     get IsFieldReadOnly() {
-        const f = this.record.Fields.find(f => f.Name == this.FieldName);
+        const f = this.record.Fields.find(f => f.CodeName == this.FieldName);
         if (f)
             return f.ReadOnly;
         else
             throw new Error(`Field ${this.FieldName} not found in record ${this.record.EntityInfo.Name}`);
     }
+    get FieldInfo() {
+        const f = this.record.Fields.find(f => f.Name == this.FieldName);
+        if (f)
+            return f.EntityFieldInfo;
+        else
+            throw new Error(`Field ${this.FieldName} not found in record ${this.record.EntityInfo.Name}`);
+    }
+    constructor(renderer, cdr) {
+        super();
+        this.renderer = renderer;
+        this.cdr = cdr;
+        /**
+         * EditMode must be bound to the containing form's edit mode/state. When the form is in edit mode, the field will be rendered as an editable control (if not a read only field), otherwise the field will be rendered read-only.
+         */
+        this.EditMode = false;
+        /**
+         * The name of the field in the entity to be rendered.
+         */
+        this.FieldName = '';
+        /**
+         * The type of control to be rendered for the field. The default is 'textbox'. Other possible values are 'textarea', 'numerictextbox', 'datepicker', 'checkbox', 'dropdownlist', 'combobox'.
+         */
+        this.Type = 'textbox';
+        /**
+         * Optional, the type of link field that should be shown. Email and URL fields will be rendered as hyperlinks, Record fields will be rendered as links to the record. The default is 'None'. Record Fields are only
+         * valid when the FieldName field is a foreign key field to another entity.
+         */
+        this.LinkType = 'None';
+        /**
+         * If set to false, the label for the field will not be shown. The default is true.
+         */
+        this.ShowLabel = true;
+        this._displayName = null;
+        this._possibleValues = null;
+        this.ValueChange = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        if (this.markdown) {
+            // Create a MutationObserver to watch for changes in the markdown component
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    var _a;
+                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                        // Get the first child element inside the markdown component
+                        const el = (_a = this.markdown) === null || _a === void 0 ? void 0 : _a.element.nativeElement.firstChild;
+                        if (el) {
+                            // Apply styles using Renderer2
+                            this.renderer.setStyle(el, 'margin-top', '0');
+                            this.renderer.setStyle(el, 'margin-bottom', '0');
+                            // only apply font size if the element is a paragraph
+                            if (el.tagName === 'P')
+                                this.renderer.setStyle(el, 'font-size', '14px');
+                        }
+                    }
+                });
+            });
+            // Start observing the markdown component for child node additions
+            observer.observe(this.markdown.element.nativeElement, { childList: true });
+        }
+    }
 }
-MJFormField.ɵfac = /*@__PURE__*/ (() => { let ɵMJFormField_BaseFactory; return function MJFormField_Factory(t) { return (ɵMJFormField_BaseFactory || (ɵMJFormField_BaseFactory = i0.ɵɵgetInheritedFactory(MJFormField)))(t || MJFormField); }; })();
-MJFormField.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFormField, selectors: [["mj-form-field"]], 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: [["class", "record-form-row", 4, "ngIf"], [1, "record-form-row"], [4, "ngIf"], ["mjEmailLink", "", 3, "field"], ["mjWebLink", "", 3, "field"], ["mjFieldLink", "", 3, "record", "fieldName"], [3, "ngModel", "ngModelChange"], [3, "value", "valueChange"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModel", "ngModelChange"], [3, "data", "ngModel", "ngModelChange"], [3, "data", "allowCustom", "ngModel", "ngModelChange"]], template: function MJFormField_Template(rf, ctx) { if (rf & 1) {
+MJFormField.ɵfac = function MJFormField_Factory(t) { return new (t || MJFormField)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+MJFormField.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFormField, selectors: [["mj-form-field"]], viewQuery: function MJFormField_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+    } 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: [["class", "record-form-row", 4, "ngIf"], [1, "record-form-row"], [4, "ngIf"], [3, "data"], ["markdown", ""], ["mjEmailLink", "", 3, "field"], ["mjWebLink", "", 3, "field"], ["mjFieldLink", "", 3, "record", "fieldName"], [3, "record", "FieldName"], [3, "ngModel", "ngModelChange"], ["mjFillContainer", "", 3, "ngModel", "fillWidth", "fillHeight", "ngModelChange"], [3, "value", "valueChange"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModel", "ngModelChange"], [3, "data", "ngModel", "ngModelChange"], [3, "data", "allowCustom", "ngModel", "ngModelChange"]], template: function MJFormField_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, MJFormField_Conditional_0_Template, 2, 2);
     } if (rf & 2) {
         i0.ɵɵconditional(0, 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], 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} \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}\n\n\n\n@media (min-width: 768px) {\n    .record-form-row[_ngcontent-%COMP%] {\n      flex-direction: row;\n      align-items: center;\n    }\n  \n    .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      width: 240px;\n      margin-bottom: 0;\n    }\n  }"] });
+    } }, 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.MarkdownComponent, i9.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%], .record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > h1[_ngcontent-%COMP%], .record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > h2[_ngcontent-%COMP%], .record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > h3[_ngcontent-%COMP%], .record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > h4[_ngcontent-%COMP%], .record-form-row[_ngcontent-%COMP%]   markdown[_ngcontent-%COMP%]    > h5[_ngcontent-%COMP%], .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                <span>{{FormatValue(FieldName, 0)}}</span>\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        <label *ngIf=\"ShowLabel\">{{DisplayName}}</label>\n        @switch (Type) {\n            @case ('textbox') {\n                <kendo-textbox [(ngModel)]=\"Value\"  />   \n            }\n            @case ('textarea') {\n                <kendo-textarea [(ngModel)]=\"Value\" ></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    </div>         \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} \n  \n  \n.record-form-row label {\n    font-weight: bold;\n    padding-right: 10px;\n    width: 240px;\n    margin-bottom: 0;\n}\n\n\n\n@media (min-width: 768px) {\n    .record-form-row {\n      flex-direction: row;\n      align-items: center;\n    }\n  \n    .record-form-row label {\n      width: 240px;\n      margin-bottom: 0;\n    }\n  }\n  "] }]
-    }], null, { record: [{
+        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                    <pre>{{record.Get(FieldName)}}</pre>\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}", 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: [{
             type: Input
@@ -291,5 +371,8 @@ MJFormField.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFormField, se
             type: Input
         }], ValueChange: [{
             type: Output
+        }], markdown: [{
+            type: ViewChild,
+            args: ['markdown', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFormField, { className: "MJFormField", filePath: "src/lib/base-field-component.ts", lineNumber: 17 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFormField, { className: "MJFormField", filePath: "src/lib/base-field-component.ts", lineNumber: 18 }); })();

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

@@ -1,8 +1,7 @@
-import { AfterViewInit, OnInit, OnDestroy, QueryList, ElementRef } from '@angular/core';
+import { AfterViewInit, OnInit, OnDestroy, QueryList, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { EntityInfo, ValidationResult, BaseEntity, EntityPermissionType, EntityRelationshipInfo, RunViewParams, RecordDependency } from '@memberjunction/core';
-import { UserViewGridComponent } from '@memberjunction/ng-user-view-grid';
 import { BaseRecordComponent } from './base-record-component';
-import { SharedService } from '@memberjunction/ng-shared';
+import { BaseFormComponentEventCodes, SharedService } from '@memberjunction/ng-shared';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MJTabStripComponent } from '@memberjunction/ng-tabstrip';
 import * as i0 from "@angular/core";
@@ -11,8 +10,7 @@ export declare abstract class BaseFormComponent extends BaseRecordComponent impl
     protected sharedService: SharedService;
     protected router: Router;
     protected route: ActivatedRoute;
-    activeTabIndex: number;
-    selectedTab: number;
+    protected cdr: ChangeDetectorRef;
     EditMode: boolean;
     BottomMargin: number;
     TabHeight: string;
@@ -31,8 +29,10 @@ export declare abstract class BaseFormComponent extends BaseRecordComponent impl
     private _pendingRecords;
     private _updatingBrowserUrl;
     private __debug;
-    constructor(elementRef: ElementRef, sharedService: SharedService, router: Router, route: ActivatedRoute);
+    constructor(elementRef: ElementRef, sharedService: SharedService, router: Router, route: ActivatedRoute, cdr: ChangeDetectorRef);
     tabComponent: MJTabStripComponent;
+    tabStrips: QueryList<MJTabStripComponent>;
+    get TabStripComponent(): MJTabStripComponent;
     ngOnInit(): Promise<void>;
     topArea: ElementRef;
     ngAfterViewInit(): void;
@@ -42,9 +42,8 @@ export declare abstract class BaseFormComponent extends BaseRecordComponent impl
     CalcTopAreaHeight(): void;
     private resizeSub;
     ngOnDestroy(): void;
-    userViewGridComponents: QueryList<UserViewGridComponent>;
     protected get PendingRecords(): BaseEntity[];
-    onTabSelect(tabIndex: any): void;
+    onTabSelect(e: any): void;
     StartEditMode(): void;
     handleHistoryDialog(): void;
     ShowChanges(): void;
@@ -59,17 +58,36 @@ export declare abstract class BaseFormComponent extends BaseRecordComponent impl
     get UserCanCreate(): boolean;
     get UserCanDelete(): boolean;
     GridEditMode(): "None" | "Save" | "Queue";
-    private _tabIndexes;
-    GetTabIndex(tabName: string): number;
-    RegisterTabs(tabs: string[]): void;
-    RegisterTab(tabName: string): number;
+    /**
+    * Returns true if the tabName specified is the currently displayed tab, otherwise returns false
+    * @param tabName
+    * @returns
+    */
     IsCurrentTab(tabName: string): boolean;
-    RegisterAndCheckIfCurrentTab(tabName: string): boolean;
-    protected BuildRelationshipViewParams(item: EntityRelationshipInfo): RunViewParams;
+    BuildRelationshipViewParams(item: EntityRelationshipInfo): RunViewParams;
+    /**
+     * Builds a RunViewParams object for a related entity based on the relationship between the current entity and the related entity
+     * @param relatedEntityName
+     * @returns
+     */
     BuildRelationshipViewParamsByEntityName(relatedEntityName: string): RunViewParams;
+    /**
+     * Looks up and returns the EntityRelationshipInfo object for the related entity name
+     * @param relatedEntityName
+     * @returns
+     */
+    GetEntityRelationshipByRelatedEntityName(relatedEntityName: string): EntityRelationshipInfo | undefined;
+    /**
+     * Builds new record values for a related entity based on the relationship between the current entity and the related entity
+     * @param relatedEntityName
+     * @returns
+     */
+    NewRecordValues(relatedEntityName: string): any;
+    NewRecordValuesByEntityRelationship(item: EntityRelationshipInfo): any;
     GetRelatedEntityTabDisplayName(relatedEntityName: string): string;
     protected ValidatePendingRecords(): ValidationResult[];
     Validate(): ValidationResult;
+    protected RaiseEvent(eventCode: BaseFormComponentEventCodes): any;
     SaveRecord(StopEditModeAfterSave: boolean): Promise<boolean>;
     Wait(duration: number): Promise<void>;
     CancelEdit(): void;
@@ -83,7 +101,6 @@ export declare abstract class BaseFormComponent extends BaseRecordComponent impl
     protected ResizeTab(): void;
     protected setupSplitterLayoutDebounce(): void;
     splitterLayoutChange(): void;
-    protected ResizeGrids(): void;
     ShowDependencies(): Promise<void>;
     GetRecordDependencies(): Promise<RecordDependency[]>;
     get EntityInfo(): EntityInfo | undefined;

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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"}