@memberjunction/ng-base-forms 5.38.0 → 5.39.0

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

@@ -1,34 +1,57 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, inject } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, inject, ElementRef, Renderer2 } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
-import { CompositeKey, KeyValuePair, RunView } from '@memberjunction/core';
-import { HighlightSearchMatches } from '@memberjunction/global';
+import { EntityFieldTSType, CompositeKey, KeyValuePair, RunView } from '@memberjunction/core';
+import { BaseEngineRegistry } from '@memberjunction/core';
+import { HighlightSearchMatches, detectRichTextFormat, UUIDsEqual } from '@memberjunction/global';
+import { FormatFKCell, FilterCachedFKRows } from './fk-search-utils';
+import { LinkedFieldOptionsStore } from './linked-field-options';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-const _forTrack0 = ($index, $item) => $item.PrimaryKeyValue;
-const _forTrack1 = ($index, $item) => $item.Message;
+import * as i2 from "@memberjunction/ng-markdown";
+import * as i3 from "@memberjunction/ng-code-editor";
+import * as i4 from "@memberjunction/ng-shared-generic";
+const _c0 = a0 => ({ $implicit: a0 });
+const _forTrack0 = ($index, $item) => $item.FieldName;
+const _forTrack1 = ($index, $item) => $item.PrimaryKeyValue;
+const _forTrack2 = ($index, $item) => $item.Message;
 function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "label", 3);
+    i0.ɵɵelement(0, "label", 4);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("innerHTML", ctx_r0.HighlightedDisplayName, i0.ɵɵsanitizeHtml);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 5)(1, "a", 6);
-    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnRecordLinkClick($event)); });
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(0, "a", 8);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Conditional_1_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnRecordLinkClick($event)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(2);
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.FKDisplayName, " ");
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.FKDisplayName, " ");
 } }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Conditional_1_Template, 2, 1, "a", 7)(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Conditional_2_Template, 1, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.RecordLinksEnabled ? 1 : 2);
+} }
 function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_0_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 5)(1, "a", 7);
+    i0.ɵɵelementStart(0, "span", 6)(1, "a", 9);
     i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_0_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnEmailLinkClick($event)); });
     i0.ɵɵtext(2);
-    i0.ɵɵelement(3, "i", 8);
+    i0.ɵɵelement(3, "i", 10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -37,31 +60,46 @@ function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_0_T
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 5)(1, "a", 9);
+    i0.ɵɵelementStart(0, "span", 6)(1, "a", 11);
     i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_1_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnUrlLinkClick($event)); });
     i0.ɵɵtext(2);
-    i0.ɵɵelement(3, "i", 10);
+    i0.ɵɵelement(3, "i", 12);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.FormatValue(), " ");
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Template(rf, ctx) { if (rf & 1) {
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 5)(1, "a", 11);
-    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnRecordLinkClick($event)); });
-    i0.ɵɵtext(2);
-    i0.ɵɵelement(3, "i", 10);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(0, "a", 14);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Conditional_1_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnRecordLinkClick($event)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelement(2, "i", 12);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(2);
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.FormatValue(), " ");
 } }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.FormatValue(), " ");
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Conditional_1_Template, 3, 1, "a", 13)(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Conditional_2_Template, 1, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.RecordLinksEnabled ? 1 : 2);
+} }
 function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 5)(1, "div", 13);
-    i0.ɵɵelement(2, "input", 14);
+    i0.ɵɵelementStart(0, "span", 6)(1, "div", 19);
+    i0.ɵɵelement(2, "input", 20);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(5);
@@ -69,7 +107,32 @@ function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_C
     i0.ɵɵproperty("checked", !!ctx_r0.Value);
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "mj-markdown", 21);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("data", ctx_r0.FormatValue());
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 16);
+    i0.ɵɵpipe(1, "mjSafeRichHtml");
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind1(1, 1, ctx_r0.FormatValue()), i0.ɵɵsanitizeHtml);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "mj-code-editor", 22);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r0.FormatValue())("language", ctx_r0.CodeEditorLanguage)("readonly", true);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 18);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -77,8 +140,8 @@ function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_C
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.FormatValue());
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 5);
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -87,23 +150,23 @@ function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_C
     i0.ɵɵtextInterpolate(ctx_r0.FormatValue());
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_0_Template, 3, 1, "span", 5)(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_1_Template, 2, 1, "span", 12)(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_2_Template, 2, 1, "span", 5);
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_0_Template, 3, 1, "span", 6)(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_1_Template, 2, 1, "div", 15)(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_2_Template, 2, 3, "div", 16)(3, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_3_Template, 2, 3, "div", 17)(4, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_4_Template, 2, 1, "span", 18)(5, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_5_Template, 2, 1, "span", 6);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵconditional(ctx_r0.Type === "checkbox" ? 0 : ctx_r0.IsLongText ? 1 : 2);
+    i0.ɵɵconditional(ctx_r0.Type === "checkbox" ? 0 : ctx_r0.RichTextMode === "markdown" ? 1 : ctx_r0.RichTextMode === "html" ? 2 : ctx_r0.RichTextMode === "code" ? 3 : ctx_r0.IsLongText ? 4 : 5);
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_0_Template, 4, 1, "span", 5)(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_1_Template, 4, 1, "span", 5)(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Template, 4, 1, "span", 5)(3, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Template, 3, 1);
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_0_Template, 4, 1, "span", 6)(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_1_Template, 4, 1, "span", 6)(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Template, 3, 1, "span", 6)(3, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Template, 6, 1);
 } if (rf & 2) {
     let tmp_3_0;
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional((tmp_3_0 = ctx_r0.LinkType) === "Email" ? 0 : tmp_3_0 === "URL" ? 1 : tmp_3_0 === "Record" ? 2 : 3);
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_1_Template, 1, 1, "label", 3);
-    i0.ɵɵelementStart(2, "div", 4);
-    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Template, 3, 1, "span", 5)(4, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Template, 4, 1);
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_1_Template, 1, 1, "label", 4);
+    i0.ɵɵelementStart(2, "div", 5);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Template, 3, 1, "span", 6)(4, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Template, 4, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -114,123 +177,473 @@ function MjFormFieldComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵconditional(ctx_r0.IsFKWithNameField ? 3 : 4);
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "label", 3);
+    i0.ɵɵelement(0, "label", 4);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("innerHTML", ctx_r0.HighlightedDisplayName, i0.ɵɵsanitizeHtml);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 24);
-    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_2_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnFKClearClick($event)); });
-    i0.ɵɵelement(1, "i", 25);
-    i0.ɵɵelementEnd();
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 29);
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 22);
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 35);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_3_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnFKScopeToggle($event)); });
+    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelementStart(2, "span", 37);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "i", 38);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("mj-fk-scope-pill--open", ctx_r0.FKShowScopeMenu);
+    i0.ɵɵproperty("title", "Searching " + ctx_r0.FKSearchFieldLabel + " \u2014 click to change");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.FKSearchFieldLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-up", ctx_r0.FKShowScopeMenu)("fa-chevron-down", !ctx_r0.FKShowScopeMenu);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 28);
-    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_For_2_Template_div_mousedown_0_listener($event) { const suggestion_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnFKSelectItem(suggestion_r9, $event)); });
+    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnFKClearClick($event)); });
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵelementEnd();
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 33);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_For_4_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_For_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_For_4_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 50);
+} if (rf & 2) {
+    const f_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵnextContext(2);
+    const scopeRow_r10 = i0.ɵɵreference(3);
+    i0.ɵɵproperty("ngTemplateOutlet", scopeRow_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, f_r9));
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_For_4_Conditional_0_Template, 1, 4, "ng-container");
+} if (rf & 2) {
+    const f_r9 = ctx.$implicit;
+    i0.ɵɵconditional(f_r9.Group === "shown" ? 0 : -1);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_Conditional_5_For_4_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_Conditional_5_For_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_Conditional_5_For_4_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 50);
+} if (rf & 2) {
+    const f_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵnextContext(3);
+    const scopeRow_r10 = i0.ɵɵreference(3);
+    i0.ɵɵproperty("ngTemplateOutlet", scopeRow_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, f_r11));
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_Conditional_5_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_Conditional_5_For_4_Conditional_0_Template, 1, 4, "ng-container");
+} if (rf & 2) {
+    const f_r11 = ctx.$implicit;
+    i0.ɵɵconditional(f_r11.Group === "other" ? 0 : -1);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 51);
+    i0.ɵɵelementStart(1, "div", 49);
+    i0.ɵɵtext(2, "Other fields");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_Conditional_5_For_4_Template, 1, 1, null, null, _forTrack0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(6);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r0.FKSearchableFields);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48)(1, "div", 49);
+    i0.ɵɵtext(2, "Columns shown");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_For_4_Template, 1, 1, null, null, _forTrack0);
+    i0.ɵɵconditionalCreate(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_Conditional_5_Template, 5, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassProp("mj-fk-scope-menu--bottom", ctx_r0.OpenAbove);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r0.FKSearchableFields);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.FKHasOtherSearchableFields ? 5 : -1);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 57);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Conditional_2_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r14); const f_r13 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.MoveFKColumn($event, f_r13.FieldName, -1)); });
+    i0.ɵɵelement(1, "i", 58);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 59);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Conditional_2_Template_button_mousedown_2_listener($event) { i0.ɵɵrestoreView(_r14); const f_r13 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.MoveFKColumn($event, f_r13.FieldName, 1)); });
+    i0.ɵɵelement(3, "i", 60);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const f_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("disabled", !ctx_r0.CanMoveFKColumnUp(f_r13.FieldName));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r0.CanMoveFKColumnDown(f_r13.FieldName));
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Conditional_7_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r15); const f_r13 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnFKColumnToggle($event, f_r13)); });
+    i0.ɵɵelement(1, "i", 62);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const f_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassProp("mj-fk-col-toggle--on", ctx_r0.IsFKColumnVisible(f_r13));
+    i0.ɵɵproperty("title", ctx_r0.IsFKColumnVisible(f_r13) ? "Hide this column" : "Show as a column");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-eye", ctx_r0.IsFKColumnVisible(f_r13))("fa-eye-slash", !ctx_r0.IsFKColumnVisible(f_r13));
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Template_div_mousedown_0_listener($event) { const f_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnFKScopeSelect($event, f_r13)); });
+    i0.ɵɵelementStart(1, "span", 53);
+    i0.ɵɵconditionalCreate(2, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Conditional_2_Template, 4, 2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "i");
+    i0.ɵɵelementStart(4, "span", 54);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 55);
+    i0.ɵɵconditionalCreate(7, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Conditional_7_Template, 2, 7, "button", 56);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const f_r13 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassProp("mj-fk-scope-mi--on", ctx_r0.IsFKScopeActive(f_r13));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(f_r13.Group === "shown" ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(f_r13.Icon + " mj-fk-scope-mi-icon");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(f_r13.Label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.CanToggleFKColumn(f_r13) ? 7 : -1);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 70);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(6);
+    i0.ɵɵclassMap(ctx_r0.FKSelectedSuggestion.Icon);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 68);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const suggestion_r9 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", suggestion_r9.DisplayName, " ");
+    i0.ɵɵtextInterpolate(ctx_r0.FKSelectedSuggestion.ExtraColumns[0].Value);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_For_2_Template, 2, 1, "div", 27, _forTrack0);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 43)(1, "div", 63);
+    i0.ɵɵelement(2, "i", 64);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Currently selected");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 65);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Template_div_mousedown_5_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnFKSelectItem(ctx_r0.FKSelectedSuggestion, $event)); });
+    i0.ɵɵconditionalCreate(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Conditional_6_Template, 1, 2, "i", 66);
+    i0.ɵɵelement(7, "span", 67);
+    i0.ɵɵconditionalCreate(8, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Conditional_8_Template, 2, 1, "span", 68);
+    i0.ɵɵelementStart(9, "button", 69);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Template_button_mousedown_9_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnFKClearClick($event)); });
+    i0.ɵɵelement(10, "i", 40);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r0.FKSelectedSuggestion.Icon ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r0.FKSelectedSuggestion.HighlightedName, i0.ɵɵsanitizeHtml);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.FKSelectedSuggestion.ExtraColumns.length && ctx_r0.FKSelectedSuggestion.ExtraColumns[0].Value ? 8 : -1);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵelement(1, "i", 71);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Searching\u2026");
+    i0.ɵɵelementEnd()();
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵelement(1, "i", 72);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No matches");
+    i0.ɵɵelementEnd()();
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 75);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_5_Template_div_mousedown_0_listener($event) { const col_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnFKHeaderSort($event, col_r18)); });
+    i0.ɵɵelementStart(1, "span", 79);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "i");
+    i0.ɵɵelementStart(4, "span", 80);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_5_Template_span_mousedown_4_listener($event) { const col_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnFKColResizeStart($event, col_r18)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const col_r18 = ctx.$implicit;
+    const ɵ$index_216_r19 = ctx.$index;
+    const ctx_r0 = i0.ɵɵnextContext(6);
+    i0.ɵɵproperty("title", "Click to sort by " + ctx_r0.FKColumnHeaders[ɵ$index_216_r19]);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.FKColumnHeaders[ɵ$index_216_r19]);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.FKSortIcon(col_r18));
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const suggestion_r21 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵclassMap(suggestion_r21.Icon);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Conditional_1_Conditional_1_Template, 1, 2, "i", 83);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const suggestion_r21 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(suggestion_r21.Icon ? 1 : -1);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_For_3_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 87);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_For_3_Conditional_0_Conditional_1_Template, 1, 0, "i", 87);
+    i0.ɵɵelement(2, "span", 88);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r22 = i0.ɵɵnextContext();
+    const col_r24 = ctx_r22.$implicit;
+    const ɵ$index_235_r25 = ctx_r22.$index;
+    const ɵ$count_235_r26 = ctx_r22.$count;
+    const suggestion_r21 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(6);
+    i0.ɵɵclassProp("mj-fk-cell--fill", ctx_r0.FKColumnFillsTrack(col_r24, ɵ$index_235_r25 === ɵ$count_235_r26 - 1));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.IsFKRowSelected(suggestion_r21) ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", suggestion_r21.HighlightedName, i0.ɵɵsanitizeHtml);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89);
+    i0.ɵɵelement(1, "span", 88);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_30_0;
+    let tmp_31_0;
+    const ctx_r22 = i0.ɵɵnextContext();
+    const col_r24 = ctx_r22.$implicit;
+    const ɵ$index_235_r25 = ctx_r22.$index;
+    const ɵ$count_235_r26 = ctx_r22.$count;
+    const suggestion_r21 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(6);
+    i0.ɵɵclassProp("mj-fk-cell--fill", ctx_r0.FKColumnFillsTrack(col_r24, ɵ$index_235_r25 === ɵ$count_235_r26 - 1));
+    i0.ɵɵproperty("title", ((tmp_30_0 = ctx_r0.FKCellFor(suggestion_r21, col_r24)) == null ? null : tmp_30_0.Value) || "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ((tmp_31_0 = ctx_r0.FKCellFor(suggestion_r21, col_r24)) == null ? null : tmp_31_0.HighlightedValue) || "", i0.ɵɵsanitizeHtml);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_For_3_Conditional_0_Template, 3, 4, "div", 84)(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_For_3_Conditional_1_Template, 2, 4, "div", 85);
+} if (rf & 2) {
+    const col_r24 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(7);
+    i0.ɵɵconditional(col_r24 === ctx_r0.FKNameField ? 0 : 1);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 81);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Template_div_mousedown_0_listener($event) { const suggestion_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnFKSelectItem(suggestion_r21, $event)); })("mouseenter", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Template_div_mouseenter_0_listener() { const ɵ$index_226_r22 = i0.ɵɵrestoreView(_r20).$index; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.FKActiveIndex = ɵ$index_226_r22); });
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Conditional_1_Template, 2, 1, "div", 82);
+    i0.ɵɵrepeaterCreate(2, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_For_3_Template, 2, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const suggestion_r21 = ctx.$implicit;
+    const ɵ$index_226_r22 = ctx.$index;
+    const ctx_r0 = i0.ɵɵnextContext(6);
+    i0.ɵɵclassProp("mj-fk-grid-row--active", ɵ$index_226_r22 === ctx_r0.FKActiveIndex)("mj-fk-grid-row--selected", ctx_r0.IsFKRowSelected(suggestion_r21));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.FKHasIconColumn ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.FKColumnFields);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 73)(2, "div", 74);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_Conditional_3_Template, 1, 0, "div", 75);
+    i0.ɵɵrepeaterCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_5_Template, 5, 4, "div", 76, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Template, 4, 5, "div", 77, _forTrack1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("grid-template-columns", ctx_r0.FKGridTemplateColumns);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.FKHasIconColumn ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.FKColumnFields);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.FKSuggestions);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 90);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_8_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnFKCreateNew($event)); });
+    i0.ɵɵelement(1, "i", 91);
+    i0.ɵɵelementStart(2, "span", 92);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("title", ctx_r0.FKCreateLabel);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.FKCreateLabel);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_Template, 6, 3, "div", 42);
+    i0.ɵɵtemplate(2, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Template, 8, 7, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Template, 11, 3, "div", 43);
+    i0.ɵɵconditionalCreate(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_5_Template, 4, 0, "div", 44);
+    i0.ɵɵconditionalCreate(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_6_Template, 4, 0, "div", 45);
+    i0.ɵɵconditionalCreate(7, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_Template, 8, 3, "div", 46);
+    i0.ɵɵconditionalCreate(8, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_8_Template, 4, 2, "button", 47);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("mj-fk-dropdown--above", ctx_r0.OpenAbove);
+    i0.ɵɵclassProp("mj-fk-dropdown--above", ctx_r0.OpenAbove)("mj-fk-dropdown--scope-open", ctx_r0.FKShowScopeMenu);
     i0.ɵɵproperty("ngStyle", ctx_r0.DropdownPositionStyle);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.FKSuggestions);
+    i0.ɵɵconditional(ctx_r0.FKShowScopeMenu ? 1 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.FKSelectedSuggestion && !ctx_r0.FKLoading ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.FKLoading ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r0.FKLoading && ctx_r0.FKNoMatches ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r0.FKLoading && ctx_r0.FKSuggestions.length > 0 ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.CanCreateFK ? 8 : -1);
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19)(1, "input", 20);
-    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFKInput($event)); })("focus", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template_input_focus_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFKFocus($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template_input_blur_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFKBlur()); });
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_1_Template, 1, 0, "i", 29);
+    i0.ɵɵelementStart(2, "input", 30);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFKInput($event)); })("focus", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template_input_focus_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFKFocus($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template_input_blur_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFKBlur()); })("keydown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template_input_keydown_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFKKeydown($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_2_Template, 2, 0, "button", 21)(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_3_Template, 1, 0, "i", 22);
-    i0.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_Template, 3, 3, "div", 23);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_3_Template, 5, 8, "button", 31);
+    i0.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_Template, 2, 0, "button", 32)(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_5_Template, 1, 0, "i", 33);
+    i0.ɵɵconditionalCreate(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Template, 9, 11, "div", 34);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("mj-fk-search--matched", ctx_r0.FKIsMatched);
+    i0.ɵɵclassProp("mj-fk-search--matched", ctx_r0.FKHasLinkedValue)("mj-fk-search--scoped", ctx_r0.FKFocused && ctx_r0.FKSearchableFields.length > 1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.FKHasLinkedValue && !(ctx_r0.FKFocused && ctx_r0.FKSearchableFields.length > 1) ? 1 : -1);
     i0.ɵɵadvance();
+    i0.ɵɵclassProp("mj-forms-field-input--linked", ctx_r0.FKHasLinkedValue);
     i0.ɵɵproperty("value", ctx_r0.FKSearchText);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.FKSearchText ? 2 : 3);
+    i0.ɵɵconditional(ctx_r0.FKFocused && ctx_r0.FKSearchableFields.length > 1 ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.FKSearchText ? 4 : 5);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.ShowFKDropdown && ctx_r0.FKSuggestions.length > 0 ? 4 : -1);
+    i0.ɵɵconditional(ctx_r0.ShowFKDropdown ? 6 : -1);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-code-editor", 93);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Template_mj_code_editor_change_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnCodeEditorChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("value", ctx_r0.FormatValue())("language", ctx_r0.CodeEditorLanguage);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_0_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 33);
-    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_0_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnInputChange($event)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_0_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 98);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_0_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnInputChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("value", ctx_r0.FormatValue());
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_1_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 34);
-    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_1_Template_textarea_input_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnInputChange($event)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_1_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 99);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_1_Template_textarea_input_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnInputChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("value", ctx_r0.FormatValue());
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_2_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 35);
-    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_2_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnNumberChange($event)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_2_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 100);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_2_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnNumberChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("value", ctx_r0.Value);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_3_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 36);
-    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_3_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnDateChange($event)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_3_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 101);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_3_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnDateChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("value", ctx_r0.DateInputValue);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_4_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13)(1, "input", 37);
-    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_4_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnCheckboxChange($event)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_4_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "input", 102);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_4_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnCheckboxChange($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵproperty("checked", !!ctx_r0.Value);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 28);
-    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Conditional_4_For_2_Template_div_mousedown_0_listener($event) { const option_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnSelectOptionClick(option_r17, $event)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 109);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_Conditional_4_For_2_Template_div_mousedown_0_listener($event) { const option_r36 = i0.ɵɵrestoreView(_r35).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnSelectOptionClick(option_r36, $event)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const option_r17 = ctx.$implicit;
+    const option_r36 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(6);
-    i0.ɵɵclassProp("mj-fk-option--selected", ctx_r0.FormatValue() === option_r17);
+    i0.ɵɵclassProp("mj-fk-option--selected", ctx_r0.FormatValue() === option_r36);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", option_r17, " ");
+    i0.ɵɵtextInterpolate1(" ", option_r36, " ");
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Conditional_4_For_2_Template, 2, 3, "div", 41, i0.ɵɵrepeaterTrackByIdentity);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 107);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_Conditional_4_For_2_Template, 2, 3, "div", 108, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(5);
@@ -239,16 +652,16 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_C
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.PossibleValues);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnSelectTriggerClick($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Template_div_blur_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnSelectTriggerBlur()); });
-    i0.ɵɵelementStart(1, "span", 39);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 103);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnSelectTriggerClick($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_Template_div_blur_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnSelectTriggerBlur()); });
+    i0.ɵɵelementStart(1, "span", 104);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "i", 40);
+    i0.ɵɵelement(3, "i", 105);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Conditional_4_Template, 3, 3, "div", 23);
+    i0.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_Conditional_4_Template, 3, 3, "div", 106);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
@@ -260,20 +673,20 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_T
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.ShowSelectDropdown && ctx_r0.PossibleValues.length > 0 ? 4 : -1);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 28);
-    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Conditional_3_For_2_Template_div_mousedown_0_listener($event) { const option_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnValueListSelect(option_r20, $event)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_6_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 109);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_6_Conditional_3_For_2_Template_div_mousedown_0_listener($event) { const option_r39 = i0.ɵɵrestoreView(_r38).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnValueListSelect(option_r39, $event)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const option_r20 = ctx.$implicit;
+    const option_r39 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", option_r20, " ");
+    i0.ɵɵtextInterpolate1(" ", option_r39, " ");
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Conditional_3_For_2_Template, 2, 1, "div", 27, i0.ɵɵrepeaterTrackByIdentity);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 107);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_6_Conditional_3_For_2_Template, 2, 1, "div", 111, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(5);
@@ -282,13 +695,13 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_C
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.FilteredPossibleValues);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19)(1, "input", 42);
-    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListInput($event)); })("focus", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Template_input_focus_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListFocus($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Template_input_blur_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListBlur()); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_6_Template(rf, ctx) { if (rf & 1) {
+    const _r37 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28)(1, "input", 110);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_6_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListInput($event)); })("focus", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_6_Template_input_focus_1_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListFocus($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_6_Template_input_blur_1_listener() { i0.ɵɵrestoreView(_r37); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListBlur()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(2, "i", 22);
-    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Conditional_3_Template, 3, 3, "div", 23);
+    i0.ɵɵelement(2, "i", 33);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_6_Conditional_3_Template, 3, 3, "div", 106);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -297,56 +710,56 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_T
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.ShowValueListDropdown && ctx_r0.FilteredPossibleValues.length > 0 ? 3 : -1);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_7_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 43);
-    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_7_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnInputChange($event)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_7_Template(rf, ctx) { if (rf & 1) {
+    const _r40 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 112);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_7_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnInputChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("value", ctx_r0.FormatValue());
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_0_Template, 1, 1, "input", 29)(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_1_Template, 1, 1, "textarea", 30)(2, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_2_Template, 1, 1, "input", 31)(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_3_Template, 1, 1, "input", 32)(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_4_Template, 2, 1, "div", 13)(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Template, 5, 6)(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Template, 4, 2, "div", 19)(7, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_7_Template, 1, 1, "input", 29);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_0_Template, 1, 1, "input", 94)(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_1_Template, 1, 1, "textarea", 95)(2, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_2_Template, 1, 1, "input", 96)(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_3_Template, 1, 1, "input", 97)(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_4_Template, 2, 1, "div", 19)(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_Template, 5, 6)(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_6_Template, 4, 2, "div", 28)(7, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_7_Template, 1, 1, "input", 94);
 } if (rf & 2) {
     let tmp_3_0;
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional((tmp_3_0 = ctx_r0.Type) === "textbox" ? 0 : tmp_3_0 === "textarea" ? 1 : tmp_3_0 === "number" ? 2 : tmp_3_0 === "datepicker" ? 3 : tmp_3_0 === "checkbox" ? 4 : tmp_3_0 === "select" ? 5 : tmp_3_0 === "autocomplete" ? 6 : 7);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵelement(1, "i", 45);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 113);
+    i0.ɵɵelement(1, "i", 114);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const error_r22 = ctx.$implicit;
+    const error_r41 = ctx.$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(error_r22.Message);
+    i0.ɵɵtextInterpolate(error_r41.Message);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_For_2_Template, 4, 1, "div", 44, _forTrack1);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_For_2_Template, 4, 1, "div", 113, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.DisplayErrors);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵelement(1, "i", 46);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 113);
+    i0.ɵɵelement(1, "i", 115);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const warning_r23 = ctx.$implicit;
+    const warning_r42 = ctx.$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(warning_r23.Message);
+    i0.ɵɵtextInterpolate(warning_r42.Message);
 } }
