@memberjunction/ng-base-forms 6.1.0-edge.5 → 6.1.0-edge.7

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

@@ -1,8 +1,8 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, inject, ElementRef, Renderer2 } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
-import { EntityFieldTSType, CompositeKey, KeyValuePair, RunView } from '@memberjunction/core';
+import { EntityFieldTSType, CompositeKey, KeyValuePair, RunView, CoerceImageSrc, IsInlineImageDataUri, CoerceRawImageBase64ToDataUri, MaxStoredImageChars, MaxInlineImageBytes, FormatByteSize, ParseCssHexColor, PrettyPrintJson } from '@memberjunction/core';
 import { BaseEngineRegistry } from '@memberjunction/core';
-import { HighlightSearchMatches, detectRichTextFormat, UUIDsEqual } from '@memberjunction/global';
+import { ValidationErrorInfo, 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";
@@ -15,14 +15,14 @@ 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", 4);
+    i0.ɵɵelement(0, "label", 5);
 } 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_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 8);
+    i0.ɵɵelementStart(0, "a", 12);
     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();
@@ -38,101 +38,171 @@ function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Conditio
     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.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Conditional_1_Template, 2, 1, "a", 11)(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) {
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 13);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("src", ctx_r0.ImagePreviewSrc, i0.ɵɵsanitizeUrl);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("Inline image (", ctx_r0.ImageValueSizeLabel, ")");
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    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.ɵɵelementStart(0, "a", 16);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Conditional_3_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnUrlLinkClick($event)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelement(2, "i", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.ImageUrlDisplay, " ");
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.FormatValue());
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Conditional_1_Template, 1, 1, "img", 13);
+    i0.ɵɵconditionalCreate(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Conditional_2_Template, 2, 1, "span", 14)(3, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Conditional_3_Template, 3, 1, "a", 15)(4, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Conditional_4_Template, 2, 1, "span", 7);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ImagePreviewSrc ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.IsInlineImageValue ? 2 : ctx_r0.ImagePreviewSrc ? 3 : 4);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵelement(1, "span", 18);
+    i0.ɵɵelementStart(2, "span", 7);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r0.ColorSwatchValue);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.FormatValue());
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "pre", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.JsonDisplayValue);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_0_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 7)(1, "a", 19);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_0_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnEmailLinkClick($event)); });
     i0.ɵɵtext(2);
-    i0.ɵɵelement(3, "i", 10);
+    i0.ɵɵelement(3, "i", 20);
     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_1_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    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)); });
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 7)(1, "a", 21);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_1_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnUrlLinkClick($event)); });
     i0.ɵɵtext(2);
-    i0.ɵɵelement(3, "i", 12);
+    i0.ɵɵelement(3, "i", 17);
     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_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    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)); });
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 23);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_2_Conditional_1_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnRecordLinkClick($event)); });
     i0.ɵɵtext(1);
-    i0.ɵɵelement(2, "i", 12);
+    i0.ɵɵelement(2, "i", 17);
     i0.ɵɵelementEnd();
 } if (rf & 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) {
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_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);
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_2_Conditional_1_Template, 3, 1, "a", 22)(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_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", 6)(1, "div", 19);
-    i0.ɵɵelement(2, "input", 20);
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7)(1, "div", 28);
+    i0.ɵɵelement(2, "input", 29);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(2);
     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, "div", 15);
-    i0.ɵɵelement(1, "mj-markdown", 21);
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵelement(1, "mj-markdown", 30);
     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);
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 25);
     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);
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "mj-code-editor", 31);
     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);
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 27);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -140,8 +210,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_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 6);
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -149,24 +219,24 @@ 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_Template(rf, ctx) { if (rf & 1) {
-    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);
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_0_Template, 3, 1, "span", 7)(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_1_Template, 2, 1, "div", 24)(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_2_Template, 2, 3, "div", 25)(3, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_3_Template, 2, 3, "div", 26)(4, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_4_Template, 2, 1, "span", 27)(5, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_3_Conditional_5_Template, 2, 1, "span", 7);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     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", 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);
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_0_Template, 4, 1, "span", 7)(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_1_Template, 4, 1, "span", 7)(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Case_2_Template, 3, 1, "span", 7)(3, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_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", 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.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_1_Template, 1, 1, "label", 5);
+    i0.ɵɵelementStart(2, "div", 6);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Template, 3, 1, "span", 7)(4, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Template, 5, 2, "div", 8)(5, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_5_Template, 4, 3, "div", 9)(6, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_6_Template, 2, 1, "pre", 10)(7, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_7_Template, 4, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -174,26 +244,26 @@ function MjFormFieldComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.ShowLabel ? 1 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.IsFKWithNameField ? 3 : 4);
+    i0.ɵɵconditional(ctx_r0.IsFKWithNameField ? 3 : ctx_r0.ExtendedDisplay === "image" ? 4 : ctx_r0.ExtendedDisplay === "color" ? 5 : ctx_r0.ExtendedDisplay === "json" ? 6 : 7);
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "label", 4);
+    i0.ɵɵelement(0, "label", 5);
 } 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_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 29);
+    i0.ɵɵelement(0, "i", 41);
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    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);
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_3_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnFKScopeToggle($event)); });
+    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(2, "span", 49);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "i", 38);
+    i0.ɵɵelement(4, "i", 50);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -205,52 +275,52 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditio
     i0.ɵɵclassProp("fa-chevron-up", ctx_r0.FKShowScopeMenu)("fa-chevron-down", !ctx_r0.FKShowScopeMenu);
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    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);
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnFKClearClick($event)); });
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵelementEnd();
 } }
 function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 33);
+    i0.ɵɵelement(0, "i", 45);
 } }
 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);
+    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", 62);
 } if (rf & 2) {
-    const f_r9 = i0.ɵɵnextContext().$implicit;
+    const f_r10 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵnextContext(2);
-    const scopeRow_r10 = i0.ɵɵreference(3);
-    i0.ɵɵproperty("ngTemplateOutlet", scopeRow_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, f_r9));
+    const scopeRow_r11 = i0.ɵɵreference(3);
+    i0.ɵɵproperty("ngTemplateOutlet", scopeRow_r11)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, f_r10));
 } }
 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);
+    const f_r10 = ctx.$implicit;
+    i0.ɵɵconditional(f_r10.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);
+    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", 62);
 } if (rf & 2) {
-    const f_r11 = i0.ɵɵnextContext().$implicit;
+    const f_r12 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵnextContext(3);
-    const scopeRow_r10 = i0.ɵɵreference(3);
-    i0.ɵɵproperty("ngTemplateOutlet", scopeRow_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, f_r11));
+    const scopeRow_r11 = i0.ɵɵreference(3);
+    i0.ɵɵproperty("ngTemplateOutlet", scopeRow_r11)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, f_r12));
 } }
 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);
+    const f_r12 = ctx.$implicit;
+    i0.ɵɵconditional(f_r12.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.ɵɵelement(0, "div", 63);
+    i0.ɵɵelementStart(1, "div", 61);
     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);
@@ -260,7 +330,7 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditio
     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.ɵɵelementStart(0, "div", 60)(1, "div", 61);
     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);
@@ -275,71 +345,71 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditio
     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);
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 69);
+    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(_r15); const f_r14 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.MoveFKColumn($event, f_r14.FieldName, -1)); });
+    i0.ɵɵelement(1, "i", 70);
     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.ɵɵelementStart(2, "button", 71);
