@memberjunction/ng-base-forms 4.0.0 → 4.1.0

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

@@ -0,0 +1,1194 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, inject } from '@angular/core';
+import { Metadata, CompositeKey, KeyValuePair, RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.PrimaryKeyValue;
+const _forTrack1 = ($index, $item) => $item.Message;
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "label", 3);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("innerHTML", ctx_r0.HighlightedDisplayName, i0.ɵɵsanitizeHtml);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 5)(1, "a", 6);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnRecordLinkClick($event)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.FKDisplayName, " ");
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_0_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 5)(1, "a", 7);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_0_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnEmailLinkClick($event)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelement(3, "i", 8);
+    i0.ɵɵ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", 5)(1, "a", 9);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_1_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnUrlLinkClick($event)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelement(3, "i", 10);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.FormatValue(), " ");
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 5)(1, "a", 11);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnRecordLinkClick($event)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelement(3, "i", 10);
+    i0.ɵɵelementEnd()();
+} 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_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 5)(1, "div", 13);
+    i0.ɵɵelement(2, "input", 14);
+    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, "span", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.FormatValue());
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    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", 5)(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_1_Template, 2, 1, "span", 12)(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Conditional_2_Template, 2, 1, "span", 5);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(ctx_r0.Type === "checkbox" ? 0 : ctx_r0.IsLongText ? 1 : 2);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_0_Template, 4, 1, "span", 5)(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_1_Template, 4, 1, "span", 5)(2, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_2_Template, 4, 1, "span", 5)(3, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Case_3_Template, 3, 1);
+} if (rf & 2) {
+    let tmp_3_0;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional((tmp_3_0 = ctx_r0.LinkType) === "Email" ? 0 : tmp_3_0 === "URL" ? 1 : tmp_3_0 === "Record" ? 2 : 3);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_1_Template, 1, 1, "label", 3);
+    i0.ɵɵelementStart(2, "div", 4);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_3_Template, 3, 1, "span", 5)(4, MjFormFieldComponent_Conditional_0_Conditional_0_Conditional_4_Template, 4, 1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mj-forms-field--readonly", ctx_r0.EditMode && ctx_r0.IsFieldReadOnly)("mj-forms-field--dirty", ctx_r0.IsDirty);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ShowLabel ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.IsFKWithNameField ? 3 : 4);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "label", 3);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("innerHTML", ctx_r0.HighlightedDisplayName, i0.ɵɵsanitizeHtml);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 24);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_2_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnFKClearClick($event)); });
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementEnd();
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 22);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_For_2_Template_div_mousedown_0_listener($event) { const suggestion_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnFKSelectItem(suggestion_r9, $event)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const suggestion_r9 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", suggestion_r9.DisplayName, " ");
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_For_2_Template, 2, 1, "div", 27, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("mj-fk-dropdown--above", ctx_r0.OpenAbove);
+    i0.ɵɵproperty("ngStyle", ctx_r0.DropdownPositionStyle);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.FKSuggestions);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "input", 20);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFKInput($event)); })("focus", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template_input_focus_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFKFocus($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template_input_blur_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFKBlur()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_2_Template, 2, 0, "button", 21)(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_3_Template, 1, 0, "i", 22);
+    i0.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Conditional_4_Template, 3, 3, "div", 23);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-fk-search--matched", ctx_r0.FKIsMatched);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r0.FKSearchText);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.FKSearchText ? 2 : 3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.ShowFKDropdown && ctx_r0.FKSuggestions.length > 0 ? 4 : -1);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_0_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 33);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_0_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnInputChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("value", ctx_r0.FormatValue());
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_1_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 34);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_1_Template_textarea_change_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnInputChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("value", ctx_r0.FormatValue());
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_2_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 35);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_2_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnNumberChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("value", ctx_r0.Value);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_3_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 36);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_3_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnDateChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("value", ctx_r0.DateInputValue);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_4_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13)(1, "input", 37);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_4_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnCheckboxChange($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", !!ctx_r0.Value);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Conditional_4_For_2_Template_div_mousedown_0_listener($event) { const option_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnSelectOptionClick(option_r17, $event)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r17 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(6);
+    i0.ɵɵclassProp("mj-fk-option--selected", ctx_r0.FormatValue() === option_r17);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", option_r17, " ");
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Conditional_4_For_2_Template, 2, 3, "div", 41, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassProp("mj-fk-dropdown--above", ctx_r0.OpenAbove);
+    i0.ɵɵproperty("ngStyle", ctx_r0.DropdownPositionStyle);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.PossibleValues);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵlistener("click", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnSelectTriggerClick($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Template_div_blur_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnSelectTriggerBlur()); });
+    i0.ɵɵelementStart(1, "span", 39);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "i", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Conditional_4_Template, 3, 3, "div", 23);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("mj-custom-select-value--placeholder", !ctx_r0.FormatValue());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.FormatValue() || "-- Select --", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("mj-custom-select-chevron--open", ctx_r0.ShowSelectDropdown);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ShowSelectDropdown && ctx_r0.PossibleValues.length > 0 ? 4 : -1);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵlistener("mousedown", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Conditional_3_For_2_Template_div_mousedown_0_listener($event) { const option_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.OnValueListSelect(option_r20, $event)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r20 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", option_r20, " ");
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Conditional_3_For_2_Template, 2, 1, "div", 27, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassProp("mj-fk-dropdown--above", ctx_r0.OpenAbove);
+    i0.ɵɵproperty("ngStyle", ctx_r0.DropdownPositionStyle);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.FilteredPossibleValues);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "input", 42);
+    i0.ɵɵlistener("input", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListInput($event)); })("focus", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Template_input_focus_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListFocus($event)); })("blur", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Template_input_blur_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnValueListBlur()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "i", 22);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Conditional_3_Template, 3, 3, "div", 23);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r0.FormatValue());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.ShowValueListDropdown && ctx_r0.FilteredPossibleValues.length > 0 ? 3 : -1);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_7_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 33);
+    i0.ɵɵlistener("change", function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_7_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnInputChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("value", ctx_r0.FormatValue());
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_0_Template, 1, 1, "input", 29)(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_1_Template, 1, 1, "textarea", 30)(2, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_2_Template, 1, 1, "input", 31)(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_3_Template, 1, 1, "input", 32)(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_4_Template, 2, 1, "div", 13)(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_5_Template, 5, 6)(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_6_Template, 4, 2, "div", 19)(7, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Case_7_Template, 1, 1, "input", 29);
+} if (rf & 2) {
+    let tmp_3_0;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional((tmp_3_0 = ctx_r0.Type) === "textbox" ? 0 : tmp_3_0 === "textarea" ? 1 : tmp_3_0 === "number" ? 2 : tmp_3_0 === "datepicker" ? 3 : tmp_3_0 === "checkbox" ? 4 : tmp_3_0 === "select" ? 5 : tmp_3_0 === "autocomplete" ? 6 : 7);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const error_r22 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(error_r22.Message);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_For_2_Template, 4, 1, "div", 43, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.DisplayErrors);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const warning_r23 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(warning_r23.Message);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵrepeaterCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_For_2_Template, 4, 1, "div", 43, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.DisplayWarnings);
+} }
+function MjFormFieldComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_1_Template, 1, 1, "label", 3);
+    i0.ɵɵelementStart(2, "div", 4);
+    i0.ɵɵconditionalCreate(3, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_3_Template, 5, 5, "div", 16)(4, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_4_Template, 8, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_5_Template, 3, 0, "div", 17);
+    i0.ɵɵconditionalCreate(6, MjFormFieldComponent_Conditional_0_Conditional_1_Conditional_6_Template, 3, 0, "div", 18);
+    i0.ɵɵ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.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ShowLabel ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.HasRelatedEntity ? 3 : 4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.DisplayErrors.length > 0 ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.DisplayWarnings.length > 0 ? 6 : -1);
+} }
+function MjFormFieldComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Conditional_0_Template, 5, 6, "div", 0);
+    i0.ɵɵconditionalCreate(1, MjFormFieldComponent_Conditional_0_Conditional_1_Template, 7, 12, "div", 1);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional((!ctx_r0.EditMode || ctx_r0.IsFieldReadOnly) && !ctx_r0.ShouldHideField ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.EditMode && !ctx_r0.IsFieldReadOnly ? 1 : -1);
+} }
+/**
+ * Modern form field component that renders entity fields in both read-only and edit modes.
+ *
+ * **Read mode**: Clean text display with optional hyperlinks (email, URL, record).
+ * **Edit mode**: Native HTML inputs with custom-built select and autocomplete components.
+ *
+ * Uses:
+ * - Native `<input>` for text, number, date
+ * - Custom styled dropdown for value list selections
+ * - Custom autocomplete with floating dropdown for foreign key search
+ * - Custom-styled `<input type="checkbox">` for booleans
+ *
+ * All navigation (clicking FK links, email links, URL links) is emitted as events.
+ *
+ * @example
+ * ```html
+ * <mj-form-field
+ *   [Record]="record"
+ *   [EditMode]="editMode"
+ *   FieldName="CustomerName"
+ *   Type="textbox"
+ *   [FormContext]="formContext"
+ *   (Navigate)="onNavigate($event)"
+ *   (ValueChange)="onValueChange($event)">
+ * </mj-form-field>
+ * ```
+ */
+export class MjFormFieldComponent {
+    cdr = inject(ChangeDetectorRef);
+    /** The entity record containing this field */
+    Record;
+    /** Whether the form is in edit mode */
+    EditMode = false;
+    /** The field code name (must match a field on the entity) */
+    FieldName = '';
+    /**
+     * The control type to render in edit mode.
+     * Determines which input component is used.
+     *
+     * Also accepts deprecated Kendo-style type names for backward compatibility:
+     * - `'dropdownlist'` → `'select'`
+     * - `'numerictextbox'` → `'number'`
+     */
+    set Type(value) {
+        // Normalize deprecated Kendo type names to modern equivalents
+        switch (value) {
+            case 'dropdownlist':
+                this._type = 'select';
+                break;
+            case 'numerictextbox':
+                this._type = 'number';
+                break;
+            default:
+                this._type = value;
+                break;
+        }
+    }
+    get Type() {
+        return this._type;
+    }
+    _type = 'textbox';
+    /**
+     * Link type for read-only rendering.
+     * - 'Email': renders as mailto link
+     * - 'URL': renders as external hyperlink
+     * - 'Record': renders as FK link to related entity record
+     * - 'None': renders as plain text
+     */
+    LinkType = 'None';
+    /** Whether to show the field label */
+    ShowLabel = true;
+    /** Form-level context (search filter, showEmptyFields) */
+    FormContext;
+    // ---- Deprecated camelCase aliases (backward compat) ----
+    /** @deprecated Use [Record] instead */
+    set _deprecatedRecord(value) { this.Record = value; }
+    /** @deprecated Use [FormContext] instead */
+    set _deprecatedFormContext(value) { this.FormContext = value; }
+    /** Whether to hide this field when empty in read-only mode. Default: true */
+    HideWhenEmptyInReadOnlyMode = true;
+    /** Override display name (defaults to entity field metadata DisplayName) */
+    DisplayNameOverride = '';
+    /** Override possible values for select/autocomplete */
+    PossibleValuesOverride = null;
+    /** Emitted when the field value changes */
+    ValueChange = new EventEmitter();
+    /** Emitted when a navigation action is triggered (FK link click, email click, etc.) */
+    Navigate = new EventEmitter();
+    // ---- Computed Properties ----
+    /** Get EntityFieldInfo metadata for this field */
+    get FieldInfo() {
+        return this.Record?.EntityInfo?.Fields?.find(f => f.Name === this.FieldName);
+    }
+    /** Display name from metadata or override */
+    get DisplayName() {
+        if (this.DisplayNameOverride)
+            return this.DisplayNameOverride;
+        // Friendly labels for standard MJ timestamp fields
+        if (this.FieldName === '__mj_CreatedAt')
+            return 'Created';
+        if (this.FieldName === '__mj_UpdatedAt')
+            return 'Updated';
+        // For FK fields that have a mapped name field, use the name field's
+        // friendly label (e.g., show "Parent" instead of "Parent ID")
+        const nameFieldMap = this.FieldInfo?.RelatedEntityNameFieldMap;
+        if (nameFieldMap) {
+            const nameField = this.Record?.EntityInfo?.Fields?.find(f => f.Name === nameFieldMap);
+            if (nameField) {
+                return nameField.DisplayNameOrName;
+            }
+        }
+        return this.FieldInfo?.DisplayNameOrName ?? this.FieldName;
+    }
+    /** Display name with search highlighting applied */
+    get HighlightedDisplayName() {
+        const filter = this.FormContext?.sectionFilter?.trim();
+        if (!filter)
+            return this.DisplayName;
+        const escaped = filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(escaped, 'gi');
+        return this.DisplayName.replace(regex, '<mark class="mj-forms-search-highlight">$&</mark>');
+    }
+    /** Current field value */
+    get Value() {
+        return this.Record?.Get(this.FieldName);
+    }
+    /** Set field value, mark touched, run validation, and emit change event */
+    set Value(newValue) {
+        if (!this.Record)
+            return;
+        const oldValue = this.Record.Get(this.FieldName);
+        this.Record.Set(this.FieldName, newValue);
+        this._touched = true;
+        this.runFieldValidation();
+        this.ValueChange.emit({ FieldName: this.FieldName, OldValue: oldValue, NewValue: newValue });
+    }
+    /** Whether this field is read-only based on entity metadata */
+    get IsFieldReadOnly() {
+        if (!this.FieldInfo)
+            return false;
+        return this.FieldInfo.ReadOnly;
+    }
+    /** Whether this field has been modified (dirty). Only shown for saved records (not new). */
+    get IsDirty() {
+        if (!this.Record || !this.Record.IsSaved)
+            return false;
+        const field = this.Record.Fields?.find(f => f.Name === this.FieldName);
+        return field?.Dirty ?? false;
+    }
+    /** Whether this field is required (not nullable) */
+    get IsRequired() {
+        return this.FieldInfo?.AllowsNull === false;
+    }
+    /** Whether this is a required field that is currently empty (for validation styling) */
+    get IsRequiredEmpty() {
+        // Defer to the validation system when it has active errors for this field
+        if (this.ShowErrors)
+            return false;
+        if (!this.IsRequired || !this.EditMode)
+            return false;
+        const val = this.Value;
+        return val === null || val === undefined || val === '';
+    }
+    // ---- INLINE VALIDATION ----
+    /** Whether the user has interacted with (changed) this field */
+    _touched = false;
+    /** Locally computed validation errors for this field */
+    _fieldErrors = [];
+    /** 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) {
+            return this._fieldErrors;
+        }
+        // Otherwise use form-level errors from save failure (covers untouched fields)
+        const contextErrors = this.FormContext?.validationErrors;
+        if (contextErrors && contextErrors.length > 0) {
+            return contextErrors.filter(e => e.Source === this.FieldName);
+        }
+        return [];
+    }
+    /** Whether to show validation messages (touched OR form-level showValidation) */
+    get ShowValidation() {
+        if (!this.EditMode || this.IsFieldReadOnly)
+            return false;
+        return this._touched || (this.FormContext?.showValidation === true);
+    }
+    /** Whether this field has active error-level validation failures to display */
+    get ShowErrors() {
+        return this.ShowValidation && this.FieldErrors.some(e => e.Type === 'Failure');
+    }
+    /** Whether this field has active warning-level validation issues to display */
+    get ShowWarnings() {
+        return this.ShowValidation && !this.ShowErrors && this.FieldErrors.some(e => e.Type === 'Warning');
+    }
+    /** Error messages to render in the template */
+    get DisplayErrors() {
+        if (!this.ShowValidation)
+            return [];
+        return this.FieldErrors.filter(e => e.Type === 'Failure');
+    }
+    /** Warning messages to render in the template */
+    get DisplayWarnings() {
+        if (!this.ShowValidation)
+            return [];
+        return this.FieldErrors.filter(e => e.Type === 'Warning');
+    }
+    /**
+     * Runs validation for this field using the full Record.Validate() method.
+     * This captures both built-in field checks and custom Validate() overrides
+     * (including cross-field rules). Results are filtered to this field only.
+     */
+    runFieldValidation() {
+        if (!this.Record || !this.EditMode) {
+            this._fieldErrors = [];
+            return;
+        }
+        try {
+            const result = this.Record.Validate();
+            this._fieldErrors = result.Errors.filter(e => e.Source === this.FieldName);
+        }
+        catch {
+            this._fieldErrors = [];
+        }
+        this.cdr.markForCheck();
+    }
+    /** Whether this field should be hidden (empty in read-only mode) */
+    get ShouldHideField() {
+        if (this.EditMode)
+            return false;
+        if (!this.HideWhenEmptyInReadOnlyMode)
+            return false;
+        if (this.FormContext?.showEmptyFields)
+            return false;
+        const val = this.Value;
+        return val === null || val === undefined || val === '';
+    }
+    /** Possible values for select/autocomplete from entity metadata or override */
+    get PossibleValues() {
+        if (this.PossibleValuesOverride)
+            return this.PossibleValuesOverride;
+        const values = this.FieldInfo?.EntityFieldValues;
+        if (values && values.length > 0) {
+            return values.map(v => v.Value);
+        }
+        return [];
+    }
+    /** Whether this field has a related entity (foreign key) */
+    get HasRelatedEntity() {
+        const re = this.FieldInfo?.RelatedEntity;
+        return re != null && re.length > 0;
+    }
+    /**
+     * For FK fields, returns the human-readable name to display instead of the raw ID.
+     *
+     * Resolution order:
+     * 1. If `RelatedEntityNameFieldMap` exists, read the name from the joined field on the record (sync).
+     * 2. Otherwise, fall back to an async `GetEntityRecordName` lookup (result cached in `_resolvedFKName`).
+     */
+    get FKDisplayName() {
+        if (!this.Record || !this.HasRelatedEntity)
+            return null;
+        // Fast path: name field is joined into our record's view
+        const nameFieldMap = this.FieldInfo?.RelatedEntityNameFieldMap;
+        if (nameFieldMap) {
+            const val = this.Record.Get(nameFieldMap);
+            if (val != null && val !== '')
+                return String(val);
+        }
+        // Async fallback: resolved via GetEntityRecordName
+        if (this._resolvedFKName !== undefined) {
+            return this._resolvedFKName;
+        }
+        // Kick off async resolution if not already in flight
+        this.resolveFKNameAsync();
+        return null; // will render once resolved
+    }
+    /**
+     * Whether this FK field should display the related entity name
+     * with a hyperlink instead of the raw ID value.
+     */
+    get IsFKWithNameField() {
+        return this.HasRelatedEntity && this.FKDisplayName != null;
+    }
+    // ---- Async FK name resolution ----
+    /** Cached result from GetEntityRecordName. undefined = not yet resolved. */
+    _resolvedFKName = undefined;
+    /** Tracks which FK value we resolved so we can invalidate on record change */
+    _resolvedFKValue = undefined;
+    /** Whether an async lookup is in flight */
+    _fkNameLoading = false;
+    /**
+     * Asynchronously resolves the display name for an FK field that lacks
+     * a RelatedEntityNameFieldMap by calling Metadata.GetEntityRecordName.
+     */
+    resolveFKNameAsync() {
+        if (this._fkNameLoading)
+            return;
+        const fkValue = this.Value;
+        if (fkValue == null || fkValue === '')
+            return;
+        const fieldInfo = this.FieldInfo;
+        if (!fieldInfo?.RelatedEntity || !fieldInfo?.RelatedEntityFieldName)
+            return;
+        this._fkNameLoading = true;
+        this._resolvedFKValue = fkValue;
+        const pk = new CompositeKey([{
+                FieldName: fieldInfo.RelatedEntityFieldName,
+                Value: fkValue
+            }]);
+        const md = new Metadata();
+        md.GetEntityRecordName(fieldInfo.RelatedEntity, pk)
+            .then(name => {
+            this._resolvedFKName = name || null;
+            this._fkNameLoading = false;
+            this.cdr.markForCheck();
+        })
+            .catch(() => {
+            this._resolvedFKName = null;
+            this._fkNameLoading = false;
+        });
+    }
+    // ============================================
+    // DROPDOWN POSITIONING (shared by FK, value list, select)
+    // ============================================
+    /** Calculated position for fixed-position dropdowns */
+    DropdownTop = 0;
+    DropdownLeft = 0;
+    DropdownWidth = 0;
+    OpenAbove = false;
+    /** Cleanup function for scroll/resize listeners */
+    _scrollCleanup = null;
+    /** Inline style for the fixed-position dropdown */
+    get DropdownPositionStyle() {
+        if (this.OpenAbove) {
+            return {
+                'position': 'fixed',
+                'bottom': (window.innerHeight - this.DropdownTop) + 'px',
+                'top': 'auto',
+                'left': this.DropdownLeft + 'px',
+                'width': this.DropdownWidth + 'px',
+                'z-index': '10000'
+            };
+        }
+        return {
+            'position': 'fixed',
+            'top': this.DropdownTop + 'px',
+            'bottom': 'auto',
+            'left': this.DropdownLeft + 'px',
+            'width': this.DropdownWidth + 'px',
+            'z-index': '10000'
+        };
+    }
+    /** Calculate dropdown position relative to viewport from anchor element */
+    updateDropdownPosition(anchorEl) {
+        const rect = anchorEl.getBoundingClientRect();
+        const dropdownMaxHeight = 240;
+        const gap = 4;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        if (spaceBelow < dropdownMaxHeight && spaceAbove > spaceBelow) {
+            this.OpenAbove = true;
+            this.DropdownTop = rect.top - gap;
+        }
+        else {
+            this.OpenAbove = false;
+            this.DropdownTop = rect.bottom + gap;
+        }
+        this.DropdownLeft = rect.left;
+        this.DropdownWidth = rect.width;
+    }
+    /** Start listening for scroll/resize to close dropdowns */
+    startScrollListener() {
+        this.stopScrollListener();
+        const onScroll = () => {
+            this.closeAllDropdowns();
+            this.cdr.markForCheck();
+        };
+        const onResize = () => {
+            this.closeAllDropdowns();
+            this.cdr.markForCheck();
+        };
+        document.addEventListener('scroll', onScroll, true); // capture phase catches all scrollable ancestors
+        window.addEventListener('resize', onResize);
+        this._scrollCleanup = () => {
+            document.removeEventListener('scroll', onScroll, true);
+            window.removeEventListener('resize', onResize);
+        };
+    }
+    /** Remove scroll/resize listeners */
+    stopScrollListener() {
+        if (this._scrollCleanup) {
+            this._scrollCleanup();
+            this._scrollCleanup = null;
+        }
+    }
+    /** Close all dropdown types */
+    closeAllDropdowns() {
+        this.ShowFKDropdown = false;
+        this.ShowValueListDropdown = false;
+        this.ShowSelectDropdown = false;
+        this.stopScrollListener();
+    }
+    // ============================================
+    // FK AUTOCOMPLETE (custom implementation)
+    // ============================================
+    /** Suggestions returned from the FK entity search */
+    FKSuggestions = [];
+    /** Whether the current FK value is a confirmed match (user selected from dropdown) */
+    FKIsMatched = false;
+    /** Whether the FK dropdown is visible */
+    ShowFKDropdown = false;
+    /** Text the user is currently typing in the FK search input. null = use display name. */
+    _fkInputText = null;
+    /** Debounce timer for FK search */
+    _fkSearchTimeout = null;
+    /** Last known FK input element for position recalculation */
+    _lastFKInputEl = null;
+    /** The display text shown in the FK search input */
+    get FKSearchText() {
+        if (this._fkInputText !== null)
+            return this._fkInputText;
+        return this.FKDisplayName || '';
+    }
+    /** Handle typing in the FK search input */
+    OnFKInput(event) {
+        const input = event.target;
+        this._fkInputText = input.value;
+        this._lastFKInputEl = input;
+        this.FKIsMatched = false;
+        // Debounce search
+        if (this._fkSearchTimeout)
+            clearTimeout(this._fkSearchTimeout);
+        this._fkSearchTimeout = setTimeout(() => {
+            if (this._fkInputText && this._fkInputText.length >= 1) {
+                this.searchRelatedEntity(this._fkInputText);
+            }
+            else {
+                this.FKSuggestions = [];
+                this.ShowFKDropdown = false;
+                this.stopScrollListener();
+                this.cdr.markForCheck();
+            }
+        }, 300);
+    }
+    /** Show dropdown on focus if suggestions exist */
+    OnFKFocus(event) {
+        const input = event.target;
+        this._lastFKInputEl = input;
+        if (this.FKSuggestions.length > 0) {
+            this.updateDropdownPosition(input);
+            this.startScrollListener();
+            this.ShowFKDropdown = true;
+            this.cdr.markForCheck();
+        }
+    }
+    /** Hide dropdown on blur, revert to matched name if user didn't select */
+    OnFKBlur() {
+        // Small delay so mousedown on dropdown items fires first
+        setTimeout(() => {
+            this.ShowFKDropdown = false;
+            this.stopScrollListener();
+            // If user was typing but didn't select, revert to display name
+            if (!this.FKIsMatched && this._fkInputText !== null) {
+                this._fkInputText = null;
+            }
+            this.cdr.markForCheck();
+        }, 200);
+    }
+    /** Select an item from the FK dropdown */
+    OnFKSelectItem(suggestion, event) {
+        event.preventDefault();
+        this._fkInputText = suggestion.DisplayName;
+        this.Value = suggestion.PrimaryKeyValue;
+        this.FKIsMatched = true;
+        this.ShowFKDropdown = false;
+        this.stopScrollListener();
+        // Update virtual name field for visual consistency after save
+        const nameFieldMap = this.FieldInfo?.RelatedEntityNameFieldMap;
+        if (nameFieldMap) {
+            this.Record.Set(nameFieldMap, suggestion.DisplayName);
+        }
+        this.cdr.markForCheck();
+    }
+    /** Clear FK value via the X button */
+    OnFKClearClick(event) {
+        event.preventDefault();
+        this.Value = null;
+        this._fkInputText = null;
+        this.FKIsMatched = false;
+        this.FKSuggestions = [];
+        this.ShowFKDropdown = false;
+        this.stopScrollListener();
+        this._resolvedFKName = undefined;
+        this._resolvedFKValue = undefined;
+        const nameFieldMap = this.FieldInfo?.RelatedEntityNameFieldMap;
+        if (nameFieldMap) {
+            this.Record.Set(nameFieldMap, '');
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Perform a RunView search on the related entity's name field.
+     */
+    async searchRelatedEntity(query) {
+        const fieldInfo = this.FieldInfo;
+        if (!fieldInfo?.RelatedEntity)
+            return;
+        const md = new Metadata();
+        const relatedEntity = md.Entities.find(e => e.Name === fieldInfo.RelatedEntity);
+        if (!relatedEntity?.NameField)
+            return;
+        const nameFieldName = relatedEntity.NameField.Name;
+        const pkFieldName = fieldInfo.RelatedEntityFieldName || 'ID';
+        const escapedQuery = query.replace(/'/g, "''");
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: fieldInfo.RelatedEntity,
+            ExtraFilter: `[${nameFieldName}] LIKE '%${escapedQuery}%'`,
+            MaxRows: 20,
+            ResultType: 'simple',
+            Fields: [pkFieldName, nameFieldName]
+        });
+        if (result.Success) {
+            this.FKSuggestions = result.Results.map(r => ({
+                PrimaryKeyValue: r[pkFieldName],
+                DisplayName: String(r[nameFieldName] || '')
+            }));
+            if (this.FKSuggestions.length > 0 && this._lastFKInputEl) {
+                this.updateDropdownPosition(this._lastFKInputEl);
+                this.startScrollListener();
+            }
+            this.ShowFKDropdown = this.FKSuggestions.length > 0;
+        }
+        else {
+            this.FKSuggestions = [];
+            this.ShowFKDropdown = false;
+            this.stopScrollListener();
+        }
+        this.cdr.markForCheck();
+    }
+    // ============================================
+    // VALUE LIST AUTOCOMPLETE (for 'autocomplete' type)
+    // ============================================
+    /** Whether the value list dropdown is visible */
+    ShowValueListDropdown = false;
+    /** Current filter text for the value list */
+    _valueListFilter = '';
+    /** Filtered possible values based on what the user typed */
+    get FilteredPossibleValues() {
+        if (!this._valueListFilter)
+            return this.PossibleValues;
+        const filter = this._valueListFilter.toLowerCase();
+        return this.PossibleValues.filter(v => v.toLowerCase().includes(filter));
+    }
+    /** Handle typing in the value list autocomplete */
+    OnValueListInput(event) {
+        const input = event.target;
+        this._valueListFilter = input.value;
+        this.Value = input.value;
+        this.updateDropdownPosition(input);
+        if (!this._scrollCleanup)
+            this.startScrollListener();
+        this.ShowValueListDropdown = true;
+        this.cdr.markForCheck();
+    }
+    /** Show dropdown on focus */
+    OnValueListFocus(event) {
+        const input = event.target;
+        this.updateDropdownPosition(input);
+        this.startScrollListener();
+        this.ShowValueListDropdown = true;
+        this.cdr.markForCheck();
+    }
+    /** Hide dropdown on blur */
+    OnValueListBlur() {
+        setTimeout(() => {
+            this.ShowValueListDropdown = false;
+            this.stopScrollListener();
+            this.cdr.markForCheck();
+        }, 200);
+    }
+    /** Select an item from the value list dropdown */
+    OnValueListSelect(value, event) {
+        event.preventDefault();
+        this.Value = value;
+        this._valueListFilter = '';
+        this.ShowValueListDropdown = false;
+        this.stopScrollListener();
+        this.cdr.markForCheck();
+    }
+    // ============================================
+    // CUSTOM SELECT DROPDOWN (replaces native <select>)
+    // ============================================
+    /** Whether the custom select dropdown is visible */
+    ShowSelectDropdown = false;
+    /** Toggle the custom select dropdown */
+    OnSelectTriggerClick(event) {
+        event.preventDefault();
+        if (this.ShowSelectDropdown) {
+            this.ShowSelectDropdown = false;
+            this.stopScrollListener();
+        }
+        else {
+            const el = event.currentTarget;
+            this.updateDropdownPosition(el);
+            this.startScrollListener();
+            this.ShowSelectDropdown = true;
+        }
+        this.cdr.markForCheck();
+    }
+    /** Close the select dropdown on blur */
+    OnSelectTriggerBlur() {
+        setTimeout(() => {
+            this.ShowSelectDropdown = false;
+            this.stopScrollListener();
+            this.cdr.markForCheck();
+        }, 200);
+    }
+    /** Select an option from the custom select dropdown */
+    OnSelectOptionClick(value, event) {
+        event.preventDefault();
+        this.Value = value;
+        this.ShowSelectDropdown = false;
+        this.stopScrollListener();
+        this.cdr.markForCheck();
+    }
+    // ============================================
+    // GENERAL PROPERTIES
+    // ============================================
+    /** Whether the field's varchar(max) - long text that gets markdown rendering */
+    get IsLongText() {
+        return this.FieldInfo?.Length === -1;
+    }
+    /** Format a value for display */
+    FormatValue() {
+        const val = this.Value;
+        if (val === null || val === undefined)
+            return '';
+        if (val instanceof Date) {
+            return val.toLocaleString();
+        }
+        return String(val);
+    }
+    ngOnChanges(changes) {
+        if (changes['FormContext'] || changes['EditMode'] || changes['Record']) {
+            // Reset FK state when record changes
+            if (changes['Record']) {
+                this._fkInputText = null;
+                this.FKIsMatched = false;
+                this.FKSuggestions = [];
+                this.ShowFKDropdown = false;
+                this._resolvedFKName = undefined;
+                this._resolvedFKValue = undefined;
+                this._fkNameLoading = false;
+                // Reset validation state for new record
+                this._touched = false;
+                this._fieldErrors = [];
+            }
+            // Reset validation state when exiting edit mode
+            if (changes['EditMode'] && !this.EditMode) {
+                this._touched = false;
+                this._fieldErrors = [];
+            }
+            this.cdr.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        if (this._fkSearchTimeout) {
+            clearTimeout(this._fkSearchTimeout);
+        }
+        this.stopScrollListener();
+    }
+    // ---- Navigation Handlers ----
+    /**
+     * Handle click on a record FK link in read-only mode.
+     */
+    OnRecordLinkClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.FieldInfo || !this.Record)
+            return;
+        const relatedEntityName = this.FieldInfo.RelatedEntity;
+        if (!relatedEntityName)
+            return;
+        const fkValue = this.Value;
+        if (!fkValue)
+            return;
+        // Build a CompositeKey for the FK target record using the related entity's PK field
+        const relatedFieldName = this.FieldInfo.RelatedEntityFieldName || 'ID';
+        const targetKey = new CompositeKey([new KeyValuePair(relatedFieldName, fkValue)]);
+        this.Navigate.emit({
+            Kind: 'record',
+            EntityName: relatedEntityName,
+            PrimaryKey: targetKey,
+            OpenInNewTab: event.ctrlKey || event.metaKey
+        });
+    }
+    /**
+     * Handle click on an email link in read-only mode.
+     */
+    OnEmailLinkClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const email = this.FormatValue();
+        if (!email)
+            return;
+        this.Navigate.emit({
+            Kind: 'email',
+            EmailAddress: email
+        });
+    }
+    /**
+     * Handle click on a URL link in read-only mode.
+     */
+    OnUrlLinkClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const url = this.FormatValue();
+        if (!url)
+            return;
+        this.Navigate.emit({
+            Kind: 'external-link',
+            Url: url,
+            OpenInNewTab: true
+        });
+    }
+    /**
+     * Handle value change from a native input.
+     */
+    OnInputChange(event) {
+        const input = event.target;
+        this.Value = input.value;
+    }
+    /**
+     * Handle value change from a number input.
+     */
+    OnNumberChange(event) {
+        const input = event.target;
+        const num = input.valueAsNumber;
+        this.Value = isNaN(num) ? null : num;
+    }
+    /**
+     * Handle value change from a date input.
+     */
+    OnDateChange(event) {
+        const input = event.target;
+        this.Value = input.value ? new Date(input.value) : null;
+    }
+    /**
+     * Handle value change from a checkbox.
+     */
+    OnCheckboxChange(event) {
+        const input = event.target;
+        this.Value = input.checked;
+    }
+    /**
+     * Get date value formatted for HTML date input.
+     */
+    get DateInputValue() {
+        const val = this.Value;
+        if (!val)
+            return '';
+        const date = val instanceof Date ? val : new Date(String(val));
+        if (isNaN(date.getTime()))
+            return '';
+        return date.toISOString().split('T')[0];
+    }
+    static ɵfac = function MjFormFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MjFormFieldComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjFormFieldComponent, selectors: [["mj-form-field"]], inputs: { Record: "Record", EditMode: "EditMode", FieldName: "FieldName", Type: "Type", LinkType: "LinkType", ShowLabel: "ShowLabel", FormContext: "FormContext", _deprecatedRecord: [0, "record", "_deprecatedRecord"], _deprecatedFormContext: [0, "formContext", "_deprecatedFormContext"], HideWhenEmptyInReadOnlyMode: "HideWhenEmptyInReadOnlyMode", DisplayNameOverride: "DisplayNameOverride", PossibleValuesOverride: "PossibleValuesOverride" }, outputs: { ValueChange: "ValueChange", Navigate: "Navigate" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[1, "mj-forms-field", 3, "mj-forms-field--readonly", "mj-forms-field--dirty"], [1, "mj-forms-field", "mj-forms-field--editing", 3, "mj-forms-field--dirty", "mj-forms-field--required-empty", "mj-forms-field--has-error", "mj-forms-field--has-warning"], [1, "mj-forms-field"], [1, "mj-forms-field-label", 3, "innerHTML"], [1, "mj-forms-field-control"], [1, "mj-forms-field-value"], ["title", "View related record", 1, "mj-forms-field-link", "mj-forms-field-link--fk", 3, "click"], ["title", "Send email", 1, "mj-forms-field-link", 3, "click"], [1, "fa-solid", "fa-envelope", "mj-forms-field-link-icon"], ["title", "Open link", 1, "mj-forms-field-link", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square", "mj-forms-field-link-icon"], ["title", "View related record", 1, "mj-forms-field-link", 3, "click"], [1, "mj-forms-field-value", "mj-forms-field-value--long"], [1, "mj-forms-field-checkbox"], ["type", "checkbox", "disabled", "", 3, "checked"], [1, "mj-forms-field", "mj-forms-field--editing"], [1, "mj-fk-search", 3, "mj-fk-search--matched"], [1, "mj-forms-field-validation", "mj-forms-field-validation--error"], [1, "mj-forms-field-validation", "mj-forms-field-validation--warning"], [1, "mj-fk-search"], ["type", "text", "placeholder", "Search...", 1, "mj-forms-field-input", 3, "input", "focus", "blur", "value"], ["title", "Clear", 1, "mj-fk-clear"], [1, "fa-solid", "fa-magnifying-glass", "mj-fk-search-icon"], [1, "mj-fk-dropdown", 3, "ngStyle", "mj-fk-dropdown--above"], ["title", "Clear", 1, "mj-fk-clear", 3, "mousedown"], [1, "fa-solid", "fa-xmark"], [1, "mj-fk-dropdown", 3, "ngStyle"], [1, "mj-fk-option"], [1, "mj-fk-option", 3, "mousedown"], ["type", "text", 1, "mj-forms-field-input", 3, "value"], [1, "mj-forms-field-input", "mj-forms-field-input--textarea", 3, "value"], ["type", "number", 1, "mj-forms-field-input", "mj-forms-field-input--number", 3, "value"], ["type", "date", 1, "mj-forms-field-input", "mj-forms-field-input--date", 3, "value"], ["type", "text", 1, "mj-forms-field-input", 3, "change", "value"], [1, "mj-forms-field-input", "mj-forms-field-input--textarea", 3, "change", "value"], ["type", "number", 1, "mj-forms-field-input", "mj-forms-field-input--number", 3, "change", "value"], ["type", "date", 1, "mj-forms-field-input", "mj-forms-field-input--date", 3, "change", "value"], ["type", "checkbox", 3, "change", "checked"], ["tabindex", "0", 1, "mj-custom-select-trigger", 3, "click", "blur"], [1, "mj-custom-select-value"], [1, "fa-solid", "fa-chevron-down", "mj-custom-select-chevron"], [1, "mj-fk-option", 3, "mj-fk-option--selected"], ["type", "text", "placeholder", "Type to search...", 1, "mj-forms-field-input", 3, "input", "focus", "blur", "value"], [1, "mj-forms-field-validation-item"], [1, "fa-solid", "fa-circle-exclamation"], [1, "fa-solid", "fa-triangle-exclamation"]], template: function MjFormFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Template, 2, 2);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.Record && (ctx.Record.IsSaved || !ctx.IsFieldReadOnly) ? 0 : -1);
+        } }, dependencies: [i1.NgStyle], styles: ["\n\n\n\n[_nghost-%COMP%] {\n  --mj-accent: #667eea;\n  --mj-accent-light: rgba(102, 126, 234, 0.08);\n  --mj-text-primary: #1f2937;\n  --mj-text-secondary: #4b5563;\n  --mj-text-muted: #9ca3af;\n  --mj-border: #e5e7eb;\n  --mj-error: #ef4444;\n  --mj-warning: #f59e0b;\n  --mj-card-bg: #ffffff;\n  --mj-forms-field-label-width: 200px;\n  --mj-forms-field-gap: 12px;\n  --mj-transition: 200ms;\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) ease;\n}\n\n\n\n.mj-forms-field--editing[_ngcontent-%COMP%]:hover {\n  background: var(--mj-accent-light);\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-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-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n  background: #fef2f2;\n  border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%]   .mj-custom-select-trigger[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-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-error);\n}\n\n\n\n\n\n.mj-forms-field-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n\n.mj-forms-field-value--long[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n\n\n.mj-forms-field--readonly[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n.mj-forms-field--readonly[_ngcontent-%COMP%]   .mj-forms-field-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.mj-forms-field-link[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-accent);\n  cursor: pointer;\n  font-weight: 500;\n  transition: color var(--mj-transition);\n  text-decoration: none;\n}\n\n.mj-forms-field-link[_ngcontent-%COMP%]:hover {\n  color: #5a6fd6;\n}\n\n.mj-forms-field-link-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  opacity: 0;\n  transition: opacity var(--mj-transition);\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);\n  padding: 4px 0;\n  width: 100%;\n  outline: none;\n  transition: border-color var(--mj-transition) ease,\n              background var(--mj-transition) ease;\n}\n\n.mj-forms-field-input[_ngcontent-%COMP%]:focus {\n  border-bottom-color: var(--mj-accent);\n  background: var(--mj-accent-light);\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);\n  border-radius: 6px;\n  padding: 8px 10px;\n  background: white;\n  font-family: inherit;\n}\n\n.mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-accent);\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n  background: white;\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);\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  transition: all var(--mj-transition) ease;\n  flex-shrink: 0;\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%]:checked {\n  background: var(--mj-accent);\n  border-color: var(--mj-accent);\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 white;\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);\n  padding: 4px 0;\n  width: 100%;\n  cursor: pointer;\n  outline: none;\n  transition: border-color var(--mj-transition) ease,\n              background var(--mj-transition) ease;\n}\n\n.mj-custom-select-trigger[_ngcontent-%COMP%]:focus {\n  border-bottom-color: var(--mj-accent);\n  background: var(--mj-accent-light);\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) 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);\n}\n\n.mj-fk-clear[_ngcontent-%COMP%]:hover {\n  color: var(--mj-error);\n  background: rgba(239, 68, 68, 0.08);\n}\n\n\n\n.mj-fk-search--matched[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom: 2px solid var(--mj-accent);\n}\n\n\n\n\n\n.mj-fk-dropdown[_ngcontent-%COMP%] {\n  background: var(--mj-card-bg);\n  border: 1px solid var(--mj-border);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\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);\n  border-radius: 6px;\n}\n\n.mj-fk-option[_ngcontent-%COMP%]:hover {\n  background: var(--mj-accent-light);\n}\n\n.mj-fk-option--selected[_ngcontent-%COMP%] {\n  background: var(--mj-accent-light);\n  font-weight: 600;\n  color: var(--mj-accent);\n}\n\n.mj-fk-option--selected[_ngcontent-%COMP%]:hover {\n  background: rgba(102, 126, 234, 0.15);\n}\n\n@keyframes _ngcontent-%COMP%_mj-dropdown-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes _ngcontent-%COMP%_mj-dropdown-in-above {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n\n.mj-forms-field-label[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:global(.mj-forms-search-highlight) {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 0;\n  border-radius: 2px;\n  font-weight: 700;\n  box-shadow: 0 0 0 2px #fef08a;\n}\n\n\n\n\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-forms-field-input[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-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: #fef2f2;\n  border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n  border-color: var(--mj-error);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-error);\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%]   .mj-custom-select-trigger[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-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-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-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: #fffbeb;\n  border-bottom-color: var(--mj-warning);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n  border-color: var(--mj-warning);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-warning);\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%]   .mj-custom-select-trigger[_ngcontent-%COMP%] {\n  border-bottom-color: var(--mj-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-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-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-error);\n}\n\n\n\n.mj-forms-field-validation--warning[_ngcontent-%COMP%]   .mj-forms-field-validation-item[_ngcontent-%COMP%] {\n  color: #b45309;\n}\n\n.mj-forms-field-validation--warning[_ngcontent-%COMP%]   .mj-forms-field-validation-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-warning);\n}\n\n@keyframes _ngcontent-%COMP%_mj-validation-slide-in {\n  from {\n    opacity: 0;\n    max-height: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    max-height: 100px;\n    transform: translateY(0);\n  }\n}\n\n\n\n\n\n@media (max-width: 640px) {\n  .mj-forms-field[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 4px;\n  }\n\n  .mj-forms-field-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .mj-forms-field-validation[_ngcontent-%COMP%] {\n    grid-column: 1;\n  }\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjFormFieldComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (Record && (Record.IsSaved || !IsFieldReadOnly)) {\n  <!-- READ-ONLY MODE -->\n  @if ((!EditMode || IsFieldReadOnly) && !ShouldHideField) {\n    <div class=\"mj-forms-field\" [class.mj-forms-field--readonly]=\"EditMode && IsFieldReadOnly\" [class.mj-forms-field--dirty]=\"IsDirty\">\n      @if (ShowLabel) {\n        <label class=\"mj-forms-field-label\" [innerHTML]=\"HighlightedDisplayName\"></label>\n      }\n      <div class=\"mj-forms-field-control\">\n        <!-- FK fields with a mapped name field: show the name as a hyperlink -->\n        @if (IsFKWithNameField) {\n          <span class=\"mj-forms-field-value\">\n            <a class=\"mj-forms-field-link mj-forms-field-link--fk\" (click)=\"OnRecordLinkClick($event)\" title=\"View related record\">\n              {{ FKDisplayName }}\n            </a>\n          </span>\n        }\n        @else {\n          @switch (LinkType) {\n            @case ('Email') {\n              <span class=\"mj-forms-field-value\">\n                <a class=\"mj-forms-field-link\" (click)=\"OnEmailLinkClick($event)\" title=\"Send email\">\n                  {{ FormatValue() }}\n                  <i class=\"fa-solid fa-envelope mj-forms-field-link-icon\"></i>\n                </a>\n              </span>\n            }\n            @case ('URL') {\n              <span class=\"mj-forms-field-value\">\n                <a class=\"mj-forms-field-link\" (click)=\"OnUrlLinkClick($event)\" title=\"Open link\">\n                  {{ FormatValue() }}\n                  <i class=\"fa-solid fa-arrow-up-right-from-square mj-forms-field-link-icon\"></i>\n                </a>\n              </span>\n            }\n            @case ('Record') {\n              <span class=\"mj-forms-field-value\">\n                <a class=\"mj-forms-field-link\" (click)=\"OnRecordLinkClick($event)\" title=\"View related record\">\n                  {{ FormatValue() }}\n                  <i class=\"fa-solid fa-arrow-up-right-from-square mj-forms-field-link-icon\"></i>\n                </a>\n              </span>\n            }\n            @default {\n              @if (Type === 'checkbox') {\n                <span class=\"mj-forms-field-value\">\n                  <div class=\"mj-forms-field-checkbox\">\n                    <input type=\"checkbox\" [checked]=\"!!Value\" disabled>\n                  </div>\n                </span>\n              }\n              @else if (IsLongText) {\n                <span class=\"mj-forms-field-value mj-forms-field-value--long\">{{ FormatValue() }}</span>\n              }\n              @else {\n                <span class=\"mj-forms-field-value\">{{ FormatValue() }}</span>\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- EDIT MODE -->\n  @if (EditMode && !IsFieldReadOnly) {\n    <div class=\"mj-forms-field mj-forms-field--editing\" [class.mj-forms-field--dirty]=\"IsDirty\" [class.mj-forms-field--required-empty]=\"IsRequiredEmpty\" [class.mj-forms-field--has-error]=\"ShowErrors\" [class.mj-forms-field--has-warning]=\"ShowWarnings\">\n      @if (ShowLabel) {\n        <label class=\"mj-forms-field-label\" [innerHTML]=\"HighlightedDisplayName\"></label>\n      }\n      <div class=\"mj-forms-field-control\">\n        <!-- Foreign Key fields get custom search autocomplete -->\n        @if (HasRelatedEntity) {\n          <div class=\"mj-fk-search\" [class.mj-fk-search--matched]=\"FKIsMatched\">\n            <input type=\"text\"\n              class=\"mj-forms-field-input\"\n              [value]=\"FKSearchText\"\n              (input)=\"OnFKInput($event)\"\n              (focus)=\"OnFKFocus($event)\"\n              (blur)=\"OnFKBlur()\"\n              placeholder=\"Search...\">\n            @if (FKSearchText) {\n              <button class=\"mj-fk-clear\" (mousedown)=\"OnFKClearClick($event)\" title=\"Clear\">\n                <i class=\"fa-solid fa-xmark\"></i>\n              </button>\n            } @else {\n              <i class=\"fa-solid fa-magnifying-glass mj-fk-search-icon\"></i>\n            }\n            @if (ShowFKDropdown && FKSuggestions.length > 0) {\n              <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n                @for (suggestion of FKSuggestions; track suggestion.PrimaryKeyValue) {\n                  <div class=\"mj-fk-option\" (mousedown)=\"OnFKSelectItem(suggestion, $event)\">\n                    {{ suggestion.DisplayName }}\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        @else {\n          @switch (Type) {\n            @case ('textbox') {\n              <input type=\"text\"\n                class=\"mj-forms-field-input\"\n                [value]=\"FormatValue()\"\n                (change)=\"OnInputChange($event)\">\n            }\n            @case ('textarea') {\n              <textarea\n                class=\"mj-forms-field-input mj-forms-field-input--textarea\"\n                [value]=\"FormatValue()\"\n                (change)=\"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-accent: #667eea;\n  --mj-accent-light: rgba(102, 126, 234, 0.08);\n  --mj-text-primary: #1f2937;\n  --mj-text-secondary: #4b5563;\n  --mj-text-muted: #9ca3af;\n  --mj-border: #e5e7eb;\n  --mj-error: #ef4444;\n  --mj-warning: #f59e0b;\n  --mj-card-bg: #ffffff;\n  --mj-forms-field-label-width: 200px;\n  --mj-forms-field-gap: 12px;\n  --mj-transition: 200ms;\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) ease;\n}\n\n/* Subtle row hover in edit mode */\n.mj-forms-field--editing:hover {\n  background: var(--mj-accent-light);\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-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-error);\n}\n\n.mj-forms-field--required-empty .mj-forms-field-input:focus {\n  background: #fef2f2;\n  border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--required-empty .mj-custom-select-trigger {\n  border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--required-empty .mj-fk-search .mj-forms-field-input {\n  border-bottom-color: var(--mj-error);\n}\n\n/* ============================================\n   READ-ONLY VALUE\n   ============================================ */\n.mj-forms-field-value {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n\n.mj-forms-field-value--long {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n/* Read-only fields in edit mode */\n.mj-forms-field--readonly {\n  opacity: 0.7;\n}\n\n.mj-forms-field--readonly .mj-forms-field-value {\n  color: var(--mj-text-secondary);\n}\n\n/* ============================================\n   LINKS (FK, email, URL)\n   ============================================ */\n.mj-forms-field-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-accent);\n  cursor: pointer;\n  font-weight: 500;\n  transition: color var(--mj-transition);\n  text-decoration: none;\n}\n\n.mj-forms-field-link:hover {\n  color: #5a6fd6;\n}\n\n.mj-forms-field-link-icon {\n  font-size: 11px;\n  opacity: 0;\n  transition: opacity var(--mj-transition);\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);\n  padding: 4px 0;\n  width: 100%;\n  outline: none;\n  transition: border-color var(--mj-transition) ease,\n              background var(--mj-transition) ease;\n}\n\n.mj-forms-field-input:focus {\n  border-bottom-color: var(--mj-accent);\n  background: var(--mj-accent-light);\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);\n  border-radius: 6px;\n  padding: 8px 10px;\n  background: white;\n  font-family: inherit;\n}\n\n.mj-forms-field-input--textarea:focus {\n  border-color: var(--mj-accent);\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n  background: white;\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);\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  transition: all var(--mj-transition) ease;\n  flex-shrink: 0;\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:checked {\n  background: var(--mj-accent);\n  border-color: var(--mj-accent);\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 white;\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);\n  padding: 4px 0;\n  width: 100%;\n  cursor: pointer;\n  outline: none;\n  transition: border-color var(--mj-transition) ease,\n              background var(--mj-transition) ease;\n}\n\n.mj-custom-select-trigger:focus {\n  border-bottom-color: var(--mj-accent);\n  background: var(--mj-accent-light);\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) 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);\n}\n\n.mj-fk-clear:hover {\n  color: var(--mj-error);\n  background: rgba(239, 68, 68, 0.08);\n}\n\n/* Matched state: solid accent underline */\n.mj-fk-search--matched .mj-forms-field-input {\n  border-bottom: 2px solid var(--mj-accent);\n}\n\n/* ============================================\n   FLOATING DROPDOWN PANEL (position: fixed via ngStyle)\n   ============================================ */\n.mj-fk-dropdown {\n  background: var(--mj-card-bg);\n  border: 1px solid var(--mj-border);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\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);\n  border-radius: 6px;\n}\n\n.mj-fk-option:hover {\n  background: var(--mj-accent-light);\n}\n\n.mj-fk-option--selected {\n  background: var(--mj-accent-light);\n  font-weight: 600;\n  color: var(--mj-accent);\n}\n\n.mj-fk-option--selected:hover {\n  background: rgba(102, 126, 234, 0.15);\n}\n\n@keyframes mj-dropdown-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes mj-dropdown-in-above {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* ============================================\n   SEARCH HIGHLIGHTING\n   ============================================ */\n.mj-forms-field-label :global(.mj-forms-search-highlight) {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 0;\n  border-radius: 2px;\n  font-weight: 700;\n  box-shadow: 0 0 0 2px #fef08a;\n}\n\n/* ============================================\n   VALIDATION ERROR STATE\n   ============================================ */\n.mj-forms-field--has-error .mj-forms-field-input {\n  border-bottom-color: var(--mj-error);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error .mj-forms-field-input:focus {\n  background: #fef2f2;\n  border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--has-error .mj-forms-field-input--textarea {\n  border-color: var(--mj-error);\n}\n\n.mj-forms-field--has-error .mj-forms-field-input--textarea:focus {\n  border-color: var(--mj-error);\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);\n}\n\n.mj-forms-field--has-error .mj-custom-select-trigger {\n  border-bottom-color: var(--mj-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-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-warning);\n  border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input:focus {\n  background: #fffbeb;\n  border-bottom-color: var(--mj-warning);\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input--textarea {\n  border-color: var(--mj-warning);\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input--textarea:focus {\n  border-color: var(--mj-warning);\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);\n}\n\n.mj-forms-field--has-warning .mj-custom-select-trigger {\n  border-bottom-color: var(--mj-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-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-error);\n}\n\n.mj-forms-field-validation--error .mj-forms-field-validation-item i {\n  color: var(--mj-error);\n}\n\n/* Warning message colors */\n.mj-forms-field-validation--warning .mj-forms-field-validation-item {\n  color: #b45309;\n}\n\n.mj-forms-field-validation--warning .mj-forms-field-validation-item i {\n  color: var(--mj-warning);\n}\n\n@keyframes mj-validation-slide-in {\n  from {\n    opacity: 0;\n    max-height: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    max-height: 100px;\n    transform: translateY(0);\n  }\n}\n\n/* ============================================\n   RESPONSIVE\n   ============================================ */\n@media (max-width: 640px) {\n  .mj-forms-field {\n    grid-template-columns: 1fr;\n    gap: 4px;\n  }\n\n  .mj-forms-field-label {\n    font-size: 12px;\n  }\n\n  .mj-forms-field-validation {\n    grid-column: 1;\n  }\n}\n"] }]
+    }], null, { Record: [{
+            type: Input
+        }], EditMode: [{
+            type: Input
+        }], FieldName: [{
+            type: Input
+        }], Type: [{
+            type: Input
+        }], LinkType: [{
+            type: Input
+        }], ShowLabel: [{
+            type: Input
+        }], FormContext: [{
+            type: Input
+        }], _deprecatedRecord: [{
+            type: Input,
+            args: ['record']
+        }], _deprecatedFormContext: [{
+            type: Input,
+            args: ['formContext']
+        }], HideWhenEmptyInReadOnlyMode: [{
+            type: Input
+        }], DisplayNameOverride: [{
+            type: Input
+        }], PossibleValuesOverride: [{
+            type: Input
+        }], ValueChange: [{
+            type: Output
+        }], Navigate: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjFormFieldComponent, { className: "MjFormFieldComponent", filePath: "src/lib/field/form-field.component.ts", lineNumber: 49 }); })();
+//# sourceMappingURL=form-field.component.js.map