-function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_For_2_Template, 4, 1, "div", 44, _forTrack1);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_7_For_2_Template, 4, 1, "div", 113, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -354,13 +767,13 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_Template
     i0.ɵɵrepeater(ctx_r0.DisplayWarnings);
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_1_Template, 1, 1, "label", 3);
-    i0.ɵɵelementStart(2, "div", 4);
-    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template, 5, 5, "div", 16)(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Template, 8, 1);
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_1_Template, 1, 1, "label", 4);
+    i0.ɵɵelementStart(2, "div", 5);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template, 7, 11, "div", 24)(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Template, 1, 2, "mj-code-editor", 25)(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Template, 8, 1);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Template, 3, 0, "div", 17);
-    i0.ɵɵconditionalCreate(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_Template, 3, 0, "div", 18);
+    i0.ɵɵconditionalCreate(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_Template, 3, 0, "div", 26);
+    i0.ɵɵconditionalCreate(7, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_7_Template, 3, 0, "div", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -368,15 +781,15 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.ShowLabel ? 1 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.HasRelatedEntity ? 3 : 4);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.DisplayErrors.length > 0 ? 5 : -1);
+    i0.ɵɵconditional(ctx_r0.HasRelatedEntity ? 3 : ctx_r0.EditRichTextMode !== "plain" ? 4 : 5);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.DisplayErrors.length > 0 ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.DisplayWarnings.length > 0 ? 6 : -1);
+    i0.ɵɵconditional(ctx_r0.DisplayWarnings.length > 0 ? 7 : -1);
 } }
 function MjFormFieldComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_0_Template, 5, 6, "div", 0);