+    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(_r15); const f_r14 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.MoveFKColumn($event, f_r14.FieldName, 1)); });
+    i0.ɵɵelement(3, "i", 72);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const f_r13 = i0.ɵɵnextContext().$implicit;
+    const f_r14 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("disabled", !ctx_r0.CanMoveFKColumnUp(f_r13.FieldName));
+    i0.ɵɵproperty("disabled", !ctx_r0.CanMoveFKColumnUp(f_r14.FieldName));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", !ctx_r0.CanMoveFKColumnDown(f_r13.FieldName));
+    i0.ɵɵproperty("disabled", !ctx_r0.CanMoveFKColumnDown(f_r14.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);
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 73);
+    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(_r16); const f_r14 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnFKColumnToggle($event, f_r14)); });
+    i0.ɵɵelement(1, "i", 74);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const f_r13 = i0.ɵɵnextContext().$implicit;
+    const f_r14 = 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.ɵɵclassProp("mj-fk-col-toggle--on", ctx_r0.IsFKColumnVisible(f_r14));
+    i0.ɵɵproperty("title", ctx_r0.IsFKColumnVisible(f_r14) ? "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));
+    i0.ɵɵclassProp("fa-eye", ctx_r0.IsFKColumnVisible(f_r14))("fa-eye-slash", !ctx_r0.IsFKColumnVisible(f_r14));
 } }
 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);
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 64);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Template_div_mousedown_0_listener($event) { const f_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnFKScopeSelect($event, f_r14)); });
+    i0.ɵɵelementStart(1, "span", 65);
     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.ɵɵelementStart(4, "span", 66);
     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.ɵɵelementStart(6, "span", 67);
+    i0.ɵɵconditionalCreate(7, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_ng_template_2_Conditional_7_Template, 2, 7, "button", 68);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const f_r13 = ctx.$implicit;
+    const f_r14 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("mj-fk-scope-mi--on", ctx_r0.IsFKScopeActive(f_r13));
+    i0.ɵɵclassProp("mj-fk-scope-mi--on", ctx_r0.IsFKScopeActive(f_r14));
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(f_r13.Group === "shown" ? 2 : -1);
+    i0.ɵɵconditional(f_r14.Group === "shown" ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(f_r13.Icon + " mj-fk-scope-mi-icon");
+    i0.ɵɵclassMap(f_r14.Icon + " mj-fk-scope-mi-icon");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(f_r13.Label);
+    i0.ɵɵtextInterpolate(f_r14.Label);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.CanToggleFKColumn(f_r13) ? 7 : -1);
+    i0.ɵɵconditional(ctx_r0.CanToggleFKColumn(f_r14) ? 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);
+    i0.ɵɵelement(0, "i", 82);
 } 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.ɵɵelementStart(0, "span", 80);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -348,20 +418,20 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditio
     i0.ɵɵtextInterpolate(ctx_r0.FKSelectedSuggestion.ExtraColumns[0].Value);
 } }
 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);
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 55)(1, "div", 75);
+    i0.ɵɵelement(2, "i", 76);
     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.ɵɵelementStart(5, "div", 77);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Template_div_mousedown_5_listener($event) { i0.ɵɵrestoreView(_r17); 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", 78);
+    i0.ɵɵelement(7, "span", 79);
+    i0.ɵɵconditionalCreate(8, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Conditional_8_Template, 2, 1, "span", 80);
+    i0.ɵɵelementStart(9, "button", 81);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Template_button_mousedown_9_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnFKClearClick($event)); });
+    i0.ɵɵelement(10, "i", 52);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(5);
@@ -373,127 +443,127 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditio
     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(0, "div", 56);
+    i0.ɵɵelement(1, "i", 83);
     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(0, "div", 57);
+    i0.ɵɵelement(1, "i", 84);
     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);
+    i0.ɵɵelement(0, "div", 87);
 } }
 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);
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 90);
+    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_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnFKHeaderSort($event, col_r19)); });
+    i0.ɵɵelementStart(1, "span", 91);
     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.ɵɵelementStart(4, "span", 92);
+    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_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnFKColResizeStart($event, col_r19)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const col_r18 = ctx.$implicit;
-    const ɵ$index_216_r19 = ctx.$index;
+    const col_r19 = ctx.$implicit;
+    const ɵ$index_248_r20 = ctx.$index;
     const ctx_r0 = i0.ɵɵnextContext(6);
-    i0.ɵɵproperty("title", "Click to sort by " + ctx_r0.FKColumnHeaders[ɵ$index_216_r19]);
+    i0.ɵɵproperty("title", "Click to sort by " + ctx_r0.FKColumnHeaders[ɵ$index_248_r20]);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.FKColumnHeaders[ɵ$index_216_r19]);
+    i0.ɵɵtextInterpolate(ctx_r0.FKColumnHeaders[ɵ$index_248_r20]);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r0.FKSortIcon(col_r18));
+    i0.ɵɵclassMap(ctx_r0.FKSortIcon(col_r19));
 } }
 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);
+    const suggestion_r22 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵclassMap(suggestion_r22.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.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Conditional_1_Conditional_1_Template, 1, 2, "i", 95);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const suggestion_r21 = i0.ɵɵnextContext().$implicit;
+    const suggestion_r22 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵconditional(suggestion_r21.Icon ? 1 : -1);
+    i0.ɵɵconditional(suggestion_r22.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);
+    i0.ɵɵelement(0, "i", 99);
 } }
 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.ɵɵelementStart(0, "div", 98);
+    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", 99);
+    i0.ɵɵelement(2, "span", 100);
     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_r23 = i0.ɵɵnextContext();
+    const col_r25 = ctx_r23.$implicit;
+    const ɵ$index_267_r26 = ctx_r23.$index;
+    const ɵ$count_267_r27 = ctx_r23.$count;
+    const suggestion_r22 = 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.ɵɵclassProp("mj-fk-cell--fill", ctx_r0.FKColumnFillsTrack(col_r25, ɵ$index_267_r26 === ɵ$count_267_r27 - 1));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.IsFKRowSelected(suggestion_r21) ? 1 : -1);
+    i0.ɵɵconditional(ctx_r0.IsFKRowSelected(suggestion_r22) ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", suggestion_r21.HighlightedName, i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", suggestion_r22.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.ɵɵelementStart(0, "div", 101);
+    i0.ɵɵelement(1, "span", 100);
     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_r23 = i0.ɵɵnextContext();
+    const col_r25 = ctx_r23.$implicit;
+    const ɵ$index_267_r26 = ctx_r23.$index;
+    const ɵ$count_267_r27 = ctx_r23.$count;
+    const suggestion_r22 = 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.ɵɵclassProp("mj-fk-cell--fill", ctx_r0.FKColumnFillsTrack(col_r25, ɵ$index_267_r26 === ɵ$count_267_r27 - 1));
+    i0.ɵɵproperty("title", ((tmp_30_0 = ctx_r0.FKCellFor(suggestion_r22, col_r25)) == 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);
+    i0.ɵɵproperty("innerHTML", ((tmp_31_0 = ctx_r0.FKCellFor(suggestion_r22, col_r25)) == 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);
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_For_3_Conditional_0_Template, 3, 4, "div", 96)(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_For_3_Conditional_1_Template, 2, 4, "div", 97);
 } if (rf & 2) {
-    const col_r24 = ctx.$implicit;
+    const col_r25 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(7);
-    i0.ɵɵconditional(col_r24 === ctx_r0.FKNameField ? 0 : 1);
+    i0.ɵɵconditional(col_r25 === 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);
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 93);
+    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_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnFKSelectItem(suggestion_r22, $event)); })("mouseenter", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Template_div_mouseenter_0_listener() { const ɵ$index_258_r23 = i0.ɵɵrestoreView(_r21).$index; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.FKActiveIndex = ɵ$index_258_r23); });
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Conditional_1_Template, 2, 1, "div", 94);
     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 suggestion_r22 = ctx.$implicit;
+    const ɵ$index_258_r23 = 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.ɵɵclassProp("mj-fk-grid-row--active", ɵ$index_258_r23 === ctx_r0.FKActiveIndex)("mj-fk-grid-row--selected", ctx_r0.IsFKRowSelected(suggestion_r22));
     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.ɵɵelementStart(0, "div", 58)(1, "div", 85)(2, "div", 86);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_Conditional_3_Template, 1, 0, "div", 87);
