@memberjunction/ng-dashboards 5.8.0 → 5.9.0

package/dist/Integration/components/visual-editor/visual-editor.component.js

@@ -0,0 +1,1538 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { IntegrationEngineBase } from '@memberjunction/integration-engine-base';
+import { IntegrationDataService } from '../../services/integration-data.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+const _forTrack0 = ($index, $item) => $item.Name;
+const _forTrack1 = ($index, $item) => $item.SourceFieldName + "-" + $item.DestFieldName;
+const _forTrack2 = ($index, $item) => $item.Value;
+function VisualFieldEditorComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 27)(1, "input", 28);
+    i0.ɵɵlistener("change", function VisualFieldEditorComponent_Conditional_12_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnToggleEditorSyncEnabled($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "span", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 30);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", ctx_r1.EntityMap.SyncEnabled ? "Sync enabled" : "Sync disabled");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.EntityMap.SyncEnabled);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.EntityMap.SyncEnabled ? "Sync On" : "Sync Off");
+} }
+function VisualFieldEditorComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 31);
+    i0.ɵɵtext(1, " Saving... ");
+} }
+function VisualFieldEditorComponent_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 32);
+    i0.ɵɵtext(1, " Save ");
+} }
+function VisualFieldEditorComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 22);
+    i0.ɵɵelement(1, "i", 33);
+    i0.ɵɵtext(2, " Saved ");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵtext(2, " Loading... ");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵtext(1, "No source data available");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r4 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(col_r4);
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_9_For_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 42);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r5 = ctx.$implicit;
+    const row_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", (row_r6[col_r5] == null ? null : row_r6[col_r5].toString()) ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(row_r6[col_r5] ?? "");
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵrepeaterCreate(1, VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_9_For_8_For_2_Template, 2, 2, "td", 42, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.PreviewSourceColumns);
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40)(1, "table", 41)(2, "thead")(3, "tr");
+    i0.ɵɵrepeaterCreate(4, VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_9_For_5_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "tbody");
+    i0.ɵɵrepeaterCreate(7, VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r1.PreviewSourceColumns);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.PreviewSourceRows);
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35);
+    i0.ɵɵelement(2, "i", 15);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 36);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_43_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ShowSourcePreview = false); });
+    i0.ɵɵelement(6, "i", 37);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(7, VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_7_Template, 3, 0, "div", 38)(8, VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_8_Template, 2, 0, "div", 39)(9, VisualFieldEditorComponent_Conditional_43_Conditional_1_Conditional_9_Template, 9, 0, "div", 40);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Source Preview: ", (ctx_r1.EntityMap == null ? null : ctx_r1.EntityMap.ExternalObjectLabel) ?? (ctx_r1.EntityMap == null ? null : ctx_r1.EntityMap.ExternalObjectName));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.PreviewSourceLoading ? 7 : ctx_r1.PreviewSourceRows.length === 0 ? 8 : 9);
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵtext(2, " Loading... ");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵtext(1, "No destination data available");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r8 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(col_r8);
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_9_For_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 42);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r9 = ctx.$implicit;
+    const row_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", (row_r10[col_r9] == null ? null : row_r10[col_r9].toString()) ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(row_r10[col_r9] ?? "");
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵrepeaterCreate(1, VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_9_For_8_For_2_Template, 2, 2, "td", 42, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.PreviewDestColumns);
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40)(1, "table", 41)(2, "thead")(3, "tr");
+    i0.ɵɵrepeaterCreate(4, VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_9_For_5_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "tbody");
+    i0.ɵɵrepeaterCreate(7, VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r1.PreviewDestColumns);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.PreviewDestRows);
+} }
+function VisualFieldEditorComponent_Conditional_43_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35);
+    i0.ɵɵelement(2, "i", 17);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 36);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_43_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ShowDestPreview = false); });
+    i0.ɵɵelement(6, "i", 37);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(7, VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_7_Template, 3, 0, "div", 38)(8, VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_8_Template, 2, 0, "div", 39)(9, VisualFieldEditorComponent_Conditional_43_Conditional_2_Conditional_9_Template, 9, 0, "div", 40);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Dest Preview: ", ctx_r1.EntityMap == null ? null : ctx_r1.EntityMap.Entity);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.PreviewDestLoading ? 7 : ctx_r1.PreviewDestRows.length === 0 ? 8 : 9);
+} }
+function VisualFieldEditorComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵconditionalCreate(1, VisualFieldEditorComponent_Conditional_43_Conditional_1_Template, 10, 2, "div", 34);
+    i0.ɵɵconditionalCreate(2, VisualFieldEditorComponent_Conditional_43_Conditional_2_Template, 10, 2, "div", 34);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowSourcePreview ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowDestPreview ? 2 : -1);
+} }
+function VisualFieldEditorComponent_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵtext(2, " Click a destination field to map from ");
+    i0.ɵɵelementStart(3, "strong");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 44);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_44_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelConnect()); });
+    i0.ɵɵtext(6, "Cancel");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.ConnectingFromSource);
+} }
+function VisualFieldEditorComponent_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Loading field mappings...");
+    i0.ɵɵelementEnd()();
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_8_For_26_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 78);
+    i0.ɵɵtext(1, "PK");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_8_For_26_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 79);
+    i0.ɵɵtext(1, "*");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_8_For_26_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_8_For_26_Template_div_click_0_listener($event) { const sf_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); ctx_r1.OnEditorSourceClick(sf_r15.Name); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "span", 75);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 76);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 77);
+    i0.ɵɵconditionalCreate(6, VisualFieldEditorComponent_Conditional_47_Conditional_8_For_26_Conditional_6_Template, 2, 0, "span", 78);
+    i0.ɵɵconditionalCreate(7, VisualFieldEditorComponent_Conditional_47_Conditional_8_For_26_Conditional_7_Template, 2, 0, "span", 79);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const sf_r15 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("height", ctx_r1.FIELD_HEIGHT, "px");
+    i0.ɵɵclassProp("mapped", ctx_r1.IsSourceFieldMapped(sf_r15.Name))("unmapped", !ctx_r1.IsSourceFieldMapped(sf_r15.Name))("connecting", ctx_r1.ConnectingFromSource === sf_r15.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", sf_r15.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(sf_r15.Label || sf_r15.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(sf_r15.Type);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(sf_r15.IsPrimaryKey ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(sf_r15.IsRequired ? 7 : -1);
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_8_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵtext(1, "No source fields found");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_8_For_30_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "path", 80);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_8_For_30_Template_path_click_0_listener($event) { const ɵ$index_296_r17 = i0.ɵɵrestoreView(_r16).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.SelectConnection(ɵ$index_296_r17, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "foreignObject", 81);
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(2, "div", 82);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_8_For_30_Template_div_click_2_listener($event) { const ɵ$index_296_r17 = i0.ɵɵrestoreView(_r16).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.SelectConnection(ɵ$index_296_r17, $event)); });
+    i0.ɵɵelement(3, "i");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const conn_r18 = ctx.$implicit;
+    const ɵ$index_296_r17 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap("ve-conn-line " + ctx_r1.GetConnectionLineClass(conn_r18));
+    i0.ɵɵclassProp("selected", ctx_r1.SelectedConnectionIdx === ɵ$index_296_r17);
+    i0.ɵɵattribute("d", ctx_r1.GetConnectionPath(conn_r18));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x", ctx_r1.SVG_WIDTH / 2 - 14)("y", ctx_r1.GetConnectionMidY(conn_r18) - 14);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("ve-conn-badge " + ctx_r1.GetConnectionBadgeClass(conn_r18));
+    i0.ɵɵclassProp("selected", ctx_r1.SelectedConnectionIdx === ɵ$index_296_r17);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.GetConnectionDirectionIcon(conn_r18));
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_8_For_33_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 79);
+    i0.ɵɵtext(1, "*");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_8_For_33_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_8_For_33_Template_div_click_0_listener($event) { const df_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); ctx_r1.OnEditorDestClick(df_r20.Name); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "span", 75);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 76);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 77);
+    i0.ɵɵconditionalCreate(6, VisualFieldEditorComponent_Conditional_47_Conditional_8_For_33_Conditional_6_Template, 2, 0, "span", 79);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const df_r20 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("height", ctx_r1.FIELD_HEIGHT, "px");
+    i0.ɵɵclassProp("mapped", ctx_r1.IsDestFieldMapped(df_r20.Name))("unmapped", !ctx_r1.IsDestFieldMapped(df_r20.Name))("connect-target", ctx_r1.ConnectingFromSource !== null);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", df_r20.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(df_r20.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(df_r20.Type);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(df_r20.IsRequired ? 6 : -1);
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_8_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵtext(1, "No destination fields found");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 51)(1, "div", 54)(2, "div", 55)(3, "div", 56);
+    i0.ɵɵelement(4, "i", 15);
+    i0.ɵɵtext(5, " Source Fields ");
+    i0.ɵɵelementStart(6, "span", 57);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(8, "div", 58);
+    i0.ɵɵelementStart(9, "div", 59);
+    i0.ɵɵelement(10, "i", 17);
+    i0.ɵɵtext(11, " MJ Entity Fields ");
+    i0.ɵɵelementStart(12, "span", 57);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(14, "div", 60)(15, "div", 61);
+    i0.ɵɵelement(16, "i", 62);
+    i0.ɵɵelementStart(17, "input", 63);
+    i0.ɵɵlistener("input", function VisualFieldEditorComponent_Conditional_47_Conditional_8_Template_input_input_17_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.EditorSearchSource = $event.target.value); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(18, "div", 64);
+    i0.ɵɵelementStart(19, "div", 61);
+    i0.ɵɵelement(20, "i", 62);
+    i0.ɵɵelementStart(21, "input", 65);
+    i0.ɵɵlistener("input", function VisualFieldEditorComponent_Conditional_47_Conditional_8_Template_input_input_21_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.EditorSearchDest = $event.target.value); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(22, "div", 66);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_8_Template_div_click_22_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.DeselectConnection()); });
+    i0.ɵɵelementStart(23, "div", 67)(24, "div", 68);
+    i0.ɵɵrepeaterCreate(25, VisualFieldEditorComponent_Conditional_47_Conditional_8_For_26_Template, 8, 13, "div", 69, _forTrack0);
+    i0.ɵɵconditionalCreate(27, VisualFieldEditorComponent_Conditional_47_Conditional_8_Conditional_27_Template, 2, 0, "div", 70);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(28, "svg", 71);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_8_Template_svg_click_28_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵrepeaterCreate(29, VisualFieldEditorComponent_Conditional_47_Conditional_8_For_30_Template, 4, 13, null, null, _forTrack1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(31, "div", 72);
+    i0.ɵɵrepeaterCreate(32, VisualFieldEditorComponent_Conditional_47_Conditional_8_For_33_Template, 7, 12, "div", 73, _forTrack0);
+    i0.ɵɵconditionalCreate(34, VisualFieldEditorComponent_Conditional_47_Conditional_8_Conditional_34_Template, 2, 0, "div", 70);
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorSourceFields.length);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorDestFields.length);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.EditorSearchSource);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.EditorSearchDest);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("min-height", ctx_r1.EditorCanvasHeight, "px");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.FilteredEditorSourceFields);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.FilteredEditorSourceFields.length === 0 ? 27 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("width", ctx_r1.SVG_WIDTH)("height", ctx_r1.EditorCanvasHeight)("viewBox", "0 0 " + ctx_r1.SVG_WIDTH + " " + ctx_r1.EditorCanvasHeight);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.VisibleConnections);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.FilteredEditorDestFields);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.FilteredEditorDestFields.length === 0 ? 34 : -1);
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵtext(2, " Loading stats... ");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_14_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 85)(1, "div", 97);
+    i0.ɵɵelement(2, "i", 48);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 87)(4, "span", 88);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 89);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.SyncStatusClass(ctx_r1.InfoLastSync.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-circle-check", ctx_r1.InfoLastSync.Status === "Success")("fa-circle-xmark", ctx_r1.InfoLastSync.Status === "Failed")("fa-spinner", ctx_r1.InfoLastSync.Status === "In Progress")("fa-clock", ctx_r1.InfoLastSync.Status === "Pending");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.InfoLastSync.Status);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.InfoLastSync.TotalRecords, " records processed");
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_14_Conditional_2_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 94)(1, "span", 95);
+    i0.ɵɵtext(2, "Match Strategy");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 96);
+    i0.ɵɵtext(4, "Configured");
+    i0.ɵɵelementEnd()();
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 86);
+    i0.ɵɵelement(3, "i", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 87)(5, "span", 88);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 89);
+    i0.ɵɵtext(8, "MJ Records");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "div", 85)(10, "div", 90);
+    i0.ɵɵelement(11, "i", 15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "div", 87)(13, "span", 88);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "span", 89);
+    i0.ɵɵtext(16, "Source Fields");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(17, "div", 85)(18, "div", 91);
+    i0.ɵɵelement(19, "i", 92);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 87)(21, "span", 88);
+    i0.ɵɵtext(22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "span", 89);
+    i0.ɵɵtext(24, "Last Sync");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(25, VisualFieldEditorComponent_Conditional_47_Conditional_14_Conditional_2_Conditional_25_Template, 8, 11, "div", 85);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "div", 93)(27, "div", 94)(28, "span", 95);
+    i0.ɵɵtext(29, "Sync Direction");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "span", 96);
+    i0.ɵɵtext(31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(32, "div", 94)(33, "span", 95);
+    i0.ɵɵtext(34, "Conflict Resolution");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(35, "span", 96);
+    i0.ɵɵtext(36);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(37, "div", 94)(38, "span", 95);
+    i0.ɵɵtext(39, "Delete Behavior");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(40, "span", 96);
+    i0.ɵɵtext(41);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(42, "div", 94)(43, "span", 95);
+    i0.ɵɵtext(44, "Priority");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(45, "span", 96);
+    i0.ɵɵtext(46);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(47, VisualFieldEditorComponent_Conditional_47_Conditional_14_Conditional_2_Conditional_47_Template, 5, 0, "div", 94);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.InfoDestRecordCount ?? "-");
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorSourceFields.length);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatSyncDate((ctx_r1.InfoLastSync == null ? null : ctx_r1.InfoLastSync.StartedAt) ?? null));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.InfoLastSync ? 25 : -1);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.EntityMap == null ? null : ctx_r1.EntityMap.SyncDirection);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.EntityMap == null ? null : ctx_r1.EntityMap.ConflictResolution);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.EntityMap == null ? null : ctx_r1.EntityMap.DeleteBehavior);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.EntityMap == null ? null : ctx_r1.EntityMap.Priority);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r1.EntityMap == null ? null : ctx_r1.EntityMap.MatchStrategy) ? 47 : -1);
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵconditionalCreate(1, VisualFieldEditorComponent_Conditional_47_Conditional_14_Conditional_1_Template, 3, 0, "div", 83)(2, VisualFieldEditorComponent_Conditional_47_Conditional_14_Conditional_2_Template, 48, 9);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.InfoPanelLoading ? 1 : 2);
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_15_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 32);
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_15_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 32);
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 125);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tt_r24 = ctx.$implicit;
+    const step_r25 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", tt_r24.Value)("selected", tt_r24.Value === step_r25.Type);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(tt_r24.Label);
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 133)(1, "label");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 134);
+    i0.ɵɵlistener("input", function VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_Conditional_9_For_2_Template_input_input_3_listener($event) { const key_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ɵ$index_521_r23 = i0.ɵɵnextContext(2).$index; const conn_r28 = i0.ɵɵnextContext(); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(conn_r28, ɵ$index_521_r23, key_r27, $event.target.value)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const key_r27 = ctx.$implicit;
+    const step_r25 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(key_r27);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("placeholder", i0.ɵɵinterpolate(key_r27))("value", ctx_r1.GetConfigValue(step_r25, key_r27));
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 127);
+    i0.ɵɵrepeaterCreate(1, VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_Conditional_9_For_2_Template, 4, 4, "div", 133, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const step_r25 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.GetConfigKeys(step_r25));
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 117)(1, "div", 122)(2, "span", 123);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "select", 124);
+    i0.ɵɵlistener("change", function VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_Template_select_change_4_listener($event) { const ɵ$index_521_r23 = i0.ɵɵrestoreView(_r22).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnConnectionTransformChange(ɵ$index_521_r23, $event.target.value)); });
+    i0.ɵɵrepeaterCreate(5, VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_For_6_Template, 2, 3, "option", 125, _forTrack2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 126);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_Template_button_click_7_listener() { const ɵ$index_521_r23 = i0.ɵɵrestoreView(_r22).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.RemoveTransformStep(ɵ$index_521_r23)); });
+    i0.ɵɵelement(8, "i", 121);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(9, VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_Conditional_9_Template, 3, 0, "div", 127);
+    i0.ɵɵelementStart(10, "div", 128)(11, "label");
+    i0.ɵɵtext(12, "On Error:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "select", 129);
+    i0.ɵɵlistener("change", function VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_Template_select_change_13_listener($event) { const step_r25 = i0.ɵɵrestoreView(_r22).$implicit; const conn_r28 = i0.ɵɵnextContext(); step_r25.OnError = $event.target.value; return i0.ɵɵresetView(conn_r28.IsDirty = true); });
+    i0.ɵɵelementStart(14, "option", 130);
+    i0.ɵɵtext(15, "Fail");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "option", 131);
+    i0.ɵɵtext(17, "Skip");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "option", 132);
+    i0.ɵɵtext(19, "Null");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const step_r25 = ctx.$implicit;
+    const ɵ$index_521_r23 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ɵ$index_521_r23 + 1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", step_r25.Type);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.TRANSFORM_TYPES);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(step_r25.Type !== "direct" ? 9 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", step_r25.OnError);
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_15_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 118);
+    i0.ɵɵtext(1, " No transform steps. Data passes through as-is. ");
+    i0.ɵɵelementEnd();
+} }
+function VisualFieldEditorComponent_Conditional_47_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 98);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_15_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r21); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 99)(2, "span", 100);
+    i0.ɵɵtext(3, "Mapping Details");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 101);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_15_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.DeselectConnection()); });
+    i0.ɵɵelement(5, "i", 37);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 102)(7, "div", 103)(8, "span", 104);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(10, "i", 105);
+    i0.ɵɵelementStart(11, "span", 106);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(13, "div", 107)(14, "label", 108);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_15_Template_label_click_14_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleConnectionKey()); });
+    i0.ɵɵelementStart(15, "span", 109);
+    i0.ɵɵconditionalCreate(16, VisualFieldEditorComponent_Conditional_47_Conditional_15_Conditional_16_Template, 1, 0, "i", 32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "span");
+    i0.ɵɵtext(18, "Key Field");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "label", 108);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_15_Template_label_click_19_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleConnectionRequired()); });
+    i0.ɵɵelementStart(20, "span", 109);
+    i0.ɵɵconditionalCreate(21, VisualFieldEditorComponent_Conditional_47_Conditional_15_Conditional_21_Template, 1, 0, "i", 32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "span");
+    i0.ɵɵtext(23, "Required");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(24, "div", 110)(25, "label", 111);
+    i0.ɵɵtext(26, "Direction");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "div", 112)(28, "button", 113);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_15_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnConnectionDirectionChange("SourceToDest")); });
+    i0.ɵɵtext(29, " Source \u2192 Dest ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "button", 113);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_15_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnConnectionDirectionChange("DestToSource")); });
+    i0.ɵɵtext(31, " Dest \u2192 Source ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "button", 113);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_15_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnConnectionDirectionChange("Both")); });
+    i0.ɵɵtext(33, " Both ");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(34, "div", 110)(35, "div", 114)(36, "label", 111);
+    i0.ɵɵtext(37, "Transform Pipeline");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(38, "button", 115);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_15_Template_button_click_38_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.AddTransformStep()); });
+    i0.ɵɵelement(39, "i", 116);
+    i0.ɵɵtext(40, " Add Step ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(41, VisualFieldEditorComponent_Conditional_47_Conditional_15_For_42_Template, 20, 4, "div", 117, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵconditionalCreate(43, VisualFieldEditorComponent_Conditional_47_Conditional_15_Conditional_43_Template, 2, 0, "div", 118);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(44, "div", 119)(45, "button", 120);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Conditional_15_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RemoveSelectedConnection()); });
+    i0.ɵɵelement(46, "i", 121);
+    i0.ɵɵtext(47, " Remove Mapping ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const conn_r28 = ctx;
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(conn_r28.SourceFieldName);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-arrow-right", conn_r28.Direction === "SourceToDest")("fa-arrow-left", conn_r28.Direction === "DestToSource")("fa-right-left", conn_r28.Direction === "Both");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(conn_r28.DestFieldName);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", conn_r28.IsKeyField);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(conn_r28.IsKeyField ? 16 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("active", conn_r28.IsRequired);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(conn_r28.IsRequired ? 21 : -1);
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("active", conn_r28.Direction === "SourceToDest");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", conn_r28.Direction === "DestToSource");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", conn_r28.Direction === "Both");
+    i0.ɵɵadvance(9);
+    i0.ɵɵrepeater(conn_r28.TransformSteps);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(conn_r28.TransformSteps.length === 0 ? 43 : -1);
+} }
+function VisualFieldEditorComponent_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45)(1, "div", 46)(2, "div", 47);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleFieldMaps()); });
+    i0.ɵɵelement(3, "i", 48);
+    i0.ɵɵelementStart(4, "span", 49);
+    i0.ɵɵtext(5, "Field Mappings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 50);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(8, VisualFieldEditorComponent_Conditional_47_Conditional_8_Template, 35, 11, "div", 51);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 46)(10, "div", 47);
+    i0.ɵɵlistener("click", function VisualFieldEditorComponent_Conditional_47_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleInfoPanel()); });
+    i0.ɵɵelement(11, "i", 48);
+    i0.ɵɵelementStart(12, "span", 49);
+    i0.ɵɵtext(13, "Sync Info");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(14, VisualFieldEditorComponent_Conditional_47_Conditional_14_Template, 3, 1, "div", 52);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(15, VisualFieldEditorComponent_Conditional_47_Conditional_15_Template, 48, 21, "div", 53);
+} if (rf & 2) {
+    let tmp_10_0;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("collapsed", !ctx_r1.FieldMapsExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.FieldMapsExpanded)("fa-chevron-right", !ctx_r1.FieldMapsExpanded);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("", ctx_r1.EditorMappedCount, " mapped");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.FieldMapsExpanded ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("collapsed", !ctx_r1.InfoPanelExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.InfoPanelExpanded)("fa-chevron-right", !ctx_r1.InfoPanelExpanded);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.InfoPanelExpanded ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_10_0 = ctx_r1.SelectedConnection) ? 15 : -1, tmp_10_0);
+} }
+export class VisualFieldEditorComponent {
+    // ---------------------------------------------------------------------------
+    // Inputs / Outputs
+    // ---------------------------------------------------------------------------
+    EntityMap = null;
+    CompanyIntegrationID = null;
+    RunViewProvider = null;
+    Close = new EventEmitter();
+    // ---------------------------------------------------------------------------
+    // Visual Editor state (copied from PipelinesComponent)
+    // ---------------------------------------------------------------------------
+    EditorSourceFields = [];
+    EditorDestFields = [];
+    EditorConnections = [];
+    EditorLoading = false;
+    EditorSaving = false;
+    EditorSaveSuccess = false;
+    SelectedConnectionIdx = null;
+    ConnectingFromSource = null;
+    EditorSearchSource = '';
+    EditorSearchDest = '';
+    ShowSourcePreview = false;
+    ShowDestPreview = false;
+    PreviewSourceLoading = false;
+    PreviewDestLoading = false;
+    PreviewSourceRows = [];
+    PreviewDestRows = [];
+    PreviewSourceColumns = [];
+    PreviewDestColumns = [];
+    FieldMapsExpanded = true;
+    InfoPanelExpanded = false;
+    InfoPanelLoading = false;
+    InfoDestRecordCount = null;
+    InfoLastSync = null;
+    FIELD_HEIGHT = 40;
+    SVG_WIDTH = 200;
+    TRANSFORM_TYPES = [
+        { Value: 'direct', Label: 'Direct', Icon: 'fa-solid fa-arrow-right' },
+        { Value: 'regex', Label: 'Regex', Icon: 'fa-solid fa-code' },
+        { Value: 'split', Label: 'Split', Icon: 'fa-solid fa-scissors' },
+        { Value: 'combine', Label: 'Combine', Icon: 'fa-solid fa-object-group' },
+        { Value: 'lookup', Label: 'Lookup', Icon: 'fa-solid fa-book' },
+        { Value: 'format', Label: 'Format', Icon: 'fa-solid fa-font' },
+        { Value: 'coerce', Label: 'Coerce', Icon: 'fa-solid fa-exchange-alt' },
+        { Value: 'substring', Label: 'Substring', Icon: 'fa-solid fa-text-width' },
+        { Value: 'custom', Label: 'Custom', Icon: 'fa-solid fa-wand-magic-sparkles' }
+    ];
+    dataService = inject(IntegrationDataService);
+    cdr = inject(ChangeDetectorRef);
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    ngOnChanges(changes) {
+        if (changes['EntityMap'] && this.EntityMap && this.CompanyIntegrationID) {
+            this.openEditor();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Open / Close
+    // ---------------------------------------------------------------------------
+    openEditor() {
+        this.SelectedConnectionIdx = null;
+        this.ConnectingFromSource = null;
+        this.EditorSearchSource = '';
+        this.EditorSearchDest = '';
+        this.EditorSaveSuccess = false;
+        this.ShowSourcePreview = false;
+        this.ShowDestPreview = false;
+        this.PreviewSourceRows = [];
+        this.PreviewDestRows = [];
+        this.PreviewSourceColumns = [];
+        this.PreviewDestColumns = [];
+        this.FieldMapsExpanded = true;
+        this.InfoPanelExpanded = false;
+        this.InfoDestRecordCount = null;
+        this.InfoLastSync = null;
+        this.cdr.detectChanges();
+        this.LoadVisualEditorData();
+    }
+    OnClose() {
+        this.Close.emit();
+    }
+    // ---------------------------------------------------------------------------
+    // SyncEnabled toggle
+    // ---------------------------------------------------------------------------
+    async OnToggleEditorSyncEnabled(event) {
+        if (!this.EntityMap)
+            return;
+        const checkbox = event.target;
+        const newValue = checkbox.checked;
+        this.EntityMap.SyncEnabled = newValue;
+        this.cdr.detectChanges();
+        try {
+            await this.dataService.ToggleEntityMapEnabled(this.EntityMap.ID, newValue);
+        }
+        catch (err) {
+            this.EntityMap.SyncEnabled = !newValue;
+            checkbox.checked = !newValue;
+            console.error('[VisualFieldEditor] Failed to toggle SyncEnabled:', err);
+            this.cdr.detectChanges();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Data loading
+    // ---------------------------------------------------------------------------
+    async LoadVisualEditorData() {
+        if (!this.EntityMap || !this.CompanyIntegrationID)
+            return;
+        this.EditorLoading = true;
+        this.cdr.detectChanges();
+        const entityMap = this.EntityMap;
+        try {
+            const [fieldMaps, destFields] = await Promise.all([
+                this.dataService.LoadFieldMaps(entityMap.ID, this.RunViewProvider),
+                this.dataService.LoadEntityFields(entityMap.EntityID, this.RunViewProvider)
+            ]);
+            const sourceFields = this.resolveSourceFieldsFromMetadata(this.CompanyIntegrationID, entityMap.ExternalObjectName);
+            if (sourceFields.length > 0) {
+                this.EditorSourceFields = sourceFields;
+            }
+            else {
+                this.EditorSourceFields = fieldMaps.map(fm => ({
+                    Name: fm.SourceFieldName,
+                    Label: fm.SourceFieldLabel ?? fm.SourceFieldName,
+                    Type: '',
+                    IsRequired: fm.IsRequired,
+                    IsPrimaryKey: fm.IsKeyField
+                }));
+            }
+            this.EditorDestFields = destFields
+                .filter(f => !f.Name.startsWith('__mj'))
+                .map(f => ({
+                Name: f.Name,
+                Type: f.Type,
+                IsRequired: f.IsRequired
+            }));
+            this.EditorConnections = fieldMaps
+                .filter(fm => fm.Status === 'Active')
+                .map(fm => ({
+                ID: fm.ID,
+                SourceFieldName: fm.SourceFieldName,
+                DestFieldName: fm.DestinationFieldName,
+                IsKeyField: fm.IsKeyField,
+                IsRequired: fm.IsRequired,
+                Direction: fm.Direction,
+                TransformSteps: this.parseTransformPipeline(fm.TransformPipeline),
+                IsDirty: false,
+                IsNew: false,
+                MarkedForDelete: false
+            }));
+        }
+        catch (err) {
+            console.error('[VisualFieldEditor] Failed to load editor data:', err);
+        }
+        finally {
+            this.EditorLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Filtered field lists
+    // ---------------------------------------------------------------------------
+    get FilteredEditorSourceFields() {
+        if (!this.EditorSearchSource.trim())
+            return this.EditorSourceFields;
+        const term = this.EditorSearchSource.toLowerCase();
+        return this.EditorSourceFields.filter(f => f.Name.toLowerCase().includes(term) || f.Label.toLowerCase().includes(term));
+    }
+    get FilteredEditorDestFields() {
+        if (!this.EditorSearchDest.trim())
+            return this.EditorDestFields;
+        const term = this.EditorSearchDest.toLowerCase();
+        return this.EditorDestFields.filter(f => f.Name.toLowerCase().includes(term));
+    }
+    get VisibleConnections() {
+        return this.EditorConnections.filter(c => !c.MarkedForDelete &&
+            this.getSourceFieldIndex(c.SourceFieldName) >= 0 &&
+            this.getDestFieldIndex(c.DestFieldName) >= 0);
+    }
+    // ---------------------------------------------------------------------------
+    // SVG Calculations
+    // ---------------------------------------------------------------------------
+    get EditorCanvasHeight() {
+        const sourceHeight = this.FilteredEditorSourceFields.length * this.FIELD_HEIGHT;
+        const destHeight = this.FilteredEditorDestFields.length * this.FIELD_HEIGHT;
+        return Math.max(sourceHeight, destHeight, 200);
+    }
+    GetConnectionPath(conn) {
+        const sourceY = this.getSourceFieldY(conn.SourceFieldName);
+        const destY = this.getDestFieldY(conn.DestFieldName);
+        if (sourceY < 0 || destY < 0)
+            return '';
+        const cp1x = this.SVG_WIDTH * 0.35;
+        const cp2x = this.SVG_WIDTH * 0.65;
+        return `M 0 ${sourceY} C ${cp1x} ${sourceY}, ${cp2x} ${destY}, ${this.SVG_WIDTH} ${destY}`;
+    }
+    GetConnectionMidY(conn) {
+        const sourceY = this.getSourceFieldY(conn.SourceFieldName);
+        const destY = this.getDestFieldY(conn.DestFieldName);
+        return (sourceY + destY) / 2;
+    }
+    GetConnectionLineClass(conn) {
+        return `conn-${this.getPrimaryTransformType(conn)}`;
+    }
+    GetConnectionBadgeClass(conn) {
+        return `badge-${this.getPrimaryTransformType(conn)}`;
+    }
+    GetConnectionTransformIcon(conn) {
+        const type = this.getPrimaryTransformType(conn);
+        return this.TRANSFORM_TYPES.find(t => t.Value === type)?.Icon ?? 'fa-solid fa-arrow-right';
+    }
+    GetConnectionDirectionIcon(conn) {
+        switch (conn.Direction) {
+            case 'DestToSource': return 'fa-solid fa-arrow-left';
+            case 'Both': return 'fa-solid fa-right-left';
+            default: return 'fa-solid fa-arrow-right';
+        }
+    }
+    GetTransformTypeLabel(type) {
+        return this.TRANSFORM_TYPES.find(t => t.Value === type)?.Label ?? type;
+    }
+    // ---------------------------------------------------------------------------
+    // Field mapped state
+    // ---------------------------------------------------------------------------
+    IsSourceFieldMapped(fieldName) {
+        return this.EditorConnections.some(c => !c.MarkedForDelete && c.SourceFieldName === fieldName);
+    }
+    IsDestFieldMapped(fieldName) {
+        return this.EditorConnections.some(c => !c.MarkedForDelete && c.DestFieldName === fieldName);
+    }
+    // ---------------------------------------------------------------------------
+    // Creating connections
+    // ---------------------------------------------------------------------------
+    OnEditorSourceClick(fieldName) {
+        if (this.IsSourceFieldMapped(fieldName))
+            return;
+        if (this.ConnectingFromSource === fieldName) {
+            this.ConnectingFromSource = null;
+        }
+        else {
+            this.ConnectingFromSource = fieldName;
+            this.SelectedConnectionIdx = null;
+        }
+        this.cdr.detectChanges();
+    }
+    OnEditorDestClick(fieldName) {
+        if (!this.ConnectingFromSource)
+            return;
+        if (this.IsDestFieldMapped(fieldName))
+            return;
+        const existing = this.EditorConnections.find(c => !c.MarkedForDelete && c.SourceFieldName === this.ConnectingFromSource && c.DestFieldName === fieldName);
+        if (existing) {
+            this.ConnectingFromSource = null;
+            return;
+        }
+        this.EditorConnections.push({
+            ID: null,
+            SourceFieldName: this.ConnectingFromSource,
+            DestFieldName: fieldName,
+            IsKeyField: false,
+            IsRequired: false,
+            Direction: 'SourceToDest',
+            TransformSteps: [{ Type: 'direct', Config: {}, OnError: 'Fail' }],
+            IsDirty: true,
+            IsNew: true,
+            MarkedForDelete: false
+        });
+        this.ConnectingFromSource = null;
+        this.SelectedConnectionIdx = this.EditorConnections.length - 1;
+        this.cdr.detectChanges();
+    }
+    CancelConnect() {
+        this.ConnectingFromSource = null;
+        this.cdr.detectChanges();
+    }
+    // ---------------------------------------------------------------------------
+    // Connection selection / editing
+    // ---------------------------------------------------------------------------
+    SelectConnection(index, event) {
+        event.stopPropagation();
+        this.SelectedConnectionIdx = this.SelectedConnectionIdx === index ? null : index;
+        this.ConnectingFromSource = null;
+        this.cdr.detectChanges();
+    }
+    DeselectConnection() {
+        this.SelectedConnectionIdx = null;
+        this.cdr.detectChanges();
+    }
+    get SelectedConnection() {
+        if (this.SelectedConnectionIdx == null)
+            return null;
+        return this.EditorConnections[this.SelectedConnectionIdx] ?? null;
+    }
+    RemoveSelectedConnection() {
+        if (this.SelectedConnectionIdx == null)
+            return;
+        const conn = this.EditorConnections[this.SelectedConnectionIdx];
+        if (conn.IsNew) {
+            this.EditorConnections.splice(this.SelectedConnectionIdx, 1);
+        }
+        else {
+            conn.MarkedForDelete = true;
+            conn.IsDirty = true;
+        }
+        this.SelectedConnectionIdx = null;
+        this.cdr.detectChanges();
+    }
+    ToggleConnectionKey() {
+        const conn = this.SelectedConnection;
+        if (!conn)
+            return;
+        conn.IsKeyField = !conn.IsKeyField;
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    ToggleConnectionRequired() {
+        const conn = this.SelectedConnection;
+        if (!conn)
+            return;
+        conn.IsRequired = !conn.IsRequired;
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    GetDirectionArrowClass(direction) {
+        switch (direction) {
+            case 'DestToSource': return 'fa-arrow-left';
+            case 'Both': return 'fa-right-left';
+            default: return 'fa-arrow-right';
+        }
+    }
+    OnConnectionDirectionChange(direction) {
+        const conn = this.SelectedConnection;
+        if (!conn)
+            return;
+        conn.Direction = direction;
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    OnConnectionTransformChange(stepIndex, type) {
+        const conn = this.SelectedConnection;
+        if (!conn || !conn.TransformSteps[stepIndex])
+            return;
+        conn.TransformSteps[stepIndex].Type = type;
+        conn.TransformSteps[stepIndex].Config = this.getDefaultConfigForType(type);
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    OnTransformConfigChange(conn, stepIndex, key, value) {
+        if (!conn.TransformSteps[stepIndex])
+            return;
+        conn.TransformSteps[stepIndex].Config[key] = value;
+        conn.IsDirty = true;
+    }
+    AddTransformStep() {
+        const conn = this.SelectedConnection;
+        if (!conn)
+            return;
+        conn.TransformSteps.push({ Type: 'direct', Config: {}, OnError: 'Fail' });
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    RemoveTransformStep(stepIndex) {
+        const conn = this.SelectedConnection;
+        if (!conn)
+            return;
+        conn.TransformSteps.splice(stepIndex, 1);
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    // ---------------------------------------------------------------------------
+    // Data preview
+    // ---------------------------------------------------------------------------
+    async ToggleSourcePreview() {
+        this.ShowSourcePreview = !this.ShowSourcePreview;
+        if (this.ShowSourcePreview && this.PreviewSourceRows.length === 0) {
+            await this.loadSourcePreview();
+        }
+        this.cdr.detectChanges();
+    }
+    async ToggleDestPreview() {
+        this.ShowDestPreview = !this.ShowDestPreview;
+        if (this.ShowDestPreview && this.PreviewDestRows.length === 0) {
+            await this.loadDestPreview();
+        }
+        this.cdr.detectChanges();
+    }
+    async loadSourcePreview() {
+        if (!this.EntityMap || !this.CompanyIntegrationID)
+            return;
+        this.PreviewSourceLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const rows = await this.dataService.PreviewSourceData(this.CompanyIntegrationID, this.EntityMap.ExternalObjectName, 5);
+            this.PreviewSourceRows = rows;
+            this.PreviewSourceColumns = rows.length > 0 ? Object.keys(rows[0]) : [];
+        }
+        catch (err) {
+            console.error('[VisualFieldEditor] Failed to load source preview:', err);
+            this.PreviewSourceRows = [];
+            this.PreviewSourceColumns = [];
+        }
+        finally {
+            this.PreviewSourceLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    async loadDestPreview() {
+        if (!this.EntityMap)
+            return;
+        this.PreviewDestLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const rows = await this.dataService.PreviewDestinationData(this.EntityMap.EntityID, 5, this.RunViewProvider);
+            this.PreviewDestRows = rows;
+            this.PreviewDestColumns = rows.length > 0 ? Object.keys(rows[0]) : [];
+        }
+        catch (err) {
+            console.error('[VisualFieldEditor] Failed to load dest preview:', err);
+            this.PreviewDestRows = [];
+            this.PreviewDestColumns = [];
+        }
+        finally {
+            this.PreviewDestLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Collapsible sections
+    // ---------------------------------------------------------------------------
+    ToggleFieldMaps() {
+        this.FieldMapsExpanded = !this.FieldMapsExpanded;
+        this.cdr.detectChanges();
+    }
+    ToggleInfoPanel() {
+        this.InfoPanelExpanded = !this.InfoPanelExpanded;
+        if (this.InfoPanelExpanded && this.InfoDestRecordCount === null) {
+            this.loadInfoPanelData();
+        }
+        this.cdr.detectChanges();
+    }
+    async loadInfoPanelData() {
+        if (!this.EntityMap || !this.CompanyIntegrationID)
+            return;
+        this.InfoPanelLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const [destCount, lastSync] = await Promise.all([
+                this.dataService.GetDestinationRecordCount(this.EntityMap.EntityID, this.RunViewProvider),
+                this.dataService.GetLastSyncForEntity(this.CompanyIntegrationID, this.EntityMap.EntityID, this.RunViewProvider)
+            ]);
+            this.InfoDestRecordCount = destCount;
+            this.InfoLastSync = lastSync;
+        }
+        catch (err) {
+            console.error('[VisualFieldEditor] Failed to load info panel data:', err);
+        }
+        finally {
+            this.InfoPanelLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    FormatSyncDate(dateStr) {
+        if (!dateStr)
+            return 'Never';
+        const d = new Date(dateStr);
+        const now = new Date();
+        const diffMs = now.getTime() - d.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        if (diffMins < 1)
+            return 'Just now';
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        const diffHours = Math.floor(diffMins / 60);
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        const diffDays = Math.floor(diffHours / 24);
+        if (diffDays < 7)
+            return `${diffDays}d ago`;
+        return d.toLocaleDateString();
+    }
+    SyncStatusClass(status) {
+        switch (status) {
+            case 'Success': return 'info-status-success';
+            case 'Failed': return 'info-status-error';
+            case 'In Progress': return 'info-status-running';
+            default: return 'info-status-pending';
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Save / Auto-map
+    // ---------------------------------------------------------------------------
+    get HasEditorChanges() {
+        return this.EditorConnections.some(c => c.IsDirty);
+    }
+    async SaveVisualEditor() {
+        if (!this.EntityMap)
+            return;
+        this.EditorSaving = true;
+        this.EditorSaveSuccess = false;
+        this.cdr.detectChanges();
+        try {
+            for (const conn of this.EditorConnections) {
+                if (!conn.IsDirty)
+                    continue;
+                if (conn.MarkedForDelete && conn.ID) {
+                    await this.dataService.DeleteFieldMap(conn.ID);
+                }
+                else if (conn.IsNew && !conn.MarkedForDelete) {
+                    await this.dataService.CreateFieldMap({
+                        EntityMapID: this.EntityMap.ID,
+                        SourceFieldName: conn.SourceFieldName,
+                        DestinationFieldName: conn.DestFieldName,
+                        IsKeyField: conn.IsKeyField,
+                        IsRequired: conn.IsRequired,
+                        Direction: conn.Direction,
+                        TransformPipeline: this.serializeTransformPipeline(conn.TransformSteps)
+                    });
+                }
+                else if (conn.ID && !conn.MarkedForDelete) {
+                    await this.dataService.UpdateFieldMap(conn.ID, {
+                        SourceFieldName: conn.SourceFieldName,
+                        DestinationFieldName: conn.DestFieldName,
+                        IsKeyField: conn.IsKeyField,
+                        IsRequired: conn.IsRequired,
+                        Direction: conn.Direction,
+                        TransformPipeline: this.serializeTransformPipeline(conn.TransformSteps)
+                    });
+                }
+            }
+            await this.LoadVisualEditorData();
+            this.EditorSaveSuccess = true;
+            this.SelectedConnectionIdx = null;
+        }
+        catch (err) {
+            console.error('[VisualFieldEditor] Failed to save field mappings:', err);
+        }
+        finally {
+            this.EditorSaving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    async AutoMapEditorFields() {
+        if (!this.EntityMap || !this.CompanyIntegrationID)
+            return;
+        const destMap = new Map();
+        for (const df of this.EditorDestFields) {
+            destMap.set(df.Name.toLowerCase(), df);
+        }
+        let addedCount = 0;
+        for (const sf of this.EditorSourceFields) {
+            if (this.IsSourceFieldMapped(sf.Name))
+                continue;
+            const destMatch = destMap.get(sf.Name.toLowerCase());
+            if (!destMatch)
+                continue;
+            if (this.IsDestFieldMapped(destMatch.Name))
+                continue;
+            this.EditorConnections.push({
+                ID: null,
+                SourceFieldName: sf.Name,
+                DestFieldName: destMatch.Name,
+                IsKeyField: sf.IsPrimaryKey,
+                IsRequired: sf.IsRequired || destMatch.IsRequired,
+                Direction: 'SourceToDest',
+                TransformSteps: [{ Type: 'direct', Config: {}, OnError: 'Fail' }],
+                IsDirty: true,
+                IsNew: true,
+                MarkedForDelete: false
+            });
+            addedCount++;
+        }
+        if (addedCount > 0) {
+            this.cdr.detectChanges();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Computed props
+    // ---------------------------------------------------------------------------
+    get EditorMappedCount() {
+        return this.EditorConnections.filter(c => !c.MarkedForDelete).length;
+    }
+    get EditorKeyFieldCount() {
+        return this.EditorConnections.filter(c => !c.MarkedForDelete && c.IsKeyField).length;
+    }
+    get EditorRequiredCount() {
+        return this.EditorConnections.filter(c => !c.MarkedForDelete && c.IsRequired).length;
+    }
+    GetConfigKeys(step) {
+        return Object.keys(step.Config);
+    }
+    GetConfigValue(step, key) {
+        const val = step.Config[key];
+        if (val == null)
+            return '';
+        if (typeof val === 'object')
+            return JSON.stringify(val);
+        return String(val);
+    }
+    // ---------------------------------------------------------------------------
+    // Private helpers
+    // ---------------------------------------------------------------------------
+    getSourceFieldIndex(fieldName) {
+        return this.FilteredEditorSourceFields.findIndex(f => f.Name === fieldName);
+    }
+    getDestFieldIndex(fieldName) {
+        return this.FilteredEditorDestFields.findIndex(f => f.Name === fieldName);
+    }
+    getSourceFieldY(fieldName) {
+        const idx = this.getSourceFieldIndex(fieldName);
+        if (idx < 0)
+            return -1;
+        return idx * this.FIELD_HEIGHT + this.FIELD_HEIGHT / 2;
+    }
+    getDestFieldY(fieldName) {
+        const idx = this.getDestFieldIndex(fieldName);
+        if (idx < 0)
+            return -1;
+        return idx * this.FIELD_HEIGHT + this.FIELD_HEIGHT / 2;
+    }
+    getPrimaryTransformType(conn) {
+        if (conn.TransformSteps.length === 0)
+            return 'direct';
+        return conn.TransformSteps[0].Type;
+    }
+    parseTransformPipeline(json) {
+        if (!json || json.trim() === '')
+            return [];
+        try {
+            const parsed = JSON.parse(json);
+            if (!Array.isArray(parsed))
+                return [];
+            return parsed.map(step => ({
+                Type: step.Type ?? 'direct',
+                Config: step.Config ?? {},
+                OnError: step.OnError ?? 'Fail'
+            }));
+        }
+        catch {
+            return [];
+        }
+    }
+    serializeTransformPipeline(steps) {
+        if (steps.length === 0)
+            return null;
+        return JSON.stringify(steps.map(s => ({ Type: s.Type, Config: s.Config, OnError: s.OnError })));
+    }
+    getDefaultConfigForType(type) {
+        switch (type) {
+            case 'direct': return {};
+            case 'regex': return { Pattern: '', Replacement: '', Flags: 'g' };
+            case 'split': return { Delimiter: ',', Index: 0 };
+            case 'combine': return { SourceFields: [], Separator: ' ' };
+            case 'lookup': return { Map: {}, Default: '' };
+            case 'format': return { FormatString: '', FormatType: 'date' };
+            case 'coerce': return { TargetType: 'string' };
+            case 'substring': return { Start: 0, Length: 10 };
+            case 'custom': return { Expression: 'value' };
+        }
+    }
+    resolveSourceFieldsFromMetadata(companyIntegrationID, externalObjectName) {
+        const engine = IntegrationEngineBase.Instance;
+        const integration = engine.GetIntegrationForCompanyIntegration(companyIntegrationID);
+        if (!integration)
+            return [];
+        const obj = engine.GetIntegrationObject(integration.ID, externalObjectName);
+        if (!obj)
+            return [];
+        const fields = engine.GetIntegrationObjectFields(obj.ID);
+        return fields
+            .filter(f => f.Status === 'Active')
+            .sort((a, b) => a.Sequence - b.Sequence)
+            .map(f => ({
+            Name: f.Name,
+            Label: f.DisplayName || f.Name,
+            Type: f.Type,
+            IsRequired: f.IsRequired,
+            IsPrimaryKey: f.IsPrimaryKey
+        }));
+    }
+    static ɵfac = function VisualFieldEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VisualFieldEditorComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VisualFieldEditorComponent, selectors: [["app-visual-field-editor"]], inputs: { EntityMap: "EntityMap", CompanyIntegrationID: "CompanyIntegrationID", RunViewProvider: "RunViewProvider" }, outputs: { Close: "Close" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 48, vars: 18, consts: [[1, "ve-container"], [1, "ve-header"], [1, "ve-header-left"], ["title", "Back to entity maps", 1, "ve-back-btn", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "ve-header-title"], [1, "ve-source-label"], [1, "ve-direction-arrow"], [1, "fa-solid", "fa-arrow-right-arrow-left"], [1, "ve-dest-label"], [1, "ve-header-stats"], [1, "ve-stat"], [1, "ve-stat-sep"], [1, "ve-header-actions"], ["title", "Preview source data", 1, "ve-btn", "ve-btn-ghost", 3, "click"], [1, "fa-solid", "fa-cloud"], ["title", "Preview MJ data", 1, "ve-btn", "ve-btn-ghost", 3, "click"], [1, "fa-solid", "fa-database"], [1, "ve-action-sep"], ["title", "Auto-map fields by name", 1, "ve-btn", "ve-btn-ghost", 3, "click"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "ve-btn", "ve-btn-primary", 3, "click", "disabled"], [1, "ve-save-success"], [1, "ve-preview-strip"], [1, "ve-connect-banner"], [1, "ve-body"], [1, "ve-loading"], [1, "sync-toggle", "ve-sync-toggle", 3, "title"], ["type", "checkbox", 3, "change", "checked"], [1, "sync-toggle-track"], [1, "ve-sync-label"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-circle-check"], [1, "ve-preview-panel"], [1, "ve-preview-header"], [1, "ve-preview-close", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "ve-preview-loading"], [1, "ve-preview-empty"], [1, "ve-preview-table-wrap"], [1, "ve-preview-table"], [3, "title"], [1, "fa-solid", "fa-link"], [1, "ve-connect-cancel", 3, "click"], [1, "ve-sections-wrapper"], [1, "ve-section"], [1, "ve-section-header", 3, "click"], [1, "fa-solid"], [1, "ve-section-title"], [1, "ve-section-badge"], [1, "ve-section-body"], [1, "ve-section-body", "ve-info-body"], [1, "ve-transform-panel"], [1, "ve-canvas-wrapper"], [1, "ve-col-headers"], [1, "ve-col-header", "source"], [1, "ve-col-count"], [1, "ve-col-header-spacer"], [1, "ve-col-header", "dest"], [1, "ve-col-searches"], [1, "ve-col-search"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Filter source fields...", 3, "input", "value"], [1, "ve-col-search-spacer"], ["type", "text", "placeholder", "Filter destination fields...", 3, "input", "value"], [1, "ve-canvas-scroll", 3, "click"], [1, "ve-canvas-grid"], [1, "ve-field-col", "source"], [1, "ve-field-item", 3, "mapped", "unmapped", "connecting", "height"], [1, "ve-field-empty"], [1, "ve-svg", 3, "click"], [1, "ve-field-col", "dest"], [1, "ve-field-item", 3, "mapped", "unmapped", "connect-target", "height"], [1, "ve-field-item", 3, "click"], [1, "ve-field-name", 3, "title"], [1, "ve-field-type"], [1, "ve-field-badges"], ["title", "Primary Key", 1, "ve-fbadge", "pk"], ["title", "Required", 1, "ve-fbadge", "req"], [1, "ve-conn-line", 3, "click"], ["width", "28", "height", "28", 1, "ve-badge-fo"], ["xmlns", "http://www.w3.org/1999/xhtml", 1, "ve-conn-badge", 3, "click"], [1, "ve-info-loading"], [1, "ve-info-grid"], [1, "ve-info-card"], [1, "ve-info-card-icon"], [1, "ve-info-card-content"], [1, "ve-info-card-value"], [1, "ve-info-card-label"], [1, "ve-info-card-icon", "source"], [1, "ve-info-card-icon", "sync"], [1, "fa-solid", "fa-arrows-rotate"], [1, "ve-info-details"], [1, "ve-info-detail-row"], [1, "ve-info-detail-label"], [1, "ve-info-detail-value"], [1, "ve-info-card-icon", 3, "ngClass"], [1, "ve-transform-panel", 3, "click"], [1, "ve-tp-header"], [1, "ve-tp-title"], [1, "ve-tp-close", 3, "click"], [1, "ve-tp-mapping-info"], [1, "ve-tp-field-pair"], [1, "ve-tp-field", "source"], [1, "fa-solid", "ve-tp-arrow"], [1, "ve-tp-field", "dest"], [1, "ve-tp-toggles"], [1, "ve-tp-toggle", 3, "click"], [1, "ve-tp-toggle-box"], [1, "ve-tp-section"], [1, "ve-tp-section-label"], [1, "ve-tp-direction-btns"], [3, "click"], [1, "ve-tp-section-header"], [1, "ve-tp-add-step", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "ve-tp-step"], [1, "ve-tp-no-steps"], [1, "ve-tp-footer"], [1, "ve-btn", "ve-btn-danger", 3, "click"], [1, "fa-solid", "fa-trash-can"], [1, "ve-tp-step-header"], [1, "ve-tp-step-num"], [1, "ve-tp-type-select", 3, "change", "value"], [3, "value", "selected"], ["title", "Remove step", 1, "ve-tp-remove-step", 3, "click"], [1, "ve-tp-step-config"], [1, "ve-tp-step-onerror"], [3, "change", "value"], ["value", "Fail"], ["value", "Skip"], ["value", "Null"], [1, "ve-tp-config-row"], ["type", "text", 3, "input", "value", "placeholder"]], template: function VisualFieldEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
+            i0.ɵɵlistener("click", function VisualFieldEditorComponent_Template_button_click_3_listener() { return ctx.OnClose(); });
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 5)(6, "span", 6);
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "span", 7);
+            i0.ɵɵelement(9, "i", 8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "span", 9);
+            i0.ɵɵtext(11);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(12, VisualFieldEditorComponent_Conditional_12_Template, 5, 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "div", 10)(14, "span", 11)(15, "strong");
+            i0.ɵɵtext(16);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(17, " mapped ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(18, "span", 12);
+            i0.ɵɵelementStart(19, "span", 11)(20, "strong");
+            i0.ɵɵtext(21);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(22, " key ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(23, "span", 12);
+            i0.ɵɵelementStart(24, "span", 11)(25, "strong");
+            i0.ɵɵtext(26);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(27, " required ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(28, "div", 13)(29, "button", 14);
+            i0.ɵɵlistener("click", function VisualFieldEditorComponent_Template_button_click_29_listener() { return ctx.ToggleSourcePreview(); });
+            i0.ɵɵelement(30, "i", 15);
+            i0.ɵɵtext(31, " Source Data ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(32, "button", 16);
+            i0.ɵɵlistener("click", function VisualFieldEditorComponent_Template_button_click_32_listener() { return ctx.ToggleDestPreview(); });
+            i0.ɵɵelement(33, "i", 17);
+            i0.ɵɵtext(34, " MJ Data ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(35, "div", 18);
+            i0.ɵɵelementStart(36, "button", 19);
+            i0.ɵɵlistener("click", function VisualFieldEditorComponent_Template_button_click_36_listener() { return ctx.AutoMapEditorFields(); });
+            i0.ɵɵelement(37, "i", 20);
+            i0.ɵɵtext(38, " Auto-Map ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(39, "button", 21);
+            i0.ɵɵlistener("click", function VisualFieldEditorComponent_Template_button_click_39_listener() { return ctx.SaveVisualEditor(); });
+            i0.ɵɵconditionalCreate(40, VisualFieldEditorComponent_Conditional_40_Template, 2, 0)(41, VisualFieldEditorComponent_Conditional_41_Template, 2, 0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(42, VisualFieldEditorComponent_Conditional_42_Template, 3, 0, "span", 22);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(43, VisualFieldEditorComponent_Conditional_43_Template, 3, 2, "div", 23);
+            i0.ɵɵconditionalCreate(44, VisualFieldEditorComponent_Conditional_44_Template, 7, 1, "div", 24);
+            i0.ɵɵelementStart(45, "div", 25);
+            i0.ɵɵconditionalCreate(46, VisualFieldEditorComponent_Conditional_46_Template, 4, 0, "div", 26)(47, VisualFieldEditorComponent_Conditional_47_Template, 16, 16);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate((ctx.EntityMap == null ? null : ctx.EntityMap.ExternalObjectLabel) ?? (ctx.EntityMap == null ? null : ctx.EntityMap.ExternalObjectName));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(ctx.EntityMap == null ? null : ctx.EntityMap.Entity);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.EntityMap ? 12 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(ctx.EditorMappedCount);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.EditorKeyFieldCount);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.EditorRequiredCount);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.ShowSourcePreview);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.ShowDestPreview);
+            i0.ɵɵadvance(7);
+            i0.ɵɵproperty("disabled", !ctx.HasEditorChanges || ctx.EditorSaving);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.EditorSaving ? 40 : 41);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.EditorSaveSuccess && !ctx.HasEditorChanges ? 42 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowSourcePreview || ctx.ShowDestPreview ? 43 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ConnectingFromSource ? 44 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("has-transform-panel", ctx.SelectedConnectionIdx !== null);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.EditorLoading ? 46 : 47);
+        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.ve-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n  animation: _ngcontent-%COMP%_slideIn 250ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from { opacity: 0; transform: translateX(30px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n\n\n\n\n\n.ve-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  gap: 16px;\n}\n\n.ve-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.ve-back-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  flex-shrink: 0;\n  transition: all 150ms ease;\n}\n\n.ve-back-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 600;\n  min-width: 0;\n}\n\n.ve-source-label[_ngcontent-%COMP%] {\n  color: var(--mj-color-indigo-500);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-direction-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 13px; flex-shrink: 0; }\n\n.ve-dest-label[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-600);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.ve-stat[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.ve-stat[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 700;\n}\n\n.ve-stat-sep[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 14px;\n  background: var(--mj-border-default);\n}\n\n.ve-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.ve-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 14px;\n  border-radius: 7px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border: none;\n  white-space: nowrap;\n}\n\n.ve-btn-ghost[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n.ve-btn-ghost[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-primary); }\n\n.ve-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n}\n\n.ve-btn-primary[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-600); }\n.ve-btn-primary[_ngcontent-%COMP%]:disabled { opacity: 0.5; cursor: default; }\n\n.ve-btn-danger[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-color-error-600);\n  border: 1px solid var(--mj-color-error-200);\n}\n\n.ve-btn-danger[_ngcontent-%COMP%]:hover { background: var(--mj-color-error-100); }\n\n.ve-save-success[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-color-success-600);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  animation: _ngcontent-%COMP%_fadeIn 300ms ease;\n}\n\n\n\n.ve-sync-toggle[_ngcontent-%COMP%] { flex-shrink: 0; margin-left: 8px; }\n.ve-sync-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n\n\n.sync-toggle[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%] {\n  width: 34px;\n  height: 18px;\n  background: var(--mj-color-neutral-300);\n  border-radius: 9px;\n  position: relative;\n  transition: background 200ms ease;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  background: var(--mj-bg-surface);\n  border-radius: 50%;\n  transition: transform 200ms ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .sync-toggle-track[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-500);\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .sync-toggle-track[_ngcontent-%COMP%]::after {\n  transform: translateX(16px);\n}\n\n\n\n.ve-action-sep[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 20px;\n  background: var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n\n\n.ve-btn-ghost.active[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  border-color: var(--mj-color-indigo-200);\n}\n\n\n\n\n\n\n.ve-preview-strip[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1px;\n  background: var(--mj-border-default);\n  border-bottom: 1px solid var(--mj-border-default);\n  max-height: 220px;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.ve-preview-panel[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.ve-preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.ve-preview-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-color-indigo-500); }\n.ve-preview-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.ve-preview-close[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.ve-preview-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n.ve-preview-loading[_ngcontent-%COMP%], \n.ve-preview-empty[_ngcontent-%COMP%] {\n  padding: 20px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.ve-preview-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.ve-preview-table-wrap[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n}\n\n.ve-preview-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 11px;\n}\n\n.ve-preview-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  font-size: 10px;\n  padding: 5px 10px;\n  text-align: left;\n  white-space: nowrap;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-preview-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 4px 10px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ve-preview-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-50);\n}\n\n\n\n\n\n\n.ve-connect-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 20px;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-700);\n  font-size: 13px;\n  border-bottom: 1px solid var(--mj-color-indigo-100);\n  flex-shrink: 0;\n}\n\n.ve-connect-banner[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] { font-weight: 700; }\n\n.ve-connect-cancel[_ngcontent-%COMP%] {\n  margin-left: auto;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-color-indigo-100);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-color-indigo-700);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-connect-cancel[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-100); }\n\n\n\n\n\n\n.ve-body[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n}\n\n.ve-loading[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  gap: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n.ve-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 24px; color: var(--mj-color-indigo-500); }\n\n\n\n.ve-sections-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n\n\n.ve-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-section[_ngcontent-%COMP%]:not(.collapsed) {\n  flex: 1;\n  min-height: 0;\n}\n\n.ve-section.collapsed[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.ve-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  cursor: pointer;\n  user-select: none;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n\n.ve-section-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.ve-section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  width: 12px;\n  flex-shrink: 0;\n  transition: transform 200ms ease;\n}\n\n.ve-section-title[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  color: var(--mj-text-muted);\n}\n\n.ve-section-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  padding: 1px 8px;\n  border-radius: 4px;\n  margin-left: auto;\n}\n\n.ve-section-body[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  animation: _ngcontent-%COMP%_fadeIn 200ms ease;\n}\n\n\n\n.ve-canvas-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n\n\n\n\n\n.ve-col-headers[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-col-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.ve-col-header.source[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n.ve-col-header.dest[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-color-success-600); }\n.ve-col-header-spacer[_ngcontent-%COMP%] { \n }\n\n.ve-col-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-disabled);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n\n\n\n\n\n.ve-col-searches[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  padding: 6px 0;\n}\n\n.ve-col-search[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 12px;\n}\n\n.ve-col-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-col-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.ve-col-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer[_ngcontent-%COMP%] { \n }\n\n\n\n\n\n\n.ve-canvas-scroll[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.ve-canvas-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  position: relative;\n}\n\n\n\n\n\n\n.ve-field-col[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.ve-field-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 14px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background 150ms ease, opacity 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n  box-sizing: border-box;\n}\n\n.ve-field-item.mapped[_ngcontent-%COMP%] { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  background: var(--mj-bg-page);\n}\n\n.ve-field-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-indigo-50);\n  opacity: 1;\n}\n\n.ve-field-item.connecting[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-100);\n  opacity: 1;\n  box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-success-100);\n  box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--mj-color-neutral-700);\n  font-weight: 500;\n}\n\n.ve-field-type[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.ve-fbadge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 3px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n}\n\n.ve-fbadge.pk[_ngcontent-%COMP%] { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty[_ngcontent-%COMP%] {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n\n\n\n\n\n.ve-svg[_ngcontent-%COMP%] {\n  display: block;\n}\n\n.ve-conn-line[_ngcontent-%COMP%] {\n  fill: none;\n  stroke-width: 2;\n  cursor: pointer;\n  transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n\n\n.ve-conn-line.conn-direct[_ngcontent-%COMP%] { stroke: #6366f1; stroke-dasharray: none; }\n.ve-conn-line.conn-regex[_ngcontent-%COMP%] { stroke: #8b5cf6; stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split[_ngcontent-%COMP%] { stroke: #f59e0b; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine[_ngcontent-%COMP%] { stroke: #10b981; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup[_ngcontent-%COMP%] { stroke: #0ea5e9; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format[_ngcontent-%COMP%] { stroke: #ec4899; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce[_ngcontent-%COMP%] { stroke: #f97316; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring[_ngcontent-%COMP%] { stroke: #14b8a6; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom[_ngcontent-%COMP%] { stroke: #a855f7; stroke-dasharray: 2 3; }\n\n.ve-conn-line[_ngcontent-%COMP%]:hover { stroke-width: 3.5; }\n.ve-conn-line.selected[_ngcontent-%COMP%] { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n\n\n.ve-badge-fo[_ngcontent-%COMP%] { overflow: visible; }\n\n.ve-conn-badge[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct[_ngcontent-%COMP%] { background: #eef2ff; color: #6366f1; border: 2px solid #6366f1; }\n.ve-conn-badge.badge-regex[_ngcontent-%COMP%] { background: #f5f3ff; color: #8b5cf6; border: 2px solid #8b5cf6; }\n.ve-conn-badge.badge-split[_ngcontent-%COMP%] { background: #fffbeb; color: #f59e0b; border: 2px solid #f59e0b; }\n.ve-conn-badge.badge-combine[_ngcontent-%COMP%] { background: #ecfdf5; color: #10b981; border: 2px solid #10b981; }\n.ve-conn-badge.badge-lookup[_ngcontent-%COMP%] { background: #f0f9ff; color: #0ea5e9; border: 2px solid #0ea5e9; }\n.ve-conn-badge.badge-format[_ngcontent-%COMP%] { background: #fdf2f8; color: #ec4899; border: 2px solid #ec4899; }\n.ve-conn-badge.badge-coerce[_ngcontent-%COMP%] { background: #fff7ed; color: #f97316; border: 2px solid #f97316; }\n.ve-conn-badge.badge-substring[_ngcontent-%COMP%] { background: #f0fdfa; color: #14b8a6; border: 2px solid #14b8a6; }\n.ve-conn-badge.badge-custom[_ngcontent-%COMP%] { background: #faf5ff; color: #a855f7; border: 2px solid #a855f7; }\n\n.ve-conn-badge[_ngcontent-%COMP%]:hover { transform: scale(1.2); }\n.ve-conn-badge.selected[_ngcontent-%COMP%] { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n\n\n\n\n\n.ve-transform-panel[_ngcontent-%COMP%] {\n  width: 320px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  animation: _ngcontent-%COMP%_slideInRight 200ms ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { opacity: 0; transform: translateX(20px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.ve-tp-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.ve-tp-close[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 150ms ease;\n}\n\n.ve-tp-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n\n\n.ve-tp-mapping-info[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.ve-tp-field[_ngcontent-%COMP%] {\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 12px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 110px;\n}\n\n.ve-tp-field.source[_ngcontent-%COMP%] { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n\n\n.ve-tp-toggles[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.ve-tp-toggle-box[_ngcontent-%COMP%] {\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-color-neutral-300);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  color: var(--mj-bg-surface);\n  transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-500);\n  border-color: var(--mj-color-indigo-500);\n}\n\n\n\n.ve-tp-section[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 8px;\n}\n\n.ve-tp-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n\n\n.ve-tp-direction-btns[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 6px 8px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:last-child { border-right: none; }\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%] { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n\n\n.ve-tp-add-step[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-tp-add-step[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n.ve-tp-step-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 5px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  transition: all 150ms ease;\n  flex-shrink: 0;\n}\n\n.ve-tp-remove-step[_ngcontent-%COMP%]:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config[_ngcontent-%COMP%] {\n  padding: 8px 10px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  width: 80px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n  height: 24px;\n  padding: 0 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 11px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-no-steps[_ngcontent-%COMP%] {\n  padding: 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  font-style: italic;\n}\n\n\n\n.ve-tp-footer[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  margin-top: auto;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-color-neutral-300);\n  border-radius: 3px;\n}\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n.ve-info-body[_ngcontent-%COMP%] {\n  padding: 16px;\n  overflow-y: auto;\n}\n\n.ve-info-loading[_ngcontent-%COMP%] {\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  padding: 20px;\n}\n\n.ve-info-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-indigo-500);\n  margin-right: 6px;\n}\n\n.ve-info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 12px;\n  margin-bottom: 16px;\n}\n\n.ve-info-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n}\n\n.ve-info-card-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-500);\n}\n\n.ve-info-card-icon.source[_ngcontent-%COMP%] {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.sync[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-success[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-error[_ngcontent-%COMP%] {\n  background: var(--mj-color-error-100);\n  color: var(--mj-color-error-600);\n}\n\n.ve-info-card-icon.info-status-running[_ngcontent-%COMP%] {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.info-status-pending[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-600);\n}\n\n.ve-info-card-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.ve-info-card-value[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ve-info-card-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n.ve-info-details[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.ve-info-detail-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 14px;\n  font-size: 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-info-detail-row[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.ve-info-detail-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.ve-info-detail-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VisualFieldEditorComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'app-visual-field-editor', template: "<div class=\"ve-container\">\n\n  <!-- Header -->\n  <div class=\"ve-header\">\n    <div class=\"ve-header-left\">\n      <button class=\"ve-back-btn\" (click)=\"OnClose()\" title=\"Back to entity maps\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n      </button>\n      <div class=\"ve-header-title\">\n        <span class=\"ve-source-label\">{{ EntityMap?.ExternalObjectLabel ?? EntityMap?.ExternalObjectName }}</span>\n        <span class=\"ve-direction-arrow\">\n          <i class=\"fa-solid fa-arrow-right-arrow-left\"></i>\n        </span>\n        <span class=\"ve-dest-label\">{{ EntityMap?.Entity }}</span>\n      </div>\n      <!-- SyncEnabled toggle in editor header -->\n      @if (EntityMap) {\n        <label class=\"sync-toggle ve-sync-toggle\"\n               [title]=\"EntityMap.SyncEnabled ? 'Sync enabled' : 'Sync disabled'\">\n          <input type=\"checkbox\"\n                 [checked]=\"EntityMap.SyncEnabled\"\n                 (change)=\"OnToggleEditorSyncEnabled($event)\" />\n          <span class=\"sync-toggle-track\"></span>\n        </label>\n        <span class=\"ve-sync-label\">{{ EntityMap.SyncEnabled ? 'Sync On' : 'Sync Off' }}</span>\n      }\n    </div>\n    <div class=\"ve-header-stats\">\n      <span class=\"ve-stat\">\n        <strong>{{ EditorMappedCount }}</strong> mapped\n      </span>\n      <span class=\"ve-stat-sep\"></span>\n      <span class=\"ve-stat\">\n        <strong>{{ EditorKeyFieldCount }}</strong> key\n      </span>\n      <span class=\"ve-stat-sep\"></span>\n      <span class=\"ve-stat\">\n        <strong>{{ EditorRequiredCount }}</strong> required\n      </span>\n    </div>\n    <div class=\"ve-header-actions\">\n      <!-- Data preview buttons -->\n      <button class=\"ve-btn ve-btn-ghost\"\n              (click)=\"ToggleSourcePreview()\"\n              [class.active]=\"ShowSourcePreview\"\n              title=\"Preview source data\">\n        <i class=\"fa-solid fa-cloud\"></i> Source Data\n      </button>\n      <button class=\"ve-btn ve-btn-ghost\"\n              (click)=\"ToggleDestPreview()\"\n              [class.active]=\"ShowDestPreview\"\n              title=\"Preview MJ data\">\n        <i class=\"fa-solid fa-database\"></i> MJ Data\n      </button>\n      <div class=\"ve-action-sep\"></div>\n      <button class=\"ve-btn ve-btn-ghost\" (click)=\"AutoMapEditorFields()\" title=\"Auto-map fields by name\">\n        <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Auto-Map\n      </button>\n      <button class=\"ve-btn ve-btn-primary\"\n              [disabled]=\"!HasEditorChanges || EditorSaving\"\n              (click)=\"SaveVisualEditor()\">\n        @if (EditorSaving) {\n          <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n        } @else {\n          <i class=\"fa-solid fa-check\"></i> Save\n        }\n      </button>\n      @if (EditorSaveSuccess && !HasEditorChanges) {\n        <span class=\"ve-save-success\">\n          <i class=\"fa-solid fa-circle-check\"></i> Saved\n        </span>\n      }\n    </div>\n  </div>\n\n  <!-- Data preview panels (collapsible) -->\n  @if (ShowSourcePreview || ShowDestPreview) {\n    <div class=\"ve-preview-strip\">\n      @if (ShowSourcePreview) {\n        <div class=\"ve-preview-panel\">\n          <div class=\"ve-preview-header\">\n            <i class=\"fa-solid fa-cloud\"></i>\n            <span>Source Preview: {{ EntityMap?.ExternalObjectLabel ?? EntityMap?.ExternalObjectName }}</span>\n            <button class=\"ve-preview-close\" (click)=\"ShowSourcePreview = false\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n          @if (PreviewSourceLoading) {\n            <div class=\"ve-preview-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n            </div>\n          } @else if (PreviewSourceRows.length === 0) {\n            <div class=\"ve-preview-empty\">No source data available</div>\n          } @else {\n            <div class=\"ve-preview-table-wrap\">\n              <table class=\"ve-preview-table\">\n                <thead>\n                  <tr>\n                    @for (col of PreviewSourceColumns; track col) {\n                      <th>{{ col }}</th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of PreviewSourceRows; track $index) {\n                    <tr>\n                      @for (col of PreviewSourceColumns; track col) {\n                        <td [title]=\"row[col]?.toString() ?? ''\">{{ row[col] ?? '' }}</td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n        </div>\n      }\n      @if (ShowDestPreview) {\n        <div class=\"ve-preview-panel\">\n          <div class=\"ve-preview-header\">\n            <i class=\"fa-solid fa-database\"></i>\n            <span>Dest Preview: {{ EntityMap?.Entity }}</span>\n            <button class=\"ve-preview-close\" (click)=\"ShowDestPreview = false\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n          @if (PreviewDestLoading) {\n            <div class=\"ve-preview-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n            </div>\n          } @else if (PreviewDestRows.length === 0) {\n            <div class=\"ve-preview-empty\">No destination data available</div>\n          } @else {\n            <div class=\"ve-preview-table-wrap\">\n              <table class=\"ve-preview-table\">\n                <thead>\n                  <tr>\n                    @for (col of PreviewDestColumns; track col) {\n                      <th>{{ col }}</th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of PreviewDestRows; track $index) {\n                    <tr>\n                      @for (col of PreviewDestColumns; track col) {\n                        <td [title]=\"row[col]?.toString() ?? ''\">{{ row[col] ?? '' }}</td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Connect mode banner -->\n  @if (ConnectingFromSource) {\n    <div class=\"ve-connect-banner\">\n      <i class=\"fa-solid fa-link\"></i>\n      Click a destination field to map from\n      <strong>{{ ConnectingFromSource }}</strong>\n      <button class=\"ve-connect-cancel\" (click)=\"CancelConnect()\">Cancel</button>\n    </div>\n  }\n\n  <!-- Main content: sections + transform panel -->\n  <div class=\"ve-body\" [class.has-transform-panel]=\"SelectedConnectionIdx !== null\">\n\n    <!-- Loading state -->\n    @if (EditorLoading) {\n      <div class=\"ve-loading\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>Loading field mappings...</span>\n      </div>\n    } @else {\n\n      <!-- Left content area (sections stacked vertically) -->\n      <div class=\"ve-sections-wrapper\">\n\n        <!-- ============================================================= -->\n        <!-- FIELD MAPPINGS SECTION (collapsible)                          -->\n        <!-- ============================================================= -->\n        <div class=\"ve-section\" [class.collapsed]=\"!FieldMapsExpanded\">\n          <div class=\"ve-section-header\" (click)=\"ToggleFieldMaps()\">\n            <i class=\"fa-solid\"\n               [class.fa-chevron-down]=\"FieldMapsExpanded\"\n               [class.fa-chevron-right]=\"!FieldMapsExpanded\"></i>\n            <span class=\"ve-section-title\">Field Mappings</span>\n            <span class=\"ve-section-badge\">{{ EditorMappedCount }} mapped</span>\n          </div>\n\n          @if (FieldMapsExpanded) {\n            <div class=\"ve-section-body\">\n              <!-- Canvas area (scrollable) -->\n              <div class=\"ve-canvas-wrapper\">\n\n                <!-- Column headers -->\n                <div class=\"ve-col-headers\">\n                  <div class=\"ve-col-header source\">\n                    <i class=\"fa-solid fa-cloud\"></i>\n                    Source Fields\n                    <span class=\"ve-col-count\">{{ EditorSourceFields.length }}</span>\n                  </div>\n                  <div class=\"ve-col-header-spacer\"></div>\n                  <div class=\"ve-col-header dest\">\n                    <i class=\"fa-solid fa-database\"></i>\n                    MJ Entity Fields\n                    <span class=\"ve-col-count\">{{ EditorDestFields.length }}</span>\n                  </div>\n                </div>\n\n                <!-- Search bars -->\n                <div class=\"ve-col-searches\">\n                  <div class=\"ve-col-search\">\n                    <i class=\"fa-solid fa-search\"></i>\n                    <input type=\"text\"\n                           placeholder=\"Filter source fields...\"\n                           [value]=\"EditorSearchSource\"\n                           (input)=\"EditorSearchSource = $any($event.target).value\" />\n                  </div>\n                  <div class=\"ve-col-search-spacer\"></div>\n                  <div class=\"ve-col-search\">\n                    <i class=\"fa-solid fa-search\"></i>\n                    <input type=\"text\"\n                           placeholder=\"Filter destination fields...\"\n                           [value]=\"EditorSearchDest\"\n                           (input)=\"EditorSearchDest = $any($event.target).value\" />\n                  </div>\n                </div>\n\n                <!-- Canvas grid (source + SVG + dest) -->\n                <div class=\"ve-canvas-scroll\" (click)=\"DeselectConnection()\">\n                  <div class=\"ve-canvas-grid\" [style.min-height.px]=\"EditorCanvasHeight\">\n\n                    <!-- Source column -->\n                    <div class=\"ve-field-col source\">\n                      @for (sf of FilteredEditorSourceFields; track sf.Name) {\n                        <div class=\"ve-field-item\"\n                             [class.mapped]=\"IsSourceFieldMapped(sf.Name)\"\n                             [class.unmapped]=\"!IsSourceFieldMapped(sf.Name)\"\n                             [class.connecting]=\"ConnectingFromSource === sf.Name\"\n                             [style.height.px]=\"FIELD_HEIGHT\"\n                             (click)=\"OnEditorSourceClick(sf.Name); $event.stopPropagation()\">\n                          <span class=\"ve-field-name\" [title]=\"sf.Name\">{{ sf.Label || sf.Name }}</span>\n                          <span class=\"ve-field-type\">{{ sf.Type }}</span>\n                          <span class=\"ve-field-badges\">\n                            @if (sf.IsPrimaryKey) {\n                              <span class=\"ve-fbadge pk\" title=\"Primary Key\">PK</span>\n                            }\n                            @if (sf.IsRequired) {\n                              <span class=\"ve-fbadge req\" title=\"Required\">*</span>\n                            }\n                          </span>\n                        </div>\n                      }\n                      @if (FilteredEditorSourceFields.length === 0) {\n                        <div class=\"ve-field-empty\">No source fields found</div>\n                      }\n                    </div>\n\n                    <!-- SVG connection lines -->\n                    <svg class=\"ve-svg\"\n                         [attr.width]=\"SVG_WIDTH\"\n                         [attr.height]=\"EditorCanvasHeight\"\n                         [attr.viewBox]=\"'0 0 ' + SVG_WIDTH + ' ' + EditorCanvasHeight\"\n                         (click)=\"$event.stopPropagation()\">\n                      @for (conn of VisibleConnections; track conn.SourceFieldName + '-' + conn.DestFieldName; let i = $index) {\n                        <!-- Connection line -->\n                        <path [attr.d]=\"GetConnectionPath(conn)\"\n                              class=\"ve-conn-line\"\n                              [class]=\"'ve-conn-line ' + GetConnectionLineClass(conn)\"\n                              [class.selected]=\"SelectedConnectionIdx === i\"\n                              (click)=\"SelectConnection(i, $event)\" />\n                        <!-- Transform badge at midpoint -->\n                        <foreignObject\n                          [attr.x]=\"SVG_WIDTH / 2 - 14\"\n                          [attr.y]=\"GetConnectionMidY(conn) - 14\"\n                          width=\"28\" height=\"28\"\n                          class=\"ve-badge-fo\">\n                          <div xmlns=\"http://www.w3.org/1999/xhtml\"\n                               class=\"ve-conn-badge\"\n                               [class]=\"'ve-conn-badge ' + GetConnectionBadgeClass(conn)\"\n                               [class.selected]=\"SelectedConnectionIdx === i\"\n                               (click)=\"SelectConnection(i, $event)\">\n                            <i [class]=\"GetConnectionDirectionIcon(conn)\"></i>\n                          </div>\n                        </foreignObject>\n                      }\n                    </svg>\n\n                    <!-- Dest column -->\n                    <div class=\"ve-field-col dest\">\n                      @for (df of FilteredEditorDestFields; track df.Name) {\n                        <div class=\"ve-field-item\"\n                             [class.mapped]=\"IsDestFieldMapped(df.Name)\"\n                             [class.unmapped]=\"!IsDestFieldMapped(df.Name)\"\n                             [class.connect-target]=\"ConnectingFromSource !== null\"\n                             [style.height.px]=\"FIELD_HEIGHT\"\n                             (click)=\"OnEditorDestClick(df.Name); $event.stopPropagation()\">\n                          <span class=\"ve-field-name\" [title]=\"df.Name\">{{ df.Name }}</span>\n                          <span class=\"ve-field-type\">{{ df.Type }}</span>\n                          <span class=\"ve-field-badges\">\n                            @if (df.IsRequired) {\n                              <span class=\"ve-fbadge req\" title=\"Required\">*</span>\n                            }\n                          </span>\n                        </div>\n                      }\n                      @if (FilteredEditorDestFields.length === 0) {\n                        <div class=\"ve-field-empty\">No destination fields found</div>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n\n        <!-- ============================================================= -->\n        <!-- INFO PANEL SECTION (collapsible)                              -->\n        <!-- ============================================================= -->\n        <div class=\"ve-section\" [class.collapsed]=\"!InfoPanelExpanded\">\n          <div class=\"ve-section-header\" (click)=\"ToggleInfoPanel()\">\n            <i class=\"fa-solid\"\n               [class.fa-chevron-down]=\"InfoPanelExpanded\"\n               [class.fa-chevron-right]=\"!InfoPanelExpanded\"></i>\n            <span class=\"ve-section-title\">Sync Info</span>\n          </div>\n\n          @if (InfoPanelExpanded) {\n            <div class=\"ve-section-body ve-info-body\">\n              @if (InfoPanelLoading) {\n                <div class=\"ve-info-loading\">\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading stats...\n                </div>\n              } @else {\n                <div class=\"ve-info-grid\">\n                  <!-- Destination record count -->\n                  <div class=\"ve-info-card\">\n                    <div class=\"ve-info-card-icon\">\n                      <i class=\"fa-solid fa-database\"></i>\n                    </div>\n                    <div class=\"ve-info-card-content\">\n                      <span class=\"ve-info-card-value\">{{ InfoDestRecordCount ?? '-' }}</span>\n                      <span class=\"ve-info-card-label\">MJ Records</span>\n                    </div>\n                  </div>\n                  <!-- Source fields count -->\n                  <div class=\"ve-info-card\">\n                    <div class=\"ve-info-card-icon source\">\n                      <i class=\"fa-solid fa-cloud\"></i>\n                    </div>\n                    <div class=\"ve-info-card-content\">\n                      <span class=\"ve-info-card-value\">{{ EditorSourceFields.length }}</span>\n                      <span class=\"ve-info-card-label\">Source Fields</span>\n                    </div>\n                  </div>\n                  <!-- Last sync -->\n                  <div class=\"ve-info-card\">\n                    <div class=\"ve-info-card-icon sync\">\n                      <i class=\"fa-solid fa-arrows-rotate\"></i>\n                    </div>\n                    <div class=\"ve-info-card-content\">\n                      <span class=\"ve-info-card-value\">{{ FormatSyncDate(InfoLastSync?.StartedAt ?? null) }}</span>\n                      <span class=\"ve-info-card-label\">Last Sync</span>\n                    </div>\n                  </div>\n                  <!-- Sync status -->\n                  @if (InfoLastSync) {\n                    <div class=\"ve-info-card\">\n                      <div class=\"ve-info-card-icon\" [ngClass]=\"SyncStatusClass(InfoLastSync.Status)\">\n                        <i class=\"fa-solid\"\n                           [class.fa-circle-check]=\"InfoLastSync.Status === 'Success'\"\n                           [class.fa-circle-xmark]=\"InfoLastSync.Status === 'Failed'\"\n                           [class.fa-spinner]=\"InfoLastSync.Status === 'In Progress'\"\n                           [class.fa-clock]=\"InfoLastSync.Status === 'Pending'\"></i>\n                      </div>\n                      <div class=\"ve-info-card-content\">\n                        <span class=\"ve-info-card-value\">{{ InfoLastSync.Status }}</span>\n                        <span class=\"ve-info-card-label\">{{ InfoLastSync.TotalRecords }} records processed</span>\n                      </div>\n                    </div>\n                  }\n                </div>\n\n                <!-- Configuration details -->\n                <div class=\"ve-info-details\">\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Sync Direction</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.SyncDirection }}</span>\n                  </div>\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Conflict Resolution</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.ConflictResolution }}</span>\n                  </div>\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Delete Behavior</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.DeleteBehavior }}</span>\n                  </div>\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Priority</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.Priority }}</span>\n                  </div>\n                  @if (EntityMap?.MatchStrategy) {\n                    <div class=\"ve-info-detail-row\">\n                      <span class=\"ve-info-detail-label\">Match Strategy</span>\n                      <span class=\"ve-info-detail-value\">Configured</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Transform editor panel (right side, appears when connection selected) -->\n      @if (SelectedConnection; as conn) {\n        <div class=\"ve-transform-panel\" (click)=\"$event.stopPropagation()\">\n          <div class=\"ve-tp-header\">\n            <span class=\"ve-tp-title\">Mapping Details</span>\n            <button class=\"ve-tp-close\" (click)=\"DeselectConnection()\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n\n          <!-- Source -> Dest -->\n          <div class=\"ve-tp-mapping-info\">\n            <div class=\"ve-tp-field-pair\">\n              <span class=\"ve-tp-field source\">{{ conn.SourceFieldName }}</span>\n              <i class=\"fa-solid ve-tp-arrow\"\n                 [class.fa-arrow-right]=\"conn.Direction === 'SourceToDest'\"\n                 [class.fa-arrow-left]=\"conn.Direction === 'DestToSource'\"\n                 [class.fa-right-left]=\"conn.Direction === 'Both'\"></i>\n              <span class=\"ve-tp-field dest\">{{ conn.DestFieldName }}</span>\n            </div>\n          </div>\n\n          <!-- Toggles -->\n          <div class=\"ve-tp-toggles\">\n            <label class=\"ve-tp-toggle\" (click)=\"ToggleConnectionKey()\">\n              <span class=\"ve-tp-toggle-box\" [class.active]=\"conn.IsKeyField\">\n                @if (conn.IsKeyField) { <i class=\"fa-solid fa-check\"></i> }\n              </span>\n              <span>Key Field</span>\n            </label>\n            <label class=\"ve-tp-toggle\" (click)=\"ToggleConnectionRequired()\">\n              <span class=\"ve-tp-toggle-box\" [class.active]=\"conn.IsRequired\">\n                @if (conn.IsRequired) { <i class=\"fa-solid fa-check\"></i> }\n              </span>\n              <span>Required</span>\n            </label>\n          </div>\n\n          <!-- Direction -->\n          <div class=\"ve-tp-section\">\n            <label class=\"ve-tp-section-label\">Direction</label>\n            <div class=\"ve-tp-direction-btns\">\n              <button [class.active]=\"conn.Direction === 'SourceToDest'\"\n                      (click)=\"OnConnectionDirectionChange('SourceToDest')\">\n                Source &rarr; Dest\n              </button>\n              <button [class.active]=\"conn.Direction === 'DestToSource'\"\n                      (click)=\"OnConnectionDirectionChange('DestToSource')\">\n                Dest &rarr; Source\n              </button>\n              <button [class.active]=\"conn.Direction === 'Both'\"\n                      (click)=\"OnConnectionDirectionChange('Both')\">\n                Both\n              </button>\n            </div>\n          </div>\n\n          <!-- Transform pipeline -->\n          <div class=\"ve-tp-section\">\n            <div class=\"ve-tp-section-header\">\n              <label class=\"ve-tp-section-label\">Transform Pipeline</label>\n              <button class=\"ve-tp-add-step\" (click)=\"AddTransformStep()\">\n                <i class=\"fa-solid fa-plus\"></i> Add Step\n              </button>\n            </div>\n\n            @for (step of conn.TransformSteps; track $index; let si = $index) {\n              <div class=\"ve-tp-step\">\n                <div class=\"ve-tp-step-header\">\n                  <span class=\"ve-tp-step-num\">{{ si + 1 }}</span>\n                  <select class=\"ve-tp-type-select\"\n                          [value]=\"step.Type\"\n                          (change)=\"OnConnectionTransformChange(si, $any($event.target).value)\">\n                    @for (tt of TRANSFORM_TYPES; track tt.Value) {\n                      <option [value]=\"tt.Value\" [selected]=\"tt.Value === step.Type\">{{ tt.Label }}</option>\n                    }\n                  </select>\n                  <button class=\"ve-tp-remove-step\" (click)=\"RemoveTransformStep(si)\" title=\"Remove step\">\n                    <i class=\"fa-solid fa-trash-can\"></i>\n                  </button>\n                </div>\n\n                <!-- Config fields based on transform type -->\n                @if (step.Type !== 'direct') {\n                  <div class=\"ve-tp-step-config\">\n                    @for (key of GetConfigKeys(step); track key) {\n                      <div class=\"ve-tp-config-row\">\n                        <label>{{ key }}</label>\n                        <input type=\"text\"\n                               [value]=\"GetConfigValue(step, key)\"\n                               (input)=\"OnTransformConfigChange(conn, si, key, $any($event.target).value)\"\n                               placeholder=\"{{ key }}\" />\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- On error -->\n                <div class=\"ve-tp-step-onerror\">\n                  <label>On Error:</label>\n                  <select [value]=\"step.OnError\"\n                          (change)=\"step.OnError = $any($event.target).value; conn.IsDirty = true\">\n                    <option value=\"Fail\">Fail</option>\n                    <option value=\"Skip\">Skip</option>\n                    <option value=\"Null\">Null</option>\n                  </select>\n                </div>\n              </div>\n            }\n\n            @if (conn.TransformSteps.length === 0) {\n              <div class=\"ve-tp-no-steps\">\n                No transform steps. Data passes through as-is.\n              </div>\n            }\n          </div>\n\n          <!-- Delete mapping button -->\n          <div class=\"ve-tp-footer\">\n            <button class=\"ve-btn ve-btn-danger\" (click)=\"RemoveSelectedConnection()\">\n              <i class=\"fa-solid fa-trash-can\"></i> Remove Mapping\n            </button>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: ["/* ==========================================================================\n   Visual Field Editor Component CSS\n   Copied from pipelines.component.css (visual editor section)\n   ========================================================================== */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.ve-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n  animation: slideIn 250ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from { opacity: 0; transform: translateX(30px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* ---------------------------------------------------------------------------\n   VE Header\n   --------------------------------------------------------------------------- */\n\n.ve-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  gap: 16px;\n}\n\n.ve-header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.ve-back-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  flex-shrink: 0;\n  transition: all 150ms ease;\n}\n\n.ve-back-btn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-header-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 600;\n  min-width: 0;\n}\n\n.ve-source-label {\n  color: var(--mj-color-indigo-500);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-direction-arrow { color: var(--mj-text-disabled); font-size: 13px; flex-shrink: 0; }\n\n.ve-dest-label {\n  color: var(--mj-color-success-600);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-header-stats {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.ve-stat {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.ve-stat strong {\n  color: var(--mj-text-primary);\n  font-weight: 700;\n}\n\n.ve-stat-sep {\n  width: 1px;\n  height: 14px;\n  background: var(--mj-border-default);\n}\n\n.ve-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.ve-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 14px;\n  border-radius: 7px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border: none;\n  white-space: nowrap;\n}\n\n.ve-btn-ghost {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n.ve-btn-ghost:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-primary); }\n\n.ve-btn-primary {\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n}\n\n.ve-btn-primary:hover { background: var(--mj-color-indigo-600); }\n.ve-btn-primary:disabled { opacity: 0.5; cursor: default; }\n\n.ve-btn-danger {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-color-error-600);\n  border: 1px solid var(--mj-color-error-200);\n}\n\n.ve-btn-danger:hover { background: var(--mj-color-error-100); }\n\n.ve-save-success {\n  font-size: 12px;\n  color: var(--mj-color-success-600);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  animation: fadeIn 300ms ease;\n}\n\n/* Sync toggle in editor header */\n.ve-sync-toggle { flex-shrink: 0; margin-left: 8px; }\n.ve-sync-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n/* Sync toggle styling */\n.sync-toggle {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.sync-toggle input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n\n.sync-toggle-track {\n  width: 34px;\n  height: 18px;\n  background: var(--mj-color-neutral-300);\n  border-radius: 9px;\n  position: relative;\n  transition: background 200ms ease;\n}\n\n.sync-toggle-track::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  background: var(--mj-bg-surface);\n  border-radius: 50%;\n  transition: transform 200ms ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n\n.sync-toggle input:checked + .sync-toggle-track {\n  background: var(--mj-color-success-500);\n}\n\n.sync-toggle input:checked + .sync-toggle-track::after {\n  transform: translateX(16px);\n}\n\n/* Action separator */\n.ve-action-sep {\n  width: 1px;\n  height: 20px;\n  background: var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n/* Active state for preview toggle buttons */\n.ve-btn-ghost.active {\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  border-color: var(--mj-color-indigo-200);\n}\n\n/* ---------------------------------------------------------------------------\n   Data Preview Strip\n   --------------------------------------------------------------------------- */\n\n.ve-preview-strip {\n  display: flex;\n  gap: 1px;\n  background: var(--mj-border-default);\n  border-bottom: 1px solid var(--mj-border-default);\n  max-height: 220px;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.ve-preview-panel {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.ve-preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.ve-preview-header i { font-size: 11px; color: var(--mj-color-indigo-500); }\n.ve-preview-header span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.ve-preview-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.ve-preview-close:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n.ve-preview-loading,\n.ve-preview-empty {\n  padding: 20px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.ve-preview-loading i { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.ve-preview-table-wrap {\n  flex: 1;\n  overflow: auto;\n}\n\n.ve-preview-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 11px;\n}\n\n.ve-preview-table th {\n  position: sticky;\n  top: 0;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  font-size: 10px;\n  padding: 5px 10px;\n  text-align: left;\n  white-space: nowrap;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-preview-table td {\n  padding: 4px 10px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ve-preview-table tbody tr:hover td {\n  background: var(--mj-color-indigo-50);\n}\n\n/* ---------------------------------------------------------------------------\n   Connect mode banner\n   --------------------------------------------------------------------------- */\n\n.ve-connect-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 20px;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-700);\n  font-size: 13px;\n  border-bottom: 1px solid var(--mj-color-indigo-100);\n  flex-shrink: 0;\n}\n\n.ve-connect-banner strong { font-weight: 700; }\n\n.ve-connect-cancel {\n  margin-left: auto;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-color-indigo-100);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-color-indigo-700);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-connect-cancel:hover { background: var(--mj-color-indigo-100); }\n\n/* ---------------------------------------------------------------------------\n   VE Body\n   --------------------------------------------------------------------------- */\n\n.ve-body {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n}\n\n.ve-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  gap: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n.ve-loading i { font-size: 24px; color: var(--mj-color-indigo-500); }\n\n/* Sections wrapper (replaces ve-canvas-wrapper as the main left area) */\n.ve-sections-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n/* Collapsible section */\n.ve-section {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-section:not(.collapsed) {\n  flex: 1;\n  min-height: 0;\n}\n\n.ve-section.collapsed {\n  flex-shrink: 0;\n}\n\n.ve-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  cursor: pointer;\n  user-select: none;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n\n.ve-section-header:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.ve-section-header i {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  width: 12px;\n  flex-shrink: 0;\n  transition: transform 200ms ease;\n}\n\n.ve-section-title {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  color: var(--mj-text-muted);\n}\n\n.ve-section-badge {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  padding: 1px 8px;\n  border-radius: 4px;\n  margin-left: auto;\n}\n\n.ve-section-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  animation: fadeIn 200ms ease;\n}\n\n/* Canvas wrapper (takes available space, pushes transform panel right) */\n.ve-canvas-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n/* ---------------------------------------------------------------------------\n   Column headers\n   --------------------------------------------------------------------------- */\n\n.ve-col-headers {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-col-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.ve-col-header.source i { color: var(--mj-color-indigo-500); }\n.ve-col-header.dest i { color: var(--mj-color-success-600); }\n.ve-col-header-spacer { /* SVG gap */ }\n\n.ve-col-count {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-disabled);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n/* ---------------------------------------------------------------------------\n   Column search bars\n   --------------------------------------------------------------------------- */\n\n.ve-col-searches {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  padding: 6px 0;\n}\n\n.ve-col-search {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 12px;\n}\n\n.ve-col-search i {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-col-search input {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.ve-col-search input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search input::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer { /* SVG gap */ }\n\n/* ---------------------------------------------------------------------------\n   Canvas scroll + grid\n   --------------------------------------------------------------------------- */\n\n.ve-canvas-scroll {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.ve-canvas-grid {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  position: relative;\n}\n\n/* ---------------------------------------------------------------------------\n   Field columns\n   --------------------------------------------------------------------------- */\n\n.ve-field-col {\n  display: flex;\n  flex-direction: column;\n}\n\n.ve-field-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 14px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background 150ms ease, opacity 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n  box-sizing: border-box;\n}\n\n.ve-field-item.mapped { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped {\n  opacity: 0.5;\n  background: var(--mj-bg-page);\n}\n\n.ve-field-item:hover {\n  background: var(--mj-color-indigo-50);\n  opacity: 1;\n}\n\n.ve-field-item.connecting {\n  background: var(--mj-color-indigo-100);\n  opacity: 1;\n  box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target:hover {\n  background: var(--mj-color-success-100);\n  box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--mj-color-neutral-700);\n  font-weight: 500;\n}\n\n.ve-field-type {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges {\n  display: flex;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.ve-fbadge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 3px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n}\n\n.ve-fbadge.pk { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n/* ---------------------------------------------------------------------------\n   SVG connections\n   --------------------------------------------------------------------------- */\n\n.ve-svg {\n  display: block;\n}\n\n.ve-conn-line {\n  fill: none;\n  stroke-width: 2;\n  cursor: pointer;\n  transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n/* Transform-based line styles */\n.ve-conn-line.conn-direct { stroke: #6366f1; stroke-dasharray: none; }\n.ve-conn-line.conn-regex { stroke: #8b5cf6; stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split { stroke: #f59e0b; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine { stroke: #10b981; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup { stroke: #0ea5e9; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format { stroke: #ec4899; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce { stroke: #f97316; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring { stroke: #14b8a6; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom { stroke: #a855f7; stroke-dasharray: 2 3; }\n\n.ve-conn-line:hover { stroke-width: 3.5; }\n.ve-conn-line.selected { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n/* Connection badge at midpoint */\n.ve-badge-fo { overflow: visible; }\n\n.ve-conn-badge {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct { background: #eef2ff; color: #6366f1; border: 2px solid #6366f1; }\n.ve-conn-badge.badge-regex { background: #f5f3ff; color: #8b5cf6; border: 2px solid #8b5cf6; }\n.ve-conn-badge.badge-split { background: #fffbeb; color: #f59e0b; border: 2px solid #f59e0b; }\n.ve-conn-badge.badge-combine { background: #ecfdf5; color: #10b981; border: 2px solid #10b981; }\n.ve-conn-badge.badge-lookup { background: #f0f9ff; color: #0ea5e9; border: 2px solid #0ea5e9; }\n.ve-conn-badge.badge-format { background: #fdf2f8; color: #ec4899; border: 2px solid #ec4899; }\n.ve-conn-badge.badge-coerce { background: #fff7ed; color: #f97316; border: 2px solid #f97316; }\n.ve-conn-badge.badge-substring { background: #f0fdfa; color: #14b8a6; border: 2px solid #14b8a6; }\n.ve-conn-badge.badge-custom { background: #faf5ff; color: #a855f7; border: 2px solid #a855f7; }\n\n.ve-conn-badge:hover { transform: scale(1.2); }\n.ve-conn-badge.selected { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n/* ---------------------------------------------------------------------------\n   Transform Panel (right side)\n   --------------------------------------------------------------------------- */\n\n.ve-transform-panel {\n  width: 320px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  animation: slideInRight 200ms ease;\n}\n\n@keyframes slideInRight {\n  from { opacity: 0; transform: translateX(20px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.ve-tp-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.ve-tp-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 150ms ease;\n}\n\n.ve-tp-close:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n/* Mapping info */\n.ve-tp-mapping-info {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.ve-tp-field {\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 12px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 110px;\n}\n\n.ve-tp-field.source { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n/* Toggles */\n.ve-tp-toggles {\n  display: flex;\n  gap: 16px;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.ve-tp-toggle-box {\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-color-neutral-300);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  color: var(--mj-bg-surface);\n  transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active {\n  background: var(--mj-color-indigo-500);\n  border-color: var(--mj-color-indigo-500);\n}\n\n/* Sections */\n.ve-tp-section {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label {\n  display: block;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 8px;\n}\n\n.ve-tp-section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* Direction buttons */\n.ve-tp-direction-btns {\n  display: flex;\n  gap: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.ve-tp-direction-btns button {\n  flex: 1;\n  padding: 6px 8px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns button:last-child { border-right: none; }\n.ve-tp-direction-btns button:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns button.active { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n/* Transform steps */\n.ve-tp-add-step {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-tp-add-step:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step {\n  margin-top: 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n.ve-tp-step-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.ve-tp-type-select {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-type-select:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 5px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  transition: all 150ms ease;\n  flex-shrink: 0;\n}\n\n.ve-tp-remove-step:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config {\n  padding: 8px 10px;\n}\n\n.ve-tp-config-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.ve-tp-config-row:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row label {\n  width: 80px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.ve-tp-config-row input {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror label {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-tp-step-onerror select {\n  height: 24px;\n  padding: 0 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 11px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-no-steps {\n  padding: 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  font-style: italic;\n}\n\n/* Footer */\n.ve-tp-footer {\n  padding: 14px 16px;\n  margin-top: auto;\n  flex-shrink: 0;\n}\n\n/* ---------------------------------------------------------------------------\n   Scrollbar styling\n   --------------------------------------------------------------------------- */\n\n.ve-canvas-scroll::-webkit-scrollbar,\n.ve-transform-panel::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n.ve-canvas-scroll::-webkit-scrollbar-track,\n.ve-transform-panel::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.ve-canvas-scroll::-webkit-scrollbar-thumb,\n.ve-transform-panel::-webkit-scrollbar-thumb {\n  background: var(--mj-color-neutral-300);\n  border-radius: 3px;\n}\n\n.ve-canvas-scroll::-webkit-scrollbar-thumb:hover,\n.ve-transform-panel::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* ---------------------------------------------------------------------------\n   Info Panel\n   --------------------------------------------------------------------------- */\n\n.ve-info-body {\n  padding: 16px;\n  overflow-y: auto;\n}\n\n.ve-info-loading {\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  padding: 20px;\n}\n\n.ve-info-loading i {\n  color: var(--mj-color-indigo-500);\n  margin-right: 6px;\n}\n\n.ve-info-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 12px;\n  margin-bottom: 16px;\n}\n\n.ve-info-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n}\n\n.ve-info-card-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-500);\n}\n\n.ve-info-card-icon.source {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.sync {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-success {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-error {\n  background: var(--mj-color-error-100);\n  color: var(--mj-color-error-600);\n}\n\n.ve-info-card-icon.info-status-running {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.info-status-pending {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-600);\n}\n\n.ve-info-card-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.ve-info-card-value {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ve-info-card-label {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n.ve-info-details {\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.ve-info-detail-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 14px;\n  font-size: 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-info-detail-row:last-child {\n  border-bottom: none;\n}\n\n.ve-info-detail-label {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.ve-info-detail-value {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n"] }]
+    }], null, { EntityMap: [{
+            type: Input
+        }], CompanyIntegrationID: [{
+            type: Input
+        }], RunViewProvider: [{
+            type: Input
+        }], Close: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(VisualFieldEditorComponent, { className: "VisualFieldEditorComponent", filePath: "src/Integration/components/visual-editor/visual-editor.component.ts", lineNumber: 55 }); })();
+export function LoadVisualFieldEditorComponent() {
+    // Tree-shaking prevention
+}
+//# sourceMappingURL=visual-editor.component.js.map