-    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Template, 7, 12, "div", 1);
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_0_Template, 5, 6, "div", 1);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Template, 8, 12, "div", 2);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional((!ctx_r0.EditMode || ctx_r0.IsFieldReadOnly) && !ctx_r0.ShouldHideField ? 0 : -1);
@@ -412,6 +825,8 @@ function MjFormFieldComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
  */
 export class MjFormFieldComponent extends BaseAngularComponent {
     cdr = inject(ChangeDetectorRef);
+    renderer = inject(Renderer2);
+    hostRef = inject((ElementRef));
     /** The entity record containing this field */
     Record;
     /** Whether the form is in edit mode */
@@ -456,6 +871,14 @@ export class MjFormFieldComponent extends BaseAngularComponent {
     ShowLabel = true;
     /** Form-level context (search filter, showEmptyFields) */
     FormContext;
+    /**
+     * Whether FK / record links are interactive. Driven by
+     * `FormContext.enableRecordLinks`; false renders FK values as plain text
+     * (dialog/slide-in surfaces). Undefined / true means links are live.
+     */
+    get RecordLinksEnabled() {
+        return this.FormContext?.enableRecordLinks !== false;
+    }
     // ---- Deprecated camelCase aliases (backward compat) ----
     /** @deprecated Use [Record] instead */
     set _deprecatedRecord(value) { this.Record = value; }
@@ -711,19 +1134,51 @@ export class MjFormFieldComponent extends BaseAngularComponent {
     /** Calculated position for fixed-position dropdowns */
     DropdownTop = 0;
     DropdownLeft = 0;
-    DropdownWidth = 0;
+    /** Computed: dropdown is at least the trigger width, at most {@link DropdownMaxWidth}. */
+    DropdownMinWidth = 0;
+    DropdownMaxWidth = 0;
     OpenAbove = false;
+    /**
+     * Max width (px) of the FK suggestion dropdown. The panel grows to fit its
+     * columns up to this cap (then scrolls horizontally). When null, defaults to
+     * 2× the trigger width so multi-column rows aren't cramped by a narrow field.
+     * Always additionally bounded by the viewport's right edge.
+     */
+    FKDropdownMaxWidth = null;
+    /**
+     * Whether to highlight the typed query substring within each suggestion's name
+     * in the FK dropdown. On by default — uses the muted, theme-aware
+     * `--mj-status-warning` highlight (not the old bright yellow). Set false for
+     * plain, un-marked names.
+     */
+    FKHighlightMatches = true;
+    /**
+     * Whether to offer inline "create new" for the related record when the one you need
+     * isn't found. The affordance only renders when this is true AND the current user can
+     * create records of the related entity (entity allows creation + role permits it).
+     */
+    AllowFKCreate = true;
+    /** Surface used for the inline create form: a modal dialog (default) or a slide-in. */
+    FKCreatePresentation = 'dialog';
     /** Cleanup function for scroll/resize listeners */
     _scrollCleanup = null;
     /** Inline style for the fixed-position dropdown */
     get DropdownPositionStyle() {
+        // min-width floors at the trigger width; max-width caps growth; the auto
+        // intrinsic width then shrink-to-fits the columns between the two, and
+        // `.mj-fk-options` scrolls horizontally once content exceeds the cap.
+        const sizing = {
+            'min-width': this.DropdownMinWidth + 'px',
+            'max-width': this.DropdownMaxWidth + 'px',
+            'width': 'max-content',
+        };
         if (this.OpenAbove) {
             return {
                 'position': 'fixed',
                 'bottom': (window.innerHeight - this.DropdownTop) + 'px',
                 'top': 'auto',
                 'left': this.DropdownLeft + 'px',
-                'width': this.DropdownWidth + 'px',
+                ...sizing,
                 'z-index': '10000'
             };
         }
@@ -732,7 +1187,7 @@ export class MjFormFieldComponent extends BaseAngularComponent {
             'top': this.DropdownTop + 'px',
             'bottom': 'auto',
             'left': this.DropdownLeft + 'px',
-            'width': this.DropdownWidth + 'px',
+            ...sizing,
             'z-index': '10000'
         };
     }
@@ -752,12 +1207,63 @@ export class MjFormFieldComponent extends BaseAngularComponent {
             this.DropdownTop = rect.bottom + gap;
         }
         this.DropdownLeft = rect.left;
-        this.DropdownWidth = rect.width;
+        // At least the trigger width; up to FKDropdownMaxWidth (default 2×), but never
+        // past the viewport's right edge. Content fills between min and max; overflow
+        // scrolls horizontally.
+        this.DropdownMinWidth = rect.width;
+        const desiredMax = this.FKDropdownMaxWidth ?? rect.width * 2;
+        this.DropdownMaxWidth = Math.max(rect.width, Math.min(desiredMax, window.innerWidth - rect.left - 8));
     }
+    // ---- Dropdown portal (escape transformed ancestors) ----
+    /**
+     * The dropdown is `position: fixed` with viewport coords. Inside the slide-in /
+     * dialog overlays (which use CSS `transform`), a `fixed` descendant is positioned
+     * relative to the transformed ancestor instead of the viewport, so it renders
+     * off-screen. Re-parenting the dropdown element to `document.body` removes it from
+     * any transformed containing block, restoring true viewport-fixed positioning.
+     *
+     * Call after change detection has rendered the dropdown (microtask). Angular still
+     * owns the node — when the structural `@if` tears it down it removes the node by
+     * reference regardless of where it currently lives, so no manual cleanup is needed
+     * beyond clearing our tracking pointer.
+     */
+    portalDropdownToBody() {
+        // Already portaled and still in the DOM → nothing to do (e.g. typing while open).
+        if (this._portaledDropdownEl?.isConnected)
+            return;
+        // The dropdown is rendered by `@if (ShowFKDropdown)`. On the synchronous cached
+        // path (focus → searchCachedEntity → applySuggestions) the element may not be in
+        // the DOM yet when we first look, so retry across a few frames until it renders.
+        // (The async DB path lands here post-render, so it succeeds on the first try.)
+        const tryPortal = (retriesLeft) => {
+            const host = this.hostRef?.nativeElement;
+            if (!host)
+                return;
+            const dropdown = host.querySelector('.mj-fk-dropdown');
+            if (dropdown) {
+                if (dropdown.parentElement !== document.body) {
+                    this.renderer.appendChild(document.body, dropdown);
+                    this._portaledDropdownEl = dropdown;
+                }
+            }
+            else if (retriesLeft > 0) {
+                setTimeout(() => tryPortal(retriesLeft - 1), 0);
+            }
+        };
+        Promise.resolve().then(() => tryPortal(5));
+    }
+    /** Tracks a dropdown element we relocated to body so we can drop the reference on close. */
+    _portaledDropdownEl = null;
     /** Start listening for scroll/resize to close dropdowns */
     startScrollListener() {
         this.stopScrollListener();
-        const onScroll = () => {
+        const onScroll = (e) => {
+            // Scrolling WITHIN the dropdown (vertical list or horizontal column scroll)
+            // must not close it — only an ancestor/page scroll, which would detach the
+            // fixed-position panel from its trigger, should.
+            const target = e.target;
+            if (this._portaledDropdownEl && target && this._portaledDropdownEl.contains(target))
+                return;
             this.closeAllDropdowns();
             this.cdr.markForCheck();
         };
@@ -782,6 +1288,10 @@ export class MjFormFieldComponent extends BaseAngularComponent {
     /** Close all dropdown types */
     closeAllDropdowns() {
         this.ShowFKDropdown = false;
+        this.FKActiveIndex = -1;
+        this.FKLoading = false;
+        this.FKNoMatches = false;
+        this._portaledDropdownEl = null;
         this.ShowValueListDropdown = false;
         this.ShowSelectDropdown = false;
         this.stopScrollListener();
@@ -789,62 +1299,722 @@ export class MjFormFieldComponent extends BaseAngularComponent {
     // ============================================
     // FK AUTOCOMPLETE (custom implementation)
     // ============================================
+    /** Max rows shown on an empty-input focus-show (cached fast path only). */
+    static FK_FOCUS_SHOW_LIMIT = 50;
+    /** Max rows returned from a DB search. */
+    static FK_DB_SEARCH_LIMIT = 20;
     /** Suggestions returned from the FK entity search */
     FKSuggestions = [];
+    /**
+     * The currently-linked record, pinned as a sticky "Currently selected" section at the
+     * top of the dropdown (browse mode only). Null when there's no selection or the user is
+     * actively filtering. Removed from {@link FKSuggestions} so it isn't listed twice.
+     */
+    FKSelectedSuggestion = null;
     /** Whether the current FK value is a confirmed match (user selected from dropdown) */
     FKIsMatched = false;
     /** Whether the FK dropdown is visible */
     ShowFKDropdown = false;
+    /** Whether a DB search is currently in flight (drives the loading indicator). */
+    FKLoading = false;
+    /** True when a search completed with zero results (drives the "No matches" row). */
+    FKNoMatches = false;
+    /** Index of the keyboard-highlighted active suggestion (-1 = none). */
+    FKActiveIndex = -1;
+    /** Headers for the extra (DefaultInView) columns shown in the dropdown. */
+    FKColumnHeaders = [];
+    /** Field code names for the extra columns, index-aligned with {@link FKColumnHeaders}. */
+    FKColumnFields = [];
+    /** Code name of the name column (used as its sort key). */
+    FKNameField = '';
+    /** Whether rows render a leading icon column (drives the header's empty icon cell). */
+    FKHasIconColumn = false;
+    /** Active sort column (field code name), or null for natural (unsorted) order. */
+    FKSortField = null;
+    /** Active sort direction; only meaningful when {@link FKSortField} is set. */
+    FKSortDir = 'asc';
+    /** Unsorted snapshot of the current suggestions, used to restore natural order. */
+    _fkSuggestionsNatural = [];
     /** Text the user is currently typing in the FK search input. null = use display name. */
     _fkInputText = null;
+    /**
+     * The active search query that produced the current results — `''` on a focus/clear
+     * browse (full list), the typed text when filtering. Distinct from {@link _fkInputText},
+     * which holds the *displayed* text (the selected record's name when not typing). This is
+     * the correct signal for "browse mode" and for the create-footer label.
+     */
+    _fkQuery = '';
     /** Debounce timer for FK search */
     _fkSearchTimeout = null;
     /** Last known FK input element for position recalculation */
     _lastFKInputEl = null;
+    /** Monotonic token so a slow DB response from a stale query can't clobber a newer one. */
+    _fkSearchSeq = 0;
+    /** Cached column plan for the current related entity (rebuilt on demand). */
+    _fkColumnPlan = null;
+    // ---- Scope / search-field picker (Option B) ----
+    /** Related-entity field code name currently searched against (defaults to the name field). */
+    FKSearchField = '';
+    /** Friendly label of {@link FKSearchField}, shown on the scope pill. */
+    FKSearchFieldLabel = '';
+    /** Whether the scope-picker menu is open. */
+    FKShowScopeMenu = false;
+    /** Whether the FK input is focused — the scope pill only appears while focused. */
+    FKFocused = false;
+    /** Fields the user can scope the search to (name + shown columns + other fields). */
+    FKSearchableFields = [];
+    // ---- Per-user persisted prefs (scope / sort / column widths) ----
+    /** User-resized column widths in px, keyed by related-entity field code name. */
+    _fkColWidths = {};
+    /** The (host entity|field) pref key currently loaded; reload when it changes. */
+    _fkPrefKey = null;
+    /** Active column-resize drag, or null when not resizing. */
+    _fkResize = null;
+    _fkResizeMove = null;
+    _fkResizeUp = null;
     /** The display text shown in the FK search input */
     get FKSearchText() {
         if (this._fkInputText !== null)
             return this._fkInputText;
         return this.FKDisplayName || '';
     }
+    /**
+     * True when this FK currently points at a real record (has a value AND we can show
+     * its name). Drives the "linked" affordance — the chain icon + accent — so the user
+     * can tell at a glance this is a resolved link, not free text.
+     */
+    get FKHasLinkedValue() {
+        return this.Value != null && this.Value !== '' && this.FKDisplayName != null;
+    }
+    /** Whether a dropdown row is the record currently linked by this FK (UUID-safe compare). */
+    IsFKRowSelected(suggestion) {
+        const v = this.Value;
+        const pk = suggestion.PrimaryKeyValue;
+        if (v == null || pk == null)
+            return false;
+        return UUIDsEqual(String(v), String(pk));
+    }
+    /**
+     * Resolves the related `EntityInfo` for this FK field via the instance provider
+     * (multi-provider safe — never the global `Metadata`).
+     */
+    getRelatedEntityInfo() {
+        const relatedName = this.FieldInfo?.RelatedEntity;
+        if (!relatedName)
+            return undefined;
+        return this.ProviderToUse.EntityByName(relatedName);
+    }
+    /**
+     * Returns the LIVE cached array of records for the related entity IF a loaded
+     * engine holds the full (unfiltered) set; otherwise null. Records are read-only —
+     * never mutate. Wraps {@link BaseEngineRegistry.TryGetCachedRecords}.
+     */
+    getCachedRecordsForRelatedEntity() {
+        const relatedName = this.FieldInfo?.RelatedEntity;
+        if (!relatedName)
+            return null;
+        const registry = BaseEngineRegistry.Instance;
+        const records = registry.TryGetCachedRecords(relatedName, { unfilteredOnly: true });
+        // Treat an empty (or absent) cache as "no usable cache" so callers fall through
+        // to the DB path and still show options on focus — never a blank dropdown.
+        return records && records.length > 0 ? records : null;
+    }
+    /**
+     * Builds (and memoizes) the column plan for the related entity: the name field,
+     * the PK field used as the FK value, and the extra `DefaultInView` columns
+     * (excluding the name + PK). Returns null when the related entity can't be resolved
+     * or has no usable name/PK.
+     */
+    buildColumnPlan() {
+        if (this._fkColumnPlan) {
+            this.ensureLinkedFieldPrefsLoaded(this._fkColumnPlan);
+            return this._fkColumnPlan;
+        }
+        const relatedEntity = this.getRelatedEntityInfo();
+        if (!relatedEntity)
+            return null;
+        const nameField = relatedEntity.NameField;
+        const pkFields = relatedEntity.PrimaryKeys;
+        if (!nameField && (!pkFields || pkFields.length !== 1))
+            return null;
+        const nameFieldName = nameField ? nameField.Name : pkFields[0].Name;
+        const pkFieldName = this.FieldInfo?.RelatedEntityFieldName || (pkFields?.[0]?.Name ?? 'ID');
+        // A field flagged ExtendedType='Icon' holds a per-row icon class — render it
+        // as the row's leading glyph, not as a text column.
+        const iconField = relatedEntity.Fields.find(f => f.ExtendedType === 'Icon');
+        const iconFieldName = iconField?.Name ?? null;
+        const columnFields = this.computeOrderedColumns(relatedEntity, nameFieldName, pkFieldName, iconFieldName);
+        const extraFieldNames = columnFields.filter(c => c !== nameFieldName);
+        this._fkColumnPlan = {
+            NameFieldName: nameFieldName,
+            PkFieldName: pkFieldName,
+            ColumnFields: columnFields,
+            ExtraFieldNames: extraFieldNames,
+            ExtraHeaders: extraFieldNames.map(n => this.labelForRelatedField(n)),
+            IconFieldName: iconFieldName,
+            EntityIcon: relatedEntity.Icon || null
+        };
+        this.FKSearchableFields = this.buildSearchableFields(this._fkColumnPlan);
+        this.ensureLinkedFieldPrefsLoaded(this._fkColumnPlan);
+        return this._fkColumnPlan;
+    }
+    /**
+     * Whether a `DefaultInView` field is worth showing as an extra dropdown column.
+     * Excludes columns that read as opaque noise to a human picking a record:
+     *   • Primary keys (UUIDs/identities).
+     *   • Foreign-key columns — these hold the related record's raw ID (e.g. `ParentID`
+     *     → a GUID), not a human-readable label. The view's joined *name* field (if it's
+     *     itself `DefaultInView`) is the readable substitute and is kept.
+     */
+    isUsefulExtraColumn(f) {
+        if (f.IsPrimaryKey)
+            return false;
+        if (f.RelatedEntityID && f.RelatedEntityID.length > 0)
+            return false; // foreign key → raw ID
+        return true;
+    }
+    /**
+     * The ordered list of display columns INCLUDING the name field — the user-reorderable
+     * column order. Honors a user `visibleFields` override (exact set + order, letting them
+     * add fields like ID, drop defaults, or move the name field); otherwise falls back to
+     * `[name, ...DefaultInView columns]`. The name field is always guaranteed present, and
+     * the icon field is never a text column.
+     */
+    computeOrderedColumns(relatedEntity, nameFieldName, pkFieldName, iconFieldName) {
+        const exists = (n) => n !== iconFieldName && !!relatedEntity.Fields.find(f => f.Name === n);
+        const saved = this.fkHostEntityName && this.fkFieldCodeName
+            ? LinkedFieldOptionsStore.Instance.Get(this.fkHostEntityName, this.fkFieldCodeName) : undefined;
+        let cols;
+        if (saved?.visibleFields) {
+            cols = saved.visibleFields.filter(exists);
+            // Migrate older prefs (stored extras-only, without the name field) and guarantee
+            // the name field is always present.
+            if (!cols.includes(nameFieldName))
+                cols = [nameFieldName, ...cols];
+        }
+        else {
+            const defaults = relatedEntity.Fields
+                .filter(f => f.DefaultInView && f.Name !== nameFieldName && f.Name !== pkFieldName
+                && f.Name !== iconFieldName && this.isUsefulExtraColumn(f))
+                .map(f => f.Name);
+            cols = [nameFieldName, ...defaults];
+        }
+        // De-dupe (preserve order) and ensure the name field is present.
+        const seen = new Set();
+        const ordered = cols.filter(c => (seen.has(c) ? false : (seen.add(c), true)));
+        if (!ordered.includes(nameFieldName))
+            ordered.unshift(nameFieldName);
+        return ordered;
+    }
+    // ============================================
+    // SCOPE PICKER + PER-USER PREFS
+    // ============================================
+    /** Host entity name (the entity whose form this field belongs to), or null. */
+    get fkHostEntityName() {
+        return this.Record?.EntityInfo?.Name ?? null;
+    }
+    /** This FK field's code name on the host entity, or null. */
+    get fkFieldCodeName() {
+        return this.FieldInfo?.Name ?? null;
+    }
+    /** Whether the active search column is the name field (drives where we highlight). */
+    isSearchingNameField(plan) {
+        return !this.FKSearchField || this.FKSearchField === plan.NameFieldName;
+    }
+    /** A field is scope-searchable if it's a string column (LIKE-able) and not a system column. */
+    isScopeSearchableField(f) {
+        if (f.TSType !== EntityFieldTSType.String)
+            return false;
+        if (f.Name.startsWith('__mj_'))
+            return false;
+        return true;
+    }
+    /** Friendly label for a related-entity field code name. */
+    labelForRelatedField(name) {
+        return this.getRelatedEntityInfo()?.Fields.find(x => x.Name === name)?.DisplayNameOrName ?? name;
+    }
+    /** Whether a field code name exists on the related entity (guards stale saved prefs). */
+    isValidRelatedField(name) {
+        return !!this.getRelatedEntityInfo()?.Fields.find(x => x.Name === name);
+    }
+    /**
+     * Build the scope-picker field list: the name + shown columns ('shown' group),
+     * then any other searchable string fields like ID/Status ('other' group).
+     */
+    buildSearchableFields(plan) {
+        const re = this.getRelatedEntityInfo();
+        if (!re)
+            return [];
+        const iconFor = (fieldName) => {
+            if (fieldName === plan.NameFieldName)
+                return 'fa-solid fa-font';
+            return re.Fields.find(x => x.Name === fieldName)?.IsPrimaryKey ? 'fa-solid fa-hashtag' : 'fa-solid fa-tag';
+        };
+        // 'shown' group rendered in the actual column order so the menu matches the grid
+        // (and so the up/down arrows hide correctly on the true first/last columns).
+        const shown = new Set(plan.ColumnFields);
+        const list = plan.ColumnFields.map(fieldName => ({
+            FieldName: fieldName,
+            Label: this.labelForRelatedField(fieldName),
+            Icon: iconFor(fieldName),
+            Group: 'shown'
+        }));
+        for (const f of re.Fields) {
+            if (shown.has(f.Name) || f.Name === plan.IconFieldName)
+                continue;
+            if (!this.isScopeSearchableField(f))
+                continue;
+            list.push({
+                FieldName: f.Name,
+                Label: f.DisplayNameOrName,
+                Icon: f.IsPrimaryKey ? 'fa-solid fa-hashtag' : 'fa-solid fa-font',
+                Group: 'other'
+            });
+        }
+        return list;
+    }
+    /**
+     * Load this (host entity, FK field)'s saved prefs — search scope, sort, column
+     * widths — once per field. No-ops when the field hasn't changed. Falls back to
+     * defaults (search the name field, natural sort, content-sized columns) and only
+     * applies a saved value when it still resolves to a real field.
+     */
+    ensureLinkedFieldPrefsLoaded(plan) {
+        const key = this.fkHostEntityName && this.fkFieldCodeName
+            ? `${this.fkHostEntityName}|${this.fkFieldCodeName}` : null;
+        if (key === this._fkPrefKey)
+            return;
+        this._fkPrefKey = key;
+        // Defaults
+        this.FKSearchField = plan.NameFieldName;
+        this._fkColWidths = {};
+        const saved = this.fkHostEntityName && this.fkFieldCodeName
+            ? LinkedFieldOptionsStore.Instance.Get(this.fkHostEntityName, this.fkFieldCodeName) : undefined;
+        if (saved) {
+            if (saved.searchField && this.isValidRelatedField(saved.searchField)) {
+                this.FKSearchField = saved.searchField;
+            }
+            if (saved.sortField !== undefined && (saved.sortField === null || this.isValidRelatedField(saved.sortField))) {
+                this.FKSortField = saved.sortField;
+                this.FKSortDir = saved.sortDir ?? 'asc';
+            }
+            if (saved.colWidths)
+                this._fkColWidths = { ...saved.colWidths };
+        }
+        this.FKSearchFieldLabel = this.labelForRelatedField(this.FKSearchField);
+    }
+    /** Format a raw cell value for display in the dropdown (delegates to the pure helper). */
+    formatCell(val) {
+        return FormatFKCell(val);
+    }
+    /**
+     * Build the suggestion view-models from a set of plain rows (cached or DB),
+     * applying the typed-query substring highlight to the name column.
+     * `getField` abstracts cached BaseEntity rows (`.Get(name)`) vs simple objects.
+     */
+    buildSuggestions(rows, plan, query) {
+        const searchField = this.FKSearchField || plan.NameFieldName;
+        // Only highlight the column actually being searched, and only when enabled.
+        const nameQuery = (this.FKHighlightMatches && this.isSearchingNameField(plan)) ? query : '';
+        return rows.map(row => {
+            const name = this.formatCell(row.get(plan.NameFieldName));
+            // Per-row icon from the entity's ExtendedType='Icon' field; else the
+            // entity-level icon; else none.
+            const rowIcon = plan.IconFieldName ? this.formatCell(row.get(plan.IconFieldName)).trim() : '';
+            return {
+                PrimaryKeyValue: row.get(plan.PkFieldName),
+                DisplayName: name,
+                // Empty query yields the (still HTML-escaped) plain name — no marks.
+                HighlightedName: HighlightSearchMatches(name, nameQuery, 'mj-forms-search-highlight'),
+                ExtraColumns: plan.ExtraFieldNames.map((fieldName, i) => {
+                    const value = this.formatCell(row.get(fieldName));
+                    const colQuery = (this.FKHighlightMatches && fieldName === searchField) ? query : '';
+                    return {
+                        FieldName: fieldName,
+                        Header: plan.ExtraHeaders[i],
+                        Value: value,
+                        HighlightedValue: HighlightSearchMatches(value, colQuery, 'mj-forms-search-highlight')
+                    };
+                }),
+                Icon: (rowIcon || plan.EntityIcon) || null
+            };
+        });
+    }
+    /** Apply a freshly-built suggestion list to the dropdown state + reposition + portal. */
+    applySuggestions(suggestions, plan) {
+        // Pinned "currently selected" row: in browse mode (empty query) with a valid linked
+        // value, lift the selected record into a sticky section and remove it from the list so
+        // the user can keep it or pick another without clearing first.
+        this.FKSelectedSuggestion = null;
+        const browseMode = this._fkQuery.trim().length === 0;
+        if (browseMode && this.FKHasLinkedValue) {
+            const idx = suggestions.findIndex(s => this.IsFKRowSelected(s));
+            if (idx >= 0) {
+                this.FKSelectedSuggestion = suggestions[idx];
+                suggestions = suggestions.filter((_, i) => i !== idx);
+            }
+            else {
+                // Selected record isn't in the (first-N) result — show a lightweight pinned row.
+                this.FKSelectedSuggestion = this.buildSelectedFallbackSuggestion(plan);
+            }
+        }
+        this._fkSuggestionsNatural = suggestions;
+        this.FKNameField = plan.NameFieldName;
+        // Full ordered column list (incl. the name field) + matching headers.
+        this.FKColumnFields = plan.ColumnFields;
+        this.FKColumnHeaders = plan.ColumnFields.map(c => c === plan.NameFieldName ? 'Name' : this.labelForRelatedField(c));
+        this.FKHasIconColumn = (this.FKSelectedSuggestion?.Icon != null) || suggestions.some(s => s.Icon != null);
+        this.FKSuggestions = this.sortSuggestions(suggestions);
+        this.FKActiveIndex = this.FKSuggestions.length > 0 ? 0 : -1;
+        this.FKNoMatches = suggestions.length === 0 && !this.FKSelectedSuggestion;
+        // Show the dropdown for rows, a "no matches" state, or just the pinned selection.
+        this.ShowFKDropdown = suggestions.length > 0 || this.FKNoMatches || !!this.FKSelectedSuggestion;
+        if (this.ShowFKDropdown && this._lastFKInputEl) {
+            this.updateDropdownPosition(this._lastFKInputEl);
+            this.startScrollListener();
+            this.portalDropdownToBody();
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Build a lightweight pinned row for the selected record when it isn't present in the
+     * current result set (DB beyond first-N, or cached beyond the focus-show limit). We have
+     * its display name from the FK name resolution; extra-column values are left blank.
+     */
+    buildSelectedFallbackSuggestion(plan) {
+        const name = this.FKDisplayName;
+        if (this.Value == null || this.Value === '' || !name)
+            return null;
+        return {
+            PrimaryKeyValue: this.Value,
+            DisplayName: name,
+            HighlightedName: HighlightSearchMatches(name, '', 'mj-forms-search-highlight'),
+            ExtraColumns: plan.ExtraFieldNames.map((fn, i) => ({
+                FieldName: fn, Header: plan.ExtraHeaders[i], Value: '', HighlightedValue: ''
+            })),
+            Icon: plan.EntityIcon ?? null
+        };
+    }
+    /**
+     * Returns a sorted copy of the suggestions per the active sort column/direction.
+     * Null sort field → natural order (original array, untouched). Sorts on the name
+     * column's `DisplayName` or the matching extra column's formatted `Value`,
+     * case-insensitively.
+     */
+    sortSuggestions(suggestions) {
+        const field = this.FKSortField;
+        if (!field)
+            return suggestions;
+        const keyOf = (s) => {
+            if (field === this.FKNameField)
+                return s.DisplayName ?? '';
+            return s.ExtraColumns.find(c => c.FieldName === field)?.Value ?? '';
+        };
+        const dir = this.FKSortDir === 'desc' ? -1 : 1;
+        return [...suggestions].sort((a, b) => dir * keyOf(a).localeCompare(keyOf(b), undefined, { numeric: true, sensitivity: 'base' }));
+    }
+    /**
+     * Toggle the sort on a column header: same column cycles asc → desc → none;
+     * a new column starts at asc. Re-derives the visible list from the natural snapshot.
+     */
+    OnFKSortToggle(fieldName) {
+        if (this.FKSortField === fieldName) {
+            if (this.FKSortDir === 'asc')
+                this.FKSortDir = 'desc';
+            else {
+                this.FKSortField = null;
+                this.FKSortDir = 'asc';
+            } // desc → cleared
+        }
+        else {
+            this.FKSortField = fieldName;
+            this.FKSortDir = 'asc';
+        }
+        this.FKSuggestions = this.sortSuggestions(this._fkSuggestionsNatural);
+        this.FKActiveIndex = this.FKSuggestions.length > 0 ? 0 : -1;
+        this.persistLinkedFieldSort();
+        this.cdr.markForCheck();
+    }
+    /** Persist the active sort for this (host entity, FK field) pair. */
+    persistLinkedFieldSort() {
+        if (this.fkHostEntityName && this.fkFieldCodeName) {
+            LinkedFieldOptionsStore.Instance.SetSort(this.fkHostEntityName, this.fkFieldCodeName, this.FKSortField, this.FKSortDir);
+        }
+    }
+    /** FontAwesome class for a column header's sort indicator (idle / asc / desc). */
+    FKSortIcon(fieldName) {
+        if (this.FKSortField !== fieldName)
+            return 'fa-solid fa-sort mj-fk-sort-icon mj-fk-sort-icon--idle';
+        return this.FKSortDir === 'asc'
+            ? 'fa-solid fa-sort-up mj-fk-sort-icon'
+            : 'fa-solid fa-sort-down mj-fk-sort-icon';
+    }
+    // ---- Scope pill (search-field picker) ----
+    /** Toggle the scope-picker menu. mousedown+preventDefault keeps the input focused. */
+    OnFKScopeToggle(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.FKShowScopeMenu = !this.FKShowScopeMenu;
+        this.cdr.markForCheck();
+    }
+    /** Whether a scope-menu row is the active search field. */
+    IsFKScopeActive(field) {
+        return field.FieldName === (this.FKSearchField || this.FKNameField);
+    }
+    /** Whether there are non-visible searchable fields (drives the "Other fields" group). */
+    get FKHasOtherSearchableFields() {
+        return this.FKSearchableFields.some(f => f.Group === 'other');
+    }
+    /** User picked a field to search by — persist the override and re-run the search. */
+    OnFKScopeSelect(event, field) {
+        event.preventDefault();
+        this.selectScope(field);
+    }
+    /** Set the active search field (used by click + the no-drag path of menu drag). */
+    selectScope(field) {
+        this.FKSearchField = field.FieldName;
+        this.FKSearchFieldLabel = field.Label;
+        this.FKShowScopeMenu = false;
+        if (this.fkHostEntityName && this.fkFieldCodeName) {
+            LinkedFieldOptionsStore.Instance.SetSearchField(this.fkHostEntityName, this.fkFieldCodeName, field.FieldName);
+        }
+        this.rerunCurrentFKSearch();
+        this.cdr.markForCheck();
+    }
+    /** Re-run the active query against the (possibly newly-chosen) search field. */
+    rerunCurrentFKSearch() {
+        const query = this._fkQuery;
+        const cached = this.getCachedRecordsForRelatedEntity();
+        if (cached)
+            this.searchCachedEntity(cached, query);
+        else
+            void this.searchRelatedEntity(query);
+    }
+    // ---- Column visibility (show/hide a field as a column) ----
+    /** Whether a field is currently rendered as a column (the Name column is always shown). */
+    IsFKColumnVisible(field) {
+        return field.FieldName === this.FKNameField || this.FKColumnFields.includes(field.FieldName);
+    }
+    /** Whether this field's column visibility can be toggled (Name is always shown). */
+    CanToggleFKColumn(field) {
+        return field.FieldName !== this.FKNameField;
+    }
+    /**
+     * Toggle whether a field shows as a column. Persists the full visible set, then
+     * rebuilds the column plan + re-runs the search so the grid reflects it live.
+     * stopPropagation so the row's search-scope click doesn't also fire.
+     */
+    OnFKColumnToggle(event, field) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.CanToggleFKColumn(field))
+            return;
+        const next = [...this.FKColumnFields];
+        const idx = next.indexOf(field.FieldName);
+        if (idx >= 0)
+            next.splice(idx, 1);
+        else
+            next.push(field.FieldName);
+        this.applyVisibleColumns(next);
+    }
+    /** Persist a new visible-column set/order and rebuild the grid live. */
+    applyVisibleColumns(cols) {
+        if (this.fkHostEntityName && this.fkFieldCodeName) {
+            LinkedFieldOptionsStore.Instance.SetVisibleFields(this.fkHostEntityName, this.fkFieldCodeName, cols);
+        }
+        this._fkColumnPlan = null; // force rebuild with the new column set/order
+        this.rerunCurrentFKSearch();
+        this.cdr.markForCheck();
+    }
+    // ---- Column reorder (up/down arrows in the field-selector menu) ----
+    /** Whether the column can move up (it's a column and not already first). */
+    CanMoveFKColumnUp(field) {
+        return this.FKColumnFields.indexOf(field) > 0;
+    }
+    /** Whether the column can move down (it's a column and not already last). */
+    CanMoveFKColumnDown(field) {
+        const i = this.FKColumnFields.indexOf(field);
+        return i >= 0 && i < this.FKColumnFields.length - 1;
+    }
+    /**
+     * Move a column one slot up (delta -1) or down (delta +1) and persist. mousedown +
+     * stopPropagation so the row's select-scope handler doesn't fire and the menu stays open.
+     */
+    MoveFKColumn(event, field, delta) {
+        event.preventDefault();
+        event.stopPropagation();
+        const cols = [...this.FKColumnFields];
+        const i = cols.indexOf(field);
+        const j = i + delta;
+        if (i < 0 || j < 0 || j >= cols.length)
+            return;
+        [cols[i], cols[j]] = [cols[j], cols[i]];
+        this.applyVisibleColumns(cols);
+    }
+    /**
+     * CSS `grid-template-columns` for the dropdown grid: optional icon column, then one
+     * track per ordered column. The LAST column grows to fill any remaining width (`1fr`)
+     * so the grid never leaves dead space on the right; earlier columns size to content.
+     * A user-resized column uses its saved pixel width as the floor.
+     */
+    get FKGridTemplateColumns() {
+        const cols = [];
+        if (this.FKHasIconColumn)
+            cols.push('min-content');
+        const lastIdx = this.FKColumnFields.length - 1;
+        this.FKColumnFields.forEach((field, i) => cols.push(this.fkColumnTrack(field, i === lastIdx)));
+        return cols.join(' ');
+    }
+    /**
+     * Track sizing for one column. Resized → fixed px (the last column still grows past it
+     * via `1fr` when there's room). Default → content-sized, except the last column which
+     * fills remaining space.
+     */
+    fkColumnTrack(field, isLast) {
+        const w = this._fkColWidths[field];
+        const min = field === this.FKNameField ? 120 : 80;
+        if (w)
+            return isLast ? `minmax(${w}px, 1fr)` : `${w}px`;
+        return isLast ? `minmax(${min}px, 1fr)` : `minmax(${min}px, max-content)`;
+    }
+    /** Whether a column's cells should stretch to fill their track (last column or resized). */
+    FKColumnFillsTrack(field, isLast) {
+        return isLast || this._fkColWidths[field] != null;
+    }
+    /** The built cell (value + highlighted html) for a non-name column of a suggestion. */
+    FKCellFor(suggestion, field) {
+        return suggestion.ExtraColumns.find(c => c.FieldName === field);
+    }
+    /** Header sort handler (grid headers click-to-sort only; drag-reorder is menu-only). */
+    OnFKHeaderSort(event, field) {
+        event.preventDefault(); // keep input focus so the body-portaled dropdown stays open
+        this.OnFKSortToggle(field);
+    }
+    // ---- Column resize (drag a header's right edge) ----
+    /** Begin resizing a column. stopPropagation so the header's sort handler doesn't fire. */
+    OnFKColResizeStart(event, field) {
+        event.preventDefault();
+        event.stopPropagation();
+        const headerCell = event.target.closest('.mj-fk-hcell');
+        const startWidth = headerCell ? headerCell.offsetWidth : 120;
+        this._fkResize = { field, startX: event.clientX, startWidth };
+        this._fkResizeMove = (e) => this.onFKColResizeMove(e);
+        this._fkResizeUp = () => this.onFKColResizeEnd();
+        document.addEventListener('mousemove', this._fkResizeMove);
+        document.addEventListener('mouseup', this._fkResizeUp);
+    }
+    onFKColResizeMove(e) {
+        if (!this._fkResize)
+            return;
+        const width = Math.max(60, Math.round(this._fkResize.startWidth + (e.clientX - this._fkResize.startX)));
+        this._fkColWidths = { ...this._fkColWidths, [this._fkResize.field]: width };
+        this.cdr.markForCheck();
+    }
+    onFKColResizeEnd() {
+        if (this._fkResize) {
+            const width = this._fkColWidths[this._fkResize.field];
+            if (width && this.fkHostEntityName && this.fkFieldCodeName) {
+                LinkedFieldOptionsStore.Instance.SetColWidth(this.fkHostEntityName, this.fkFieldCodeName, this._fkResize.field, width);
+            }
+        }
+        this.teardownFKResizeListeners();
+        this.cdr.markForCheck();
+    }
+    teardownFKResizeListeners() {
+        if (this._fkResizeMove)
+            document.removeEventListener('mousemove', this._fkResizeMove);
+        if (this._fkResizeUp)
+            document.removeEventListener('mouseup', this._fkResizeUp);
+        this._fkResize = null;
+        this._fkResizeMove = null;
+        this._fkResizeUp = null;
+    }
     /** Handle typing in the FK search input */
     OnFKInput(event) {
         const input = event.target;
         this._fkInputText = input.value;
         this._lastFKInputEl = input;
         this.FKIsMatched = false;
-        // Debounce search
+        const query = this._fkInputText;
+        // Cached fast path: filter the in-memory array immediately (no DB, no debounce).
+        const cached = this.getCachedRecordsForRelatedEntity();
+        if (cached) {
+            if (this._fkSearchTimeout) {
+                clearTimeout(this._fkSearchTimeout);
+                this._fkSearchTimeout = null;
+            }
+            this.searchCachedEntity(cached, query);
+            return;
+        }
+        // DB path: debounce a RunView search. Empty query (cleared field) → first N,
+        // so clearing the field reveals the list rather than closing it.
         if (this._fkSearchTimeout)
             clearTimeout(this._fkSearchTimeout);
         this._fkSearchTimeout = setTimeout(() => {
-            if (this._fkInputText && this._fkInputText.length >= 1) {
-                this.searchRelatedEntity(this._fkInputText);
-            }
-            else {
-                this.FKSuggestions = [];
-                this.ShowFKDropdown = false;
-                this.stopScrollListener();
-                this.cdr.markForCheck();
-            }
+            void this.searchRelatedEntity(this._fkInputText ?? '');
         }, 300);
     }
-    /** Show dropdown on focus if suggestions exist */
+    /**
+     * Show dropdown on focus. With a cached-unfiltered entity we immediately show the
+     * first N rows (sorted by name) even on empty input — zero DB round-trips. Without
+     * a cache we keep prior behavior: only re-open if we already have suggestions.
+     */
     OnFKFocus(event) {
         const input = event.target;
         this._lastFKInputEl = input;
-        if (this.FKSuggestions.length > 0) {
-            this.updateDropdownPosition(input);
-            this.startScrollListener();
-            this.ShowFKDropdown = true;
+        this.FKFocused = true; // reveal the scope pill while focused
+        // Select any pre-filled (linked) text so the first keystroke replaces it instead
+        // of appending — matches how a searchable dropdown behaves.
+        if (input.value)
+            input.select();
+        this.showInitialFKSuggestions();
+    }
+    /**
+     * Show the initial suggestion list (no/empty query): the full set from a cached
+     * unfiltered engine, otherwise the first N rows via a DB query. Used on focus and
+     * when the field is cleared, so the user always sees options without typing.
+     */
+    showInitialFKSuggestions() {
+        // Always show the FULL list (empty query) on focus/clear — even when a value is
+        // already selected — so the user can browse and re-pick like a normal dropdown.
+        // Filtering only kicks in once they actually type (OnFKInput).
+        const cached = this.getCachedRecordsForRelatedEntity();
+        if (cached) {
+            if (this._fkSearchTimeout) {
+                clearTimeout(this._fkSearchTimeout);
+                this._fkSearchTimeout = null;
+            }
+            this.searchCachedEntity(cached, '');
+            return;
+        }
+        void this.searchRelatedEntity('');
+    }
+    /**
+     * In-memory search over a cached-unfiltered entity array. Case-insensitive substring
+     * on the name field. Empty query → first N rows sorted by name (focus-show). Instant,
+     * no spinner, no DB.
+     */
+    searchCachedEntity(records, query) {
+        const plan = this.buildColumnPlan();
+        if (!plan) {
+            this.closeFKDropdown();
             this.cdr.markForCheck();
+            return;
         }
+        this._fkQuery = query;
+        const accessor = (r) => ({ get: (field) => r.Get(field) });
+        const searchField = this.FKSearchField || plan.NameFieldName;
+        const matches = FilterCachedFKRows(records, query, MjFormFieldComponent.FK_FOCUS_SHOW_LIMIT, r => r.Get(searchField));
+        this.FKLoading = false;
+        this.applySuggestions(this.buildSuggestions(matches.map(accessor), plan, query), plan);
     }
     /** Hide dropdown on blur, revert to matched name if user didn't select */
     OnFKBlur() {
-        // Small delay so mousedown on dropdown items fires first
+        // Small delay so mousedown on dropdown items / scope menu fires first
         setTimeout(() => {
-            this.ShowFKDropdown = false;
-            this.stopScrollListener();
+            this.closeFKDropdown();
+            this.FKShowScopeMenu = false;
+            this.FKFocused = false; // hide the scope pill
             // If user was typing but didn't select, revert to display name
             if (!this.FKIsMatched && this._fkInputText !== null) {
                 this._fkInputText = null;
@@ -852,14 +2022,66 @@ export class MjFormFieldComponent extends BaseAngularComponent {
             this.cdr.markForCheck();
         }, 200);
     }
-    /** Select an item from the FK dropdown */
+    /**
+     * Keyboard navigation in the FK input: ArrowDown/ArrowUp move the active row,
+     * Enter selects it, Escape closes the dropdown.
+     */
+    OnFKKeydown(event) {
+        if (!this.ShowFKDropdown || this.FKSuggestions.length === 0) {
+            if (event.key === 'Escape') {
+                this.closeFKDropdown();
+                this.cdr.markForCheck();
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.FKActiveIndex = Math.min(this.FKActiveIndex + 1, this.FKSuggestions.length - 1);
+                this.scrollActiveOptionIntoView();
+                this.cdr.markForCheck();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.FKActiveIndex = Math.max(this.FKActiveIndex - 1, 0);
+                this.scrollActiveOptionIntoView();
+                this.cdr.markForCheck();
+                break;
+            case 'Enter': {
+                const active = this.FKSuggestions[this.FKActiveIndex];
+                if (active) {
+                    event.preventDefault();
+                    this.selectFKSuggestion(active);
+                }
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                this.closeFKDropdown();
+                this.cdr.markForCheck();
+                break;
+        }
+    }
+    /** Scroll the keyboard-active option into view inside the (possibly portaled) dropdown. */
+    scrollActiveOptionIntoView() {
+        Promise.resolve().then(() => {
+            const dropdown = this._portaledDropdownEl
+                ?? this.hostRef?.nativeElement?.querySelector('.mj-fk-dropdown');
+            const active = dropdown?.querySelectorAll('.mj-fk-option')[this.FKActiveIndex];
+            active?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    /** Select an item from the FK dropdown (mouse) */
     OnFKSelectItem(suggestion, event) {
         event.preventDefault();
+        this.selectFKSuggestion(suggestion);
+    }
+    /** Shared selection logic for mouse-click and keyboard-Enter. */
+    selectFKSuggestion(suggestion) {
         this._fkInputText = suggestion.DisplayName;
         this.Value = suggestion.PrimaryKeyValue;
         this.FKIsMatched = true;
-        this.ShowFKDropdown = false;
-        this.stopScrollListener();
+        this.closeFKDropdown();
         // Update virtual name field for visual consistency after save
         const nameFieldMap = this.FieldInfo?.RelatedEntityNameFieldMap;
         if (nameFieldMap) {
@@ -867,72 +2089,150 @@ export class MjFormFieldComponent extends BaseAngularComponent {
         }
         this.cdr.markForCheck();
     }
+    // ---- Inline "create new related record" ----
+    /**
+     * Whether to show the inline-create affordance: the field opts in (`AllowFKCreate`),
+     * the related entity resolves, and the current user can create records of it (entity
+     * allows creation + role permits — `GetUserPermisions().CanCreate` folds in `AllowCreateAPI`).
+     */
+    get CanCreateFK() {
+        if (!this.AllowFKCreate)
+            return false;
+        const re = this.getRelatedEntityInfo();
+        const user = this.ProviderToUse?.CurrentUser;
+        if (!re || !user)
+            return false;
+        return re.GetUserPermisions(user)?.CanCreate === true;
+    }
+    /** Footer label: prefilled with the typed text when present, else generic "create new". */
+    get FKCreateLabel() {
+        const entityLabel = this.getRelatedEntityInfo()?.DisplayName || this.FieldInfo?.RelatedEntity || 'record';
+        const query = this._fkQuery.trim();
+        return query ? `Create "${query}"` : `Create new ${entityLabel}`;
+    }
+    /**
+     * Ask the host (app layer) to create a new related record, prefilled with the typed
+     * text as the name. We only EMIT the request — opening the form is the app's job (the
+     * generic forms layer must not depend on the app-level form presenter). The host calls
+     * `Complete(record)` when saved and we select it.
+     */
+    OnFKCreateNew(event) {
+        event.preventDefault(); // don't blur the input before we capture the query
+        const plan = this.buildColumnPlan();
+        const relatedEntity = this.FieldInfo?.RelatedEntity;
+        if (!plan || !relatedEntity)
+            return;
+        const query = this._fkQuery.trim();
+        this.FKShowScopeMenu = false;
+        this.FKFocused = false;
+        this.closeFKDropdown();
+        this.cdr.markForCheck();
+        const newRecordValues = {};
+        if (query)
+            newRecordValues[plan.NameFieldName] = query;
+        this.Navigate.emit({
+            Kind: 'create-related',
+            EntityName: relatedEntity,
+            NewRecordValues: Object.keys(newRecordValues).length ? newRecordValues : undefined,
+            Presentation: this.FKCreatePresentation,
+            Provider: this.Provider ?? undefined,
+            Complete: (created) => { if (created)
+                this.selectCreatedFKRecord(created, plan); },
+        });
+    }
+    /** Select a freshly-created related record as this field's value. */
+    selectCreatedFKRecord(created, plan) {
+        const pk = created.Get(plan.PkFieldName);
+        if (pk == null)
+            return;
+        const name = this.formatCell(created.Get(plan.NameFieldName));
+        this._fkInputText = name;
+        this.Value = pk;
+        this.FKIsMatched = true;
+        const nameFieldMap = this.FieldInfo?.RelatedEntityNameFieldMap;
+        if (nameFieldMap)
+            this.Record.Set(nameFieldMap, name);
+        this.closeFKDropdown();
+        this.cdr.markForCheck();
+    }
     /** Clear FK value via the X button */
     OnFKClearClick(event) {
+        // preventDefault keeps focus on the input (the button never steals it), so the
+        // freshly-opened dropdown stays open for the user to pick a replacement.
         event.preventDefault();
         this.Value = null;
         this._fkInputText = null;
         this.FKIsMatched = false;
-        this.FKSuggestions = [];
-        this.ShowFKDropdown = false;
-        this.stopScrollListener();
         this._resolvedFKName = undefined;
         this._resolvedFKValue = undefined;
         const nameFieldMap = this.FieldInfo?.RelatedEntityNameFieldMap;
         if (nameFieldMap) {
             this.Record.Set(nameFieldMap, '');
         }
+        // Re-open the full list — clearing almost always precedes picking something else.
+        this.showInitialFKSuggestions();
         this.cdr.markForCheck();
     }
+    /** Close the FK dropdown and reset its transient view state. */
+    closeFKDropdown() {
+        this.ShowFKDropdown = false;
+        this.FKLoading = false;
+        this.FKNoMatches = false;
+        this.FKActiveIndex = -1;
+        this.FKSelectedSuggestion = null;
+        this._portaledDropdownEl = null;
+        this.stopScrollListener();
+    }
     /**
-     * Perform a RunView search on the related entity's name field.
+     * Perform a RunView search on the related entity's name field (DB path — used only
+     * when no loaded engine caches the related entity unfiltered).
      * Falls back to searching by primary key when no NameField exists (single-field PKs only).
      */
     async searchRelatedEntity(query) {
+        const plan = this.buildColumnPlan();
         const fieldInfo = this.FieldInfo;
-        if (!fieldInfo?.RelatedEntity)
-            return;
-        const md = this.ProviderToUse;
-        const relatedEntity = md.Entities.find(e => e.Name === fieldInfo.RelatedEntity);
-        if (!relatedEntity)
+        if (!plan || !fieldInfo?.RelatedEntity)
             return;
-        const nameField = relatedEntity.NameField;
-        const pkFields = relatedEntity.PrimaryKeys;
-        // If no NameField, fall back to PK — but only for single-field PKs
-        if (!nameField) {
-            if (!pkFields || pkFields.length !== 1)
-                return;
+        this._fkQuery = query;
+        const seq = ++this._fkSearchSeq;
+        this.FKLoading = true;
+        this.FKNoMatches = false;
+        this.ShowFKDropdown = true;
+        if (this._lastFKInputEl) {
+            this.updateDropdownPosition(this._lastFKInputEl);
+            this.startScrollListener();
+            this.portalDropdownToBody();
         }
-        const nameFieldName = nameField ? nameField.Name : pkFields[0].Name;
-        const pkFieldName = fieldInfo.RelatedEntityFieldName || 'ID';
-        // Build Fields array, avoiding duplicates when nameField IS the PK
-        const fields = nameFieldName === pkFieldName
-            ? [pkFieldName]
-            : [pkFieldName, nameFieldName];
-        const escapedQuery = query.replace(/'/g, "''");
+        this.cdr.markForCheck();
+        // Build Fields: PK + name + extra DefaultInView columns + the searched field +
+        // the per-row icon field (when present), deduped via Set.
+        const searchField = this.FKSearchField || plan.NameFieldName;
+        const fields = Array.from(new Set([
+            plan.PkFieldName, plan.NameFieldName, ...plan.ExtraFieldNames, searchField,
+            ...(plan.IconFieldName ? [plan.IconFieldName] : [])
+        ]));
+        const escapedQuery = query.replace(/'/g, "''").trim();
         const rv = RunView.FromMetadataProvider(this.ProviderToUse);
         const result = await rv.RunView({
             EntityName: fieldInfo.RelatedEntity,
-            ExtraFilter: `[${nameFieldName}] LIKE '%${escapedQuery}%'`,
-            MaxRows: 20,
+            // Empty query (focus / cleared field) → no filter → first N rows.
+            ExtraFilter: escapedQuery ? `[${searchField}] LIKE '%${escapedQuery}%'` : '',
+            MaxRows: MjFormFieldComponent.FK_DB_SEARCH_LIMIT,
             ResultType: 'simple',
             Fields: fields
         });
+        // Ignore stale responses (a newer keystroke already fired).
+        if (seq !== this._fkSearchSeq)
+            return;
+        this.FKLoading = false;
         if (result.Success) {
-            this.FKSuggestions = result.Results.map(r => ({
-                PrimaryKeyValue: r[pkFieldName],
-                DisplayName: String(r[nameFieldName] || '')
-            }));
-            if (this.FKSuggestions.length > 0 && this._lastFKInputEl) {
-                this.updateDropdownPosition(this._lastFKInputEl);
-                this.startScrollListener();
-            }
-            this.ShowFKDropdown = this.FKSuggestions.length > 0;
+            const accessor = (r) => ({ get: (field) => r[field] });
+            this.applySuggestions(this.buildSuggestions(result.Results.map(accessor), plan, query), plan);
         }
         else {
             this.FKSuggestions = [];
-            this.ShowFKDropdown = false;
-            this.stopScrollListener();
+            this.FKNoMatches = true;
+            this.ShowFKDropdown = true;
         }
         this.cdr.markForCheck();
     }
@@ -1025,10 +2325,101 @@ export class MjFormFieldComponent extends BaseAngularComponent {
     // ============================================
     // GENERAL PROPERTIES
     // ============================================
-    /** Whether the field's varchar(max) - long text that gets markdown rendering */
+    /** Whether the field's varchar(max) - long text that gets the wide read-only style */
     get IsLongText() {
         return this.FieldInfo?.Length === -1;
     }
+    /**
+     * Whether this field is large enough to be a candidate for rich-text (markdown/html)
+     * auto-detection. Generic & multi-platform: keys off the TS type and character length
+     * rather than a specific SQL type, so nvarchar(max)/ntext (MaxLength === 0 means
+     * unlimited) and longer fixed fields (nvarchar(400)/varchar(500)/...) all qualify,
+     * while short strings, UUIDs, numbers, dates, etc. do not.
+     */
+    get IsRichTextEligible() {
+        const fi = this.FieldInfo;
+        if (!fi || fi.TSType !== EntityFieldTSType.String)
+            return false;
+        const maxLen = fi.MaxLength;
+        return maxLen === 0 || maxLen >= 255;
+    }
+    /**
+     * Resolved rendering mode for this field. Honors an explicit `ExtendedType` first
+     * ('Markdown' | 'HTML' | 'Code'); when `ExtendedType` is null, falls back to lightweight
+     * client-side content detection — but only for {@link IsRichTextEligible} long-text fields.
+     */
+    get RichTextMode() {
+        const fi = this.FieldInfo;
+        if (!fi)
+            return 'plain';
+        switch (fi.ExtendedType) {
+            case 'Markdown': return 'markdown';
+            case 'HTML': return 'html';
+            case 'Code': return 'code';
+        }
+        // Any other explicit ExtendedType (Email, URL, Geo*, Tel, ...) is not rich text here.
+        if (fi.ExtendedType != null)
+            return 'plain';
+        // ExtendedType is null → auto-detect, but only on eligible long-text fields.
+        if (!this.IsRichTextEligible)
+            return 'plain';
+        return this.detectFormat();
+    }
+    /** Backing snapshot for {@link EditRichTextMode}; null until first computed for the session. */
+    _editRichTextMode = null;
+    /**
+     * Stable rendering mode for EDIT mode. Unlike {@link RichTextMode} (which re-detects on the
+     * live value), this is snapshotted when edit mode is entered so that typing markdown/html into
+     * a plain textarea doesn't swap the control out from under the user mid-keystroke. Explicit
+     * ExtendedType always wins regardless; only the auto-detect branch is frozen for the session.
+     */
+    get EditRichTextMode() {
+        if (this._editRichTextMode === null) {
+            this._editRichTextMode = this.RichTextMode;
+        }
+        return this._editRichTextMode;
+    }
+    /** Cached detection result, keyed by the exact string value it was computed from. */
+    _detectCacheValue = null;
+    _detectCacheResult = 'plain';
+    /** Memoized content detection so the getter stays cheap under OnPush change detection. */
+    detectFormat() {
+        const raw = this.Value;
+        const text = raw == null ? '' : String(raw);
+        if (text !== this._detectCacheValue) {
+            this._detectCacheValue = text;
+            this._detectCacheResult = detectRichTextFormat(text);
+        }
+        return this._detectCacheResult;
+    }
+    /**
+     * Editor language for the code editor. In edit mode it tracks the frozen
+     * {@link EditRichTextMode}; in read mode it tracks the live {@link RichTextMode}.
+     */
+    get CodeEditorLanguage() {
+        const mode = this.EditMode ? this.EditRichTextMode : this.RichTextMode;
+        switch (mode) {
+            case 'markdown': return 'markdown';
+            case 'html': return 'html';
+            case 'code': return this.codeTypeToLanguage(this.FieldInfo?.CodeType);
+            default: return '';
+        }
+    }
+    /** Map the field's CodeType metadata value to a CodeMirror language id. */
+    codeTypeToLanguage(codeType) {
+        switch (codeType) {
+            case 'CSS': return 'css';
+            case 'HTML': return 'html';
+            case 'JavaScript': return 'javascript';
+            case 'SQL': return 'sql';
+            case 'TypeScript': return 'typescript';
+            default: return ''; // 'Other' / null → plain code editing
+        }
+    }
+    /** Handle value changes coming from the embedded code editor (emits a plain string). */
+    OnCodeEditorChange(value) {
+        this.Value = value;
+    }
     /** Format a value for display */
     FormatValue() {
         const val = this.Value;
@@ -1045,20 +2436,45 @@ export class MjFormFieldComponent extends BaseAngularComponent {
             if (changes['Record']) {
                 this._fkInputText = null;
                 this.FKIsMatched = false;
+                this._fkQuery = '';
                 this.FKSuggestions = [];
+                this.FKSelectedSuggestion = null;
                 this.ShowFKDropdown = false;
+                this.FKActiveIndex = -1;
+                this.FKLoading = false;
+                this.FKNoMatches = false;
+                this.FKColumnHeaders = [];
+                this.FKColumnFields = [];
+                this.FKSortField = null;
+                this.FKSortDir = 'asc';
+                this._fkSuggestionsNatural = [];
+                this.FKSearchableFields = [];
+                this.FKShowScopeMenu = false;
+                this.FKFocused = false;
+                this._fkColWidths = {};
+                this._fkPrefKey = null; // force prefs reload for the new field
+                this._portaledDropdownEl = null;
+                this._fkColumnPlan = null;
                 this._resolvedFKName = undefined;
                 this._resolvedFKValue = undefined;
                 this._fkNameLoading = false;
                 // Reset validation state for new record
                 this._touched = false;
                 this._fieldErrors = [];
+                // Invalidate cached rich-text detection (recomputed lazily for the new value)
+                this._detectCacheValue = null;
+                this._detectCacheResult = 'plain';
+                this._editRichTextMode = null;
             }
             // Reset validation state when exiting edit mode
             if (changes['EditMode'] && !this.EditMode) {
                 this._touched = false;
                 this._fieldErrors = [];
             }
+            // Re-snapshot the edit-mode rendering decision whenever edit mode toggles
+            if (changes['EditMode']) {
+                this._editRichTextMode = null;
+            }
             this.cdr.markForCheck();
         }
     }
@@ -1066,7 +2482,15 @@ export class MjFormFieldComponent extends BaseAngularComponent {
         if (this._fkSearchTimeout) {
             clearTimeout(this._fkSearchTimeout);
         }
+        this.teardownFKResizeListeners();
         this.stopScrollListener();
+        // If we relocated the dropdown to <body> and Angular tears us down while it's
+        // still open, remove the orphaned node ourselves (Angular removes by reference,
+        // but guard against a race where the view is destroyed before the @if updates).
+        if (this._portaledDropdownEl && this._portaledDropdownEl.parentElement === document.body) {
+            this.renderer.removeChild(document.body, this._portaledDropdownEl);
+        }
+        this._portaledDropdownEl = null;
     }
     // ---- Navigation Handlers ----
     /**
@@ -1164,15 +2588,15 @@ export class MjFormFieldComponent extends BaseAngularComponent {
         return date.toISOString().split('T')[0];
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵMjFormFieldComponent_BaseFactory; return function MjFormFieldComponent_Factory(__ngFactoryType__) { return (ɵMjFormFieldComponent_BaseFactory || (ɵMjFormFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MjFormFieldComponent)))(__ngFactoryType__ || MjFormFieldComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjFormFieldComponent, selectors: [["mj-form-field"]], inputs: { Record: "Record", EditMode: "EditMode", FieldName: "FieldName", Type: "Type", LinkType: "LinkType", ShowLabel: "ShowLabel", FormContext: "FormContext", _deprecatedRecord: [0, "record", "_deprecatedRecord"], _deprecatedFormContext: [0, "formContext", "_deprecatedFormContext"], HideWhenEmptyInReadOnlyMode: "HideWhenEmptyInReadOnlyMode", DisplayNameOverride: "DisplayNameOverride", PossibleValuesOverride: "PossibleValuesOverride" }, outputs: { ValueChange: "ValueChange", Navigate: "Navigate" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[1, "mj-forms-field", 3, "mj-forms-field--readonly", "mj-forms-field--dirty"], [1, "mj-forms-field", "mj-forms-field--editing", 3, "mj-forms-field--dirty", "mj-forms-field--required-empty", "mj-forms-field--has-error", "mj-forms-field--has-warning"], [1, "mj-forms-field"], [1, "mj-forms-field-label", 3, "innerHTML"], [1, "mj-forms-field-control"], [1, "mj-forms-field-value"], ["title", "View related record", 1, "mj-forms-field-link", "mj-forms-field-link--fk", 3, "click"], ["title", "Send email", 1, "mj-forms-field-link", 3, "click"], [1, "fa-solid", "fa-envelope", "mj-forms-field-link-icon"], ["title", "Open link", 1, "mj-forms-field-link", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square", "mj-forms-field-link-icon"], ["title", "View related record", 1, "mj-forms-field-link", 3, "click"], [1, "mj-forms-field-value", "mj-forms-field-value--long"], [1, "mj-forms-field-checkbox"], ["type", "checkbox", "disabled", "", 3, "checked"], [1, "mj-forms-field", "mj-forms-field--editing"], [1, "mj-fk-search", 3, "mj-fk-search--matched"], [1, "mj-forms-field-validation", "mj-forms-field-validation--error"], [1, "mj-forms-field-validation", "mj-forms-field-validation--warning"], [1, "mj-fk-search"], ["type", "text", "placeholder", "Search...", 1, "mj-forms-field-input", 3, "input", "focus", "blur", "value"], ["title", "Clear", 1, "mj-fk-clear"], [1, "fa-solid", "fa-magnifying-glass", "mj-fk-search-icon"], [1, "mj-fk-dropdown", 3, "ngStyle", "mj-fk-dropdown--above"], ["title", "Clear", 1, "mj-fk-clear", 3, "mousedown"], [1, "fa-solid", "fa-xmark"], [1, "mj-fk-dropdown", 3, "ngStyle"], [1, "mj-fk-option"], [1, "mj-fk-option", 3, "mousedown"], ["type", "text", 1, "mj-forms-field-input", 3, "value"], [1, "mj-forms-field-input", "mj-forms-field-input--textarea", 3, "value"], ["type", "number", 1, "mj-forms-field-input", "mj-forms-field-input--number", 3, "value"], ["type", "date", 1, "mj-forms-field-input", "mj-forms-field-input--date", 3, "value"], ["type", "text", 1, "mj-forms-field-input", 3, "input", "value"], [1, "mj-forms-field-input", "mj-forms-field-input--textarea", 3, "input", "value"], ["type", "number", 1, "mj-forms-field-input", "mj-forms-field-input--number", 3, "change", "value"], ["type", "date", 1, "mj-forms-field-input", "mj-forms-field-input--date", 3, "change", "value"], ["type", "checkbox", 3, "change", "checked"], ["tabindex", "0", 1, "mj-custom-select-trigger", 3, "click", "blur"], [1, "mj-custom-select-value"], [1, "fa-solid", "fa-chevron-down", "mj-custom-select-chevron"], [1, "mj-fk-option", 3, "mj-fk-option--selected"], ["type", "text", "placeholder", "Type to search...", 1, "mj-forms-field-input", 3, "input", "focus", "blur", "value"], ["type", "text", 1, "mj-forms-field-input", 3, "change", "value"], [1, "mj-forms-field-validation-item"], [1, "fa-solid", "fa-circle-exclamation"], [1, "fa-solid", "fa-triangle-exclamation"]], template: function MjFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjFormFieldComponent, selectors: [["mj-form-field"]], inputs: { Record: "Record", EditMode: "EditMode", FieldName: "FieldName", Type: "Type", LinkType: "LinkType", ShowLabel: "ShowLabel", FormContext: "FormContext", _deprecatedRecord: [0, "record", "_deprecatedRecord"], _deprecatedFormContext: [0, "formContext", "_deprecatedFormContext"], HideWhenEmptyInReadOnlyMode: "HideWhenEmptyInReadOnlyMode", DisplayNameOverride: "DisplayNameOverride", PossibleValuesOverride: "PossibleValuesOverride", FKDropdownMaxWidth: "FKDropdownMaxWidth", FKHighlightMatches: "FKHighlightMatches", AllowFKCreate: "AllowFKCreate", FKCreatePresentation: "FKCreatePresentation" }, outputs: { ValueChange: "ValueChange", Navigate: "Navigate" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["scopeRow", ""], [1, "mj-forms-field", 3, "mj-forms-field--readonly", "mj-forms-field--dirty"], [1, "mj-forms-field", "mj-forms-field--editing", 3, "mj-forms-field--dirty", "mj-forms-field--required-empty", "mj-forms-field--has-error", "mj-forms-field--has-warning"], [1, "mj-forms-field"], [1, "mj-forms-field-label", 3, "innerHTML"], [1, "mj-forms-field-control"], [1, "mj-forms-field-value"], ["title", "View related record", 1, "mj-forms-field-link", "mj-forms-field-link--fk"], ["title", "View related record", 1, "mj-forms-field-link", "mj-forms-field-link--fk", 3, "click"], ["title", "Send email", 1, "mj-forms-field-link", 3, "click"], [1, "fa-solid", "fa-envelope", "mj-forms-field-link-icon"], ["title", "Open link", 1, "mj-forms-field-link", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square", "mj-forms-field-link-icon"], ["title", "View related record", 1, "mj-forms-field-link"], ["title", "View related record", 1, "mj-forms-field-link", 3, "click"], [1, "mj-forms-field-value", "mj-forms-field-value--rich"], [1, "mj-forms-field-value", "mj-forms-field-value--rich", 3, "innerHTML"], [1, "mj-forms-field-value", "mj-forms-field-value--code"], [1, "mj-forms-field-value", "mj-forms-field-value--long"], [1, "mj-forms-field-checkbox"], ["type", "checkbox", "disabled", "", 3, "checked"], [3, "data"], [3, "value", "language", "readonly"], [1, "mj-forms-field", "mj-forms-field--editing"], [1, "mj-fk-search", 3, "mj-fk-search--matched", "mj-fk-search--scoped"], [1, "mj-forms-field-input--code", 3, "value", "language"], [1, "mj-forms-field-validation", "mj-forms-field-validation--error"], [1, "mj-forms-field-validation", "mj-forms-field-validation--warning"], [1, "mj-fk-search"], ["title", "Linked record", 1, "fa-solid", "fa-link", "mj-fk-link-icon"], ["type", "text", "placeholder", "Search...", 1, "mj-forms-field-input", 3, "input", "focus", "blur", "keydown", "value"], [1, "mj-fk-scope-pill", 3, "mj-fk-scope-pill--open", "title"], ["title", "Clear", 1, "mj-fk-clear"], [1, "fa-solid", "fa-magnifying-glass", "mj-fk-search-icon"], [1, "mj-fk-dropdown", "mj-fk-dropdown--multi", 3, "ngStyle", "mj-fk-dropdown--above", "mj-fk-dropdown--scope-open"], [1, "mj-fk-scope-pill", 3, "mousedown", "title"], [1, "fa-solid", "fa-magnifying-glass", "mj-fk-scope-pill-icon"], [1, "mj-fk-scope-pill-label"], [1, "fa-solid", "mj-fk-scope-pill-caret"], ["title", "Clear", 1, "mj-fk-clear", 3, "mousedown"], [1, "fa-solid", "fa-xmark"], [1, "mj-fk-dropdown", "mj-fk-dropdown--multi", 3, "ngStyle"], [1, "mj-fk-scope-menu", 3, "mj-fk-scope-menu--bottom"], [1, "mj-fk-current"], [1, "mj-fk-status"], [1, "mj-fk-status", "mj-fk-status--empty"], [1, "mj-fk-options"], ["type", "button", 1, "mj-fk-create-footer", 3, "title"], [1, "mj-fk-scope-menu"], [1, "mj-fk-scope-grp"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mj-fk-scope-divider"], [1, "mj-fk-scope-mi", 3, "mousedown"], [1, "mj-fk-col-reorder"], [1, "mj-fk-scope-mi-label"], [1, "mj-fk-col-eye-slot"], ["type", "button", 1, "mj-fk-col-toggle", 3, "mj-fk-col-toggle--on", "title"], ["type", "button", "title", "Move column up", 1, "mj-fk-col-move", "mj-fk-col-move--up", 3, "mousedown", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["type", "button", "title", "Move column down", 1, "mj-fk-col-move", "mj-fk-col-move--down", 3, "mousedown", "disabled"], [1, "fa-solid", "fa-chevron-down"], ["type", "button", 1, "mj-fk-col-toggle", 3, "mousedown", "title"], [1, "fa-solid"], [1, "mj-fk-current-head"], [1, "fa-solid", "fa-circle-check"], ["title", "Keep this selection", 1, "mj-fk-current-row", 3, "mousedown"], [1, "mj-fk-current-icon", 3, "class"], [1, "mj-fk-current-name", 3, "innerHTML"], [1, "mj-fk-current-detail"], ["type", "button", "title", "Clear selection", 1, "mj-fk-current-clear", 3, "mousedown"], [1, "mj-fk-current-icon"], [1, "fa-solid", "fa-circle-notch", "fa-spin"], [1, "fa-solid", "fa-magnifying-glass"], [1, "mj-fk-grid"], [1, "mj-fk-grid-row", "mj-fk-grid-row--header"], [1, "mj-fk-hcell", "mj-fk-hcell--icon"], [1, "mj-fk-hcell", 3, "title"], [1, "mj-fk-grid-row", 3, "mj-fk-grid-row--active", "mj-fk-grid-row--selected"], [1, "mj-fk-hcell", 3, "mousedown", "title"], [1, "mj-fk-hcell-label"], ["title", "Drag to resize", 1, "mj-fk-resizer", 3, "mousedown"], [1, "mj-fk-grid-row", 3, "mousedown", "mouseenter"], [1, "mj-fk-cell", "mj-fk-cell--icon"], [3, "class"], [1, "mj-fk-cell", "mj-fk-cell--name", 3, "mj-fk-cell--fill"], [1, "mj-fk-cell", 3, "mj-fk-cell--fill", "title"], [1, "mj-fk-cell", "mj-fk-cell--name"], ["title", "Currently selected", 1, "fa-solid", "fa-check", "mj-fk-selected-check"], [3, "innerHTML"], [1, "mj-fk-cell", 3, "title"], ["type", "button", 1, "mj-fk-create-footer", 3, "mousedown", "title"], [1, "fa-solid", "fa-plus", "mj-fk-create-icon"], [1, "mj-fk-create-label"], [1, "mj-forms-field-input--code", 3, "change", "value", "language"], ["type", "text", 1, "mj-forms-field-input", 3, "value"], [1, "mj-forms-field-input", "mj-forms-field-input--textarea", 3, "value"], ["type", "number", 1, "mj-forms-field-input", "mj-forms-field-input--number", 3, "value"], ["type", "date", 1, "mj-forms-field-input", "mj-forms-field-input--date", 3, "value"], ["type", "text", 1, "mj-forms-field-input", 3, "input", "value"], [1, "mj-forms-field-input", "mj-forms-field-input--textarea", 3, "input", "value"], ["type", "number", 1, "mj-forms-field-input", "mj-forms-field-input--number", 3, "change", "value"], ["type", "date", 1, "mj-forms-field-input", "mj-forms-field-input--date", 3, "change", "value"], ["type", "checkbox", 3, "change", "checked"], ["tabindex", "0", 1, "mj-custom-select-trigger", 3, "click", "blur"], [1, "mj-custom-select-value"], [1, "fa-solid", "fa-chevron-down", "mj-custom-select-chevron"], [1, "mj-fk-dropdown", 3, "ngStyle", "mj-fk-dropdown--above"], [1, "mj-fk-dropdown", 3, "ngStyle"], [1, "mj-fk-option", 3, "mj-fk-option--selected"], [1, "mj-fk-option", 3, "mousedown"], ["type", "text", "placeholder", "Type to search...", 1, "mj-forms-field-input", 3, "input", "focus", "blur", "value"], [1, "mj-fk-option"], ["type", "text", 1, "mj-forms-field-input", 3, "change", "value"], [1, "mj-forms-field-validation-item"], [1, "fa-solid", "fa-circle-exclamation"], [1, "fa-solid", "fa-triangle-exclamation"]], template: function MjFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Template, 2, 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.Record && (ctx.Record.IsSaved || !ctx.IsFieldReadOnly) ? 0 : -1);
-        } }, dependencies: [i1.NgStyle], styles: ["\n\n\n\n[_nghost-%COMP%] {\n  --mj-forms-field-label-width: 200px;\n  --mj-forms-field-gap: 12px;\n\n  display: contents;\n}\n\n.mj-forms-field[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: var(--mj-forms-field-label-width) 1fr;\n  gap: var(--mj-forms-field-gap);\n  align-items: baseline;\n  padding: 8px 0;\n  transition: all var(--mj-transition-base) ease;\n}\n\n\n\n.mj-forms-field--editing[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 6px;\n  margin: 0 -8px;\n  padding: 8px 8px;\n}\n\n\n\n\n\n.mj-forms-field-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  padding-top: 2px;\n  word-break: break-word;\n}\n\n\n\n\n\n.mj-forms-field-control[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n\n.mj-forms-field-control[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n\n\n.mj-forms-field--dirty[_ngcontent-%COMP%]   .mj-forms-field-label[_ngcontent-%COMP%]::after {\n  content: '';\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--mj-status-warning);\n  margin-left: 6px;\n  vertical-align: middle;\n}\n\n\n\n\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%]   .mj-custom-select-trigger[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%]   .mj-fk-search[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n}\n\n\n\n\n\n.mj-forms-field-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n\n.mj-forms-field-value--long[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n\n\n.mj-forms-field--readonly[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n.mj-forms-field--readonly[_ngcontent-%COMP%]   .mj-forms-field-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.mj-forms-field-link[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-weight: 400;\n  font-size: 14px;\n  transition: color var(--mj-transition-base);\n  text-decoration: none;\n}\n\n.mj-forms-field-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n}\n\n.mj-forms-field-link-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  opacity: 0;\n  transition: opacity var(--mj-transition-base);\n}\n\n.mj-forms-field-link[_ngcontent-%COMP%]:hover   .mj-forms-field-link-icon[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n\n\n.mj-forms-field-link--fk[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 400;\n}\n\n\n\n\n\n.mj-forms-field-input[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: none;\n  border-bottom: 1.5px solid var(--mj-border-default);\n  padding: 4px 0;\n  width: 100%;\n  outline: none;\n  transition: border-color var(--mj-transition-base) ease,\n              background var(--mj-transition-base) ease;\n}\n\n.mj-forms-field-input[_ngcontent-%COMP%]:focus {\n  border-bottom-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 4px 4px 0 0;\n  padding: 4px 6px;\n}\n\n.mj-forms-field-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n\n\n.mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 60px;\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 8px 10px;\n  background: var(--mj-bg-surface);\n  font-family: inherit;\n}\n\n.mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  background: var(--mj-bg-surface);\n  padding: 8px 10px;\n  border-radius: 6px;\n}\n\n\n\n.mj-forms-field-input--number[_ngcontent-%COMP%] {\n  max-width: 200px;\n}\n\n\n\n.mj-forms-field-input--date[_ngcontent-%COMP%] {\n  max-width: 220px;\n}\n\n\n\n\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  transition: all var(--mj-transition-base) ease;\n  flex-shrink: 0;\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%]:checked {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%]:checked::after {\n  content: '';\n  position: absolute;\n  left: 5px;\n  top: 1px;\n  width: 5px;\n  height: 9px;\n  border: solid var(--mj-text-inverse);\n  border-width: 0 2px 2px 0;\n  transform: rotate(45deg);\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n\n\n\n\n.mj-custom-select-trigger[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: none;\n  border-bottom: 1.5px solid var(--mj-border-default);\n  padding: 4px 0;\n  width: 100%;\n  cursor: pointer;\n  outline: none;\n  transition: border-color var(--mj-transition-base) ease,\n              background var(--mj-transition-base) ease;\n}\n\n.mj-custom-select-trigger[_ngcontent-%COMP%]:focus {\n  border-bottom-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 4px 4px 0 0;\n  padding: 4px 6px;\n}\n\n.mj-custom-select-value[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-custom-select-value--placeholder[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.mj-custom-select-chevron[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  transition: transform var(--mj-transition-base) ease;\n  flex-shrink: 0;\n  margin-left: 8px;\n}\n\n.mj-custom-select-chevron--open[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n\n\n\n\n.mj-fk-search[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.mj-fk-search[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  padding-right: 28px;\n}\n\n.mj-fk-search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 4px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n\n.mj-fk-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 2px;\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 11px;\n  padding: 4px 6px;\n  line-height: 1;\n  border-radius: 3px;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-fk-clear[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n\n\n.mj-fk-search--matched[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom: 2px solid var(--mj-brand-primary);\n}\n\n\n\n\n\n.mj-fk-dropdown[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n  animation: _ngcontent-%COMP%_mj-dropdown-in 150ms ease;\n}\n\n.mj-fk-dropdown--above[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_mj-dropdown-in-above 150ms ease;\n}\n\n.mj-fk-option[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n  border-radius: 6px;\n}\n\n.mj-fk-option[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.mj-fk-option--selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.mj-fk-option--selected[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n@keyframes _ngcontent-%COMP%_mj-dropdown-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes _ngcontent-%COMP%_mj-dropdown-in-above {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n\n.mj-forms-field-label[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:global(.mj-forms-search-highlight) {\n  background-color: var(--mj-color-warning-200, #fef08a);\n  color: var(--mj-color-warning-800, #854d0e);\n  padding: 0;\n  border-radius: 2px;\n  font-weight: 700;\n  box-shadow: 0 0 0 2px var(--mj-color-warning-200, #fef08a);\n}\n\n\n\n\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-custom-select-trigger[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-fk-search[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n\n\n\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n  background: color-mix(in srgb, var(--mj-status-warning) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-status-warning);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-custom-select-trigger[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-fk-search[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n\n\n\n\n.mj-forms-field-validation[_ngcontent-%COMP%] {\n  grid-column: 2;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-top: -2px;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_mj-validation-slide-in 200ms ease-out;\n}\n\n.mj-forms-field-validation-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  font-size: 12px;\n  line-height: 1.4;\n  padding: 3px 0 1px;\n}\n\n.mj-forms-field-validation-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n\n\n.mj-forms-field-validation--error[_ngcontent-%COMP%]   .mj-forms-field-validation-item[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.mj-forms-field-validation--error[_ngcontent-%COMP%]   .mj-forms-field-validation-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n\n.mj-forms-field-validation--warning[_ngcontent-%COMP%]   .mj-forms-field-validation-item[_ngcontent-%COMP%] {\n  color: var(--mj-color-warning-700);\n}\n\n.mj-forms-field-validation--warning[_ngcontent-%COMP%]   .mj-forms-field-validation-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n@keyframes _ngcontent-%COMP%_mj-validation-slide-in {\n  from {\n    opacity: 0;\n    max-height: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    max-height: 100px;\n    transform: translateY(0);\n  }\n}\n\n\n\n\n\n@media (max-width: 640px) {\n  .mj-forms-field[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 4px;\n  }\n\n  .mj-forms-field-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .mj-forms-field-validation[_ngcontent-%COMP%] {\n    grid-column: 1;\n  }\n}"], changeDetection: 0 });
+        } }, dependencies: [i1.NgTemplateOutlet, i1.NgStyle, i2.MarkdownComponent, i3.CodeEditorComponent, i4.MJSafeRichHtmlPipe], styles: ["\n\n\n\n[_nghost-%COMP%] {\n  --mj-forms-field-label-width: 200px;\n  --mj-forms-field-gap: 12px;\n\n  display: contents;\n}\n\n.mj-forms-field[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: var(--mj-forms-field-label-width) 1fr;\n  gap: var(--mj-forms-field-gap);\n  align-items: baseline;\n  padding: 8px 0;\n  transition: all var(--mj-transition-base) ease;\n}\n\n\n\n.mj-forms-field--editing[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 6px;\n  margin: 0 -8px;\n  padding: 8px 8px;\n}\n\n\n\n\n\n.mj-forms-field-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  padding-top: 2px;\n  word-break: break-word;\n}\n\n\n\n\n\n.mj-forms-field-control[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n\n.mj-forms-field-control[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n\n\n.mj-forms-field--dirty[_ngcontent-%COMP%]   .mj-forms-field-label[_ngcontent-%COMP%]::after {\n  content: '';\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--mj-status-warning);\n  margin-left: 6px;\n  vertical-align: middle;\n}\n\n\n\n\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%]   .mj-custom-select-trigger[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%]   .mj-fk-search[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n}\n\n\n\n\n\n.mj-forms-field-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n\n.mj-forms-field-value--long[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n\n\n.mj-forms-field-value--rich[_ngcontent-%COMP%] {\n  display: block;\n  align-items: initial;\n  max-height: 480px;\n  overflow: auto;\n  width: 100%;\n}\n\n\n\n.mj-forms-field-value--code[_ngcontent-%COMP%] {\n  display: block;\n  align-items: initial;\n  width: 100%;\n}\n\n.mj-forms-field-value--code[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%], \n.mj-forms-field-input--code[_ngcontent-%COMP%] {\n  display: block;\n  width: 100%;\n  min-height: 160px;\n  max-height: 480px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius, 4px);\n  overflow: auto;\n}\n\n\n\n.mj-forms-field--readonly[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n.mj-forms-field--readonly[_ngcontent-%COMP%]   .mj-forms-field-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.mj-forms-field-link[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-weight: 400;\n  font-size: 14px;\n  transition: color var(--mj-transition-base);\n  text-decoration: none;\n}\n\n.mj-forms-field-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n}\n\n.mj-forms-field-link-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  opacity: 0;\n  transition: opacity var(--mj-transition-base);\n}\n\n.mj-forms-field-link[_ngcontent-%COMP%]:hover   .mj-forms-field-link-icon[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n\n\n.mj-forms-field-link--fk[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 400;\n}\n\n\n\n\n\n.mj-forms-field-input[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: none;\n  border-bottom: 1.5px solid var(--mj-border-default);\n  padding: 4px 0;\n  width: 100%;\n  outline: none;\n  transition: border-color var(--mj-transition-base) ease,\n              background var(--mj-transition-base) ease;\n}\n\n.mj-forms-field-input[_ngcontent-%COMP%]:focus {\n  border-bottom-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 4px 4px 0 0;\n  padding: 4px 6px;\n}\n\n.mj-forms-field-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n\n\n.mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 60px;\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 8px 10px;\n  background: var(--mj-bg-surface);\n  font-family: inherit;\n}\n\n.mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  background: var(--mj-bg-surface);\n  padding: 8px 10px;\n  border-radius: 6px;\n}\n\n\n\n.mj-forms-field-input--number[_ngcontent-%COMP%] {\n  max-width: 200px;\n}\n\n\n\n.mj-forms-field-input--date[_ngcontent-%COMP%] {\n  max-width: 220px;\n}\n\n\n\n\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  transition: all var(--mj-transition-base) ease;\n  flex-shrink: 0;\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%]:checked {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%]:checked::after {\n  content: '';\n  position: absolute;\n  left: 5px;\n  top: 1px;\n  width: 5px;\n  height: 9px;\n  border: solid var(--mj-text-inverse);\n  border-width: 0 2px 2px 0;\n  transform: rotate(45deg);\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n\n\n\n\n.mj-custom-select-trigger[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: none;\n  border-bottom: 1.5px solid var(--mj-border-default);\n  padding: 4px 0;\n  width: 100%;\n  cursor: pointer;\n  outline: none;\n  transition: border-color var(--mj-transition-base) ease,\n              background var(--mj-transition-base) ease;\n}\n\n.mj-custom-select-trigger[_ngcontent-%COMP%]:focus {\n  border-bottom-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 4px 4px 0 0;\n  padding: 4px 6px;\n}\n\n.mj-custom-select-value[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-custom-select-value--placeholder[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.mj-custom-select-chevron[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  transition: transform var(--mj-transition-base) ease;\n  flex-shrink: 0;\n  margin-left: 8px;\n}\n\n.mj-custom-select-chevron--open[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n\n\n\n\n.mj-fk-search[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.mj-fk-search[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  padding-right: 28px;\n}\n\n.mj-fk-search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 4px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n\n.mj-fk-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 2px;\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 11px;\n  padding: 4px 6px;\n  line-height: 1;\n  border-radius: 3px;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-fk-clear[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n\n\n\n.mj-fk-search--matched[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom: 2px solid var(--mj-brand-primary);\n}\n\n\n\n\n.mj-fk-link-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 26px;\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n  pointer-events: none;\n  z-index: 1;\n}\n\n\n\n.mj-forms-field-input--linked[_ngcontent-%COMP%] {\n  padding-right: 46px;\n}\n\n\n\n\n\n\n\n.mj-fk-search--scoped[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  padding-right: 150px;\n}\n\n.mj-fk-scope-pill[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 30px;\n  \n\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  max-width: 120px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  font-size: 10.5px;\n  font-weight: 600;\n  font-family: inherit;\n  \n\n  padding: 1px 7px;\n  border-radius: 999px;\n  cursor: pointer;\n  white-space: nowrap;\n  line-height: 1.35;\n  transition: background var(--mj-transition-base), border-color var(--mj-transition-base), color var(--mj-transition-base);\n}\n\n.mj-fk-scope-pill[_ngcontent-%COMP%]:hover, \n.mj-fk-scope-pill--open[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-primary);\n}\n\n.mj-fk-scope-pill-icon[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n.mj-fk-scope-pill-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-fk-scope-pill-caret[_ngcontent-%COMP%] {\n  font-size: 8px;\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n\n\n\n\n.mj-fk-scope-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 4px;\n  right: 8px;\n  z-index: 5;\n  min-width: 180px;\n  max-width: calc(100vw - 24px);\n  max-height: 260px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-sm);\n  box-shadow: var(--mj-shadow-lg);\n  padding: 5px;\n  animation: _ngcontent-%COMP%_mj-dropdown-in 120ms ease;\n}\n\n\n\n\n.mj-fk-scope-menu--bottom[_ngcontent-%COMP%] {\n  top: auto;\n  bottom: 4px;\n}\n\n.mj-fk-scope-grp[_ngcontent-%COMP%] {\n  font-size: 10px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--mj-text-muted);\n  padding: 7px 10px 4px;\n  font-weight: 700;\n}\n\n.mj-fk-scope-mi[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 7px 10px;\n  font-size: 13px;\n  border-radius: 5px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.mj-fk-scope-mi[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-fk-scope-mi--on[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n\n\n\n.mj-fk-col-reorder[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 22px;\n  flex-shrink: 0;\n}\n\n.mj-fk-col-move[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 10px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 8px;\n  opacity: 0; \n\n  transition: opacity var(--mj-transition-base), color var(--mj-transition-base);\n}\n\n.mj-fk-scope-mi[_ngcontent-%COMP%]:hover   .mj-fk-col-move[_ngcontent-%COMP%]:not(:disabled) {\n  opacity: 0.8;\n}\n\n.mj-fk-col-move[_ngcontent-%COMP%]:hover:not(:disabled) {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n\n\n.mj-fk-col-move[_ngcontent-%COMP%]:disabled {\n  opacity: 0 !important;\n  cursor: default;\n}\n\n.mj-fk-scope-mi-icon[_ngcontent-%COMP%] {\n  width: 14px;\n  font-size: 11px;\n  opacity: 0.75;\n  flex-shrink: 0;\n}\n\n.mj-fk-scope-mi-label[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.mj-fk-col-eye-slot[_ngcontent-%COMP%] {\n  width: 22px;\n  height: 22px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n\n.mj-fk-col-toggle[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  background: transparent;\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 12px;\n  transition: background var(--mj-transition-base), color var(--mj-transition-base);\n}\n\n.mj-fk-col-toggle[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n}\n\n.mj-fk-col-toggle--on[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.mj-fk-scope-divider[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-subtle);\n  margin: 4px 6px;\n}\n\n\n\n\n@media (max-width: 560px) {\n  .mj-fk-search--scoped[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n    padding-right: 116px;\n  }\n  .mj-fk-scope-pill[_ngcontent-%COMP%] {\n    max-width: 88px;\n  }\n  .mj-fk-scope-menu[_ngcontent-%COMP%] {\n    min-width: 160px;\n  }\n  .mj-fk-scope-mi[_ngcontent-%COMP%] {\n    padding: 10px 10px;\n  }\n}\n\n\n\n\n\n.mj-fk-dropdown[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n  animation: _ngcontent-%COMP%_mj-dropdown-in 150ms ease;\n}\n\n.mj-fk-dropdown--above[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_mj-dropdown-in-above 150ms ease;\n}\n\n.mj-fk-option[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n  border-radius: 6px;\n}\n\n.mj-fk-option[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.mj-fk-option--selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.mj-fk-option--selected[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n\n\n\n\n\n.mj-fk-dropdown--multi[_ngcontent-%COMP%] {\n  padding: 4px;\n  \n\n\n  overflow: hidden;\n  max-height: none;\n}\n\n\n\n\n\n.mj-fk-dropdown--multi[_ngcontent-%COMP%]   .mj-fk-options[_ngcontent-%COMP%] {\n  overflow: auto;\n  max-height: 260px;\n}\n\n\n\n\n.mj-fk-dropdown--scope-open[_ngcontent-%COMP%] {\n  overflow: visible;\n}\n\n\n\n\n\n\n\n.mj-fk-grid[_ngcontent-%COMP%] {\n  display: grid;\n  width: 100%;\n  min-width: max-content;\n  align-items: stretch;\n}\n\n\n\n\n\n.mj-fk-grid-row[_ngcontent-%COMP%] {\n  display: contents;\n}\n\n\n\n.mj-fk-hcell[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.mj-fk-hcell[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-fk-hcell--icon[_ngcontent-%COMP%] {\n  cursor: default;\n  padding: 7px 8px;\n}\n\n.mj-fk-hcell--icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-elevated);\n}\n\n.mj-fk-hcell-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-fk-sort-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n\n\n.mj-fk-sort-icon--idle[_ngcontent-%COMP%] {\n  opacity: 0.35;\n}\n\n\n\n.mj-fk-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 320px;\n  cursor: pointer;\n}\n\n\n\n\n.mj-fk-cell--fill[_ngcontent-%COMP%] {\n  max-width: none;\n}\n\n\n\n\n.mj-fk-cell[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.mj-fk-cell--icon[_ngcontent-%COMP%] {\n  justify-content: center;\n  padding: 8px;\n  max-width: none;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n}\n\n.mj-fk-cell--name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  gap: 6px;\n}\n\n.mj-fk-selected-check[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n\n\n\n.mj-fk-grid-row--active[_ngcontent-%COMP%]    > .mj-fk-cell[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n\n\n\n.mj-fk-grid-row--selected[_ngcontent-%COMP%]    > .mj-fk-cell[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.mj-fk-grid-row--selected[_ngcontent-%COMP%]    > .mj-fk-cell--name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n\n.mj-fk-cell--name[_ngcontent-%COMP%]     .mj-forms-search-highlight, \n.mj-fk-cell[_ngcontent-%COMP%]     .mj-forms-search-highlight {\n  background-color: var(--mj-search-highlight-bg);\n  color: var(--mj-search-highlight-text);\n  border-radius: 2px;\n  padding: 0 1px;\n  font-weight: 600;\n}\n\n\n\n.mj-fk-resizer[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 7px;\n  height: 100%;\n  cursor: col-resize;\n  user-select: none;\n}\n\n.mj-fk-resizer[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  top: 20%;\n  right: 2px;\n  width: 2px;\n  height: 60%;\n  background: transparent;\n  transition: background var(--mj-transition-base);\n}\n\n.mj-fk-hcell[_ngcontent-%COMP%]:hover   .mj-fk-resizer[_ngcontent-%COMP%]::after, \n.mj-fk-resizer[_ngcontent-%COMP%]:hover::after {\n  background: var(--mj-border-strong);\n}\n\n\n\n.mj-fk-status[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 14px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.mj-fk-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.mj-fk-status--empty[_ngcontent-%COMP%] {\n  font-style: italic;\n}\n\n\n\n\n.mj-fk-create-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  width: 100%;\n  padding: 10px 14px;\n  background: var(--mj-bg-surface-card);\n  border: none;\n  border-top: 1px solid var(--mj-border-default);\n  color: var(--mj-brand-primary);\n  font-size: 13px;\n  font-weight: 600;\n  font-family: inherit;\n  text-align: left;\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n}\n\n.mj-fk-create-footer[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-fk-create-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.mj-fk-create-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n\n\n.mj-fk-current[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n  background: color-mix(in srgb, var(--mj-brand-primary) 7%, var(--mj-bg-surface-card));\n  animation: _ngcontent-%COMP%_mj-fk-current-in 220ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n@keyframes _ngcontent-%COMP%_mj-fk-current-in {\n  from { opacity: 0; transform: translateY(-6px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n.mj-fk-current-head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px 3px;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--mj-brand-primary);\n}\n\n.mj-fk-current-head[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.mj-fk-current-row[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 6px 12px 10px;\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n}\n\n\n\n.mj-fk-current-row[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 4px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 0 2px 2px 0;\n  background: var(--mj-brand-primary);\n}\n\n.mj-fk-current-row[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-fk-current-icon[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.mj-fk-current-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-fk-current-detail[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-fk-current-clear[_ngcontent-%COMP%] {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  flex-shrink: 0;\n  background: transparent;\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 12px;\n  transition: background var(--mj-transition-base), color var(--mj-transition-base);\n}\n\n.mj-fk-current-clear[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-status-error);\n}\n\n@keyframes _ngcontent-%COMP%_mj-dropdown-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes _ngcontent-%COMP%_mj-dropdown-in-above {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n\n.mj-forms-field-label[_ngcontent-%COMP%]     .mj-forms-search-highlight {\n  \n\n\n  background-color: var(--mj-search-highlight-bg);\n  color: var(--mj-search-highlight-text);\n  border-radius: 2px;\n  padding: 0 1px;\n  font-weight: 600;\n}\n\n\n\n\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-custom-select-trigger[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-fk-search[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n\n\n\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n  background: color-mix(in srgb, var(--mj-status-warning) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-status-warning);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-custom-select-trigger[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-fk-search[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n\n\n\n\n.mj-forms-field-validation[_ngcontent-%COMP%] {\n  grid-column: 2;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-top: -2px;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_mj-validation-slide-in 200ms ease-out;\n}\n\n.mj-forms-field-validation-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  font-size: 12px;\n  line-height: 1.4;\n  padding: 3px 0 1px;\n}\n\n.mj-forms-field-validation-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n\n\n.mj-forms-field-validation--error[_ngcontent-%COMP%]   .mj-forms-field-validation-item[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.mj-forms-field-validation--error[_ngcontent-%COMP%]   .mj-forms-field-validation-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n\n.mj-forms-field-validation--warning[_ngcontent-%COMP%]   .mj-forms-field-validation-item[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning-text);\n}\n\n.mj-forms-field-validation--warning[_ngcontent-%COMP%]   .mj-forms-field-validation-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n@keyframes _ngcontent-%COMP%_mj-validation-slide-in {\n  from {\n    opacity: 0;\n    max-height: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    max-height: 100px;\n    transform: translateY(0);\n  }\n}\n\n\n\n\n\n@media (max-width: 640px) {\n  .mj-forms-field[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 4px;\n  }\n\n  .mj-forms-field-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .mj-forms-field-validation[_ngcontent-%COMP%] {\n    grid-column: 1;\n  }\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjFormFieldComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (Record && (Record.IsSaved || !IsFieldReadOnly)) {\n  <!-- READ-ONLY MODE -->\n  @if ((!EditMode || IsFieldReadOnly) && !ShouldHideField) {\n    <div class=\"mj-forms-field\" [class.mj-forms-field--readonly]=\"EditMode && IsFieldReadOnly\" [class.mj-forms-field--dirty]=\"IsDirty\">\n      @if (ShowLabel) {\n        <label class=\"mj-forms-field-label\" [innerHTML]=\"HighlightedDisplayName\"></label>\n      }\n      <div class=\"mj-forms-field-control\">\n        <!-- FK fields with a mapped name field: show the name as a hyperlink -->\n        @if (IsFKWithNameField) {\n          <span class=\"mj-forms-field-value\">\n            <a class=\"mj-forms-field-link mj-forms-field-link--fk\" (click)=\"OnRecordLinkClick($event)\" title=\"View related record\">\n              {{ FKDisplayName }}\n            </a>\n          </span>\n        }\n        @else {\n          @switch (LinkType) {\n            @case ('Email') {\n              <span class=\"mj-forms-field-value\">\n                <a class=\"mj-forms-field-link\" (click)=\"OnEmailLinkClick($event)\" title=\"Send email\">\n                  {{ FormatValue() }}\n                  <i class=\"fa-solid fa-envelope mj-forms-field-link-icon\"></i>\n                </a>\n              </span>\n            }\n            @case ('URL') {\n              <span class=\"mj-forms-field-value\">\n                <a class=\"mj-forms-field-link\" (click)=\"OnUrlLinkClick($event)\" title=\"Open link\">\n                  {{ FormatValue() }}\n                  <i class=\"fa-solid fa-arrow-up-right-from-square mj-forms-field-link-icon\"></i>\n                </a>\n              </span>\n            }\n            @case ('Record') {\n              <span class=\"mj-forms-field-value\">\n                <a class=\"mj-forms-field-link\" (click)=\"OnRecordLinkClick($event)\" title=\"View related record\">\n                  {{ FormatValue() }}\n                  <i class=\"fa-solid fa-arrow-up-right-from-square mj-forms-field-link-icon\"></i>\n                </a>\n              </span>\n            }\n            @default {\n              @if (Type === 'checkbox') {\n                <span class=\"mj-forms-field-value\">\n                  <div class=\"mj-forms-field-checkbox\">\n                    <input type=\"checkbox\" [checked]=\"!!Value\" disabled>\n                  </div>\n                </span>\n              }\n              @else if (IsLongText) {\n                <span class=\"mj-forms-field-value mj-forms-field-value--long\">{{ FormatValue() }}</span>\n              }\n              @else {\n                <span class=\"mj-forms-field-value\">{{ FormatValue() }}</span>\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- EDIT MODE -->\n  @if (EditMode && !IsFieldReadOnly) {\n    <div class=\"mj-forms-field mj-forms-field--editing\" [class.mj-forms-field--dirty]=\"IsDirty\" [class.mj-forms-field--required-empty]=\"IsRequiredEmpty\" [class.mj-forms-field--has-error]=\"ShowErrors\" [class.mj-forms-field--has-warning]=\"ShowWarnings\">\n      @if (ShowLabel) {\n        <label class=\"mj-forms-field-label\" [innerHTML]=\"HighlightedDisplayName\"></label>\n      }\n      <div class=\"mj-forms-field-control\">\n        <!-- Foreign Key fields get custom search autocomplete -->\n        @if (HasRelatedEntity) {\n          <div class=\"mj-fk-search\" [class.mj-fk-search--matched]=\"FKIsMatched\">\n            <input type=\"text\"\n              class=\"mj-forms-field-input\"\n              [value]=\"FKSearchText\"\n              (input)=\"OnFKInput($event)\"\n              (focus)=\"OnFKFocus($event)\"\n              (blur)=\"OnFKBlur()\"\n              placeholder=\"Search...\">\n            @if (FKSearchText) {\n              <button class=\"mj-fk-clear\" (mousedown)=\"OnFKClearClick($event)\" title=\"Clear\">\n                <i class=\"fa-solid fa-xmark\"></i>\n              </button>\n            } @else {\n              <i class=\"fa-solid fa-magnifying-glass mj-fk-search-icon\"></i>\n            }\n            @if (ShowFKDropdown && FKSuggestions.length > 0) {\n              <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n                @for (suggestion of FKSuggestions; track suggestion.PrimaryKeyValue) {\n                  <div class=\"mj-fk-option\" (mousedown)=\"OnFKSelectItem(suggestion, $event)\">\n                    {{ suggestion.DisplayName }}\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        @else {\n          @switch (Type) {\n            @case ('textbox') {\n              <input type=\"text\"\n                class=\"mj-forms-field-input\"\n                [value]=\"FormatValue()\"\n                (input)=\"OnInputChange($event)\">\n            }\n            @case ('textarea') {\n              <textarea\n                class=\"mj-forms-field-input mj-forms-field-input--textarea\"\n                [value]=\"FormatValue()\"\n                (input)=\"OnInputChange($event)\"></textarea>\n            }\n            @case ('number') {\n              <input type=\"number\"\n                class=\"mj-forms-field-input mj-forms-field-input--number\"\n                [value]=\"Value\"\n                (change)=\"OnNumberChange($event)\">\n            }\n            @case ('datepicker') {\n              <input type=\"date\"\n                class=\"mj-forms-field-input mj-forms-field-input--date\"\n                [value]=\"DateInputValue\"\n                (change)=\"OnDateChange($event)\">\n            }\n            @case ('checkbox') {\n              <div class=\"mj-forms-field-checkbox\">\n                <input type=\"checkbox\"\n                  [checked]=\"!!Value\"\n                  (change)=\"OnCheckboxChange($event)\">\n              </div>\n            }\n            @case ('select') {\n              <div class=\"mj-custom-select-trigger\"\n                tabindex=\"0\"\n                (click)=\"OnSelectTriggerClick($event)\"\n                (blur)=\"OnSelectTriggerBlur()\">\n                <span class=\"mj-custom-select-value\" [class.mj-custom-select-value--placeholder]=\"!FormatValue()\">\n                  {{ FormatValue() || '-- Select --' }}\n                </span>\n                <i class=\"fa-solid fa-chevron-down mj-custom-select-chevron\" [class.mj-custom-select-chevron--open]=\"ShowSelectDropdown\"></i>\n              </div>\n              @if (ShowSelectDropdown && PossibleValues.length > 0) {\n                <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n                  @for (option of PossibleValues; track option) {\n                    <div class=\"mj-fk-option\" [class.mj-fk-option--selected]=\"FormatValue() === option\" (mousedown)=\"OnSelectOptionClick(option, $event)\">\n                      {{ option }}\n                    </div>\n                  }\n                </div>\n              }\n            }\n            @case ('autocomplete') {\n              <div class=\"mj-fk-search\">\n                <input type=\"text\"\n                  class=\"mj-forms-field-input\"\n                  [value]=\"FormatValue()\"\n                  (input)=\"OnValueListInput($event)\"\n                  (focus)=\"OnValueListFocus($event)\"\n                  (blur)=\"OnValueListBlur()\"\n                  placeholder=\"Type to search...\">\n                <i class=\"fa-solid fa-magnifying-glass mj-fk-search-icon\"></i>\n                @if (ShowValueListDropdown && FilteredPossibleValues.length > 0) {\n                  <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n                    @for (option of FilteredPossibleValues; track option) {\n                      <div class=\"mj-fk-option\" (mousedown)=\"OnValueListSelect(option, $event)\">\n                        {{ option }}\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @default {\n              <input type=\"text\"\n                class=\"mj-forms-field-input\"\n                [value]=\"FormatValue()\"\n                (change)=\"OnInputChange($event)\">\n            }\n          }\n        }\n      </div>\n      <!-- Inline validation messages -->\n      @if (DisplayErrors.length > 0) {\n        <div class=\"mj-forms-field-validation mj-forms-field-validation--error\">\n          @for (error of DisplayErrors; track error.Message) {\n            <div class=\"mj-forms-field-validation-item\">\n              <i class=\"fa-solid fa-circle-exclamation\"></i>\n              <span>{{ error.Message }}</span>\n            </div>\n          }\n        </div>\n      }\n      @if (DisplayWarnings.length > 0) {\n        <div class=\"mj-forms-field-validation mj-forms-field-validation--warning\">\n          @for (warning of DisplayWarnings; track warning.Message) {\n            <div class=\"mj-forms-field-validation-item\">\n              <i class=\"fa-solid fa-triangle-exclamation\"></i>\n              <span>{{ warning.Message }}</span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n}\n", styles: ["/* ============================================\n   FORM FIELD - Shared styles for read and edit\n   ============================================ */\n:host {\n  --mj-forms-field-label-width: 200px;\n  --mj-forms-field-gap: 12px;\n\n  display: contents;\n}\n\n.mj-forms-field {\n  display: grid;\n  grid-template-columns: var(--mj-forms-field-label-width) 1fr;\n  gap: var(--mj-forms-field-gap);\n  align-items: baseline;\n  padding: 8px 0;\n  transition: all var(--mj-transition-base) ease;\n}\n\n/* Subtle row hover in edit mode */\n.mj-forms-field--editing:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 6px;\n  margin: 0 -8px;\n  padding: 8px 8px;\n}\n\n/* ============================================\n   LABEL\n   ============================================ */\n.mj-forms-field-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  padding-top: 2px;\n  word-break: break-word;\n}\n\n/* ============================================\n   FIELD CONTROL WRAPPER (value + dirty dot)\n   ============================================ */\n.mj-forms-field-control {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n\n.mj-forms-field-control > * {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ============================================\n   DIRTY INDICATOR (solid amber dot after label)\n   ============================================ */\n.mj-forms-field--dirty .mj-forms-field-label::after {\n  content: '';\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--mj-status-warning);\n  margin-left: 6px;\n  vertical-align: middle;\n}\n\n/* ============================================\n   REQUIRED FIELD - red underline when empty\n   ============================================ */\n.mj-forms-field--required-empty .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty .mj-forms-field-input:focus {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty .mj-custom-select-trigger {\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty .mj-fk-search .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-error);\n}\n\n/* ============================================\n   READ-ONLY VALUE\n   ============================================ */\n.mj-forms-field-value {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n\n.mj-forms-field-value--long {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n/* Read-only fields in edit mode */\n.mj-forms-field--readonly {\n  opacity: 0.7;\n}\n\n.mj-forms-field--readonly .mj-forms-field-value {\n  color: var(--mj-text-secondary);\n}\n\n/* ============================================\n   LINKS (FK, email, URL)\n   ============================================ */\n.mj-forms-field-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-weight: 400;\n  font-size: 14px;\n  transition: color var(--mj-transition-base);\n  text-decoration: none;\n}\n\n.mj-forms-field-link:hover {\n  color: var(--mj-brand-primary-hover);\n}\n\n.mj-forms-field-link-icon {\n  font-size: 11px;\n  opacity: 0;\n  transition: opacity var(--mj-transition-base);\n}\n\n.mj-forms-field-link:hover .mj-forms-field-link-icon {\n  opacity: 1;\n}\n\n/* FK fields showing entity name instead of raw ID */\n.mj-forms-field-link--fk {\n  font-size: 14px;\n  font-weight: 400;\n}\n\n/* ============================================\n   EDIT MODE INPUTS - Clean underline style\n   ============================================ */\n.mj-forms-field-input {\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: none;\n  border-bottom: 1.5px solid var(--mj-border-default);\n  padding: 4px 0;\n  width: 100%;\n  outline: none;\n  transition: border-color var(--mj-transition-base) ease,\n              background var(--mj-transition-base) ease;\n}\n\n.mj-forms-field-input:focus {\n  border-bottom-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 4px 4px 0 0;\n  padding: 4px 6px;\n}\n\n.mj-forms-field-input::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n/* Textarea variant */\n.mj-forms-field-input--textarea {\n  resize: vertical;\n  min-height: 60px;\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 8px 10px;\n  background: var(--mj-bg-surface);\n  font-family: inherit;\n}\n\n.mj-forms-field-input--textarea:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  background: var(--mj-bg-surface);\n  padding: 8px 10px;\n  border-radius: 6px;\n}\n\n/* Number input - narrower */\n.mj-forms-field-input--number {\n  max-width: 200px;\n}\n\n/* Date input - narrower */\n.mj-forms-field-input--date {\n  max-width: 220px;\n}\n\n/* ============================================\n   CHECKBOX (custom styled)\n   ============================================ */\n.mj-forms-field-checkbox {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"] {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  transition: all var(--mj-transition-base) ease;\n  flex-shrink: 0;\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:checked {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:checked::after {\n  content: '';\n  position: absolute;\n  left: 5px;\n  top: 1px;\n  width: 5px;\n  height: 9px;\n  border: solid var(--mj-text-inverse);\n  border-width: 0 2px 2px 0;\n  transform: rotate(45deg);\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* ============================================\n   CUSTOM SELECT DROPDOWN (replaces native <select>)\n   ============================================ */\n.mj-custom-select-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: none;\n  border-bottom: 1.5px solid var(--mj-border-default);\n  padding: 4px 0;\n  width: 100%;\n  cursor: pointer;\n  outline: none;\n  transition: border-color var(--mj-transition-base) ease,\n              background var(--mj-transition-base) ease;\n}\n\n.mj-custom-select-trigger:focus {\n  border-bottom-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 4px 4px 0 0;\n  padding: 4px 6px;\n}\n\n.mj-custom-select-value {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-custom-select-value--placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.mj-custom-select-chevron {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  transition: transform var(--mj-transition-base) ease;\n  flex-shrink: 0;\n  margin-left: 8px;\n}\n\n.mj-custom-select-chevron--open {\n  transform: rotate(180deg);\n}\n\n/* ============================================\n   FK SEARCH (custom autocomplete)\n   ============================================ */\n.mj-fk-search {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.mj-fk-search .mj-forms-field-input {\n  padding-right: 28px;\n}\n\n.mj-fk-search-icon {\n  position: absolute;\n  right: 4px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n\n.mj-fk-clear {\n  position: absolute;\n  right: 2px;\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 11px;\n  padding: 4px 6px;\n  line-height: 1;\n  border-radius: 3px;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-fk-clear:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n/* Matched state: solid accent underline */\n.mj-fk-search--matched .mj-forms-field-input {\n  border-bottom: 2px solid var(--mj-brand-primary);\n}\n\n/* ============================================\n   FLOATING DROPDOWN PANEL (position: fixed via ngStyle)\n   ============================================ */\n.mj-fk-dropdown {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n  animation: mj-dropdown-in 150ms ease;\n}\n\n.mj-fk-dropdown--above {\n  animation: mj-dropdown-in-above 150ms ease;\n}\n\n.mj-fk-option {\n  padding: 10px 14px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n  border-radius: 6px;\n}\n\n.mj-fk-option:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.mj-fk-option--selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.mj-fk-option--selected:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n@keyframes mj-dropdown-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes mj-dropdown-in-above {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* ============================================\n   SEARCH HIGHLIGHTING\n   ============================================ */\n.mj-forms-field-label :global(.mj-forms-search-highlight) {\n  background-color: var(--mj-color-warning-200, #fef08a);\n  color: var(--mj-color-warning-800, #854d0e);\n  padding: 0;\n  border-radius: 2px;\n  font-weight: 700;\n  box-shadow: 0 0 0 2px var(--mj-color-warning-200, #fef08a);\n}\n\n/* ============================================\n   VALIDATION ERROR STATE\n   ============================================ */\n.mj-forms-field--has-error .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error .mj-forms-field-input:focus {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error .mj-forms-field-input--textarea {\n  border-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error .mj-forms-field-input--textarea:focus {\n  border-color: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n.mj-forms-field--has-error .mj-custom-select-trigger {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error .mj-fk-search .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n/* ============================================\n   VALIDATION WARNING STATE\n   ============================================ */\n.mj-forms-field--has-warning .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input:focus {\n  background: color-mix(in srgb, var(--mj-status-warning) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input--textarea {\n  border-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input--textarea:focus {\n  border-color: var(--mj-status-warning);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n\n.mj-forms-field--has-warning .mj-custom-select-trigger {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning .mj-fk-search .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n/* ============================================\n   VALIDATION MESSAGE AREA\n   ============================================ */\n.mj-forms-field-validation {\n  grid-column: 2;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-top: -2px;\n  overflow: hidden;\n  animation: mj-validation-slide-in 200ms ease-out;\n}\n\n.mj-forms-field-validation-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  font-size: 12px;\n  line-height: 1.4;\n  padding: 3px 0 1px;\n}\n\n.mj-forms-field-validation-item i {\n  font-size: 11px;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n/* Error message colors */\n.mj-forms-field-validation--error .mj-forms-field-validation-item {\n  color: var(--mj-status-error);\n}\n\n.mj-forms-field-validation--error .mj-forms-field-validation-item i {\n  color: var(--mj-status-error);\n}\n\n/* Warning message colors */\n.mj-forms-field-validation--warning .mj-forms-field-validation-item {\n  color: var(--mj-color-warning-700);\n}\n\n.mj-forms-field-validation--warning .mj-forms-field-validation-item i {\n  color: var(--mj-status-warning);\n}\n\n@keyframes mj-validation-slide-in {\n  from {\n    opacity: 0;\n    max-height: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    max-height: 100px;\n    transform: translateY(0);\n  }\n}\n\n/* ============================================\n   RESPONSIVE\n   ============================================ */\n@media (max-width: 640px) {\n  .mj-forms-field {\n    grid-template-columns: 1fr;\n    gap: 4px;\n  }\n\n  .mj-forms-field-label {\n    font-size: 12px;\n  }\n\n  .mj-forms-field-validation {\n    grid-column: 1;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (Record && (Record.IsSaved || !IsFieldReadOnly)) {\n  <!-- READ-ONLY MODE -->\n  @if ((!EditMode || IsFieldReadOnly) && !ShouldHideField) {\n    <div class=\"mj-forms-field\" [class.mj-forms-field--readonly]=\"EditMode && IsFieldReadOnly\" [class.mj-forms-field--dirty]=\"IsDirty\">\n      @if (ShowLabel) {\n        <label class=\"mj-forms-field-label\" [innerHTML]=\"HighlightedDisplayName\"></label>\n      }\n      <div class=\"mj-forms-field-control\">\n        <!-- FK fields with a mapped name field: show the name as a hyperlink -->\n        @if (IsFKWithNameField) {\n          <span class=\"mj-forms-field-value\">\n            @if (RecordLinksEnabled) {\n              <a class=\"mj-forms-field-link mj-forms-field-link--fk\" (click)=\"OnRecordLinkClick($event)\" title=\"View related record\">\n                {{ FKDisplayName }}\n              </a>\n            } @else {\n              {{ FKDisplayName }}\n            }\n          </span>\n        }\n        @else {\n          @switch (LinkType) {\n            @case ('Email') {\n              <span class=\"mj-forms-field-value\">\n                <a class=\"mj-forms-field-link\" (click)=\"OnEmailLinkClick($event)\" title=\"Send email\">\n                  {{ FormatValue() }}\n                  <i class=\"fa-solid fa-envelope mj-forms-field-link-icon\"></i>\n                </a>\n              </span>\n            }\n            @case ('URL') {\n              <span class=\"mj-forms-field-value\">\n                <a class=\"mj-forms-field-link\" (click)=\"OnUrlLinkClick($event)\" title=\"Open link\">\n                  {{ FormatValue() }}\n                  <i class=\"fa-solid fa-arrow-up-right-from-square mj-forms-field-link-icon\"></i>\n                </a>\n              </span>\n            }\n            @case ('Record') {\n              <span class=\"mj-forms-field-value\">\n                @if (RecordLinksEnabled) {\n                  <a class=\"mj-forms-field-link\" (click)=\"OnRecordLinkClick($event)\" title=\"View related record\">\n                    {{ FormatValue() }}\n                    <i class=\"fa-solid fa-arrow-up-right-from-square mj-forms-field-link-icon\"></i>\n                  </a>\n                } @else {\n                  {{ FormatValue() }}\n                }\n              </span>\n            }\n            @default {\n              @if (Type === 'checkbox') {\n                <span class=\"mj-forms-field-value\">\n                  <div class=\"mj-forms-field-checkbox\">\n                    <input type=\"checkbox\" [checked]=\"!!Value\" disabled>\n                  </div>\n                </span>\n              }\n              @else if (RichTextMode === 'markdown') {\n                <div class=\"mj-forms-field-value mj-forms-field-value--rich\">\n                  <mj-markdown [data]=\"FormatValue()\"></mj-markdown>\n                </div>\n              }\n              @else if (RichTextMode === 'html') {\n                <!-- XSS: the mjSafeRichHtml pipe sanitizes with DOMPurify (HTML + SVG profiles)\n                     and then bypasses Angular's redundant re-sanitize. DOMPurify strips <script>,\n                     on* handlers, javascript:/data: URLs and <foreignObject> while KEEPING safe\n                     inline SVG + styles \u2014 richer than Angular's built-in sanitizer, still safe for\n                     untrusted content. -->\n                <div class=\"mj-forms-field-value mj-forms-field-value--rich\" [innerHTML]=\"FormatValue() | mjSafeRichHtml\"></div>\n              }\n              @else if (RichTextMode === 'code') {\n                <div class=\"mj-forms-field-value mj-forms-field-value--code\">\n                  <mj-code-editor [value]=\"FormatValue()\" [language]=\"CodeEditorLanguage\" [readonly]=\"true\"></mj-code-editor>\n                </div>\n              }\n              @else if (IsLongText) {\n                <span class=\"mj-forms-field-value mj-forms-field-value--long\">{{ FormatValue() }}</span>\n              }\n              @else {\n                <span class=\"mj-forms-field-value\">{{ FormatValue() }}</span>\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- EDIT MODE -->\n  @if (EditMode && !IsFieldReadOnly) {\n    <div class=\"mj-forms-field mj-forms-field--editing\" [class.mj-forms-field--dirty]=\"IsDirty\" [class.mj-forms-field--required-empty]=\"IsRequiredEmpty\" [class.mj-forms-field--has-error]=\"ShowErrors\" [class.mj-forms-field--has-warning]=\"ShowWarnings\">\n      @if (ShowLabel) {\n        <label class=\"mj-forms-field-label\" [innerHTML]=\"HighlightedDisplayName\"></label>\n      }\n      <div class=\"mj-forms-field-control\">\n        <!-- Foreign Key fields get custom search autocomplete -->\n        @if (HasRelatedEntity) {\n          <div class=\"mj-fk-search\"\n              [class.mj-fk-search--matched]=\"FKHasLinkedValue\"\n              [class.mj-fk-search--scoped]=\"FKFocused && FKSearchableFields.length > 1\">\n            @if (FKHasLinkedValue && !(FKFocused && FKSearchableFields.length > 1)) {\n              <i class=\"fa-solid fa-link mj-fk-link-icon\" title=\"Linked record\"></i>\n            }\n            <input type=\"text\"\n              class=\"mj-forms-field-input\"\n              [class.mj-forms-field-input--linked]=\"FKHasLinkedValue\"\n              [value]=\"FKSearchText\"\n              (input)=\"OnFKInput($event)\"\n              (focus)=\"OnFKFocus($event)\"\n              (blur)=\"OnFKBlur()\"\n              (keydown)=\"OnFKKeydown($event)\"\n              placeholder=\"Search...\">\n\n            <!-- Scope pill: only while focused, only when there's more than one searchable field.\n                 The menu itself lives INSIDE the results dropdown (below) so it overlays the\n                 list and rides the same above/below flip. -->\n            @if (FKFocused && FKSearchableFields.length > 1) {\n              <button class=\"mj-fk-scope-pill\"\n                  [class.mj-fk-scope-pill--open]=\"FKShowScopeMenu\"\n                  (mousedown)=\"OnFKScopeToggle($event)\"\n                  [title]=\"'Searching ' + FKSearchFieldLabel + ' \u2014 click to change'\">\n                <i class=\"fa-solid fa-magnifying-glass mj-fk-scope-pill-icon\"></i>\n                <span class=\"mj-fk-scope-pill-label\">{{ FKSearchFieldLabel }}</span>\n                <i class=\"fa-solid mj-fk-scope-pill-caret\" [class.fa-chevron-up]=\"FKShowScopeMenu\" [class.fa-chevron-down]=\"!FKShowScopeMenu\"></i>\n              </button>\n            }\n\n            @if (FKSearchText) {\n              <button class=\"mj-fk-clear\" (mousedown)=\"OnFKClearClick($event)\" title=\"Clear\">\n                <i class=\"fa-solid fa-xmark\"></i>\n              </button>\n            } @else {\n              <i class=\"fa-solid fa-magnifying-glass mj-fk-search-icon\"></i>\n            }\n            @if (ShowFKDropdown) {\n              <div class=\"mj-fk-dropdown mj-fk-dropdown--multi\"\n                  [ngStyle]=\"DropdownPositionStyle\"\n                  [class.mj-fk-dropdown--above]=\"OpenAbove\"\n                  [class.mj-fk-dropdown--scope-open]=\"FKShowScopeMenu\">\n\n                <!-- Scope (search-field) picker + column toggles \u2014 overlays the list, anchored to the pill edge.\n                     Click a row to SEARCH that field; click the eye to SHOW/HIDE it as a column. -->\n                @if (FKShowScopeMenu) {\n                  <div class=\"mj-fk-scope-menu\" [class.mj-fk-scope-menu--bottom]=\"OpenAbove\">\n                    <div class=\"mj-fk-scope-grp\">Columns shown</div>\n                    @for (f of FKSearchableFields; track f.FieldName) {\n                      @if (f.Group === 'shown') {\n                        <ng-container *ngTemplateOutlet=\"scopeRow; context: { $implicit: f }\"></ng-container>\n                      }\n                    }\n                    @if (FKHasOtherSearchableFields) {\n                      <div class=\"mj-fk-scope-divider\"></div>\n                      <div class=\"mj-fk-scope-grp\">Other fields</div>\n                      @for (f of FKSearchableFields; track f.FieldName) {\n                        @if (f.Group === 'other') {\n                          <ng-container *ngTemplateOutlet=\"scopeRow; context: { $implicit: f }\"></ng-container>\n                        }\n                      }\n                    }\n                  </div>\n                }\n\n                <!-- Shared scope-menu row, fixed-slot layout for clean alignment:\n                     [reorder \u25B2\u25BC \u2014 hover-reveal] [icon] [label] [eye].\n                     Click the row = search this field; the active search row is shown bold+accent. -->\n                <ng-template #scopeRow let-f>\n                  <div class=\"mj-fk-scope-mi\"\n                      [class.mj-fk-scope-mi--on]=\"IsFKScopeActive(f)\"\n                      (mousedown)=\"OnFKScopeSelect($event, f)\">\n                    <span class=\"mj-fk-col-reorder\">\n                      @if (f.Group === 'shown') {\n                        <button type=\"button\" class=\"mj-fk-col-move mj-fk-col-move--up\" [disabled]=\"!CanMoveFKColumnUp(f.FieldName)\"\n                            (mousedown)=\"MoveFKColumn($event, f.FieldName, -1)\" title=\"Move column up\">\n                          <i class=\"fa-solid fa-chevron-up\"></i>\n                        </button>\n                        <button type=\"button\" class=\"mj-fk-col-move mj-fk-col-move--down\" [disabled]=\"!CanMoveFKColumnDown(f.FieldName)\"\n                            (mousedown)=\"MoveFKColumn($event, f.FieldName, 1)\" title=\"Move column down\">\n                          <i class=\"fa-solid fa-chevron-down\"></i>\n                        </button>\n                      }\n                    </span>\n                    <i [class]=\"f.Icon + ' mj-fk-scope-mi-icon'\"></i>\n                    <span class=\"mj-fk-scope-mi-label\">{{ f.Label }}</span>\n                    <span class=\"mj-fk-col-eye-slot\">\n                      @if (CanToggleFKColumn(f)) {\n                        <button type=\"button\" class=\"mj-fk-col-toggle\"\n                            [class.mj-fk-col-toggle--on]=\"IsFKColumnVisible(f)\"\n                            (mousedown)=\"OnFKColumnToggle($event, f)\"\n                            [title]=\"IsFKColumnVisible(f) ? 'Hide this column' : 'Show as a column'\">\n                          <i class=\"fa-solid\" [class.fa-eye]=\"IsFKColumnVisible(f)\" [class.fa-eye-slash]=\"!IsFKColumnVisible(f)\"></i>\n                        </button>\n                      }\n                    </span>\n                  </div>\n                </ng-template>\n\n                <!-- Pinned \"currently selected\" \u2014 sticky at the top while browsing, so you can\n                     keep it or pick another without clearing first. -->\n                @if (FKSelectedSuggestion && !FKLoading) {\n                  <div class=\"mj-fk-current\">\n                    <div class=\"mj-fk-current-head\">\n                      <i class=\"fa-solid fa-circle-check\"></i>\n                      <span>Currently selected</span>\n                    </div>\n                    <div class=\"mj-fk-current-row\" (mousedown)=\"OnFKSelectItem(FKSelectedSuggestion, $event)\" title=\"Keep this selection\">\n                      @if (FKSelectedSuggestion.Icon) { <i class=\"mj-fk-current-icon\" [class]=\"FKSelectedSuggestion.Icon\"></i> }\n                      <span class=\"mj-fk-current-name\" [innerHTML]=\"FKSelectedSuggestion.HighlightedName\"></span>\n                      @if (FKSelectedSuggestion.ExtraColumns.length && FKSelectedSuggestion.ExtraColumns[0].Value) {\n                        <span class=\"mj-fk-current-detail\">{{ FKSelectedSuggestion.ExtraColumns[0].Value }}</span>\n                      }\n                      <button type=\"button\" class=\"mj-fk-current-clear\" (mousedown)=\"OnFKClearClick($event)\" title=\"Clear selection\">\n                        <i class=\"fa-solid fa-xmark\"></i>\n                      </button>\n                    </div>\n                  </div>\n                }\n\n                @if (FKLoading) {\n                  <div class=\"mj-fk-status\">\n                    <i class=\"fa-solid fa-circle-notch fa-spin\"></i>\n                    <span>Searching\u2026</span>\n                  </div>\n                }\n                @if (!FKLoading && FKNoMatches) {\n                  <div class=\"mj-fk-status mj-fk-status--empty\">\n                    <i class=\"fa-solid fa-magnifying-glass\"></i>\n                    <span>No matches</span>\n                  </div>\n                }\n                @if (!FKLoading && FKSuggestions.length > 0) {\n                  <div class=\"mj-fk-options\">\n                    <div class=\"mj-fk-grid\" [style.grid-template-columns]=\"FKGridTemplateColumns\">\n                      <!-- Header row: click to sort, drag the right edge to resize.\n                           (Column reorder lives in the field-selector menu, not here.) -->\n                      <div class=\"mj-fk-grid-row mj-fk-grid-row--header\">\n                        @if (FKHasIconColumn) {\n                          <div class=\"mj-fk-hcell mj-fk-hcell--icon\"></div>\n                        }\n                        @for (col of FKColumnFields; track col; let i = $index) {\n                          <div class=\"mj-fk-hcell\"\n                              (mousedown)=\"OnFKHeaderSort($event, col)\"\n                              [title]=\"'Click to sort by ' + FKColumnHeaders[i]\">\n                            <span class=\"mj-fk-hcell-label\">{{ FKColumnHeaders[i] }}</span>\n                            <i [class]=\"FKSortIcon(col)\"></i>\n                            <span class=\"mj-fk-resizer\" (mousedown)=\"OnFKColResizeStart($event, col)\" title=\"Drag to resize\"></span>\n                          </div>\n                        }\n                      </div>\n                      <!-- Data rows -->\n                      @for (suggestion of FKSuggestions; track suggestion.PrimaryKeyValue; let i = $index) {\n                        <div class=\"mj-fk-grid-row\"\n                            [class.mj-fk-grid-row--active]=\"i === FKActiveIndex\"\n                            [class.mj-fk-grid-row--selected]=\"IsFKRowSelected(suggestion)\"\n                            (mousedown)=\"OnFKSelectItem(suggestion, $event)\"\n                            (mouseenter)=\"FKActiveIndex = i\">\n                          @if (FKHasIconColumn) {\n                            <div class=\"mj-fk-cell mj-fk-cell--icon\">\n                              @if (suggestion.Icon) { <i [class]=\"suggestion.Icon\"></i> }\n                            </div>\n                          }\n                          @for (col of FKColumnFields; track col; let last = $last) {\n                            @if (col === FKNameField) {\n                              <div class=\"mj-fk-cell mj-fk-cell--name\" [class.mj-fk-cell--fill]=\"FKColumnFillsTrack(col, last)\">\n                                @if (IsFKRowSelected(suggestion)) {\n                                  <i class=\"fa-solid fa-check mj-fk-selected-check\" title=\"Currently selected\"></i>\n                                }\n                                <span [innerHTML]=\"suggestion.HighlightedName\"></span>\n                              </div>\n                            } @else {\n                              <div class=\"mj-fk-cell\" [class.mj-fk-cell--fill]=\"FKColumnFillsTrack(col, last)\" [title]=\"FKCellFor(suggestion, col)?.Value || ''\">\n                                <span [innerHTML]=\"FKCellFor(suggestion, col)?.HighlightedValue || ''\"></span>\n                              </div>\n                            }\n                          }\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n\n                <!-- Sticky \"create new\" footer \u2014 always visible at the bottom (no scrolling),\n                     prefilled with the typed text. Gated on create permission. -->\n                @if (CanCreateFK) {\n                  <button type=\"button\" class=\"mj-fk-create-footer\" (mousedown)=\"OnFKCreateNew($event)\" [title]=\"FKCreateLabel\">\n                    <i class=\"fa-solid fa-plus mj-fk-create-icon\"></i>\n                    <span class=\"mj-fk-create-label\">{{ FKCreateLabel }}</span>\n                  </button>\n                }\n              </div>\n            }\n          </div>\n        }\n        @else if (EditRichTextMode !== 'plain') {\n          <!-- Markdown / HTML / Code long-text: edit raw with a syntax-highlighted code editor -->\n          <mj-code-editor\n            class=\"mj-forms-field-input--code\"\n            [value]=\"FormatValue()\"\n            [language]=\"CodeEditorLanguage\"\n            (change)=\"OnCodeEditorChange($event)\"></mj-code-editor>\n        }\n        @else {\n          @switch (Type) {\n            @case ('textbox') {\n              <input type=\"text\"\n                class=\"mj-forms-field-input\"\n                [value]=\"FormatValue()\"\n                (input)=\"OnInputChange($event)\">\n            }\n            @case ('textarea') {\n              <textarea\n                class=\"mj-forms-field-input mj-forms-field-input--textarea\"\n                [value]=\"FormatValue()\"\n                (input)=\"OnInputChange($event)\"></textarea>\n            }\n            @case ('number') {\n              <input type=\"number\"\n                class=\"mj-forms-field-input mj-forms-field-input--number\"\n                [value]=\"Value\"\n                (change)=\"OnNumberChange($event)\">\n            }\n            @case ('datepicker') {\n              <input type=\"date\"\n                class=\"mj-forms-field-input mj-forms-field-input--date\"\n                [value]=\"DateInputValue\"\n                (change)=\"OnDateChange($event)\">\n            }\n            @case ('checkbox') {\n              <div class=\"mj-forms-field-checkbox\">\n                <input type=\"checkbox\"\n                  [checked]=\"!!Value\"\n                  (change)=\"OnCheckboxChange($event)\">\n              </div>\n            }\n            @case ('select') {\n              <div class=\"mj-custom-select-trigger\"\n                tabindex=\"0\"\n                (click)=\"OnSelectTriggerClick($event)\"\n                (blur)=\"OnSelectTriggerBlur()\">\n                <span class=\"mj-custom-select-value\" [class.mj-custom-select-value--placeholder]=\"!FormatValue()\">\n                  {{ FormatValue() || '-- Select --' }}\n                </span>\n                <i class=\"fa-solid fa-chevron-down mj-custom-select-chevron\" [class.mj-custom-select-chevron--open]=\"ShowSelectDropdown\"></i>\n              </div>\n              @if (ShowSelectDropdown && PossibleValues.length > 0) {\n                <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n                  @for (option of PossibleValues; track option) {\n                    <div class=\"mj-fk-option\" [class.mj-fk-option--selected]=\"FormatValue() === option\" (mousedown)=\"OnSelectOptionClick(option, $event)\">\n                      {{ option }}\n                    </div>\n                  }\n                </div>\n              }\n            }\n            @case ('autocomplete') {\n              <div class=\"mj-fk-search\">\n                <input type=\"text\"\n                  class=\"mj-forms-field-input\"\n                  [value]=\"FormatValue()\"\n                  (input)=\"OnValueListInput($event)\"\n                  (focus)=\"OnValueListFocus($event)\"\n                  (blur)=\"OnValueListBlur()\"\n                  placeholder=\"Type to search...\">\n                <i class=\"fa-solid fa-magnifying-glass mj-fk-search-icon\"></i>\n                @if (ShowValueListDropdown && FilteredPossibleValues.length > 0) {\n                  <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n                    @for (option of FilteredPossibleValues; track option) {\n                      <div class=\"mj-fk-option\" (mousedown)=\"OnValueListSelect(option, $event)\">\n                        {{ option }}\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @default {\n              <input type=\"text\"\n                class=\"mj-forms-field-input\"\n                [value]=\"FormatValue()\"\n                (change)=\"OnInputChange($event)\">\n            }\n          }\n        }\n      </div>\n      <!-- Inline validation messages -->\n      @if (DisplayErrors.length > 0) {\n        <div class=\"mj-forms-field-validation mj-forms-field-validation--error\">\n          @for (error of DisplayErrors; track error.Message) {\n            <div class=\"mj-forms-field-validation-item\">\n              <i class=\"fa-solid fa-circle-exclamation\"></i>\n              <span>{{ error.Message }}</span>\n            </div>\n          }\n        </div>\n      }\n      @if (DisplayWarnings.length > 0) {\n        <div class=\"mj-forms-field-validation mj-forms-field-validation--warning\">\n          @for (warning of DisplayWarnings; track warning.Message) {\n            <div class=\"mj-forms-field-validation-item\">\n              <i class=\"fa-solid fa-triangle-exclamation\"></i>\n              <span>{{ warning.Message }}</span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n}\n", styles: ["/* ============================================\n   FORM FIELD - Shared styles for read and edit\n   ============================================ */\n:host {\n  --mj-forms-field-label-width: 200px;\n  --mj-forms-field-gap: 12px;\n\n  display: contents;\n}\n\n.mj-forms-field {\n  display: grid;\n  grid-template-columns: var(--mj-forms-field-label-width) 1fr;\n  gap: var(--mj-forms-field-gap);\n  align-items: baseline;\n  padding: 8px 0;\n  transition: all var(--mj-transition-base) ease;\n}\n\n/* Subtle row hover in edit mode */\n.mj-forms-field--editing:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 6px;\n  margin: 0 -8px;\n  padding: 8px 8px;\n}\n\n/* ============================================\n   LABEL\n   ============================================ */\n.mj-forms-field-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  padding-top: 2px;\n  word-break: break-word;\n}\n\n/* ============================================\n   FIELD CONTROL WRAPPER (value + dirty dot)\n   ============================================ */\n.mj-forms-field-control {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n\n.mj-forms-field-control > * {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ============================================\n   DIRTY INDICATOR (solid amber dot after label)\n   ============================================ */\n.mj-forms-field--dirty .mj-forms-field-label::after {\n  content: '';\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--mj-status-warning);\n  margin-left: 6px;\n  vertical-align: middle;\n}\n\n/* ============================================\n   REQUIRED FIELD - red underline when empty\n   ============================================ */\n.mj-forms-field--required-empty .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty .mj-forms-field-input:focus {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty .mj-custom-select-trigger {\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty .mj-fk-search .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-error);\n}\n\n/* ============================================\n   READ-ONLY VALUE\n   ============================================ */\n.mj-forms-field-value {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n\n.mj-forms-field-value--long {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n/* Rich (markdown / html) read-only rendering \u2014 let content flow as a block, not a flex row */\n.mj-forms-field-value--rich {\n  display: block;\n  align-items: initial;\n  max-height: 480px;\n  overflow: auto;\n  width: 100%;\n}\n\n/* Code read-only / edit rendering \u2014 the embedded code editor needs an explicit height */\n.mj-forms-field-value--code {\n  display: block;\n  align-items: initial;\n  width: 100%;\n}\n\n.mj-forms-field-value--code mj-code-editor,\n.mj-forms-field-input--code {\n  display: block;\n  width: 100%;\n  min-height: 160px;\n  max-height: 480px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius, 4px);\n  overflow: auto;\n}\n\n/* Read-only fields in edit mode */\n.mj-forms-field--readonly {\n  opacity: 0.7;\n}\n\n.mj-forms-field--readonly .mj-forms-field-value {\n  color: var(--mj-text-secondary);\n}\n\n/* ============================================\n   LINKS (FK, email, URL)\n   ============================================ */\n.mj-forms-field-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-weight: 400;\n  font-size: 14px;\n  transition: color var(--mj-transition-base);\n  text-decoration: none;\n}\n\n.mj-forms-field-link:hover {\n  color: var(--mj-brand-primary-hover);\n}\n\n.mj-forms-field-link-icon {\n  font-size: 11px;\n  opacity: 0;\n  transition: opacity var(--mj-transition-base);\n}\n\n.mj-forms-field-link:hover .mj-forms-field-link-icon {\n  opacity: 1;\n}\n\n/* FK fields showing entity name instead of raw ID */\n.mj-forms-field-link--fk {\n  font-size: 14px;\n  font-weight: 400;\n}\n\n/* ============================================\n   EDIT MODE INPUTS - Clean underline style\n   ============================================ */\n.mj-forms-field-input {\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: none;\n  border-bottom: 1.5px solid var(--mj-border-default);\n  padding: 4px 0;\n  width: 100%;\n  outline: none;\n  transition: border-color var(--mj-transition-base) ease,\n              background var(--mj-transition-base) ease;\n}\n\n.mj-forms-field-input:focus {\n  border-bottom-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 4px 4px 0 0;\n  padding: 4px 6px;\n}\n\n.mj-forms-field-input::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n/* Textarea variant */\n.mj-forms-field-input--textarea {\n  resize: vertical;\n  min-height: 60px;\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 8px 10px;\n  background: var(--mj-bg-surface);\n  font-family: inherit;\n}\n\n.mj-forms-field-input--textarea:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  background: var(--mj-bg-surface);\n  padding: 8px 10px;\n  border-radius: 6px;\n}\n\n/* Number input - narrower */\n.mj-forms-field-input--number {\n  max-width: 200px;\n}\n\n/* Date input - narrower */\n.mj-forms-field-input--date {\n  max-width: 220px;\n}\n\n/* ============================================\n   CHECKBOX (custom styled)\n   ============================================ */\n.mj-forms-field-checkbox {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"] {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  transition: all var(--mj-transition-base) ease;\n  flex-shrink: 0;\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:checked {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:checked::after {\n  content: '';\n  position: absolute;\n  left: 5px;\n  top: 1px;\n  width: 5px;\n  height: 9px;\n  border: solid var(--mj-text-inverse);\n  border-width: 0 2px 2px 0;\n  transform: rotate(45deg);\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* ============================================\n   CUSTOM SELECT DROPDOWN (replaces native <select>)\n   ============================================ */\n.mj-custom-select-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: none;\n  border-bottom: 1.5px solid var(--mj-border-default);\n  padding: 4px 0;\n  width: 100%;\n  cursor: pointer;\n  outline: none;\n  transition: border-color var(--mj-transition-base) ease,\n              background var(--mj-transition-base) ease;\n}\n\n.mj-custom-select-trigger:focus {\n  border-bottom-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-radius: 4px 4px 0 0;\n  padding: 4px 6px;\n}\n\n.mj-custom-select-value {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-custom-select-value--placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.mj-custom-select-chevron {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  transition: transform var(--mj-transition-base) ease;\n  flex-shrink: 0;\n  margin-left: 8px;\n}\n\n.mj-custom-select-chevron--open {\n  transform: rotate(180deg);\n}\n\n/* ============================================\n   FK SEARCH (custom autocomplete)\n   ============================================ */\n.mj-fk-search {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.mj-fk-search .mj-forms-field-input {\n  padding-right: 28px;\n}\n\n.mj-fk-search-icon {\n  position: absolute;\n  right: 4px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n\n.mj-fk-clear {\n  position: absolute;\n  right: 2px;\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 11px;\n  padding: 4px 6px;\n  line-height: 1;\n  border-radius: 3px;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-fk-clear:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n/* Linked state: solid accent underline + a leading chain icon, so it's obvious the\n   field holds a resolved record reference rather than free-typed text. */\n.mj-fk-search--matched .mj-forms-field-input {\n  border-bottom: 2px solid var(--mj-brand-primary);\n}\n\n/* Linked indicator sits on the RIGHT (just left of the clear button) so it never\n   interrupts left-to-right reading of the value or overlaps the text. */\n.mj-fk-link-icon {\n  position: absolute;\n  right: 26px;\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* Make room on the right for the link icon + the clear button. */\n.mj-forms-field-input--linked {\n  padding-right: 46px;\n}\n\n/* ============================================\n   SCOPE PILL + FIELD-PICKER MENU (search-field scope)\n   ============================================ */\n/* When the pill is showing, reserve room on the right of the input for it. */\n.mj-fk-search--scoped .mj-forms-field-input {\n  padding-right: 150px;\n}\n\n.mj-fk-scope-pill {\n  position: absolute;\n  right: 30px;\n  /* Vertically centered in the input so it clears the focus underline below. */\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  max-width: 120px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n  font-size: 10.5px;\n  font-weight: 600;\n  font-family: inherit;\n  /* Kept short so it clears the input's focus underline without making the row taller. */\n  padding: 1px 7px;\n  border-radius: 999px;\n  cursor: pointer;\n  white-space: nowrap;\n  line-height: 1.35;\n  transition: background var(--mj-transition-base), border-color var(--mj-transition-base), color var(--mj-transition-base);\n}\n\n.mj-fk-scope-pill:hover,\n.mj-fk-scope-pill--open {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-primary);\n}\n\n.mj-fk-scope-pill-icon {\n  font-size: 9px;\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n.mj-fk-scope-pill-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-fk-scope-pill-caret {\n  font-size: 8px;\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n/* The menu is rendered INSIDE the results dropdown panel so it overlays the list\n   (correct z-order, no extra real estate) and rides the dropdown's above/below\n   flip. Anchored to the dropdown's top-right \u2014 right under the pill. */\n.mj-fk-scope-menu {\n  position: absolute;\n  top: 4px;\n  right: 8px;\n  z-index: 5;\n  min-width: 180px;\n  max-width: calc(100vw - 24px);\n  max-height: 260px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-sm);\n  box-shadow: var(--mj-shadow-lg);\n  padding: 5px;\n  animation: mj-dropdown-in 120ms ease;\n}\n\n/* When the dropdown opens ABOVE the input, anchor the menu to its bottom edge so it\n   stays next to the pill (which is at the input/dropdown boundary). */\n.mj-fk-scope-menu--bottom {\n  top: auto;\n  bottom: 4px;\n}\n\n.mj-fk-scope-grp {\n  font-size: 10px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--mj-text-muted);\n  padding: 7px 10px 4px;\n  font-weight: 700;\n}\n\n.mj-fk-scope-mi {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 7px 10px;\n  font-size: 13px;\n  border-radius: 5px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.mj-fk-scope-mi:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-fk-scope-mi--on {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n/* Fixed-width LEFT slot: a compact stacked up/down reorder control that reveals on row\n   hover. Reserved (same width) on every row so the field icons + labels stay aligned. */\n.mj-fk-col-reorder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 22px;\n  flex-shrink: 0;\n}\n\n.mj-fk-col-move {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 10px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 8px;\n  opacity: 0; /* hover-reveal for a clean resting state */\n  transition: opacity var(--mj-transition-base), color var(--mj-transition-base);\n}\n\n.mj-fk-scope-mi:hover .mj-fk-col-move:not(:disabled) {\n  opacity: 0.8;\n}\n\n.mj-fk-col-move:hover:not(:disabled) {\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n/* End-of-range arrows stay hidden (slot still reserved) rather than greyed. */\n.mj-fk-col-move:disabled {\n  opacity: 0 !important;\n  cursor: default;\n}\n\n.mj-fk-scope-mi-icon {\n  width: 14px;\n  font-size: 11px;\n  opacity: 0.75;\n  flex-shrink: 0;\n}\n\n.mj-fk-scope-mi-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Fixed-width RIGHT slot so the eye (or its empty space, for the name row) aligns. */\n.mj-fk-col-eye-slot {\n  width: 22px;\n  height: 22px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Eye toggle: show/hide a field as a grid column (independent of search scope). */\n.mj-fk-col-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  background: transparent;\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 12px;\n  transition: background var(--mj-transition-base), color var(--mj-transition-base);\n}\n\n.mj-fk-col-toggle:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n}\n\n.mj-fk-col-toggle--on {\n  color: var(--mj-brand-primary);\n}\n\n.mj-fk-scope-divider {\n  height: 1px;\n  background: var(--mj-border-subtle);\n  margin: 4px 6px;\n}\n\n/* Narrow / mobile screens: shrink the pill + its reserved space, give menu rows a\n   larger touch target, and keep the menu within the viewport. */\n@media (max-width: 560px) {\n  .mj-fk-search--scoped .mj-forms-field-input {\n    padding-right: 116px;\n  }\n  .mj-fk-scope-pill {\n    max-width: 88px;\n  }\n  .mj-fk-scope-menu {\n    min-width: 160px;\n  }\n  .mj-fk-scope-mi {\n    padding: 10px 10px;\n  }\n}\n\n/* ============================================\n   FLOATING DROPDOWN PANEL (position: fixed via ngStyle)\n   ============================================ */\n.mj-fk-dropdown {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-lg);\n  max-height: 240px;\n  overflow-y: auto;\n  padding: 4px;\n  animation: mj-dropdown-in 150ms ease;\n}\n\n.mj-fk-dropdown--above {\n  animation: mj-dropdown-in-above 150ms ease;\n}\n\n.mj-fk-option {\n  padding: 10px 14px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n  border-radius: 6px;\n}\n\n.mj-fk-option:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.mj-fk-option--selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.mj-fk-option--selected:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n/* ============================================\n   MULTI-COLUMN FK DROPDOWN \u2014 aligned mini-grid (icon + name + extra cols)\n   with sortable headers and horizontal scroll.\n   ============================================ */\n.mj-fk-dropdown--multi {\n  padding: 4px;\n  /* The inner .mj-fk-options is the single scroll container (both axes) so the\n     sticky header anchors correctly; the dropdown just clips to its rounded border. */\n  overflow: hidden;\n  max-height: none;\n}\n\n/* Single scroll region (both axes) for the grid: vertical for long lists, horizontal\n   when many DefaultInView columns make rows wider than the dropdown. Being the sole\n   scroller lets the sticky column headers anchor to its top edge. */\n.mj-fk-dropdown--multi .mj-fk-options {\n  overflow: auto;\n  max-height: 260px;\n}\n\n/* While the scope menu is open it must escape the panel's clip (the inner\n   .mj-fk-options keeps its own scroll, so the grid still behaves). */\n.mj-fk-dropdown--scope-open {\n  overflow: visible;\n}\n\n/* One CSS grid spans the header + all data rows so every column lines up.\n   grid-template-columns is supplied inline from FKGridTemplateColumns.\n   `width: 100%` (with `min-width: max-content`) lets the last column's `1fr` track\n   absorb leftover width, while still overflowing \u2192 horizontal scroll when the columns\n   are collectively wider than the dropdown. */\n.mj-fk-grid {\n  display: grid;\n  width: 100%;\n  min-width: max-content;\n  align-items: stretch;\n}\n\n/* Rows are layout-transparent so their cells become direct grid items (this is\n   what makes columns align across rows). The row element still exists for click\n   handling and for the active-state selector below. */\n.mj-fk-grid-row {\n  display: contents;\n}\n\n/* Header cells: sticky to the top of the vertical scroll, clickable to sort. */\n.mj-fk-hcell {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.mj-fk-hcell:hover {\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-fk-hcell--icon {\n  cursor: default;\n  padding: 7px 8px;\n}\n\n.mj-fk-hcell--icon:hover {\n  background: var(--mj-bg-surface-elevated);\n}\n\n.mj-fk-hcell-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-fk-sort-icon {\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n/* Idle (unsorted) columns show a faded sort glyph to signal sortability. */\n.mj-fk-sort-icon--idle {\n  opacity: 0.35;\n}\n\n/* Data cells */\n.mj-fk-cell {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 320px;\n  cursor: pointer;\n}\n\n/* The fill column (last, or a user-resized one) drops the default content cap so its\n   cells stretch to the full track width that the header already occupies. */\n.mj-fk-cell--fill {\n  max-width: none;\n}\n\n/* Wrapping span keeps the highlighted text+<mark> as one inline run (so flex\n   doesn't strip the space next to the mark) while still truncating with ellipsis. */\n.mj-fk-cell > span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.mj-fk-cell--icon {\n  justify-content: center;\n  padding: 8px;\n  max-width: none;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n}\n\n.mj-fk-cell--name {\n  font-weight: 500;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  gap: 6px;\n}\n\n.mj-fk-selected-check {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n/* Active (keyboard / hover) row \u2014 painted on the cells, since the row box is\n   removed by display:contents. The child combinator still matches. */\n.mj-fk-grid-row--active > .mj-fk-cell {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n/* Currently-linked row \u2014 a subtle persistent tint so the user sees which record\n   is selected when they reopen the list (stacks under the brighter active tint). */\n.mj-fk-grid-row--selected > .mj-fk-cell {\n  background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.mj-fk-grid-row--selected > .mj-fk-cell--name {\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n/* Matched-substring highlight inside the name column */\n/* ::ng-deep (not :global, which Angular's emulated encapsulation ignores) so the\n   style reaches the <mark> injected via [innerHTML]. Color comes from the shared\n   theme token so light/dark/white-label all control it centrally. */\n.mj-fk-cell--name ::ng-deep .mj-forms-search-highlight,\n.mj-fk-cell ::ng-deep .mj-forms-search-highlight {\n  background-color: var(--mj-search-highlight-bg);\n  color: var(--mj-search-highlight-text);\n  border-radius: 2px;\n  padding: 0 1px;\n  font-weight: 600;\n}\n\n/* Column resize handle \u2014 thin grab strip on the right edge of each header cell. */\n.mj-fk-resizer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 7px;\n  height: 100%;\n  cursor: col-resize;\n  user-select: none;\n}\n\n.mj-fk-resizer::after {\n  content: '';\n  position: absolute;\n  top: 20%;\n  right: 2px;\n  width: 2px;\n  height: 60%;\n  background: transparent;\n  transition: background var(--mj-transition-base);\n}\n\n.mj-fk-hcell:hover .mj-fk-resizer::after,\n.mj-fk-resizer:hover::after {\n  background: var(--mj-border-strong);\n}\n\n/* Loading / empty status rows */\n.mj-fk-status {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 14px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.mj-fk-status i {\n  font-size: 12px;\n}\n\n.mj-fk-status--empty {\n  font-style: italic;\n}\n\n/* Sticky \"create new\" footer \u2014 sits below the (scrolling) options as a direct child of\n   the dropdown panel, so it's always visible regardless of list length. */\n.mj-fk-create-footer {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  width: 100%;\n  padding: 10px 14px;\n  background: var(--mj-bg-surface-card);\n  border: none;\n  border-top: 1px solid var(--mj-border-default);\n  color: var(--mj-brand-primary);\n  font-size: 13px;\n  font-weight: 600;\n  font-family: inherit;\n  text-align: left;\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n}\n\n.mj-fk-create-footer:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-fk-create-icon {\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.mj-fk-create-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ============================================\n   PINNED \"CURRENTLY SELECTED\" SECTION\n   ============================================ */\n.mj-fk-current {\n  border-bottom: 1px solid var(--mj-border-default);\n  background: color-mix(in srgb, var(--mj-brand-primary) 7%, var(--mj-bg-surface-card));\n  animation: mj-fk-current-in 220ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n@keyframes mj-fk-current-in {\n  from { opacity: 0; transform: translateY(-6px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n.mj-fk-current-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px 3px;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--mj-brand-primary);\n}\n\n.mj-fk-current-head i {\n  font-size: 10px;\n}\n\n.mj-fk-current-row {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 6px 12px 10px;\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n}\n\n/* Accent bar on the left for a bit of sizzle. */\n.mj-fk-current-row::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 4px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 0 2px 2px 0;\n  background: var(--mj-brand-primary);\n}\n\n.mj-fk-current-row:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-fk-current-icon {\n  flex-shrink: 0;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.mj-fk-current-name {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-fk-current-detail {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mj-fk-current-clear {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  flex-shrink: 0;\n  background: transparent;\n  border: none;\n  border-radius: 4px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 12px;\n  transition: background var(--mj-transition-base), color var(--mj-transition-base);\n}\n\n.mj-fk-current-clear:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-status-error);\n}\n\n@keyframes mj-dropdown-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes mj-dropdown-in-above {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* ============================================\n   SEARCH HIGHLIGHTING\n   ============================================ */\n.mj-forms-field-label ::ng-deep .mj-forms-search-highlight {\n  /* Shared search-highlight theme token. ::ng-deep (not :global) so it reaches\n     innerHTML content. */\n  background-color: var(--mj-search-highlight-bg);\n  color: var(--mj-search-highlight-text);\n  border-radius: 2px;\n  padding: 0 1px;\n  font-weight: 600;\n}\n\n/* ============================================\n   VALIDATION ERROR STATE\n   ============================================ */\n.mj-forms-field--has-error .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error .mj-forms-field-input:focus {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error .mj-forms-field-input--textarea {\n  border-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error .mj-forms-field-input--textarea:focus {\n  border-color: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n.mj-forms-field--has-error .mj-custom-select-trigger {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error .mj-fk-search .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-error);\n  border-bottom-width: 2px;\n}\n\n/* ============================================\n   VALIDATION WARNING STATE\n   ============================================ */\n.mj-forms-field--has-warning .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input:focus {\n  background: color-mix(in srgb, var(--mj-status-warning) 5%, var(--mj-bg-surface));\n  border-bottom-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input--textarea {\n  border-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input--textarea:focus {\n  border-color: var(--mj-status-warning);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n\n.mj-forms-field--has-warning .mj-custom-select-trigger {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning .mj-fk-search .mj-forms-field-input {\n  border-bottom-color: var(--mj-status-warning);\n  border-bottom-width: 2px;\n}\n\n/* ============================================\n   VALIDATION MESSAGE AREA\n   ============================================ */\n.mj-forms-field-validation {\n  grid-column: 2;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-top: -2px;\n  overflow: hidden;\n  animation: mj-validation-slide-in 200ms ease-out;\n}\n\n.mj-forms-field-validation-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  font-size: 12px;\n  line-height: 1.4;\n  padding: 3px 0 1px;\n}\n\n.mj-forms-field-validation-item i {\n  font-size: 11px;\n  margin-top: 2px;\n  flex-shrink: 0;\n}\n\n/* Error message colors */\n.mj-forms-field-validation--error .mj-forms-field-validation-item {\n  color: var(--mj-status-error);\n}\n\n.mj-forms-field-validation--error .mj-forms-field-validation-item i {\n  color: var(--mj-status-error);\n}\n\n/* Warning message colors */\n.mj-forms-field-validation--warning .mj-forms-field-validation-item {\n  color: var(--mj-status-warning-text);\n}\n\n.mj-forms-field-validation--warning .mj-forms-field-validation-item i {\n  color: var(--mj-status-warning);\n}\n\n@keyframes mj-validation-slide-in {\n  from {\n    opacity: 0;\n    max-height: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    max-height: 100px;\n    transform: translateY(0);\n  }\n}\n\n/* ============================================\n   RESPONSIVE\n   ============================================ */\n@media (max-width: 640px) {\n  .mj-forms-field {\n    grid-template-columns: 1fr;\n    gap: 4px;\n  }\n\n  .mj-forms-field-label {\n    font-size: 12px;\n  }\n\n  .mj-forms-field-validation {\n    grid-column: 1;\n  }\n}\n"] }]
     }], null, { Record: [{
             type: Input
         }], EditMode: [{
@@ -1203,6 +2627,14 @@ export class MjFormFieldComponent extends BaseAngularComponent {
             type: Output
         }], Navigate: [{
             type: Output
+        }], FKDropdownMaxWidth: [{
+            type: Input
+        }], FKHighlightMatches: [{
+            type: Input
+        }], AllowFKCreate: [{
+            type: Input
+        }], FKCreatePresentation: [{
+            type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjFormFieldComponent, { className: "MjFormFieldComponent", filePath: "src/lib/field/form-field.component.ts", lineNumber: 50 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjFormFieldComponent, { className: "MjFormFieldComponent", filePath: "src/lib/field/form-field.component.ts", lineNumber: 136 }); })();
 //# sourceMappingURL=form-field.component.js.map