+    i0.ɵɵrepeaterCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_5_Template, 5, 4, "div", 88, 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.ɵɵrepeaterCreate(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_For_7_Template, 4, 5, "div", 89, _forTrack1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(5);
@@ -507,11 +577,11 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditio
     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);
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 102);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_8_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnFKCreateNew($event)); });
+    i0.ɵɵelement(1, "i", 103);
+    i0.ɵɵelementStart(2, "span", 104);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -521,14 +591,14 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditio
     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.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_1_Template, 6, 3, "div", 54);
     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.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_4_Template, 11, 3, "div", 55);
+    i0.ɵɵconditionalCreate(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_5_Template, 4, 0, "div", 56);
+    i0.ɵɵconditionalCreate(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_6_Template, 4, 0, "div", 57);
+    i0.ɵɵconditionalCreate(7, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_7_Template, 8, 3, "div", 58);
+    i0.ɵɵconditionalCreate(8, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Conditional_8_Template, 4, 2, "button", 59);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -548,15 +618,15 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditio
     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", 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)); });
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_1_Template, 1, 0, "i", 41);
+    i0.ɵɵelementStart(2, "input", 42);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r7); 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(_r7); 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(_r7); 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(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFKKeydown($event)); });
     i0.ɵɵelementEnd();
-    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.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_3_Template, 5, 8, "button", 43);
+    i0.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_Template, 2, 0, "button", 44)(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_5_Template, 1, 0, "i", 45);
+    i0.ɵɵconditionalCreate(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_6_Template, 9, 11, "div", 46);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -573,77 +643,166 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.ShowFKDropdown ? 6 : -1);
 } }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 13);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("src", ctx_r0.ImagePreviewSrc, i0.ɵɵsanitizeUrl);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 105);
+    i0.ɵɵelement(1, "i", 113);
+    i0.ɵɵelementEnd();
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("Inline image (", ctx_r0.ImageValueSizeLabel, ")");
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 114);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnImageClear()); });
+    i0.ɵɵtext(1, "Clear");
+    i0.ɵɵelementEnd();
+} }
 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)); });
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Conditional_1_Template, 1, 1, "img", 13)(2, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Conditional_2_Template, 2, 0, "div", 105);
+    i0.ɵɵelementStart(3, "div", 14);
+    i0.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Conditional_4_Template, 2, 1, "span");
+    i0.ɵɵelementStart(5, "span", 106);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 107)(8, "input", 108, 1);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Template_input_change_8_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnImageFileSelected($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 109);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r29); const imageFileInput_r30 = i0.ɵɵreference(9); return i0.ɵɵresetView(imageFileInput_r30.click()); });
+    i0.ɵɵelement(11, "i", 110);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(13, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Conditional_13_Template, 2, 0, "button", 111);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "input", 112);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Template_input_input_14_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnImageUrlInput($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ImagePreviewSrc ? 1 : 2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.IsInlineImageValue ? 4 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Max ", ctx_r0.ImageMaxSizeLabel);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.ImagePreviewSrc ? "Replace" : "Upload", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ImagePreviewSrc ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r0.ImageUrlInputValue);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35)(1, "input", 115);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnColorPickerInput($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "input", 116);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnInputChange($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r0.ColorPickerValue);
+    i0.ɵɵattribute("aria-label", ctx_r0.DisplayName + " color");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r0.FormatValue());
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 117);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_Template_textarea_input_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnInputChange($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_Template_textarea_blur_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnJsonBlur()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("value", ctx_r0.FormatValue());
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-code-editor", 118);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_7_Template_mj_code_editor_change_0_listener($event) { i0.ɵɵrestoreView(_r34); 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_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)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_0_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 123);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_0_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r35); 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_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)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_1_Template(rf, ctx) { if (rf & 1) {
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 124);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_1_Template_textarea_input_0_listener($event) { i0.ɵɵrestoreView(_r36); 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_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)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_2_Template(rf, ctx) { if (rf & 1) {
+    const _r37 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 125);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_2_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r37); 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_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)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_3_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 126);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_3_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r38); 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_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)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_4_Template(rf, ctx) { if (rf & 1) {
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28)(1, "input", 127);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_4_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r39); 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_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)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_5_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r41 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 134);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_5_Conditional_4_For_2_Template_div_mousedown_0_listener($event) { const option_r42 = i0.ɵɵrestoreView(_r41).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnSelectOptionClick(option_r42, $event)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const option_r36 = ctx.$implicit;
+    const option_r42 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(6);
-    i0.ɵɵclassProp("mj-fk-option--selected", ctx_r0.FormatValue() === option_r36);
+    i0.ɵɵclassProp("mj-fk-option--selected", ctx_r0.FormatValue() === option_r42);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", option_r36, " ");
+    i0.ɵɵtextInterpolate1(" ", option_r42, " ");
 } }
-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);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 132);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_5_Conditional_4_For_2_Template, 2, 3, "div", 133, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(5);
@@ -652,16 +811,16 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_C
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.PossibleValues);
 } }
-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);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_5_Template(rf, ctx) { if (rf & 1) {
+    const _r40 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 128);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_5_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnSelectTriggerClick($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_5_Template_div_blur_0_listener() { i0.ɵɵrestoreView(_r40); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnSelectTriggerBlur()); });
+    i0.ɵɵelementStart(1, "span", 129);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "i", 105);
+    i0.ɵɵelement(3, "i", 130);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_Conditional_4_Template, 3, 3, "div", 106);
+    i0.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_5_Conditional_4_Template, 3, 3, "div", 131);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
@@ -673,20 +832,20 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_5_T
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.ShowSelectDropdown && ctx_r0.PossibleValues.length > 0 ? 4 : -1);
 } }
-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)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_6_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r44 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 134);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_6_Conditional_3_For_2_Template_div_mousedown_0_listener($event) { const option_r45 = i0.ɵɵrestoreView(_r44).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnValueListSelect(option_r45, $event)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const option_r39 = ctx.$implicit;
+    const option_r45 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", option_r39, " ");
+    i0.ɵɵtextInterpolate1(" ", option_r45, " ");
 } }
-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);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 132);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_6_Conditional_3_For_2_Template, 2, 1, "div", 136, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(5);
@@ -695,13 +854,13 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Case_6_C
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.FilteredPossibleValues);
 } }
-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()); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_6_Template(rf, ctx) { if (rf & 1) {
+    const _r43 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40)(1, "input", 135);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_6_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListInput($event)); })("focus", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_6_Template_input_focus_1_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListFocus($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_6_Template_input_blur_1_listener() { i0.ɵɵrestoreView(_r43); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListBlur()); });
     i0.ɵɵelementEnd();
-    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.ɵɵelement(2, "i", 45);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_6_Conditional_3_Template, 3, 3, "div", 131);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -710,86 +869,96 @@ function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_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_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)); });
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_7_Template(rf, ctx) { if (rf & 1) {
+    const _r46 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 137);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_7_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r46); 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_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);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_0_Template, 1, 1, "input", 119)(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_1_Template, 1, 1, "textarea", 120)(2, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_2_Template, 1, 1, "input", 121)(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_3_Template, 1, 1, "input", 122)(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_4_Template, 2, 1, "div", 28)(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_5_Template, 5, 6)(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_6_Template, 4, 2, "div", 40)(7, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Case_7_Template, 1, 1, "input", 119);
 } 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_6_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 113);
-    i0.ɵɵelement(1, "i", 114);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 138);
+    i0.ɵɵelement(1, "i", 139);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const error_r41 = ctx.$implicit;
+    const error_r47 = ctx.$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(error_r41.Message);
+    i0.ɵɵtextInterpolate(error_r47.Message);
 } }
-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);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_9_For_2_Template, 4, 1, "div", 138, _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_7_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 113);
-    i0.ɵɵelement(1, "i", 115);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 138);
+    i0.ɵɵelement(1, "i", 140);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const warning_r42 = ctx.$implicit;
+    const warning_r48 = ctx.$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(warning_r42.Message);
+    i0.ɵɵtextInterpolate(warning_r48.Message);
 } }
-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);
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_10_For_2_Template, 4, 1, "div", 138, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.DisplayWarnings);
 } }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39)(1, "div", 138);
+    i0.ɵɵelement(2, "i", 140);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "This field holds a value that is not a readable date, so the box above is empty. Saving now will replace it.");
+    i0.ɵɵelementEnd()()();
+} }
 function MjFormFieldComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 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.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_1_Template, 1, 1, "label", 5);
+    i0.ɵɵelementStart(2, "div", 6);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template, 7, 11, "div", 33)(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Template, 15, 6, "div", 34)(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Template, 3, 3, "div", 35)(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_Template, 1, 1, "textarea", 36)(7, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_7_Template, 1, 2, "mj-code-editor", 37)(8, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_8_Template, 8, 1);
     i0.ɵɵelementEnd();
-    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.ɵɵconditionalCreate(9, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_9_Template, 3, 0, "div", 38);
+    i0.ɵɵconditionalCreate(10, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_10_Template, 3, 0, "div", 39);
+    i0.ɵɵconditionalCreate(11, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_11_Template, 5, 0, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("mj-forms-field--dirty", ctx_r0.IsDirty)("mj-forms-field--required-empty", ctx_r0.IsRequiredEmpty)("mj-forms-field--has-error", ctx_r0.ShowErrors)("mj-forms-field--has-warning", ctx_r0.ShowWarnings);
+    i0.ɵɵclassProp("mj-forms-field--dirty", ctx_r0.IsDirty)("mj-forms-field--required-empty", ctx_r0.IsRequiredEmpty)("mj-forms-field--has-error", ctx_r0.ShowErrors)("mj-forms-field--has-warning", ctx_r0.ShowWarnings || ctx_r0.StoredDateIsUnreadable);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.ShowLabel ? 1 : -1);
     i0.ɵɵadvance(2);
-    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.ɵɵconditional(ctx_r0.HasRelatedEntity ? 3 : ctx_r0.ExtendedDisplay === "image" ? 4 : ctx_r0.ExtendedDisplay === "color" ? 5 : ctx_r0.ExtendedDisplay === "json" ? 6 : ctx_r0.EditRichTextMode !== "plain" ? 7 : 8);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r0.DisplayErrors.length > 0 ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.DisplayWarnings.length > 0 ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.DisplayWarnings.length > 0 ? 7 : -1);
+    i0.ɵɵconditional(ctx_r0.StoredDateIsUnreadable ? 11 : -1);
 } }
 function MjFormFieldComponent_Conditional_0_Template(rf, ctx) { if (rf & 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);
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_0_Template, 8, 6, "div", 2);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Template, 12, 13, "div", 3);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional((!ctx_r0.EditMode || ctx_r0.IsFieldReadOnly) && !ctx_r0.ShouldHideField ? 0 : -1);
@@ -899,6 +1068,45 @@ export class MjFormFieldComponent extends BaseAngularComponent {
     get FieldInfo() {
         return this.Record?.EntityInfo?.Fields?.find(f => f.Name === this.FieldName);
     }
+    /** Memoized answer for {@link IsFieldReadableByUser}; invalidated in ngOnChanges. */
+    _isReadableByUser;
+    /** Memoized answer for {@link IsFieldWritableByUser}; invalidated in ngOnChanges. */
+    _isWritableByUser;
+    /** The `Record.IsSaved` state {@link _isWritableByUser} was computed against. */
+    _isWritableForSavedState;
+    /**
+     * Whether field-level security permits the current user to READ this field.
+     *
+     * The template gates the whole field on this BEFORE anything reads a value, because
+     * `BaseEntity.Get()` throws for a denied field — so rendering one at all would take out the
+     * entire form rather than hiding a column. Everything downstream (`Value`, `ShouldHideField`,
+     * FK resolution) is safe only because this check runs first.
+     *
+     * Memoized: template getters are evaluated on every change-detection cycle, and
+     * `GetDeniedReadFields` walks every field on the entity and aggregates permissions across the
+     * user's roles. `ngOnChanges` clears the memo when `Record` or `FieldName` changes.
+     *
+     * Fails OPEN — on a missing entity, missing user, or an entity with field security switched
+     * off — matching `BaseEntity`'s own gate. A form that hid fields because no user had resolved
+     * yet would be worse than one that shows them, since the server is the real boundary.
+     */
+    get IsFieldReadableByUser() {
+        if (this._isReadableByUser === undefined) {
+            this._isReadableByUser = this.computeIsFieldReadableByUser();
+        }
+        return this._isReadableByUser;
+    }
+    computeIsFieldReadableByUser() {
+        const entityInfo = this.Record?.EntityInfo;
+        if (!entityInfo?.EnableFieldLevelSecurity) {
+            return true; // one boolean for the overwhelming majority of entities
+        }
+        const user = this.ProviderToUse?.CurrentUser;
+        if (!user || !this.FieldName) {
+            return true;
+        }
+        return !entityInfo.GetDeniedReadFields(user).has(this.FieldName.trim().toLowerCase());
+    }
     /** Display name from metadata or override */
     get DisplayName() {
         if (this.DisplayNameOverride)
@@ -933,7 +1141,7 @@ export class MjFormFieldComponent extends BaseAngularComponent {
             return;
         const oldValue = this.Record.Get(this.FieldName);
         this.Record.Set(this.FieldName, newValue);
-        this._touched = true;
+        this.markTouched();
         this.runFieldValidation();
         this.ValueChange.emit({ FieldName: this.FieldName, OldValue: oldValue, NewValue: newValue });
     }
@@ -941,7 +1149,54 @@ export class MjFormFieldComponent extends BaseAngularComponent {
     get IsFieldReadOnly() {
         if (!this.FieldInfo)
             return false;
-        return this.FieldInfo.ReadOnly;
+        return this.FieldInfo.ReadOnly || !this.IsFieldWritableByUser;
+    }
+    /**
+     * Whether field-level security permits the current user to WRITE this field, against the verb
+     * that actually applies to the record in hand: Create on a new record, Update on a saved one.
+     *
+     * Read access is handled separately and earlier ({@link IsFieldReadableByUser}) — a field the
+     * user cannot see is not rendered at all. This is the narrower case of a field they CAN see
+     * but may not change, which should render as a read-only value rather than an editable control.
+     *
+     * Both verbs matter and they fail differently, which is why this picks by record state rather
+     * than checking update alone:
+     *
+     * - **Update denied** — the server rejects the save. Without this, the user types, saves, and
+     *   gets an error naming a field they had every reason to think was editable.
+     * - **Create denied** — the server does NOT reject. It silently drops the value and takes the
+     *   column default, matching the read path where a denied field is simply absent. So an
+     *   editable control on a new record quietly discards what was typed, with no error anywhere.
+     *   That is the worse of the two, and the only signal the user gets is this.
+     *
+     * Memoized alongside the read check and invalidated by the same `ngOnChanges`, for the same
+     * reason: template getters run every change-detection cycle and the underlying walk covers
+     * every field on the entity.
+     */
+    get IsFieldWritableByUser() {
+        // Keyed on IsSaved as well as memoized: the answer switches from the Create rules to the
+        // Update rules the moment a new record is saved, and that happens WITHOUT ngOnChanges firing
+        // — the Record input is the same object, only its state changed. A plain memo would keep
+        // answering with the create-time verb for the rest of the form's life.
+        const isSaved = this.Record?.IsSaved === true;
+        if (this._isWritableByUser === undefined || this._isWritableForSavedState !== isSaved) {
+            this._isWritableByUser = this.computeIsFieldWritableByUser();
+            this._isWritableForSavedState = isSaved;
+        }
+        return this._isWritableByUser;
+    }
+    computeIsFieldWritableByUser() {
+        const entityInfo = this.Record?.EntityInfo;
+        if (!entityInfo?.EnableFieldLevelSecurity) {
+            return true; // one boolean for the overwhelming majority of entities
+        }
+        const user = this.ProviderToUse?.CurrentUser;
+        if (!user || !this.FieldName) {
+            return true; // fail open, matching the read gate
+        }
+        return this.Record?.IsSaved
+            ? entityInfo.IsFieldUpdatableByUser(this.FieldName, user)
+            : entityInfo.IsFieldCreatableByUser(this.FieldName, user);
     }
     /** Whether this field has been modified (dirty). Only shown for saved records (not new). */
     get IsDirty() {
@@ -967,15 +1222,45 @@ export class MjFormFieldComponent extends BaseAngularComponent {
     // ---- INLINE VALIDATION ----
     /** Whether the user has interacted with (changed) this field */
     _touched = false;
+    /**
+     * `FormContext.validationRevision` as it stood when the user last edited this field. Compared with
+     * the current revision in {@link FieldErrors}: equal means the edit came AFTER the last failed
+     * save, so the user is addressing it and live local validation is the truth; lower means the
+     * failure is newer than the edit, so the form-level errors must win.
+     */
+    _touchedAtRevision = 0;
+    /** Set when an image upload is rejected (type/size) — shown with field validation. */
+    imageUploadError = null;
     /** Locally computed validation errors for this field */
     _fieldErrors = [];
+    /**
+     * The ONE way a user interaction marks this field touched: every site must also stamp the
+     * revision, or a field touched after a failed save would keep showing the stale form-level error.
+     */
+    markTouched() {
+        this._touched = true;
+        this._touchedAtRevision = this.FormContext?.validationRevision ?? 0;
+    }
+    /**
+     * True when the user has edited this field since the form last published validation errors.
+     *
+     * Plain `_touched` was the wrong test: it stayed true from the moment the user typed, so after a
+     * failed save the field returned its own — necessarily local, synchronous — validation, and an
+     * error the SERVER had just reported for that very field (a `ValidateAsync()` refusal, which the
+     * client cannot compute) never showed on the one field the user had just been in.
+     */
+    get editedSinceLastValidationFailure() {
+        return this._touched && this._touchedAtRevision === (this.FormContext?.validationRevision ?? 0);
+    }
     /** Validation errors for this field from the best available source */
     get FieldErrors() {
-        // If touched, use fresh local validation (covers real-time feedback)
-        if (this._touched) {
+        // Edited after the last failure: fresh local validation (real-time feedback, and how a
+        // server-reported error clears — a later valid edit yields no local errors).
+        if (this.editedSinceLastValidationFailure) {
             return this._fieldErrors;
         }
-        // Otherwise use form-level errors from save failure (covers untouched fields)
+        // Otherwise the form-level errors from the failed save — whether this field was never touched,
+        // or was touched before the save that failed.
         const contextErrors = this.FormContext?.validationErrors;
         if (contextErrors && contextErrors.length > 0) {
             return contextErrors.filter(e => e.Source === this.FieldName);
@@ -990,6 +1275,8 @@ export class MjFormFieldComponent extends BaseAngularComponent {
     }
     /** Whether this field has active error-level validation failures to display */
     get ShowErrors() {
+        if (this.imageUploadError)
+            return true;
         return this.ShowValidation && this.FieldErrors.some(e => e.Type === 'Failure');
     }
     /** Whether this field has active warning-level validation issues to display */
@@ -998,9 +1285,16 @@ export class MjFormFieldComponent extends BaseAngularComponent {
     }
     /** Error messages to render in the template */
     get DisplayErrors() {
-        if (!this.ShowValidation)
-            return [];
-        return this.FieldErrors.filter(e => e.Type === 'Failure');
+        const errors = this.ShowValidation
+            ? this.FieldErrors.filter(e => e.Type === 'Failure')
+            : [];
+        if (this.imageUploadError) {
+            return [
+                ...errors,
+                new ValidationErrorInfo(this.FieldName, this.imageUploadError, this.Value),
+            ];
+        }
+        return errors;
     }
     /** Warning messages to render in the template */
     get DisplayWarnings() {
@@ -1029,6 +1323,14 @@ export class MjFormFieldComponent extends BaseAngularComponent {
     }
     /** Whether this field should be hidden (empty in read-only mode) */
     get ShouldHideField() {
+        // A read-denied field is always hidden. This must run before Value is touched: the
+        // template's own @if guards rendering behind IsFieldReadableByUser, but programmatic
+        // callers (MjCollapsiblePanelComponent.hasRenderableContent sweeps ShouldHideField to
+        // decide section visibility) reach this getter directly, and BaseEntity.Get() THROWS for
+        // a denied field. Returning true here is also what lets a section whose fields are all
+        // denied collapse away instead of rendering an empty card.
+        if (!this.IsFieldReadableByUser)
+            return true;
         if (this.EditMode)
             return false;
         if (!this.HideWhenEmptyInReadOnlyMode)
@@ -1068,9 +1370,15 @@ export class MjFormFieldComponent extends BaseAngularComponent {
         const fkValue = this.Value;
         if (fkValue == null || fkValue === '')
             return null;
-        // Fast path: name field is joined into our record's view
+        // Fast path: name field is joined into our record's view.
+        //
+        // The joined display column is a SEPARATE EntityField from the FK it accompanies, and can be
+        // denied independently — CompanyID readable while Company is not. `IsFieldReadableByUser`
+        // gates this component on its OWN field name, so it does not cover this read; without the
+        // check here, Get() throws and takes out the form. Falling through to the async lookup is
+        // right: that path reads the related record, which has its own permissions.
         const nameFieldMap = this.FieldInfo?.RelatedEntityNameFieldMap;
-        if (nameFieldMap) {
+        if (nameFieldMap && this.Record.EntityInfo?.IsFieldReadableByUser(nameFieldMap, this.ProviderToUse?.CurrentUser)) {
             const val = this.Record.Get(nameFieldMap);
             if (val != null && val !== '')
                 return String(val);
@@ -1433,17 +1741,26 @@ export class MjFormFieldComponent extends BaseAngularComponent {
         const relatedEntity = this.getRelatedEntityInfo();
         if (!relatedEntity)
             return null;
-        const nameField = relatedEntity.NameField;
         const pkFields = relatedEntity.PrimaryKeys;
+        // Field-level security applies to the RELATED entity here, not this record's. A name field
+        // the user cannot read would throw from every downstream Get() — so drop to the primary key,
+        // which is unrestrictable by construction. This plan is the single chokepoint for every
+        // related-record read the FK control makes (dropdown rows, search, create-and-select), so
+        // filtering here is what keeps those safe rather than four separate guards.
+        const user = this.ProviderToUse?.CurrentUser;
+        const nameField = relatedEntity.NameField && relatedEntity.IsFieldReadableByUser(relatedEntity.NameField.Name, user)
+            ? relatedEntity.NameField
+            : null;
         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 iconField = relatedEntity.Fields.find(f => f.ExtendedType === 'Icon' && relatedEntity.IsFieldReadableByUser(f.Name, user));
         const iconFieldName = iconField?.Name ?? null;
-        const columnFields = this.computeOrderedColumns(relatedEntity, nameFieldName, pkFieldName, iconFieldName);
+        const columnFields = this.computeOrderedColumns(relatedEntity, nameFieldName, pkFieldName, iconFieldName)
+            .filter(c => relatedEntity.IsFieldReadableByUser(c, user));
         const extraFieldNames = columnFields.filter(c => c !== nameFieldName);
         this._fkColumnPlan = {
             NameFieldName: nameFieldName,
@@ -2003,7 +2320,12 @@ export class MjFormFieldComponent extends BaseAngularComponent {
         }
         this._fkQuery = query;
         const accessor = (r) => ({ get: (field) => r.Get(field) });
-        const searchField = this.FKSearchField || plan.NameFieldName;
+        // plan.NameFieldName is already vetted for readability by buildColumnPlan; FKSearchField is
+        // caller-supplied and is not, so it falls back rather than throwing on the first row.
+        const relatedInfo = records[0]?.EntityInfo;
+        const searchField = this.FKSearchField && relatedInfo?.IsFieldReadableByUser(this.FKSearchField, this.ProviderToUse?.CurrentUser) !== false
+            ? 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);
@@ -2416,21 +2738,113 @@ export class MjFormFieldComponent extends BaseAngularComponent {
             default: return ''; // 'Other' / null → plain code editing
         }
     }
+    /**
+     * Runtime display kind from EntityField.ExtendedType. Honored ahead of the
+     * generated `LinkType` input so PhotoURL forms still tagged LinkType=URL
+     * render as images once metadata says Image.
+     */
+    get ExtendedDisplay() {
+        switch (this.FieldInfo?.ExtendedType) {
+            case 'Image': return 'image';
+            case 'Color': return 'color';
+            case 'JSON': return 'json';
+            default: return null;
+        }
+    }
+    get ImagePreviewSrc() {
+        const raw = this.FormatValue();
+        return CoerceImageSrc(raw);
+    }
+    get IsInlineImageValue() {
+        const raw = this.FormatValue().trim();
+        if (!raw)
+            return false;
+        return IsInlineImageDataUri(raw) || CoerceRawImageBase64ToDataUri(raw) != null;
+    }
+    get ImageValueSizeLabel() {
+        const raw = this.FormatValue();
+        if (!raw)
+            return '';
+        return FormatByteSize(raw.length);
+    }
+    get ImageMaxSizeLabel() {
+        return FormatByteSize(MaxInlineImageBytes(this.FieldInfo?.MaxLength ?? 0));
+    }
+    /** URL box: empty for inline images so we never dump a data URI into a text input. */
+    get ImageUrlInputValue() {
+        if (this.IsInlineImageValue)
+            return '';
+        return this.FormatValue();
+    }
+    get ImageUrlDisplay() {
+        const raw = this.FormatValue().trim();
+        return raw.replace(/^https?:\/\//i, '').replace(/\/$/, '');
+    }
+    get ColorPickerValue() {
+        return ParseCssHexColor(this.FormatValue()) ?? '#000000';
+    }
+    get ColorSwatchValue() {
+        return ParseCssHexColor(this.FormatValue()) ?? 'transparent';
+    }
+    get JsonDisplayValue() {
+        // Pretty-print only in read mode. Edit mode shows the live value; OnJsonBlur pretty-prints.
+        if (this.EditMode)
+            return this.FormatValue();
+        return PrettyPrintJson(this.FormatValue());
+    }
     /** Handle value changes coming from the embedded code editor (emits a plain string). */
     OnCodeEditorChange(value) {
         this.Value = value;
     }
     /** Format a value for display */
+    /**
+     * Whether this field holds a DATE with no time, as opposed to a timestamp.
+     *
+     * The distinction decides which timezone the value may be rendered in, and getting it wrong
+     * moves the day. A `date` column has no time and no zone: it is a calendar day, and the only
+     * correct way to show it is in the zone it was written in. A `datetime`/`datetimeoffset` names
+     * an instant, and the correct way to show THAT is the reader's local zone.
+     */
+    get IsDateOnlyField() {
+        return (this.FieldInfo?.Type ?? '').trim().toLowerCase() === 'date';
+    }
     FormatValue() {
         const val = this.Value;
         if (val === null || val === undefined)
             return '';
         if (val instanceof Date) {
+            /**
+             * A DATE-ONLY VALUE IS NOT AN INSTANT, AND toLocaleString() TREATS IT AS ONE.
+             *
+             * A `date` column arrives as UTC midnight. Passing that through a LOCAL-time formatter
+             * subtracts the reader's offset and lands on the previous day for everyone west of
+             * Greenwich: a stored 2026-11-20 rendered as `11/19/2026, 7:00:00 PM` in America/New_York,
+             * and 2026-01-01 rendered as `12/31/2025` — the wrong YEAR.
+             *
+             * The edit path does not have this bug: `DateInputValue` uses `toISOString()`, which is UTC.
+             * So the two modes DISAGREED — a rep opened a record and saw 19 November, clicked Edit and
+             * saw the 20th, on the same field, with no invalid data anywhere. Read mode was simply wrong.
+             *
+             * Pinning the timezone rather than switching to `toISOString()` keeps the reader's locale
+             * format (a US reader still sees 11/20/2026, a UK reader 20/11/2026) and changes only the
+             * zone the day is computed in. A TIMESTAMP is left exactly as it was: it names an instant,
+             * and local time is the right way to show one.
+             */
+            if (this.IsDateOnlyField) {
+                return val.toLocaleDateString(undefined, { timeZone: 'UTC' });
+            }
             return val.toLocaleString();
         }
         return String(val);
     }
     ngOnChanges(changes) {
+        // Field security depends on both the record's entity and which field this is, so the
+        // memoized answer has to be dropped whenever either changes.
+        if (changes['Record'] || changes['FieldName']) {
+            this._isReadableByUser = undefined;
+            this._isWritableByUser = undefined;
+            this._isWritableForSavedState = undefined;
+        }
         if (changes['FormContext'] || changes['EditMode'] || changes['Record']) {
             // Reset FK state when record changes
             if (changes['Record']) {
@@ -2551,8 +2965,130 @@ export class MjFormFieldComponent extends BaseAngularComponent {
      */
     OnInputChange(event) {
         const input = event.target;
+        this.imageUploadError = null;
+        this.Value = input.value;
+    }
+    OnImageUrlInput(event) {
+        this.OnInputChange(event);
+    }
+    OnImageClear() {
+        this.imageUploadError = null;
+        this.Value = null;
+        this.cdr.markForCheck();
+    }
+    async OnImageFileSelected(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        input.value = '';
+        this.imageUploadError = null;
+        if (!file)
+            return;
+        const allowed = new Set(['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/webp', 'image/svg+xml']);
+        if (file.type && !allowed.has(file.type)) {
+            this.imageUploadError = 'That file is not a supported image type (PNG, JPEG, GIF, WebP, or SVG).';
+            this.markTouched();
+            this.cdr.markForCheck();
+            return;
+        }
+        const absoluteReadCap = 8 * 1024 * 1024;
+        if (file.size > absoluteReadCap) {
+            this.imageUploadError = `File is too large to read (max ${FormatByteSize(absoluteReadCap)}).`;
+            this.markTouched();
+            this.cdr.markForCheck();
+            return;
+        }
+        try {
+            const maxChars = MaxStoredImageChars(this.FieldInfo?.MaxLength ?? 0);
+            const dataUri = await this.readFileAsDataUri(file);
+            if (!IsInlineImageDataUri(dataUri)) {
+                this.imageUploadError = 'That file is not a supported image type (PNG, JPEG, GIF, WebP, or SVG).';
+                this.markTouched();
+                this.cdr.markForCheck();
+                return;
+            }
+            if (dataUri.length <= maxChars) {
+                this.Value = dataUri;
+                this.cdr.markForCheck();
+                return;
+            }
+            const compressed = await this.compressImageDataUriToFit(dataUri, maxChars);
+            if (compressed) {
+                this.Value = compressed;
+                this.cdr.markForCheck();
+                return;
+            }
+            this.imageUploadError = `Image is too large for this field (max ${this.ImageMaxSizeLabel}). Try a smaller file or paste an image URL.`;
+            this.markTouched();
+        }
+        catch {
+            this.imageUploadError = 'Could not read that image.';
+            this.markTouched();
+        }
+        this.cdr.markForCheck();
+    }
+    OnColorPickerInput(event) {
+        const input = event.target;
+        this.imageUploadError = null;
         this.Value = input.value;
     }
+    OnJsonBlur() {
+        const raw = this.FormatValue();
+        const pretty = PrettyPrintJson(raw);
+        if (pretty !== raw) {
+            this.Value = pretty;
+        }
+    }
+    readFileAsDataUri(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(String(reader.result ?? ''));
+            reader.onerror = () => reject(reader.error ?? new Error('read failed'));
+            reader.readAsDataURL(file);
+        });
+    }
+    loadHtmlImage(src) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = () => reject(new Error('image decode failed'));
+            img.src = src;
+        });
+    }
+    /**
+     * Re-encode a raster data URI as JPEG, shrinking dimensions/quality until it fits
+     * `maxChars`. GIF/SVG are left alone (would lose animation / vectors).
+     */
+    async compressImageDataUriToFit(dataUri, maxChars) {
+        if (typeof document === 'undefined')
+            return null;
+        if (/^data:image\/(gif|svg\+xml)/i.test(dataUri))
+            return null;
+        const img = await this.loadHtmlImage(dataUri);
+        const naturalW = img.naturalWidth || img.width;
+        const naturalH = img.naturalHeight || img.height;
+        if (!naturalW || !naturalH)
+            return null;
+        let maxDim = Math.min(Math.max(naturalW, naturalH), 1024);
+        let quality = 0.85;
+        for (let i = 0; i < 8; i++) {
+            const scale = maxDim / Math.max(naturalW, naturalH);
+            const w = Math.max(1, Math.round(naturalW * scale));
+            const h = Math.max(1, Math.round(naturalH * scale));
+            const canvas = document.createElement('canvas');
+            canvas.width = w;
+            canvas.height = h;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return null;
+            ctx.drawImage(img, 0, 0, w, h);
+            const next = canvas.toDataURL('image/jpeg', quality);
+            if (next.length <= maxChars)
+                return next;
+            maxDim = Math.max(32, Math.round(maxDim * 0.65));
+            quality = Math.max(0.4, quality - 0.1);
+        }
+        return null;
+    }
     /**
      * Handle value change from a number input.
      */
@@ -2587,16 +3123,45 @@ export class MjFormFieldComponent extends BaseAngularComponent {
             return '';
         return date.toISOString().split('T')[0];
     }
+    /**
+     * The field holds SOMETHING, and the date editor cannot show it.
+     *
+     * WHY A SEPARATE SIGNAL IS THE ONLY OPTION. `DateInputValue` returns '' for a value it cannot
+     * render, and an `<input type="date">` renders '' as an empty box — the same empty box it shows
+     * for a field that was never set. There is no string that makes the element display
+     * `not-a-date`, so the control physically cannot surface the problem itself. The most the getter
+     * can do is refuse to emit garbage; saying WHY has to happen beside it.
+     *
+     * The consequence of not saying it is not cosmetic. The field reads as "no date", and the next
+     * save writes that emptiness over whatever was actually stored — so an unreadable value becomes a
+     * destroyed one, silently, by a user who was never told anything was wrong.
+     *
+     * READ MODE ALREADY DOES THIS and needs nothing: `FormatValue()` shows `Invalid Date` for a bad
+     * Date and the raw text for a bad string. It is only the EDITOR that hides the problem, which is
+     * why this is scoped to EditMode rather than to the field.
+     *
+     * An ABSENT value is not unreadable. Empty means empty, and must never be decorated as a fault.
+     */
+    get StoredDateIsUnreadable() {
+        if (!this.EditMode)
+            return false;
+        if (this.Type !== 'datepicker' && this.FieldInfo?.TSType !== EntityFieldTSType.Date)
+            return false;
+        const val = this.Value;
+        if (val === null || val === undefined || val === '')
+            return false;
+        return this.DateInputValue === '';
+    }
     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", 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) {
+    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", ""], ["imageFileInput", ""], [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"], [1, "mj-forms-image"], [1, "mj-forms-color"], [1, "mj-forms-json"], ["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"], ["alt", "", 1, "mj-forms-image-preview", 3, "src"], [1, "mj-forms-image-meta"], ["title", "Open image", 1, "mj-forms-field-link"], ["title", "Open image", 1, "mj-forms-field-link", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square", "mj-forms-field-link-icon"], [1, "mj-forms-color-swatch"], ["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"], ["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-image", "mj-forms-image--edit"], [1, "mj-forms-color", "mj-forms-color--edit"], [1, "mj-forms-field-input", "mj-forms-field-input--textarea", "mj-forms-json", 3, "value"], [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"], ["aria-hidden", "true", 1, "mj-forms-image-preview", "mj-forms-image-preview--empty"], [1, "mj-forms-image-hint"], [1, "mj-forms-image-actions"], ["type", "file", "accept", "image/png,image/jpeg,image/gif,image/webp,image/svg+xml", 1, "mj-forms-image-file", 3, "change"], ["type", "button", 1, "mj-forms-image-btn", 3, "click"], [1, "fa-solid", "fa-upload"], ["type", "button", 1, "mj-forms-image-btn", "mj-forms-image-btn--ghost"], ["type", "text", "placeholder", "https://\u2026 or paste a data URI", 1, "mj-forms-field-input", 3, "input", "value"], [1, "fa-regular", "fa-image"], ["type", "button", 1, "mj-forms-image-btn", "mj-forms-image-btn--ghost", 3, "click"], ["type", "color", 1, "mj-forms-color-picker", 3, "input", "value"], ["type", "text", "placeholder", "#RRGGBB", 1, "mj-forms-field-input", "mj-forms-color-hex", 3, "input", "value"], [1, "mj-forms-field-input", "mj-forms-field-input--textarea", "mj-forms-json", 3, "input", "blur", "value"], [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.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 });
+            i0.ɵɵconditional(ctx.IsFieldReadableByUser && ctx.Record && (ctx.Record.IsSaved || !ctx.IsFieldReadOnly) ? 0 : -1);
+        } }, dependencies: [i1.NgTemplateOutlet, i1.NgStyle, i2.MarkdownComponent, i3.CodeEditorComponent, i4.MJSafeRichHtmlPipe], styles: ["\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.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.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.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.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.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.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.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.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.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.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.mj-forms-field-link--fk[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 400;\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.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.mj-forms-field-input--number[_ngcontent-%COMP%] {\n  max-width: 200px;\n}\n\n\n.mj-forms-field-input--date[_ngcontent-%COMP%] {\n  max-width: 220px;\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.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.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.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.mj-forms-field-input--linked[_ngcontent-%COMP%] {\n  padding-right: 46px;\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  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  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.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.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.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  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.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.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.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@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.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.mj-fk-dropdown--multi[_ngcontent-%COMP%] {\n  padding: 4px;\n  \n\n  overflow: hidden;\n  max-height: none;\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.mj-fk-dropdown--scope-open[_ngcontent-%COMP%] {\n  overflow: visible;\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.mj-fk-grid-row[_ngcontent-%COMP%] {\n  display: contents;\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.mj-fk-sort-icon--idle[_ngcontent-%COMP%] {\n  opacity: 0.35;\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.mj-fk-cell--fill[_ngcontent-%COMP%] {\n  max-width: none;\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.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.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.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.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.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.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.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.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.mj-forms-field-label[_ngcontent-%COMP%]     .mj-forms-search-highlight {\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.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.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.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.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.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\n\n\n.mj-forms-image[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n  min-width: 0;\n}\n\n.mj-forms-image-preview[_ngcontent-%COMP%] {\n  width: 72px;\n  height: 72px;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  display: block;\n}\n\n.mj-forms-image-preview--empty[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 22px;\n}\n\n.mj-forms-image-meta[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-image-hint[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.mj-forms-image-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-forms-image-file[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.mj-forms-image-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  font-family: inherit;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  border-radius: 6px;\n  padding: 4px 10px;\n  cursor: pointer;\n}\n\n.mj-forms-image-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n}\n\n.mj-forms-image-btn--ghost[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  background: transparent;\n  border-color: var(--mj-border-default);\n  font-weight: 500;\n}\n\n.mj-forms-image--edit[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.mj-forms-color[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.mj-forms-color-swatch[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.mj-forms-color-picker[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: transparent;\n  cursor: pointer;\n  flex: 0 0 auto;\n}\n\n.mj-forms-color-hex[_ngcontent-%COMP%] {\n  max-width: 160px;\n}\n\n.mj-forms-json[_ngcontent-%COMP%] {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  font-size: 12.5px;\n  line-height: 1.45;\n  white-space: pre-wrap;\n  word-break: break-word;\n  margin: 0;\n  max-height: 360px;\n  overflow: auto;\n  width: 100%;\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@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            @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"] }]
+        args: [{ standalone: false, selector: 'mj-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  IsFieldReadableByUser is FIRST deliberately. BaseEntity.Get() throws for a field the user\n  cannot read, so every expression below \u2014 Value, ShouldHideField, the FK resolution \u2014 is only\n  safe once this has short-circuited. A denied field renders nothing at all.\n-->\n@if (IsFieldReadableByUser && 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 if (ExtendedDisplay === 'image') {\n          <div class=\"mj-forms-image\">\n            @if (ImagePreviewSrc) {\n              <img class=\"mj-forms-image-preview\" [src]=\"ImagePreviewSrc\" alt=\"\" />\n            }\n            @if (IsInlineImageValue) {\n              <span class=\"mj-forms-image-meta\">Inline image ({{ ImageValueSizeLabel }})</span>\n            } @else if (ImagePreviewSrc) {\n              <a class=\"mj-forms-field-link\" (click)=\"OnUrlLinkClick($event)\" title=\"Open image\">\n                {{ ImageUrlDisplay }}\n                <i class=\"fa-solid fa-arrow-up-right-from-square mj-forms-field-link-icon\"></i>\n              </a>\n            } @else {\n              <span class=\"mj-forms-field-value\">{{ FormatValue() }}</span>\n            }\n          </div>\n        }\n        @else if (ExtendedDisplay === 'color') {\n          <div class=\"mj-forms-color\">\n            <span class=\"mj-forms-color-swatch\" [style.background-color]=\"ColorSwatchValue\"></span>\n            <span class=\"mj-forms-field-value\">{{ FormatValue() }}</span>\n          </div>\n        }\n        @else if (ExtendedDisplay === 'json') {\n          <pre class=\"mj-forms-json\">{{ JsonDisplayValue }}</pre>\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 || StoredDateIsUnreadable\">\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 (ExtendedDisplay === 'image') {\n          <div class=\"mj-forms-image mj-forms-image--edit\">\n            @if (ImagePreviewSrc) {\n              <img class=\"mj-forms-image-preview\" [src]=\"ImagePreviewSrc\" alt=\"\" />\n            } @else {\n              <div class=\"mj-forms-image-preview mj-forms-image-preview--empty\" aria-hidden=\"true\">\n                <i class=\"fa-regular fa-image\"></i>\n              </div>\n            }\n            <div class=\"mj-forms-image-meta\">\n              @if (IsInlineImageValue) {\n                <span>Inline image ({{ ImageValueSizeLabel }})</span>\n              }\n              <span class=\"mj-forms-image-hint\">Max {{ ImageMaxSizeLabel }}</span>\n            </div>\n            <div class=\"mj-forms-image-actions\">\n              <input #imageFileInput type=\"file\" accept=\"image/png,image/jpeg,image/gif,image/webp,image/svg+xml\"\n                class=\"mj-forms-image-file\" (change)=\"OnImageFileSelected($event)\">\n              <button type=\"button\" class=\"mj-forms-image-btn\" (click)=\"imageFileInput.click()\">\n                <i class=\"fa-solid fa-upload\"></i>\n                {{ ImagePreviewSrc ? 'Replace' : 'Upload' }}\n              </button>\n              @if (ImagePreviewSrc) {\n                <button type=\"button\" class=\"mj-forms-image-btn mj-forms-image-btn--ghost\" (click)=\"OnImageClear()\">Clear</button>\n              }\n            </div>\n            <input type=\"text\"\n              class=\"mj-forms-field-input\"\n              [value]=\"ImageUrlInputValue\"\n              (input)=\"OnImageUrlInput($event)\"\n              placeholder=\"https://\u2026 or paste a data URI\">\n          </div>\n        }\n        @else if (ExtendedDisplay === 'color') {\n          <div class=\"mj-forms-color mj-forms-color--edit\">\n            <input type=\"color\"\n              class=\"mj-forms-color-picker\"\n              [value]=\"ColorPickerValue\"\n              (input)=\"OnColorPickerInput($event)\"\n              [attr.aria-label]=\"DisplayName + ' color'\">\n            <input type=\"text\"\n              class=\"mj-forms-field-input mj-forms-color-hex\"\n              [value]=\"FormatValue()\"\n              (input)=\"OnInputChange($event)\"\n              placeholder=\"#RRGGBB\">\n          </div>\n        }\n        @else if (ExtendedDisplay === 'json') {\n          <textarea\n            class=\"mj-forms-field-input mj-forms-field-input--textarea mj-forms-json\"\n            [value]=\"FormatValue()\"\n            (input)=\"OnInputChange($event)\"\n            (blur)=\"OnJsonBlur()\"></textarea>\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      <!--\n        An unreadable stored value renders as an EMPTY date box, identical to a field that\n        was never set - and the next save writes that emptiness over whatever is stored. The\n        element cannot display the bad value itself, so the warning sits with the other validation messages, beneath the control.\n      -->\n      @if (StoredDateIsUnreadable) {\n        <div class=\"mj-forms-field-validation mj-forms-field-validation--warning\">\n          <div class=\"mj-forms-field-validation-item\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <span>This field holds a value that is not a readable date, so the box above is\n              empty. Saving now will replace it.</span>\n          </div>\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/* ============================================\n   IMAGE / COLOR / JSON EXTENDED TYPES\n   ============================================ */\n.mj-forms-image {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n  min-width: 0;\n}\n\n.mj-forms-image-preview {\n  width: 72px;\n  height: 72px;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  display: block;\n}\n\n.mj-forms-image-preview--empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 22px;\n}\n\n.mj-forms-image-meta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-image-hint {\n  color: var(--mj-text-muted);\n}\n\n.mj-forms-image-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-forms-image-file {\n  display: none;\n}\n\n.mj-forms-image-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  font-family: inherit;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  border-radius: 6px;\n  padding: 4px 10px;\n  cursor: pointer;\n}\n\n.mj-forms-image-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n}\n\n.mj-forms-image-btn--ghost {\n  color: var(--mj-text-secondary);\n  background: transparent;\n  border-color: var(--mj-border-default);\n  font-weight: 500;\n}\n\n.mj-forms-image--edit .mj-forms-field-input {\n  width: 100%;\n}\n\n.mj-forms-color {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.mj-forms-color-swatch {\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.mj-forms-color-picker {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: transparent;\n  cursor: pointer;\n  flex: 0 0 auto;\n}\n\n.mj-forms-color-hex {\n  max-width: 160px;\n}\n\n.mj-forms-json {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  font-size: 12.5px;\n  line-height: 1.45;\n  white-space: pre-wrap;\n  word-break: break-word;\n  margin: 0;\n  max-height: 360px;\n  overflow: auto;\n  width: 100%;\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: [{