npm - @memberjunction/ng-dashboards - Versions diffs - 5.35.0 → 5.37.0 - Mend

@memberjunction/ng-dashboards 5.35.0 → 5.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (159) hide show

package/dist/Integration/components/pipelines/pipelines.component.js CHANGED Viewed

@@ -19,27 +19,16 @@ const _forTrack1 = ($index, $item) => $item.ID;
 const _forTrack2 = ($index, $item) => $item.Name;
 const _forTrack3 = ($index, $item) => $item.SourceFieldName + "-" + $item.DestFieldName;
 const _forTrack4 = ($index, $item) => $item.Value;
-function PipelinesComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵelement(1, "mj-stat-badge", 14)(2, "mj-stat-badge", 15);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("Count", ctx_r0.IntegrationCount);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("Count", ctx_r0.TotalMapCount);
-} }
-function PipelinesComponent_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵelement(1, "i", 19);
+function PipelinesComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelement(1, "i", 16);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Loading pipelines...");
     i0.ɵɵelementEnd()();
 } }
-function PipelinesComponent_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵelement(1, "i", 20);
+function PipelinesComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵelement(1, "i", 17);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No Integration Pipelines");
     i0.ɵɵelementEnd();
@@ -47,54 +36,54 @@ function PipelinesComponent_Conditional_13_Conditional_2_Template(rf, ctx) { if
     i0.ɵɵtext(5, "Configure integrations to see data flow pipelines here.");
     i0.ɵɵelementEnd()();
 } }
-function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 32);
+function PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const card_r3 = i0.ɵɵnextContext().$implicit;
+    const card_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(card_r3.LastSync);
+    i0.ɵɵtextInterpolate(card_r2.LastSync);
 } }
-function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_For_18_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 60);
-    i0.ɵɵelement(1, "i", 64);
+function PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_For_18_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 57);
+    i0.ɵɵelement(1, "i", 61);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const em_r6 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("title", "Match: " + em_r6.MatchStrategy);
 } }
-function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_For_18_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_For_18_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 53);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_For_18_Template_div_click_0_listener() { const em_r6 = i0.ɵɵrestoreView(_r5).$implicit; const card_r3 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnMapRowClick(card_r3, em_r6)); });
-    i0.ɵɵelementStart(1, "span", 54);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_For_18_Template_span_click_1_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "label", 55)(3, "input", 56);
-    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_For_18_Template_input_change_3_listener($event) { const em_r6 = i0.ɵɵrestoreView(_r5).$implicit; const card_r3 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnToggleSyncEnabled(card_r3, em_r6, $event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "span", 57);
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_For_18_Template_div_click_0_listener() { const em_r6 = i0.ɵɵrestoreView(_r5).$implicit; const card_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnMapRowClick(card_r2, em_r6)); });
+    i0.ɵɵelementStart(1, "span", 51);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_For_18_Template_span_click_1_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "label", 52)(3, "input", 53);
+    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_For_18_Template_input_change_3_listener($event) { const em_r6 = i0.ɵɵrestoreView(_r5).$implicit; const card_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnToggleSyncEnabled(card_r2, em_r6, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "span", 54);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "span", 58);
+    i0.ɵɵelementStart(5, "span", 55);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 47)(8, "span");
+    i0.ɵɵelementStart(7, "span", 44)(8, "span");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "span", 59);
+    i0.ɵɵelementStart(10, "span", 56);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 49);
-    i0.ɵɵconditionalCreate(13, PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_For_18_Conditional_13_Template, 2, 1, "span", 60);
-    i0.ɵɵelementStart(14, "span", 60);
-    i0.ɵɵelement(15, "i", 61);
+    i0.ɵɵelementStart(12, "span", 46);
+    i0.ɵɵconditionalCreate(13, PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_For_18_Conditional_13_Template, 2, 1, "span", 57);
+    i0.ɵɵelementStart(14, "span", 57);
+    i0.ɵɵelement(15, "i", 58);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "span", 62);
-    i0.ɵɵelement(17, "i", 63);
+    i0.ɵɵelementStart(16, "span", 59);
+    i0.ɵɵelement(17, "i", 60);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const em_r6 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(5);
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵclassProp("sync-disabled", !em_r6.SyncEnabled);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("title", em_r6.SyncEnabled ? "Sync enabled \u2014 click to disable" : "Sync disabled \u2014 click to enable");
@@ -105,9 +94,9 @@ function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_Fo
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", em_r6.ExternalObjectLabel ?? em_r6.ExternalObjectName, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r0.DirectionBadgeClass(em_r6.SyncDirection));
+    i0.ɵɵclassMap(ctx_r2.DirectionBadgeClass(em_r6.SyncDirection));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.DirectionText(em_r6.SyncDirection), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.DirectionText(em_r6.SyncDirection), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("title", em_r6.Entity);
     i0.ɵɵadvance();
@@ -117,192 +106,192 @@ function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_Fo
     i0.ɵɵadvance();
     i0.ɵɵproperty("title", "Conflict: " + em_r6.ConflictResolution);
 } }
-function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_ForEmpty_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52);
+function PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_ForEmpty_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49);
     i0.ɵɵtext(1, " No entity maps match your filter. ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 39)(1, "div", 40);
-    i0.ɵɵelement(2, "i", 41);
-    i0.ɵɵelementStart(3, "input", 42);
-    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r4); const card_r3 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnCardSearch(card_r3, $event)); });
+    i0.ɵɵelementStart(0, "div", 36)(1, "div", 37);
+    i0.ɵɵelement(2, "i", 38);
+    i0.ɵɵelementStart(3, "input", 39);
+    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r4); const card_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnCardSearch(card_r2, $event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 43);
+    i0.ɵɵelementStart(4, "span", 40);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 44)(7, "span", 45);
+    i0.ɵɵelementStart(6, "div", 41)(7, "span", 42);
     i0.ɵɵtext(8, "Sync");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 46);
+    i0.ɵɵelementStart(9, "span", 43);
     i0.ɵɵtext(10, "External Object");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(11, "span", 47);
-    i0.ɵɵelementStart(12, "span", 48);
+    i0.ɵɵelement(11, "span", 44);
+    i0.ɵɵelementStart(12, "span", 45);
     i0.ɵɵtext(13, "MJ Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 49);
+    i0.ɵɵelementStart(14, "span", 46);
     i0.ɵɵtext(15, "Config");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 50);
-    i0.ɵɵrepeaterCreate(17, PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_For_18_Template, 18, 13, "div", 51, _forTrack1, false, PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_ForEmpty_19_Template, 2, 0, "div", 52);
+    i0.ɵɵelementStart(16, "div", 47);
+    i0.ɵɵrepeaterCreate(17, PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_For_18_Template, 18, 13, "div", 48, _forTrack1, false, PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_ForEmpty_19_Template, 2, 0, "div", 49);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const card_r3 = i0.ɵɵnextContext().$implicit;
+    const card_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("value", card_r3.SearchTerm);
+    i0.ɵɵproperty("value", card_r2.SearchTerm);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2(" ", card_r3.FilteredMaps.length, " of ", card_r3.EntityMapCount, " ");
+    i0.ɵɵtextInterpolate2(" ", card_r2.FilteredMaps.length, " of ", card_r2.EntityMapCount, " ");
     i0.ɵɵadvance(12);
-    i0.ɵɵrepeater(card_r3.FilteredMaps);
+    i0.ɵɵrepeater(card_r2.FilteredMaps);
 } }
-function PipelinesComponent_Conditional_13_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_3_For_2_Template_div_click_1_listener() { const card_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ToggleCard(card_r3)); });
-    i0.ɵɵelementStart(2, "div", 24);
-    i0.ɵɵelement(3, "div", 25)(4, "i");
-    i0.ɵɵelementStart(5, "div", 26)(6, "span", 27);
+function PipelinesComponent_Conditional_12_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 20);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_12_Conditional_3_For_2_Template_div_click_1_listener() { const card_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ToggleCard(card_r2)); });
+    i0.ɵɵelementStart(2, "div", 21);
+    i0.ɵɵelement(3, "div", 22)(4, "i");
+    i0.ɵɵelementStart(5, "div", 23)(6, "span", 24);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 28);
+    i0.ɵɵelementStart(8, "span", 25);
     i0.ɵɵtext(9);
-    i0.ɵɵelementStart(10, "span", 29);
+    i0.ɵɵelementStart(10, "span", 26);
     i0.ɵɵtext(11, "\u00B7");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(12);
-    i0.ɵɵelementStart(13, "span", 29);
+    i0.ɵɵelementStart(13, "span", 26);
     i0.ɵɵtext(14, "\u00B7");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(16, "div", 30)(17, "span", 31);
+    i0.ɵɵelementStart(16, "div", 27)(17, "span", 28);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(19, PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_19_Template, 2, 1, "span", 32);
-    i0.ɵɵelementStart(20, "div", 33);
-    i0.ɵɵelement(21, "span", 34)(22, "span", 35);
-    i0.ɵɵelementStart(23, "span", 36);
+    i0.ɵɵconditionalCreate(19, PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_19_Template, 2, 1, "span", 29);
+    i0.ɵɵelementStart(20, "div", 30);
+    i0.ɵɵelement(21, "span", 31)(22, "span", 32);
+    i0.ɵɵelementStart(23, "span", 33);
     i0.ɵɵtext(24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(25, "span", 35)(26, "span", 37);
+    i0.ɵɵelement(25, "span", 32)(26, "span", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(27, "i", 38);
+    i0.ɵɵelement(27, "i", 35);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(28, PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_Template, 20, 4, "div", 39);
+    i0.ɵɵconditionalCreate(28, PipelinesComponent_Conditional_12_Conditional_3_For_2_Conditional_28_Template, 20, 4, "div", 36);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const card_r3 = ctx.$implicit;
-    i0.ɵɵclassProp("expanded", card_r3.IsExpanded);
+    const card_r2 = ctx.$implicit;
+    i0.ɵɵclassProp("expanded", card_r2.IsExpanded);
     i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("background-color", card_r3.StatusColor);
+    i0.ɵɵstyleProp("background-color", card_r2.StatusColor);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(card_r3.Icon + " card-icon");
+    i0.ɵɵclassMap(card_r2.Icon + " card-icon");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(card_r3.IntegrationName);
+    i0.ɵɵtextInterpolate(card_r2.IntegrationName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", card_r3.EntityMapCount, " maps ");
+    i0.ɵɵtextInterpolate1(" ", card_r2.EntityMapCount, " maps ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", card_r3.ActiveMapCount, " active ");
+    i0.ɵɵtextInterpolate1(" ", card_r2.ActiveMapCount, " active ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", card_r3.UniqueEntityCount, " entities ");
+    i0.ɵɵtextInterpolate1(" ", card_r2.UniqueEntityCount, " entities ");
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("color", card_r3.StatusColor);
+    i0.ɵɵstyleProp("color", card_r2.StatusColor);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", card_r3.StatusLabel, " ");
+    i0.ɵɵtextInterpolate1(" ", card_r2.StatusLabel, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(card_r3.LastSync ? 19 : -1);
+    i0.ɵɵconditional(card_r2.LastSync ? 19 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(card_r3.EntityMapCount);
+    i0.ɵɵtextInterpolate(card_r2.EntityMapCount);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("fa-chevron-down", !card_r3.IsExpanded)("fa-chevron-up", card_r3.IsExpanded);
+    i0.ɵɵclassProp("fa-chevron-down", !card_r2.IsExpanded)("fa-chevron-up", card_r2.IsExpanded);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(card_r3.IsExpanded ? 28 : -1);
+    i0.ɵɵconditional(card_r2.IsExpanded ? 28 : -1);
 } }
-function PipelinesComponent_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_13_Conditional_3_For_2_Template, 29, 20, "div", 21, _forTrack0);
+function PipelinesComponent_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_12_Conditional_3_For_2_Template, 29, 20, "div", 18, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.FilteredCards);
+    i0.ɵɵrepeater(ctx_r2.FilteredCards);
 } }
-function PipelinesComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵconditionalCreate(1, PipelinesComponent_Conditional_13_Conditional_1_Template, 4, 0, "div", 16)(2, PipelinesComponent_Conditional_13_Conditional_2_Template, 6, 0, "div", 17)(3, PipelinesComponent_Conditional_13_Conditional_3_Template, 3, 0, "div", 18);
+function PipelinesComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵconditionalCreate(1, PipelinesComponent_Conditional_12_Conditional_1_Template, 4, 0, "div", 13)(2, PipelinesComponent_Conditional_12_Conditional_2_Template, 6, 0, "div", 14)(3, PipelinesComponent_Conditional_12_Conditional_3_Template, 3, 0, "div", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.IsLoading && ctx_r0.PipelineCards.length === 0 ? 1 : ctx_r0.PipelineCards.length === 0 ? 2 : 3);
+    i0.ɵɵconditional(ctx_r2.IsLoading && ctx_r2.PipelineCards.length === 0 ? 1 : ctx_r2.PipelineCards.length === 0 ? 2 : 3);
 } }
-function PipelinesComponent_Conditional_14_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 93)(1, "input", 56);
-    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_14_Conditional_12_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnToggleEditorSyncEnabled($event)); });
+    i0.ɵɵelementStart(0, "label", 90)(1, "input", 53);
+    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_13_Conditional_12_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnToggleEditorSyncEnabled($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(2, "span", 57);
+    i0.ɵɵelement(2, "span", 54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 94);
+    i0.ɵɵelementStart(3, "span", 91);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("title", ctx_r0.EditorEntityMap.SyncEnabled ? "Sync enabled" : "Sync disabled");
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", ctx_r2.EditorEntityMap.SyncEnabled ? "Sync enabled" : "Sync disabled");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r0.EditorEntityMap.SyncEnabled);
+    i0.ɵɵproperty("checked", ctx_r2.EditorEntityMap.SyncEnabled);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap.SyncEnabled ? "Sync On" : "Sync Off");
+    i0.ɵɵtextInterpolate(ctx_r2.EditorEntityMap.SyncEnabled ? "Sync On" : "Sync Off");
 } }
-function PipelinesComponent_Conditional_14_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 19);
+function PipelinesComponent_Conditional_13_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 16);
     i0.ɵɵtext(1, " Running Pipeline... ");
 } }
-function PipelinesComponent_Conditional_14_Conditional_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 95);
+function PipelinesComponent_Conditional_13_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 92);
     i0.ɵɵtext(1, " Run Schema Pipeline ");
 } }
-function PipelinesComponent_Conditional_14_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_39_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵelement(1, "i");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(ctx_r0.PipelineResultSuccess ? "ve-save-success" : "ve-error-msg");
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r2.PipelineResultSuccess ? "ve-save-success" : "ve-error-msg");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r0.PipelineResultSuccess ? "fa-solid fa-circle-check" : "fa-solid fa-circle-xmark");
+    i0.ɵɵclassMap(ctx_r2.PipelineResultSuccess ? "fa-solid fa-circle-check" : "fa-solid fa-circle-xmark");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.PipelineResultMessage, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.PipelineResultMessage, " ");
 } }
-function PipelinesComponent_Conditional_14_Conditional_45_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 19);
+function PipelinesComponent_Conditional_13_Conditional_45_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 16);
     i0.ɵɵtext(1, " Saving... ");
 } }
-function PipelinesComponent_Conditional_14_Conditional_46_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 96);
+function PipelinesComponent_Conditional_13_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 93);
     i0.ɵɵtext(1, " Save ");
 } }
-function PipelinesComponent_Conditional_14_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 88);
-    i0.ɵɵelement(1, "i", 97);
+function PipelinesComponent_Conditional_13_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 85);
+    i0.ɵɵelement(1, "i", 94);
     i0.ɵɵtext(2, " Saved ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 102);
-    i0.ɵɵelement(1, "i", 19);
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99);
+    i0.ɵɵelement(1, "i", 16);
     i0.ɵɵtext(2, " Loading... ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 103);
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 100);
     i0.ɵɵtext(1, "No source data available");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "th");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -311,8 +300,8 @@ function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditio
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(col_r10);
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_For_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td", 106);
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_9_For_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 103);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -322,61 +311,61 @@ function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditio
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(row_r12[col_r11] ?? "");
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr");
-    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_For_8_For_2_Template, 2, 2, "td", 106, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_9_For_8_For_2_Template, 2, 2, "td", 103, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(5);
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.PreviewSourceColumns);
+    i0.ɵɵrepeater(ctx_r2.PreviewSourceColumns);
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 104)(1, "table", 105)(2, "thead")(3, "tr");
-    i0.ɵɵrepeaterCreate(4, PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_For_5_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 101)(1, "table", 102)(2, "thead")(3, "tr");
+    i0.ɵɵrepeaterCreate(4, PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_9_For_5_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "tbody");
-    i0.ɵɵrepeaterCreate(7, PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(7, PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
-    i0.ɵɵrepeater(ctx_r0.PreviewSourceColumns);
+    i0.ɵɵrepeater(ctx_r2.PreviewSourceColumns);
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.PreviewSourceRows);
+    i0.ɵɵrepeater(ctx_r2.PreviewSourceRows);
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 98)(1, "div", 99);
-    i0.ɵɵelement(2, "i", 79);
+    i0.ɵɵelementStart(0, "div", 95)(1, "div", 96);
+    i0.ɵɵelement(2, "i", 76);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 100);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ShowSourcePreview = false); });
-    i0.ɵɵelement(6, "i", 101);
+    i0.ɵɵelementStart(5, "button", 97);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ShowSourcePreview = false); });
+    i0.ɵɵelement(6, "i", 98);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_7_Template, 3, 0, "div", 102)(8, PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_8_Template, 2, 0, "div", 103)(9, PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_Template, 9, 0, "div", 104);
+    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_7_Template, 3, 0, "div", 99)(8, PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_8_Template, 2, 0, "div", 100)(9, PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Conditional_9_Template, 9, 0, "div", 101);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Source Preview: ", (ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.ExternalObjectLabel) ?? (ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.ExternalObjectName));
+    i0.ɵɵtextInterpolate1("Source Preview: ", (ctx_r2.EditorEntityMap == null ? null : ctx_r2.EditorEntityMap.ExternalObjectLabel) ?? (ctx_r2.EditorEntityMap == null ? null : ctx_r2.EditorEntityMap.ExternalObjectName));
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r0.PreviewSourceLoading ? 7 : ctx_r0.PreviewSourceRows.length === 0 ? 8 : 9);
+    i0.ɵɵconditional(ctx_r2.PreviewSourceLoading ? 7 : ctx_r2.PreviewSourceRows.length === 0 ? 8 : 9);
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 102);
-    i0.ɵɵelement(1, "i", 19);
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99);
+    i0.ɵɵelement(1, "i", 16);
     i0.ɵɵtext(2, " Loading... ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 103);
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 100);
     i0.ɵɵtext(1, "No destination data available");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "th");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -385,8 +374,8 @@ function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditio
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(col_r14);
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_For_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td", 106);
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_9_For_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 103);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -396,114 +385,114 @@ function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditio
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(row_r16[col_r15] ?? "");
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr");
-    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_For_8_For_2_Template, 2, 2, "td", 106, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_9_For_8_For_2_Template, 2, 2, "td", 103, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(5);
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.PreviewDestColumns);
+    i0.ɵɵrepeater(ctx_r2.PreviewDestColumns);
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 104)(1, "table", 105)(2, "thead")(3, "tr");
-    i0.ɵɵrepeaterCreate(4, PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_For_5_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 101)(1, "table", 102)(2, "thead")(3, "tr");
+    i0.ɵɵrepeaterCreate(4, PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_9_For_5_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "tbody");
-    i0.ɵɵrepeaterCreate(7, PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(7, PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
-    i0.ɵɵrepeater(ctx_r0.PreviewDestColumns);
+    i0.ɵɵrepeater(ctx_r2.PreviewDestColumns);
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.PreviewDestRows);
+    i0.ɵɵrepeater(ctx_r2.PreviewDestRows);
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 98)(1, "div", 99);
-    i0.ɵɵelement(2, "i", 81);
+    i0.ɵɵelementStart(0, "div", 95)(1, "div", 96);
+    i0.ɵɵelement(2, "i", 78);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 100);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ShowDestPreview = false); });
-    i0.ɵɵelement(6, "i", 101);
+    i0.ɵɵelementStart(5, "button", 97);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ShowDestPreview = false); });
+    i0.ɵɵelement(6, "i", 98);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_7_Template, 3, 0, "div", 102)(8, PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_8_Template, 2, 0, "div", 103)(9, PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_Template, 9, 0, "div", 104);
+    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_7_Template, 3, 0, "div", 99)(8, PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_8_Template, 2, 0, "div", 100)(9, PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Conditional_9_Template, 9, 0, "div", 101);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Dest Preview: ", ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.Entity);
+    i0.ɵɵtextInterpolate1("Dest Preview: ", ctx_r2.EditorEntityMap == null ? null : ctx_r2.EditorEntityMap.Entity);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r0.PreviewDestLoading ? 7 : ctx_r0.PreviewDestRows.length === 0 ? 8 : 9);
+    i0.ɵɵconditional(ctx_r2.PreviewDestLoading ? 7 : ctx_r2.PreviewDestRows.length === 0 ? 8 : 9);
 } }
-function PipelinesComponent_Conditional_14_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 89);
-    i0.ɵɵconditionalCreate(1, PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Template, 10, 2, "div", 98);
-    i0.ɵɵconditionalCreate(2, PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Template, 10, 2, "div", 98);
+function PipelinesComponent_Conditional_13_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵconditionalCreate(1, PipelinesComponent_Conditional_13_Conditional_48_Conditional_1_Template, 10, 2, "div", 95);
+    i0.ɵɵconditionalCreate(2, PipelinesComponent_Conditional_13_Conditional_48_Conditional_2_Template, 10, 2, "div", 95);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.ShowSourcePreview ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.ShowSourcePreview ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.ShowDestPreview ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.ShowDestPreview ? 2 : -1);
 } }
-function PipelinesComponent_Conditional_14_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_49_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 90);
-    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵelement(1, "i", 61);
     i0.ɵɵtext(2, " Click a destination field to map from ");
     i0.ɵɵelementStart(3, "strong");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 107);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_49_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.CancelConnect()); });
+    i0.ɵɵelementStart(5, "button", 104);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_49_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.CancelConnect()); });
     i0.ɵɵtext(6, "Cancel");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r0.ConnectingFromSource);
+    i0.ɵɵtextInterpolate(ctx_r2.ConnectingFromSource);
 } }
-function PipelinesComponent_Conditional_14_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 92);
-    i0.ɵɵelement(1, "i", 19);
+function PipelinesComponent_Conditional_13_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89);
+    i0.ɵɵelement(1, "i", 16);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Loading field mappings...");
     i0.ɵɵelementEnd()();
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_26_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 141);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_26_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 138);
     i0.ɵɵtext(1, "PK");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_26_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 142);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_26_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 139);
     i0.ɵɵtext(1, "*");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_26_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_26_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 137);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_26_Template_div_click_0_listener($event) { const sf_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); ctx_r0.OnEditorSourceClick(sf_r21.Name); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "span", 138);
+    i0.ɵɵelementStart(0, "div", 134);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_26_Template_div_click_0_listener($event) { const sf_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.OnEditorSourceClick(sf_r21.Name); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "span", 135);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 139);
+    i0.ɵɵelementStart(3, "span", 136);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 140);
-    i0.ɵɵconditionalCreate(6, PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_26_Conditional_6_Template, 2, 0, "span", 141);
-    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_26_Conditional_7_Template, 2, 0, "span", 142);
+    i0.ɵɵelementStart(5, "span", 137);
+    i0.ɵɵconditionalCreate(6, PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_26_Conditional_6_Template, 2, 0, "span", 138);
+    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_26_Conditional_7_Template, 2, 0, "span", 139);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const sf_r21 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("height", ctx_r0.FIELD_HEIGHT, "px");
-    i0.ɵɵclassProp("mapped", ctx_r0.IsSourceFieldMapped(sf_r21.Name))("unmapped", !ctx_r0.IsSourceFieldMapped(sf_r21.Name))("connecting", ctx_r0.ConnectingFromSource === sf_r21.Name);
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵstyleProp("height", ctx_r2.FIELD_HEIGHT, "px");
+    i0.ɵɵclassProp("mapped", ctx_r2.IsSourceFieldMapped(sf_r21.Name))("unmapped", !ctx_r2.IsSourceFieldMapped(sf_r21.Name))("connecting", ctx_r2.ConnectingFromSource === sf_r21.Name);
     i0.ɵɵadvance();
     i0.ɵɵproperty("title", sf_r21.Name);
     i0.ɵɵadvance();
@@ -515,61 +504,61 @@ function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_26_T
     i0.ɵɵadvance();
     i0.ɵɵconditional(sf_r21.IsRequired ? 7 : -1);
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 133);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 130);
     i0.ɵɵtext(1, "No source fields found");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_30_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_30_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "path", 143);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_30_Template_path_click_0_listener($event) { const ɵ$index_493_r23 = i0.ɵɵrestoreView(_r22).$index; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.SelectConnection(ɵ$index_493_r23, $event)); });
+    i0.ɵɵelementStart(0, "path", 140);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_30_Template_path_click_0_listener($event) { const ɵ$index_486_r23 = i0.ɵɵrestoreView(_r22).$index; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SelectConnection(ɵ$index_486_r23, $event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "foreignObject", 144);
+    i0.ɵɵelementStart(1, "foreignObject", 141);
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(2, "div", 145);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_30_Template_div_click_2_listener($event) { const ɵ$index_493_r23 = i0.ɵɵrestoreView(_r22).$index; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.SelectConnection(ɵ$index_493_r23, $event)); });
+    i0.ɵɵelementStart(2, "div", 142);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_30_Template_div_click_2_listener($event) { const ɵ$index_486_r23 = i0.ɵɵrestoreView(_r22).$index; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SelectConnection(ɵ$index_486_r23, $event)); });
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const conn_r24 = ctx.$implicit;
-    const ɵ$index_493_r23 = ctx.$index;
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassMap("ve-conn-line " + ctx_r0.GetConnectionLineClass(conn_r24));
-    i0.ɵɵclassProp("selected", ctx_r0.SelectedConnectionIdx === ɵ$index_493_r23);
-    i0.ɵɵattribute("d", ctx_r0.GetConnectionPath(conn_r24));
+    const ɵ$index_486_r23 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassMap("ve-conn-line " + ctx_r2.GetConnectionLineClass(conn_r24));
+    i0.ɵɵclassProp("selected", ctx_r2.SelectedConnectionIdx === ɵ$index_486_r23);
+    i0.ɵɵattribute("d", ctx_r2.GetConnectionPath(conn_r24));
     i0.ɵɵadvance();
-    i0.ɵɵattribute("x", ctx_r0.SVG_WIDTH / 2 - 14)("y", ctx_r0.GetConnectionMidY(conn_r24) - 14);
+    i0.ɵɵattribute("x", ctx_r2.SVG_WIDTH / 2 - 14)("y", ctx_r2.GetConnectionMidY(conn_r24) - 14);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("ve-conn-badge " + ctx_r0.GetConnectionBadgeClass(conn_r24));
-    i0.ɵɵclassProp("selected", ctx_r0.SelectedConnectionIdx === ɵ$index_493_r23);
+    i0.ɵɵclassMap("ve-conn-badge " + ctx_r2.GetConnectionBadgeClass(conn_r24));
+    i0.ɵɵclassProp("selected", ctx_r2.SelectedConnectionIdx === ɵ$index_486_r23);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r0.GetConnectionDirectionIcon(conn_r24));
+    i0.ɵɵclassMap(ctx_r2.GetConnectionDirectionIcon(conn_r24));
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_33_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 142);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_33_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 139);
     i0.ɵɵtext(1, "*");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_33_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_33_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 137);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_33_Template_div_click_0_listener($event) { const df_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); ctx_r0.OnEditorDestClick(df_r26.Name); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "span", 138);
+    i0.ɵɵelementStart(0, "div", 134);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_33_Template_div_click_0_listener($event) { const df_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.OnEditorDestClick(df_r26.Name); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "span", 135);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 139);
+    i0.ɵɵelementStart(3, "span", 136);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 140);
-    i0.ɵɵconditionalCreate(6, PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_33_Conditional_6_Template, 2, 0, "span", 142);
+    i0.ɵɵelementStart(5, "span", 137);
+    i0.ɵɵconditionalCreate(6, PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_33_Conditional_6_Template, 2, 0, "span", 139);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const df_r26 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("height", ctx_r0.FIELD_HEIGHT, "px");
-    i0.ɵɵclassProp("mapped", ctx_r0.IsDestFieldMapped(df_r26.Name))("unmapped", !ctx_r0.IsDestFieldMapped(df_r26.Name))("connect-target", ctx_r0.ConnectingFromSource !== null);
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵstyleProp("height", ctx_r2.FIELD_HEIGHT, "px");
+    i0.ɵɵclassProp("mapped", ctx_r2.IsDestFieldMapped(df_r26.Name))("unmapped", !ctx_r2.IsDestFieldMapped(df_r26.Name))("connect-target", ctx_r2.ConnectingFromSource !== null);
     i0.ɵɵadvance();
     i0.ɵɵproperty("title", df_r26.Name);
     i0.ɵɵadvance();
@@ -579,207 +568,207 @@ function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_33_T
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(df_r26.IsRequired ? 6 : -1);
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Conditional_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 133);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 130);
     i0.ɵɵtext(1, "No destination fields found");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 114)(1, "div", 117)(2, "div", 118)(3, "div", 119);
-    i0.ɵɵelement(4, "i", 79);
+    i0.ɵɵelementStart(0, "div", 111)(1, "div", 114)(2, "div", 115)(3, "div", 116);
+    i0.ɵɵelement(4, "i", 76);
     i0.ɵɵtext(5, " Source Fields ");
-    i0.ɵɵelementStart(6, "span", 120);
+    i0.ɵɵelementStart(6, "span", 117);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(8, "div", 121);
-    i0.ɵɵelementStart(9, "div", 122);
-    i0.ɵɵelement(10, "i", 81);
+    i0.ɵɵelement(8, "div", 118);
+    i0.ɵɵelementStart(9, "div", 119);
+    i0.ɵɵelement(10, "i", 78);
     i0.ɵɵtext(11, " MJ Entity Fields ");
-    i0.ɵɵelementStart(12, "span", 120);
+    i0.ɵɵelementStart(12, "span", 117);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "div", 123)(15, "div", 124);
-    i0.ɵɵelement(16, "i", 125);
-    i0.ɵɵelementStart(17, "input", 126);
-    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Template_input_input_17_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.EditorSearchSource = $event.target.value); });
+    i0.ɵɵelementStart(14, "div", 120)(15, "div", 121);
+    i0.ɵɵelement(16, "i", 122);
+    i0.ɵɵelementStart(17, "input", 123);
+    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_Template_input_input_17_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.EditorSearchSource = $event.target.value); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(18, "div", 127);
-    i0.ɵɵelementStart(19, "div", 124);
-    i0.ɵɵelement(20, "i", 125);
-    i0.ɵɵelementStart(21, "input", 128);
-    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Template_input_input_21_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.EditorSearchDest = $event.target.value); });
+    i0.ɵɵelement(18, "div", 124);
+    i0.ɵɵelementStart(19, "div", 121);
+    i0.ɵɵelement(20, "i", 122);
+    i0.ɵɵelementStart(21, "input", 125);
+    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_Template_input_input_21_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.EditorSearchDest = $event.target.value); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(22, "div", 129);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Template_div_click_22_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.DeselectConnection()); });
-    i0.ɵɵelementStart(23, "div", 130)(24, "div", 131);
-    i0.ɵɵrepeaterCreate(25, PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_26_Template, 8, 13, "div", 132, _forTrack2);
-    i0.ɵɵconditionalCreate(27, PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Conditional_27_Template, 2, 0, "div", 133);
+    i0.ɵɵelementStart(22, "div", 126);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_Template_div_click_22_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.DeselectConnection()); });
+    i0.ɵɵelementStart(23, "div", 127)(24, "div", 128);
+    i0.ɵɵrepeaterCreate(25, PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_26_Template, 8, 13, "div", 129, _forTrack2);
+    i0.ɵɵconditionalCreate(27, PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_Conditional_27_Template, 2, 0, "div", 130);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(28, "svg", 134);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Template_svg_click_28_listener($event) { i0.ɵɵrestoreView(_r19); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵrepeaterCreate(29, PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_30_Template, 4, 13, null, null, _forTrack3);
+    i0.ɵɵelementStart(28, "svg", 131);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_Template_svg_click_28_listener($event) { i0.ɵɵrestoreView(_r19); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵrepeaterCreate(29, PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_30_Template, 4, 13, null, null, _forTrack3);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(31, "div", 135);
-    i0.ɵɵrepeaterCreate(32, PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_33_Template, 7, 12, "div", 136, _forTrack2);
-    i0.ɵɵconditionalCreate(34, PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Conditional_34_Template, 2, 0, "div", 133);
+    i0.ɵɵelementStart(31, "div", 132);
+    i0.ɵɵrepeaterCreate(32, PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_For_33_Template, 7, 12, "div", 133, _forTrack2);
+    i0.ɵɵconditionalCreate(34, PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_Conditional_34_Template, 2, 0, "div", 130);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorSourceFields.length);
+    i0.ɵɵtextInterpolate(ctx_r2.EditorSourceFields.length);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorDestFields.length);
+    i0.ɵɵtextInterpolate(ctx_r2.EditorDestFields.length);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r0.EditorSearchSource);
+    i0.ɵɵproperty("value", ctx_r2.EditorSearchSource);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r0.EditorSearchDest);
+    i0.ɵɵproperty("value", ctx_r2.EditorSearchDest);
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("min-height", ctx_r0.EditorCanvasHeight, "px");
+    i0.ɵɵstyleProp("min-height", ctx_r2.EditorCanvasHeight, "px");
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r0.FilteredEditorSourceFields);
+    i0.ɵɵrepeater(ctx_r2.FilteredEditorSourceFields);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.FilteredEditorSourceFields.length === 0 ? 27 : -1);
+    i0.ɵɵconditional(ctx_r2.FilteredEditorSourceFields.length === 0 ? 27 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("width", ctx_r0.SVG_WIDTH)("height", ctx_r0.EditorCanvasHeight)("viewBox", "0 0 " + ctx_r0.SVG_WIDTH + " " + ctx_r0.EditorCanvasHeight);
+    i0.ɵɵattribute("width", ctx_r2.SVG_WIDTH)("height", ctx_r2.EditorCanvasHeight)("viewBox", "0 0 " + ctx_r2.SVG_WIDTH + " " + ctx_r2.EditorCanvasHeight);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.VisibleConnections);
+    i0.ɵɵrepeater(ctx_r2.VisibleConnections);
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.FilteredEditorDestFields);
+    i0.ɵɵrepeater(ctx_r2.FilteredEditorDestFields);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.FilteredEditorDestFields.length === 0 ? 34 : -1);
+    i0.ɵɵconditional(ctx_r2.FilteredEditorDestFields.length === 0 ? 34 : -1);
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 146);
-    i0.ɵɵelement(1, "i", 19);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 143);
+    i0.ɵɵelement(1, "i", 16);
     i0.ɵɵtext(2, " Loading stats... ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 148)(1, "div", 159);
-    i0.ɵɵelement(2, "i", 111);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_14_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 145)(1, "div", 156);
+    i0.ɵɵelement(2, "i", 108);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 150)(4, "span", 151);
+    i0.ɵɵelementStart(3, "div", 147)(4, "span", 148);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 152);
+    i0.ɵɵelementStart(6, "span", 149);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(5);
+    const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.SyncStatusClass(ctx_r0.InfoLastSync.Status));
+    i0.ɵɵproperty("ngClass", ctx_r2.SyncStatusClass(ctx_r2.InfoLastSync.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-circle-check", ctx_r0.InfoLastSync.Status === "Success")("fa-circle-xmark", ctx_r0.InfoLastSync.Status === "Failed")("fa-spinner", ctx_r0.InfoLastSync.Status === "In Progress")("fa-clock", ctx_r0.InfoLastSync.Status === "Pending");
+    i0.ɵɵclassProp("fa-circle-check", ctx_r2.InfoLastSync.Status === "Success")("fa-circle-xmark", ctx_r2.InfoLastSync.Status === "Failed")("fa-spinner", ctx_r2.InfoLastSync.Status === "In Progress")("fa-clock", ctx_r2.InfoLastSync.Status === "Pending");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.InfoLastSync.Status);
+    i0.ɵɵtextInterpolate(ctx_r2.InfoLastSync.Status);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r0.InfoLastSync.TotalRecords, " records processed");
+    i0.ɵɵtextInterpolate1("", ctx_r2.InfoLastSync.TotalRecords, " records processed");
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Conditional_2_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 156)(1, "span", 157);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_14_Conditional_2_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 153)(1, "span", 154);
     i0.ɵɵtext(2, "Match Strategy");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 158);
+    i0.ɵɵelementStart(3, "span", 155);
     i0.ɵɵtext(4, "Configured");
     i0.ɵɵelementEnd()();
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 147)(1, "div", 148)(2, "div", 149);
-    i0.ɵɵelement(3, "i", 81);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 144)(1, "div", 145)(2, "div", 146);
+    i0.ɵɵelement(3, "i", 78);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 150)(5, "span", 151);
+    i0.ɵɵelementStart(4, "div", 147)(5, "span", 148);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 152);
+    i0.ɵɵelementStart(7, "span", 149);
     i0.ɵɵtext(8, "MJ Records");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 148)(10, "div", 153);
-    i0.ɵɵelement(11, "i", 79);
+    i0.ɵɵelementStart(9, "div", 145)(10, "div", 150);
+    i0.ɵɵelement(11, "i", 76);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 150)(13, "span", 151);
+    i0.ɵɵelementStart(12, "div", 147)(13, "span", 148);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "span", 152);
+    i0.ɵɵelementStart(15, "span", 149);
     i0.ɵɵtext(16, "Source Fields");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 148)(18, "div", 154);
-    i0.ɵɵelement(19, "i", 61);
+    i0.ɵɵelementStart(17, "div", 145)(18, "div", 151);
+    i0.ɵɵelement(19, "i", 58);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 150)(21, "span", 151);
+    i0.ɵɵelementStart(20, "div", 147)(21, "span", 148);
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "span", 152);
+    i0.ɵɵelementStart(23, "span", 149);
     i0.ɵɵtext(24, "Last Sync");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(25, PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Conditional_2_Conditional_25_Template, 8, 11, "div", 148);
+    i0.ɵɵconditionalCreate(25, PipelinesComponent_Conditional_13_Conditional_52_Conditional_14_Conditional_2_Conditional_25_Template, 8, 11, "div", 145);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 155)(27, "div", 156)(28, "span", 157);
+    i0.ɵɵelementStart(26, "div", 152)(27, "div", 153)(28, "span", 154);
     i0.ɵɵtext(29, "Sync Direction");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 158);
+    i0.ɵɵelementStart(30, "span", 155);
     i0.ɵɵtext(31);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "div", 156)(33, "span", 157);
+    i0.ɵɵelementStart(32, "div", 153)(33, "span", 154);
     i0.ɵɵtext(34, "Conflict Resolution");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "span", 158);
+    i0.ɵɵelementStart(35, "span", 155);
     i0.ɵɵtext(36);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(37, "div", 156)(38, "span", 157);
+    i0.ɵɵelementStart(37, "div", 153)(38, "span", 154);
     i0.ɵɵtext(39, "Delete Behavior");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(40, "span", 158);
+    i0.ɵɵelementStart(40, "span", 155);
     i0.ɵɵtext(41);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(42, "div", 156)(43, "span", 157);
+    i0.ɵɵelementStart(42, "div", 153)(43, "span", 154);
     i0.ɵɵtext(44, "Priority");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "span", 158);
+    i0.ɵɵelementStart(45, "span", 155);
     i0.ɵɵtext(46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(47, PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Conditional_2_Conditional_47_Template, 5, 0, "div", 156);
+    i0.ɵɵconditionalCreate(47, PipelinesComponent_Conditional_13_Conditional_52_Conditional_14_Conditional_2_Conditional_47_Template, 5, 0, "div", 153);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r0.InfoDestRecordCount ?? "-");
+    i0.ɵɵtextInterpolate(ctx_r2.InfoDestRecordCount ?? "-");
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorSourceFields.length);
+    i0.ɵɵtextInterpolate(ctx_r2.EditorSourceFields.length);
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(ctx_r0.FormatSyncDate((ctx_r0.InfoLastSync == null ? null : ctx_r0.InfoLastSync.StartedAt) ?? null));
+    i0.ɵɵtextInterpolate(ctx_r2.FormatSyncDate((ctx_r2.InfoLastSync == null ? null : ctx_r2.InfoLastSync.StartedAt) ?? null));
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r0.InfoLastSync ? 25 : -1);
+    i0.ɵɵconditional(ctx_r2.InfoLastSync ? 25 : -1);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.SyncDirection);
+    i0.ɵɵtextInterpolate(ctx_r2.EditorEntityMap == null ? null : ctx_r2.EditorEntityMap.SyncDirection);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.ConflictResolution);
+    i0.ɵɵtextInterpolate(ctx_r2.EditorEntityMap == null ? null : ctx_r2.EditorEntityMap.ConflictResolution);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.DeleteBehavior);
+    i0.ɵɵtextInterpolate(ctx_r2.EditorEntityMap == null ? null : ctx_r2.EditorEntityMap.DeleteBehavior);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.Priority);
+    i0.ɵɵtextInterpolate(ctx_r2.EditorEntityMap == null ? null : ctx_r2.EditorEntityMap.Priority);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.MatchStrategy) ? 47 : -1);
+    i0.ɵɵconditional((ctx_r2.EditorEntityMap == null ? null : ctx_r2.EditorEntityMap.MatchStrategy) ? 47 : -1);
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 115);
-    i0.ɵɵconditionalCreate(1, PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Conditional_1_Template, 3, 0, "div", 146)(2, PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Conditional_2_Template, 48, 9);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 112);
+    i0.ɵɵconditionalCreate(1, PipelinesComponent_Conditional_13_Conditional_52_Conditional_14_Conditional_1_Template, 3, 0, "div", 143)(2, PipelinesComponent_Conditional_13_Conditional_52_Conditional_14_Conditional_2_Template, 48, 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.InfoPanelLoading ? 1 : 2);
+    i0.ɵɵconditional(ctx_r2.InfoPanelLoading ? 1 : 2);
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 96);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 93);
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 96);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 93);
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 187);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 184);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -789,144 +778,144 @@ function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(tt_r30.Label);
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 195)(1, "label");
+    i0.ɵɵelementStart(0, "div", 192)(1, "label");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 196);
-    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_Conditional_9_For_2_Template_input_input_3_listener($event) { const key_r33 = i0.ɵɵrestoreView(_r32).$implicit; const ɵ$index_718_r29 = i0.ɵɵnextContext(2).$index; const conn_r34 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnTransformConfigChange(conn_r34, ɵ$index_718_r29, key_r33, $event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 193);
+    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_Conditional_9_For_2_Template_input_input_3_listener($event) { const key_r33 = i0.ɵɵrestoreView(_r32).$implicit; const ɵ$index_711_r29 = i0.ɵɵnextContext(2).$index; const conn_r34 = i0.ɵɵnextContext(); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnTransformConfigChange(conn_r34, ɵ$index_711_r29, key_r33, $event.target.value)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const key_r33 = ctx.$implicit;
     const step_r31 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(4);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(key_r33);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("placeholder", i0.ɵɵinterpolate(key_r33))("value", ctx_r0.GetConfigValue(step_r31, key_r33));
+    i0.ɵɵproperty("placeholder", i0.ɵɵinterpolate(key_r33))("value", ctx_r2.GetConfigValue(step_r31, key_r33));
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 189);
-    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_Conditional_9_For_2_Template, 4, 4, "div", 195, i0.ɵɵrepeaterTrackByIdentity);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 186);
+    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_Conditional_9_For_2_Template, 4, 4, "div", 192, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const step_r31 = i0.ɵɵnextContext().$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(4);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.GetConfigKeys(step_r31));
+    i0.ɵɵrepeater(ctx_r2.GetConfigKeys(step_r31));
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 179)(1, "div", 184)(2, "span", 185);
+    i0.ɵɵelementStart(0, "div", 176)(1, "div", 181)(2, "span", 182);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "select", 186);
-    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_Template_select_change_4_listener($event) { const ɵ$index_718_r29 = i0.ɵɵrestoreView(_r28).$index; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnConnectionTransformChange(ɵ$index_718_r29, $event.target.value)); });
-    i0.ɵɵrepeaterCreate(5, PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_For_6_Template, 2, 3, "option", 187, _forTrack4);
+    i0.ɵɵelementStart(4, "select", 183);
+    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_Template_select_change_4_listener($event) { const ɵ$index_711_r29 = i0.ɵɵrestoreView(_r28).$index; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.OnConnectionTransformChange(ɵ$index_711_r29, $event.target.value)); });
+    i0.ɵɵrepeaterCreate(5, PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_For_6_Template, 2, 3, "option", 184, _forTrack4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 188);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_Template_button_click_7_listener() { const ɵ$index_718_r29 = i0.ɵɵrestoreView(_r28).$index; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.RemoveTransformStep(ɵ$index_718_r29)); });
-    i0.ɵɵelement(8, "i", 183);
+    i0.ɵɵelementStart(7, "button", 185);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_Template_button_click_7_listener() { const ɵ$index_711_r29 = i0.ɵɵrestoreView(_r28).$index; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.RemoveTransformStep(ɵ$index_711_r29)); });
+    i0.ɵɵelement(8, "i", 180);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_Conditional_9_Template, 3, 0, "div", 189);
-    i0.ɵɵelementStart(10, "div", 190)(11, "label");
+    i0.ɵɵconditionalCreate(9, PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_Conditional_9_Template, 3, 0, "div", 186);
+    i0.ɵɵelementStart(10, "div", 187)(11, "label");
     i0.ɵɵtext(12, "On Error:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "select", 191);
-    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_Template_select_change_13_listener($event) { const step_r31 = i0.ɵɵrestoreView(_r28).$implicit; const conn_r34 = i0.ɵɵnextContext(); step_r31.OnError = $event.target.value; return i0.ɵɵresetView(conn_r34.IsDirty = true); });
-    i0.ɵɵelementStart(14, "option", 192);
+    i0.ɵɵelementStart(13, "select", 188);
+    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_Template_select_change_13_listener($event) { const step_r31 = i0.ɵɵrestoreView(_r28).$implicit; const conn_r34 = i0.ɵɵnextContext(); step_r31.OnError = $event.target.value; return i0.ɵɵresetView(conn_r34.IsDirty = true); });
+    i0.ɵɵelementStart(14, "option", 189);
     i0.ɵɵtext(15, "Fail");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "option", 193);
+    i0.ɵɵelementStart(16, "option", 190);
     i0.ɵɵtext(17, "Skip");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "option", 194);
+    i0.ɵɵelementStart(18, "option", 191);
     i0.ɵɵtext(19, "Null");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const step_r31 = ctx.$implicit;
-    const ɵ$index_718_r29 = ctx.$index;
-    const ctx_r0 = i0.ɵɵnextContext(4);
+    const ɵ$index_711_r29 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ɵ$index_718_r29 + 1);
+    i0.ɵɵtextInterpolate(ɵ$index_711_r29 + 1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("value", step_r31.Type);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.TRANSFORM_TYPES);
+    i0.ɵɵrepeater(ctx_r2.TRANSFORM_TYPES);
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(step_r31.Type !== "direct" ? 9 : -1);
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("value", step_r31.OnError);
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Conditional_43_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 180);
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 177);
     i0.ɵɵtext(1, " No transform steps. Data passes through as-is. ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 160);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r27); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "div", 161)(2, "span", 162);
+    i0.ɵɵelementStart(0, "div", 157);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r27); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 158)(2, "span", 159);
     i0.ɵɵtext(3, "Mapping Details");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 163);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.DeselectConnection()); });
-    i0.ɵɵelement(5, "i", 101);
+    i0.ɵɵelementStart(4, "button", 160);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.DeselectConnection()); });
+    i0.ɵɵelement(5, "i", 98);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 164)(7, "div", 165)(8, "span", 166);
+    i0.ɵɵelementStart(6, "div", 161)(7, "div", 162)(8, "span", 163);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(10, "i", 167);
-    i0.ɵɵelementStart(11, "span", 168);
+    i0.ɵɵelement(10, "i", 164);
+    i0.ɵɵelementStart(11, "span", 165);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 169)(14, "label", 170);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template_label_click_14_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ToggleConnectionKey()); });
-    i0.ɵɵelementStart(15, "span", 171);
-    i0.ɵɵconditionalCreate(16, PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Conditional_16_Template, 1, 0, "i", 96);
+    i0.ɵɵelementStart(13, "div", 166)(14, "label", 167);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Template_label_click_14_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ToggleConnectionKey()); });
+    i0.ɵɵelementStart(15, "span", 168);
+    i0.ɵɵconditionalCreate(16, PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Conditional_16_Template, 1, 0, "i", 93);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(17, "span");
     i0.ɵɵtext(18, "Key Field");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "label", 170);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template_label_click_19_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ToggleConnectionRequired()); });
-    i0.ɵɵelementStart(20, "span", 171);
-    i0.ɵɵconditionalCreate(21, PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Conditional_21_Template, 1, 0, "i", 96);
+    i0.ɵɵelementStart(19, "label", 167);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Template_label_click_19_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.ToggleConnectionRequired()); });
+    i0.ɵɵelementStart(20, "span", 168);
+    i0.ɵɵconditionalCreate(21, PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Conditional_21_Template, 1, 0, "i", 93);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(22, "span");
     i0.ɵɵtext(23, "Required");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(24, "div", 172)(25, "label", 173);
+    i0.ɵɵelementStart(24, "div", 169)(25, "label", 170);
     i0.ɵɵtext(26, "Direction");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "div", 174)(28, "button", 175);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnConnectionDirectionChange("SourceToDest")); });
+    i0.ɵɵelementStart(27, "div", 171)(28, "button", 172);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnConnectionDirectionChange("SourceToDest")); });
     i0.ɵɵtext(29, " Source \u2192 Dest ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "button", 175);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnConnectionDirectionChange("DestToSource")); });
+    i0.ɵɵelementStart(30, "button", 172);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnConnectionDirectionChange("DestToSource")); });
     i0.ɵɵtext(31, " Dest \u2192 Source ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "button", 175);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnConnectionDirectionChange("Both")); });
+    i0.ɵɵelementStart(32, "button", 172);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnConnectionDirectionChange("Both")); });
     i0.ɵɵtext(33, " Both ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(34, "div", 172)(35, "div", 176)(36, "label", 173);
+    i0.ɵɵelementStart(34, "div", 169)(35, "div", 173)(36, "label", 170);
     i0.ɵɵtext(37, "Transform Pipeline");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "button", 177);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template_button_click_38_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.AddTransformStep()); });
-    i0.ɵɵelement(39, "i", 178);
+    i0.ɵɵelementStart(38, "button", 174);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Template_button_click_38_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.AddTransformStep()); });
+    i0.ɵɵelement(39, "i", 175);
     i0.ɵɵtext(40, " Add Step ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(41, PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_Template, 20, 4, "div", 179, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵconditionalCreate(43, PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Conditional_43_Template, 2, 0, "div", 180);
+    i0.ɵɵrepeaterCreate(41, PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_For_42_Template, 20, 4, "div", 176, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵconditionalCreate(43, PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Conditional_43_Template, 2, 0, "div", 177);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(44, "div", 181)(45, "button", 182);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r27); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.RemoveSelectedConnection()); });
-    i0.ɵɵelement(46, "i", 183);
+    i0.ɵɵelementStart(44, "div", 178)(45, "button", 179);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.RemoveSelectedConnection()); });
+    i0.ɵɵelement(46, "i", 180);
     i0.ɵɵtext(47, " Remove Mapping ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -956,153 +945,153 @@ function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Templat
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(conn_r34.TransformSteps.length === 0 ? 43 : -1);
 } }
-function PipelinesComponent_Conditional_14_Conditional_52_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Conditional_52_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 108)(1, "div", 109)(2, "div", 110);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ToggleFieldMaps()); });
-    i0.ɵɵelement(3, "i", 111);
-    i0.ɵɵelementStart(4, "span", 112);
+    i0.ɵɵelementStart(0, "div", 105)(1, "div", 106)(2, "div", 107);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.ToggleFieldMaps()); });
+    i0.ɵɵelement(3, "i", 108);
+    i0.ɵɵelementStart(4, "span", 109);
     i0.ɵɵtext(5, "Field Mappings");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 113);
+    i0.ɵɵelementStart(6, "span", 110);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Template, 35, 11, "div", 114);
+    i0.ɵɵconditionalCreate(8, PipelinesComponent_Conditional_13_Conditional_52_Conditional_8_Template, 35, 11, "div", 111);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 109)(10, "div", 110);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Conditional_52_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ToggleInfoPanel()); });
-    i0.ɵɵelement(11, "i", 111);
-    i0.ɵɵelementStart(12, "span", 112);
+    i0.ɵɵelementStart(9, "div", 106)(10, "div", 107);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Conditional_52_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.ToggleInfoPanel()); });
+    i0.ɵɵelement(11, "i", 108);
+    i0.ɵɵelementStart(12, "span", 109);
     i0.ɵɵtext(13, "Sync Info");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(14, PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Template, 3, 1, "div", 115);
+    i0.ɵɵconditionalCreate(14, PipelinesComponent_Conditional_13_Conditional_52_Conditional_14_Template, 3, 1, "div", 112);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(15, PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template, 48, 21, "div", 116);
+    i0.ɵɵconditionalCreate(15, PipelinesComponent_Conditional_13_Conditional_52_Conditional_15_Template, 48, 21, "div", 113);
 } if (rf & 2) {
     let tmp_11_0;
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("collapsed", !ctx_r0.FieldMapsExpanded);
+    i0.ɵɵclassProp("collapsed", !ctx_r2.FieldMapsExpanded);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.FieldMapsExpanded)("fa-chevron-right", !ctx_r0.FieldMapsExpanded);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r2.FieldMapsExpanded)("fa-chevron-right", !ctx_r2.FieldMapsExpanded);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("", ctx_r0.EditorMappedCount, " mapped");
+    i0.ɵɵtextInterpolate1("", ctx_r2.EditorMappedCount, " mapped");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.FieldMapsExpanded ? 8 : -1);
+    i0.ɵɵconditional(ctx_r2.FieldMapsExpanded ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("collapsed", !ctx_r0.InfoPanelExpanded);
+    i0.ɵɵclassProp("collapsed", !ctx_r2.InfoPanelExpanded);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.InfoPanelExpanded)("fa-chevron-right", !ctx_r0.InfoPanelExpanded);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r2.InfoPanelExpanded)("fa-chevron-right", !ctx_r2.InfoPanelExpanded);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r0.InfoPanelExpanded ? 14 : -1);
+    i0.ɵɵconditional(ctx_r2.InfoPanelExpanded ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_11_0 = ctx_r0.SelectedConnection) ? 15 : -1, tmp_11_0);
+    i0.ɵɵconditional((tmp_11_0 = ctx_r2.SelectedConnection) ? 15 : -1, tmp_11_0);
 } }
-function PipelinesComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13)(1, "div", 65)(2, "div", 66)(3, "button", 67);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.CloseVisualEditor()); });
-    i0.ɵɵelement(4, "i", 68);
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 62)(2, "div", 63)(3, "button", 64);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseVisualEditor()); });
+    i0.ɵɵelement(4, "i", 65);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 69)(6, "span", 70);
+    i0.ɵɵelementStart(5, "div", 66)(6, "span", 67);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 71);
-    i0.ɵɵelement(9, "i", 72);
+    i0.ɵɵelementStart(8, "span", 68);
+    i0.ɵɵelement(9, "i", 69);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 73);
+    i0.ɵɵelementStart(10, "span", 70);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(12, PipelinesComponent_Conditional_14_Conditional_12_Template, 5, 3);
+    i0.ɵɵconditionalCreate(12, PipelinesComponent_Conditional_13_Conditional_12_Template, 5, 3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 74)(14, "span", 75)(15, "strong");
+    i0.ɵɵelementStart(13, "div", 71)(14, "span", 72)(15, "strong");
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(17, " mapped ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(18, "span", 76);
-    i0.ɵɵelementStart(19, "span", 75)(20, "strong");
+    i0.ɵɵelement(18, "span", 73);
+    i0.ɵɵelementStart(19, "span", 72)(20, "strong");
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(22, " key ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(23, "span", 76);
-    i0.ɵɵelementStart(24, "span", 75)(25, "strong");
+    i0.ɵɵelement(23, "span", 73);
+    i0.ɵɵelementStart(24, "span", 72)(25, "strong");
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(27, " required ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(28, "div", 77)(29, "button", 78);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ToggleSourcePreview()); });
-    i0.ɵɵelement(30, "i", 79);
+    i0.ɵɵelementStart(28, "div", 74)(29, "button", 75);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleSourcePreview()); });
+    i0.ɵɵelement(30, "i", 76);
     i0.ɵɵtext(31, " Source Data ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "button", 80);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ToggleDestPreview()); });
-    i0.ɵɵelement(33, "i", 81);
+    i0.ɵɵelementStart(32, "button", 77);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleDestPreview()); });
+    i0.ɵɵelement(33, "i", 78);
     i0.ɵɵtext(34, " MJ Data ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(35, "div", 82);
-    i0.ɵɵelementStart(36, "button", 83);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.RunSchemaPipeline()); });
-    i0.ɵɵconditionalCreate(37, PipelinesComponent_Conditional_14_Conditional_37_Template, 2, 0)(38, PipelinesComponent_Conditional_14_Conditional_38_Template, 2, 0);
+    i0.ɵɵelement(35, "div", 79);
+    i0.ɵɵelementStart(36, "button", 80);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.RunSchemaPipeline()); });
+    i0.ɵɵconditionalCreate(37, PipelinesComponent_Conditional_13_Conditional_37_Template, 2, 0)(38, PipelinesComponent_Conditional_13_Conditional_38_Template, 2, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(39, PipelinesComponent_Conditional_14_Conditional_39_Template, 3, 5, "span", 84);
-    i0.ɵɵelement(40, "div", 82);
-    i0.ɵɵelementStart(41, "button", 85);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Template_button_click_41_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.AutoMapEditorFields()); });
-    i0.ɵɵelement(42, "i", 86);
+    i0.ɵɵconditionalCreate(39, PipelinesComponent_Conditional_13_Conditional_39_Template, 3, 5, "span", 81);
+    i0.ɵɵelement(40, "div", 79);
+    i0.ɵɵelementStart(41, "button", 82);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Template_button_click_41_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.AutoMapEditorFields()); });
+    i0.ɵɵelement(42, "i", 83);
     i0.ɵɵtext(43, " Auto-Map ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(44, "button", 87);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_14_Template_button_click_44_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SaveVisualEditor()); });
-    i0.ɵɵconditionalCreate(45, PipelinesComponent_Conditional_14_Conditional_45_Template, 2, 0)(46, PipelinesComponent_Conditional_14_Conditional_46_Template, 2, 0);
+    i0.ɵɵelementStart(44, "button", 84);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_13_Template_button_click_44_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SaveVisualEditor()); });
+    i0.ɵɵconditionalCreate(45, PipelinesComponent_Conditional_13_Conditional_45_Template, 2, 0)(46, PipelinesComponent_Conditional_13_Conditional_46_Template, 2, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(47, PipelinesComponent_Conditional_14_Conditional_47_Template, 3, 0, "span", 88);
+    i0.ɵɵconditionalCreate(47, PipelinesComponent_Conditional_13_Conditional_47_Template, 3, 0, "span", 85);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(48, PipelinesComponent_Conditional_14_Conditional_48_Template, 3, 2, "div", 89);
-    i0.ɵɵconditionalCreate(49, PipelinesComponent_Conditional_14_Conditional_49_Template, 7, 1, "div", 90);
-    i0.ɵɵelementStart(50, "div", 91);
-    i0.ɵɵconditionalCreate(51, PipelinesComponent_Conditional_14_Conditional_51_Template, 4, 0, "div", 92)(52, PipelinesComponent_Conditional_14_Conditional_52_Template, 16, 16);
+    i0.ɵɵconditionalCreate(48, PipelinesComponent_Conditional_13_Conditional_48_Template, 3, 2, "div", 86);
+    i0.ɵɵconditionalCreate(49, PipelinesComponent_Conditional_13_Conditional_49_Template, 7, 1, "div", 87);
+    i0.ɵɵelementStart(50, "div", 88);
+    i0.ɵɵconditionalCreate(51, PipelinesComponent_Conditional_13_Conditional_51_Template, 4, 0, "div", 89)(52, PipelinesComponent_Conditional_13_Conditional_52_Template, 16, 16);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate((ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.ExternalObjectLabel) ?? (ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.ExternalObjectName));
+    i0.ɵɵtextInterpolate((ctx_r2.EditorEntityMap == null ? null : ctx_r2.EditorEntityMap.ExternalObjectLabel) ?? (ctx_r2.EditorEntityMap == null ? null : ctx_r2.EditorEntityMap.ExternalObjectName));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.Entity);
+    i0.ɵɵtextInterpolate(ctx_r2.EditorEntityMap == null ? null : ctx_r2.EditorEntityMap.Entity);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.EditorEntityMap ? 12 : -1);
+    i0.ɵɵconditional(ctx_r2.EditorEntityMap ? 12 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorMappedCount);
+    i0.ɵɵtextInterpolate(ctx_r2.EditorMappedCount);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorKeyFieldCount);
+    i0.ɵɵtextInterpolate(ctx_r2.EditorKeyFieldCount);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.EditorRequiredCount);
+    i0.ɵɵtextInterpolate(ctx_r2.EditorRequiredCount);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r0.ShowSourcePreview);
+    i0.ɵɵclassProp("active", ctx_r2.ShowSourcePreview);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r0.ShowDestPreview);
+    i0.ɵɵclassProp("active", ctx_r2.ShowDestPreview);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("disabled", ctx_r0.IsRunningPipeline);
+    i0.ɵɵproperty("disabled", ctx_r2.IsRunningPipeline);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.IsRunningPipeline ? 37 : 38);
+    i0.ɵɵconditional(ctx_r2.IsRunningPipeline ? 37 : 38);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.PipelineResultMessage ? 39 : -1);
+    i0.ɵɵconditional(ctx_r2.PipelineResultMessage ? 39 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("disabled", !ctx_r0.HasEditorChanges || ctx_r0.EditorSaving);
+    i0.ɵɵproperty("disabled", !ctx_r2.HasEditorChanges || ctx_r2.EditorSaving);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.EditorSaving ? 45 : 46);
+    i0.ɵɵconditional(ctx_r2.EditorSaving ? 45 : 46);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.EditorSaveSuccess && !ctx_r0.HasEditorChanges ? 47 : -1);
+    i0.ɵɵconditional(ctx_r2.EditorSaveSuccess && !ctx_r2.HasEditorChanges ? 47 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.ShowSourcePreview || ctx_r0.ShowDestPreview ? 48 : -1);
+    i0.ɵɵconditional(ctx_r2.ShowSourcePreview || ctx_r2.ShowDestPreview ? 48 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.ConnectingFromSource ? 49 : -1);
+    i0.ɵɵconditional(ctx_r2.ConnectingFromSource ? 49 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("has-transform-panel", ctx_r0.SelectedConnectionIdx !== null);
+    i0.ɵɵclassProp("has-transform-panel", ctx_r2.SelectedConnectionIdx !== null);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.EditorLoading ? 51 : 52);
+    i0.ɵɵconditional(ctx_r2.EditorLoading ? 51 : 52);
 } }
 let PipelinesComponent = class PipelinesComponent extends BaseResourceComponent {
     // ---------------------------------------------------------------------------
@@ -2076,38 +2065,34 @@ let PipelinesComponent = class PipelinesComponent extends BaseResourceComponent
         return 'Inactive';
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵPipelinesComponent_BaseFactory; return function PipelinesComponent_Factory(__ngFactoryType__) { return (ɵPipelinesComponent_BaseFactory || (ɵPipelinesComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PipelinesComponent)))(__ngFactoryType__ || PipelinesComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PipelinesComponent, selectors: [["app-integration-pipelines"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 15, vars: 6, consts: [["Title", "Integration Pipelines", "Icon", "fa-solid fa-diagram-project", "Subtitle", "Data transformation and routing pipelines"], ["meta", ""], ["actions", ""], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Expand All", 3, "click"], [1, "fa-solid", "fa-angles-down"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Collapse All", 3, "click"], [1, "fa-solid", "fa-angles-up"], [3, "Clicked", "Loading"], ["toolbar", ""], ["Placeholder", "Search integrations or entities...", 3, "ValueChange", "Value"], [3, "Flex", "Padding"], [1, "pipelines-container"], [1, "pipelines-content"], [1, "ve-container"], ["Label", "pipelines", 3, "Count"], ["Label", "entity maps", 3, "Count"], [1, "content-loading"], [1, "content-empty"], [1, "cards-list"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-diagram-project", "empty-icon"], [1, "pipeline-card", 3, "expanded"], [1, "pipeline-card"], [1, "card-header", 3, "click"], [1, "card-header-left"], [1, "card-status-dot"], [1, "card-info"], [1, "card-name"], [1, "card-meta"], [1, "meta-sep"], [1, "card-header-right"], [1, "card-status-label"], [1, "card-last-sync"], [1, "mini-flow"], [1, "mini-flow-dot", "source"], [1, "mini-flow-line"], [1, "mini-flow-count"], [1, "mini-flow-dot", "dest"], [1, "fa-solid", "card-chevron"], [1, "card-body"], [1, "card-search-bar"], [1, "fa-solid", "fa-filter", "card-search-icon"], ["type", "text", "placeholder", "Filter entity maps...", 1, "card-search-input", 3, "input", "value"], [1, "card-search-count"], [1, "map-table-head"], [1, "map-col-toggle"], [1, "map-col-source"], [1, "map-col-direction"], [1, "map-col-dest"], [1, "map-col-meta"], [1, "map-table-body"], [1, "map-row", 3, "sync-disabled"], [1, "map-table-empty"], [1, "map-row", 3, "click"], [1, "map-col-toggle", 3, "click"], [1, "sync-toggle", 3, "title"], ["type", "checkbox", 3, "change", "checked"], [1, "sync-toggle-track"], [1, "map-col-source", 3, "title"], [1, "map-col-dest", 3, "title"], [1, "map-config-badge", 3, "title"], [1, "fa-solid", "fa-arrows-rotate"], [1, "map-edit-hint"], [1, "fa-solid", "fa-chevron-right"], [1, "fa-solid", "fa-link"], [1, "ve-header"], [1, "ve-header-left"], ["title", "Back to Pipelines", 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", "Generate DDL, run CodeGen, and restart MJAPI for this mapping", 1, "ve-btn", "ve-btn-ghost", 3, "click", "disabled"], [3, "class"], ["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"], [1, "ve-sync-label"], [1, "fa-solid", "fa-gears"], [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, "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, "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 PipelinesComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0);
-            i0.ɵɵconditionalCreate(2, PipelinesComponent_Conditional_2_Template, 3, 2, "div", 1);
-            i0.ɵɵelementStart(3, "div", 2)(4, "button", 3);
-            i0.ɵɵlistener("click", function PipelinesComponent_Template_button_click_4_listener() { return ctx.ExpandAll(); });
-            i0.ɵɵelement(5, "i", 4);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PipelinesComponent, selectors: [["app-integration-pipelines"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 5, consts: [["Title", "Integration Pipelines", "Icon", "fa-solid fa-diagram-project", "Subtitle", "Data transformation and routing pipelines"], ["actions", ""], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Expand All", 3, "click"], [1, "fa-solid", "fa-angles-down"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Collapse All", 3, "click"], [1, "fa-solid", "fa-angles-up"], [3, "Clicked", "Loading"], ["toolbar", ""], ["Placeholder", "Search integrations or entities...", 3, "ValueChange", "Value"], [3, "Flex", "Padding"], [1, "pipelines-container"], [1, "pipelines-content"], [1, "ve-container"], [1, "content-loading"], [1, "content-empty"], [1, "cards-list"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-diagram-project", "empty-icon"], [1, "pipeline-card", 3, "expanded"], [1, "pipeline-card"], [1, "card-header", 3, "click"], [1, "card-header-left"], [1, "card-status-dot"], [1, "card-info"], [1, "card-name"], [1, "card-meta"], [1, "meta-sep"], [1, "card-header-right"], [1, "card-status-label"], [1, "card-last-sync"], [1, "mini-flow"], [1, "mini-flow-dot", "source"], [1, "mini-flow-line"], [1, "mini-flow-count"], [1, "mini-flow-dot", "dest"], [1, "fa-solid", "card-chevron"], [1, "card-body"], [1, "card-search-bar"], [1, "fa-solid", "fa-filter", "card-search-icon"], ["type", "text", "placeholder", "Filter entity maps...", 1, "card-search-input", 3, "input", "value"], [1, "card-search-count"], [1, "map-table-head"], [1, "map-col-toggle"], [1, "map-col-source"], [1, "map-col-direction"], [1, "map-col-dest"], [1, "map-col-meta"], [1, "map-table-body"], [1, "map-row", 3, "sync-disabled"], [1, "map-table-empty"], [1, "map-row", 3, "click"], [1, "map-col-toggle", 3, "click"], [1, "sync-toggle", 3, "title"], ["type", "checkbox", 3, "change", "checked"], [1, "sync-toggle-track"], [1, "map-col-source", 3, "title"], [1, "map-col-dest", 3, "title"], [1, "map-config-badge", 3, "title"], [1, "fa-solid", "fa-arrows-rotate"], [1, "map-edit-hint"], [1, "fa-solid", "fa-chevron-right"], [1, "fa-solid", "fa-link"], [1, "ve-header"], [1, "ve-header-left"], ["title", "Back to Pipelines", 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", "Generate DDL, run CodeGen, and restart MJAPI for this mapping", 1, "ve-btn", "ve-btn-ghost", 3, "click", "disabled"], [3, "class"], ["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"], [1, "ve-sync-label"], [1, "fa-solid", "fa-gears"], [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, "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, "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 PipelinesComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1)(3, "button", 2);
+            i0.ɵɵlistener("click", function PipelinesComponent_Template_button_click_3_listener() { return ctx.ExpandAll(); });
+            i0.ɵɵelement(4, "i", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "button", 5);
-            i0.ɵɵlistener("click", function PipelinesComponent_Template_button_click_6_listener() { return ctx.CollapseAll(); });
-            i0.ɵɵelement(7, "i", 6);
+            i0.ɵɵelementStart(5, "button", 4);
+            i0.ɵɵlistener("click", function PipelinesComponent_Template_button_click_5_listener() { return ctx.CollapseAll(); });
+            i0.ɵɵelement(6, "i", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "mj-refresh-button", 7);
-            i0.ɵɵlistener("Clicked", function PipelinesComponent_Template_mj_refresh_button_Clicked_8_listener() { return ctx.LoadData(); });
+            i0.ɵɵelementStart(7, "mj-refresh-button", 6);
+            i0.ɵɵlistener("Clicked", function PipelinesComponent_Template_mj_refresh_button_Clicked_7_listener() { return ctx.LoadData(); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "div", 8)(10, "mj-page-search", 9);
-            i0.ɵɵlistener("ValueChange", function PipelinesComponent_Template_mj_page_search_ValueChange_10_listener($event) { return ctx.OnGlobalSearchValue($event); });
+            i0.ɵɵelementStart(8, "div", 7)(9, "mj-page-search", 8);
+            i0.ɵɵlistener("ValueChange", function PipelinesComponent_Template_mj_page_search_ValueChange_9_listener($event) { return ctx.OnGlobalSearchValue($event); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(11, "mj-page-body", 10)(12, "div", 11);
-            i0.ɵɵconditionalCreate(13, PipelinesComponent_Conditional_13_Template, 4, 1, "div", 12)(14, PipelinesComponent_Conditional_14_Template, 53, 21, "div", 13);
+            i0.ɵɵelementStart(10, "mj-page-body", 9)(11, "div", 10);
+            i0.ɵɵconditionalCreate(12, PipelinesComponent_Conditional_12_Template, 4, 1, "div", 11)(13, PipelinesComponent_Conditional_13_Template, 53, 21, "div", 12);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.IntegrationCount > 0 ? 2 : -1);
-            i0.ɵɵadvance(6);
+            i0.ɵɵadvance(7);
             i0.ɵɵproperty("Loading", ctx.IsLoading);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("Value", ctx.GlobalSearch);
             i0.ɵɵadvance();
             i0.ɵɵproperty("Flex", true)("Padding", false);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.VisualEditorOpen ? 13 : 14);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i3.MJButtonDirective, i3.MJPageLayoutComponent, i3.MJPageHeaderComponent, i3.MJPageBodyComponent, i3.MJPageSearchComponent, i3.MJStatBadgeComponent, i3.MJRefreshButtonComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n\n\n\n\n\n\n\n\n.pipelines-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-page);\n  position: relative;\n  overflow: hidden;\n}\n\n\n\n\n\n\n.pipelines-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  z-index: 10;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.toolbar-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n.toolbar-count-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 22px;\n  height: 22px;\n  padding: 0 6px;\n  border-radius: 11px;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.toolbar-map-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.global-search[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  pointer-events: none;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 240px;\n  height: 32px;\n  padding: 0 12px 0 30px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease, background 150ms ease;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-color-indigo-500);\n  background: var(--mj-bg-surface);\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n\n.toolbar-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: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-size: 13px;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-color-neutral-300);\n  color: var(--mj-text-primary);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:active { background: var(--mj-bg-surface-active); }\n\n.toolbar-divider[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 20px;\n  background: var(--mj-border-default);\n  margin: 0 4px;\n}\n\n\n\n\n\n\n.pipelines-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.content-loading[_ngcontent-%COMP%], \n.content-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.content-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 28px; color: var(--mj-color-indigo-500); }\n.content-loading[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { font-size: 14px; }\n.content-empty[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] { font-size: 48px; color: var(--mj-color-neutral-300); }\n.content-empty[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { margin: 0; font-size: 18px; font-weight: 600; color: var(--mj-text-muted); }\n.content-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; font-size: 13px; color: var(--mj-text-disabled); }\n\n\n\n\n\n\n.cards-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  max-width: 1200px;\n  margin: 0 auto;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n\n\n\n\n\n.pipeline-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  overflow: hidden;\n  transition: box-shadow 200ms ease, border-color 200ms ease;\n}\n\n.pipeline-card[_ngcontent-%COMP%]:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }\n\n.pipeline-card.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-color-indigo-100);\n  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 18px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 150ms ease;\n}\n\n.card-header[_ngcontent-%COMP%]:hover { background: var(--mj-bg-page); }\n\n.card-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n  flex: 1;\n}\n\n.card-status-dot[_ngcontent-%COMP%] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n\n.card-icon[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n  width: 24px;\n  text-align: center;\n}\n\n.card-info[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.card-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-meta[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-disabled); }\n.meta-sep[_ngcontent-%COMP%] { color: var(--mj-color-neutral-300); margin: 0 2px; }\n\n.card-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  flex-shrink: 0;\n}\n\n.card-status-label[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; }\n.card-last-sync[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); }\n\n\n\n.mini-flow[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; }\n.mini-flow-dot[_ngcontent-%COMP%] { width: 8px; height: 8px; border-radius: 50%; }\n.mini-flow-dot.source[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.mini-flow-dot.dest[_ngcontent-%COMP%] { background: var(--mj-color-success-600); }\n.mini-flow-line[_ngcontent-%COMP%] { width: 16px; height: 2px; background: var(--mj-border-default); border-radius: 1px; }\n.mini-flow-count[_ngcontent-%COMP%] {\n  font-size: 10px; font-weight: 700; color: var(--mj-color-indigo-500);\n  background: var(--mj-color-indigo-50); padding: 1px 5px; border-radius: 4px;\n}\n\n.card-chevron[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-disabled); transition: transform 200ms ease; }\n\n\n\n\n\n\n.card-body[_ngcontent-%COMP%] {\n  border-top: 1px solid var(--mj-border-subtle);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  \n\n\n  max-height: 60vh;\n}\n\n\n\n.card-search-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 18px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.card-search-icon[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); flex-shrink: 0; }\n\n.card-search-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-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.card-search-input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.card-search-input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n.card-search-count[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); white-space: nowrap; flex-shrink: 0; }\n\n\n\n.map-table-head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 6px 18px;\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n  flex-shrink: 0;\n}\n\n\n\n.map-table-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n.map-table-empty[_ngcontent-%COMP%] {\n  padding: 24px 18px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n\n\n\n\n.map-col-source[_ngcontent-%COMP%] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-direction[_ngcontent-%COMP%] { width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.map-col-dest[_ngcontent-%COMP%] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-meta[_ngcontent-%COMP%] { width: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }\n\n\n\n.map-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 8px 18px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n}\n\n.map-row[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-50); }\n.map-row.sync-disabled[_ngcontent-%COMP%] { opacity: 0.55; }\n.map-row.sync-disabled[_ngcontent-%COMP%]:hover { opacity: 0.8; }\n\n\n\n\n.map-config-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 4px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n}\n\n.map-edit-hint[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 4px;\n  color: var(--mj-color-neutral-300);\n  font-size: 11px;\n  transition: color 150ms ease;\n}\n\n.map-row[_ngcontent-%COMP%]:hover   .map-edit-hint[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n\n\n\n\n\n.map-col-toggle[_ngcontent-%COMP%] {\n  width: 50px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\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  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%] {\n  width: 30px;\n  height: 16px;\n  border-radius: 8px;\n  background: var(--mj-color-neutral-300);\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: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n  transition: transform 200ms ease;\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .sync-toggle-track[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-600);\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .sync-toggle-track[_ngcontent-%COMP%]::after {\n  transform: translateX(14px);\n}\n\n\n\n\n\n\n.direction-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 36px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n.direction-badge.pull[_ngcontent-%COMP%] { background: var(--mj-color-info-100); color: var(--mj-brand-primary); }\n.direction-badge.push[_ngcontent-%COMP%] { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.direction-badge.bidirectional[_ngcontent-%COMP%] { background: var(--mj-color-warning-100); color: var(--mj-color-warning-600); }\n\n\n\n\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-error-msg[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-size: 0.8125rem;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 8px;\n}\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.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-text-secondary);\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-text-secondary);\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: var(--mj-brand-primary); stroke-dasharray: none; }\n.ve-conn-line.conn-regex[_ngcontent-%COMP%] { stroke: var(--ve-color-regex, #8b5cf6); stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split[_ngcontent-%COMP%] { stroke: var(--mj-status-warning); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine[_ngcontent-%COMP%] { stroke: var(--mj-status-success); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup[_ngcontent-%COMP%] { stroke: var(--ve-color-lookup, #0ea5e9); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format[_ngcontent-%COMP%] { stroke: var(--ve-color-format, #ec4899); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce[_ngcontent-%COMP%] { stroke: var(--ve-color-coerce, #f97316); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring[_ngcontent-%COMP%] { stroke: var(--ve-color-substring, #14b8a6); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom[_ngcontent-%COMP%] { stroke: var(--ve-color-custom, #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: var(--mj-brand-primary-subtle); color: var(--mj-brand-primary); border: 2px solid var(--mj-brand-primary); }\n.ve-conn-badge.badge-regex[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-regex, #8b5cf6) 10%, var(--mj-bg-surface)); color: var(--ve-color-regex, #8b5cf6); border: 2px solid var(--ve-color-regex, #8b5cf6); }\n.ve-conn-badge.badge-split[_ngcontent-%COMP%] { background: var(--mj-status-warning-subtle); color: var(--mj-status-warning); border: 2px solid var(--mj-status-warning); }\n.ve-conn-badge.badge-combine[_ngcontent-%COMP%] { background: var(--mj-status-success-subtle); color: var(--mj-status-success); border: 2px solid var(--mj-status-success); }\n.ve-conn-badge.badge-lookup[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-lookup, #0ea5e9) 10%, var(--mj-bg-surface)); color: var(--ve-color-lookup, #0ea5e9); border: 2px solid var(--ve-color-lookup, #0ea5e9); }\n.ve-conn-badge.badge-format[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-format, #ec4899) 10%, var(--mj-bg-surface)); color: var(--ve-color-format, #ec4899); border: 2px solid var(--ve-color-format, #ec4899); }\n.ve-conn-badge.badge-coerce[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-coerce, #f97316) 10%, var(--mj-bg-surface)); color: var(--ve-color-coerce, #f97316); border: 2px solid var(--ve-color-coerce, #f97316); }\n.ve-conn-badge.badge-substring[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-substring, #14b8a6) 10%, var(--mj-bg-surface)); color: var(--ve-color-substring, #14b8a6); border: 2px solid var(--ve-color-substring, #14b8a6); }\n.ve-conn-badge.badge-custom[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-custom, #a855f7) 10%, var(--mj-bg-surface)); color: var(--ve-color-custom, #a855f7); border: 2px solid var(--ve-color-custom, #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-text-secondary);\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-text-secondary);\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-text-secondary);\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.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar, \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.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \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.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \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}"] });
+            i0.ɵɵconditional(!ctx.VisualEditorOpen ? 12 : 13);
+        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i3.MJButtonDirective, i3.MJPageLayoutComponent, i3.MJPageHeaderComponent, i3.MJPageBodyComponent, i3.MJPageSearchComponent, i3.MJRefreshButtonComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n\n\n\n\n\n\n\n\n.pipelines-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-page);\n  position: relative;\n  overflow: hidden;\n}\n\n\n\n\n\n\n.pipelines-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  z-index: 10;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.toolbar-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n.toolbar-count-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 22px;\n  height: 22px;\n  padding: 0 6px;\n  border-radius: 11px;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.toolbar-map-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.global-search[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  pointer-events: none;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 240px;\n  height: 32px;\n  padding: 0 12px 0 30px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease, background 150ms ease;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-color-indigo-500);\n  background: var(--mj-bg-surface);\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n\n.toolbar-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: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-size: 13px;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-color-neutral-300);\n  color: var(--mj-text-primary);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:active { background: var(--mj-bg-surface-active); }\n\n.toolbar-divider[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 20px;\n  background: var(--mj-border-default);\n  margin: 0 4px;\n}\n\n\n\n\n\n\n.pipelines-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.content-loading[_ngcontent-%COMP%], \n.content-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.content-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 28px; color: var(--mj-color-indigo-500); }\n.content-loading[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { font-size: 14px; }\n.content-empty[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] { font-size: 48px; color: var(--mj-color-neutral-300); }\n.content-empty[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { margin: 0; font-size: 18px; font-weight: 600; color: var(--mj-text-muted); }\n.content-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; font-size: 13px; color: var(--mj-text-disabled); }\n\n\n\n\n\n\n.cards-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  max-width: 1200px;\n  margin: 0 auto;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n\n\n\n\n\n.pipeline-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  overflow: hidden;\n  transition: box-shadow 200ms ease, border-color 200ms ease;\n}\n\n.pipeline-card[_ngcontent-%COMP%]:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }\n\n.pipeline-card.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-color-indigo-100);\n  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 18px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 150ms ease;\n}\n\n.card-header[_ngcontent-%COMP%]:hover { background: var(--mj-bg-page); }\n\n.card-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n  flex: 1;\n}\n\n.card-status-dot[_ngcontent-%COMP%] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n\n.card-icon[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n  width: 24px;\n  text-align: center;\n}\n\n.card-info[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.card-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-meta[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-disabled); }\n.meta-sep[_ngcontent-%COMP%] { color: var(--mj-color-neutral-300); margin: 0 2px; }\n\n.card-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  flex-shrink: 0;\n}\n\n.card-status-label[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; }\n.card-last-sync[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); }\n\n\n\n.mini-flow[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; }\n.mini-flow-dot[_ngcontent-%COMP%] { width: 8px; height: 8px; border-radius: 50%; }\n.mini-flow-dot.source[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.mini-flow-dot.dest[_ngcontent-%COMP%] { background: var(--mj-color-success-600); }\n.mini-flow-line[_ngcontent-%COMP%] { width: 16px; height: 2px; background: var(--mj-border-default); border-radius: 1px; }\n.mini-flow-count[_ngcontent-%COMP%] {\n  font-size: 10px; font-weight: 700; color: var(--mj-color-indigo-500);\n  background: var(--mj-color-indigo-50); padding: 1px 5px; border-radius: 4px;\n}\n\n.card-chevron[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-text-disabled); transition: transform 200ms ease; }\n\n\n\n\n\n\n.card-body[_ngcontent-%COMP%] {\n  border-top: 1px solid var(--mj-border-subtle);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  \n\n\n  max-height: 60vh;\n}\n\n\n\n.card-search-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 18px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.card-search-icon[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); flex-shrink: 0; }\n\n.card-search-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-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.card-search-input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.card-search-input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n.card-search-count[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); white-space: nowrap; flex-shrink: 0; }\n\n\n\n.map-table-head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 6px 18px;\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n  flex-shrink: 0;\n}\n\n\n\n.map-table-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n.map-table-empty[_ngcontent-%COMP%] {\n  padding: 24px 18px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n\n\n\n\n.map-col-source[_ngcontent-%COMP%] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-direction[_ngcontent-%COMP%] { width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.map-col-dest[_ngcontent-%COMP%] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-meta[_ngcontent-%COMP%] { width: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }\n\n\n\n.map-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 8px 18px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n}\n\n.map-row[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-50); }\n.map-row.sync-disabled[_ngcontent-%COMP%] { opacity: 0.55; }\n.map-row.sync-disabled[_ngcontent-%COMP%]:hover { opacity: 0.8; }\n\n\n\n\n.map-config-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 4px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n}\n\n.map-edit-hint[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 4px;\n  color: var(--mj-color-neutral-300);\n  font-size: 11px;\n  transition: color 150ms ease;\n}\n\n.map-row[_ngcontent-%COMP%]:hover   .map-edit-hint[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n\n\n\n\n\n.map-col-toggle[_ngcontent-%COMP%] {\n  width: 50px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\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  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%] {\n  width: 30px;\n  height: 16px;\n  border-radius: 8px;\n  background: var(--mj-color-neutral-300);\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: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n  transition: transform 200ms ease;\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .sync-toggle-track[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-600);\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .sync-toggle-track[_ngcontent-%COMP%]::after {\n  transform: translateX(14px);\n}\n\n\n\n\n\n\n.direction-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 36px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n.direction-badge.pull[_ngcontent-%COMP%] { background: var(--mj-color-info-100); color: var(--mj-brand-primary); }\n.direction-badge.push[_ngcontent-%COMP%] { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.direction-badge.bidirectional[_ngcontent-%COMP%] { background: var(--mj-color-warning-100); color: var(--mj-color-warning-600); }\n\n\n\n\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-error-msg[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-size: 0.8125rem;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 8px;\n}\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.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-text-secondary);\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-text-secondary);\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: var(--mj-brand-primary); stroke-dasharray: none; }\n.ve-conn-line.conn-regex[_ngcontent-%COMP%] { stroke: var(--ve-color-regex, #8b5cf6); stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split[_ngcontent-%COMP%] { stroke: var(--mj-status-warning); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine[_ngcontent-%COMP%] { stroke: var(--mj-status-success); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup[_ngcontent-%COMP%] { stroke: var(--ve-color-lookup, #0ea5e9); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format[_ngcontent-%COMP%] { stroke: var(--ve-color-format, #ec4899); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce[_ngcontent-%COMP%] { stroke: var(--ve-color-coerce, #f97316); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring[_ngcontent-%COMP%] { stroke: var(--ve-color-substring, #14b8a6); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom[_ngcontent-%COMP%] { stroke: var(--ve-color-custom, #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: var(--mj-brand-primary-subtle); color: var(--mj-brand-primary); border: 2px solid var(--mj-brand-primary); }\n.ve-conn-badge.badge-regex[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-regex, #8b5cf6) 10%, var(--mj-bg-surface)); color: var(--ve-color-regex, #8b5cf6); border: 2px solid var(--ve-color-regex, #8b5cf6); }\n.ve-conn-badge.badge-split[_ngcontent-%COMP%] { background: var(--mj-status-warning-subtle); color: var(--mj-status-warning); border: 2px solid var(--mj-status-warning); }\n.ve-conn-badge.badge-combine[_ngcontent-%COMP%] { background: var(--mj-status-success-subtle); color: var(--mj-status-success); border: 2px solid var(--mj-status-success); }\n.ve-conn-badge.badge-lookup[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-lookup, #0ea5e9) 10%, var(--mj-bg-surface)); color: var(--ve-color-lookup, #0ea5e9); border: 2px solid var(--ve-color-lookup, #0ea5e9); }\n.ve-conn-badge.badge-format[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-format, #ec4899) 10%, var(--mj-bg-surface)); color: var(--ve-color-format, #ec4899); border: 2px solid var(--ve-color-format, #ec4899); }\n.ve-conn-badge.badge-coerce[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-coerce, #f97316) 10%, var(--mj-bg-surface)); color: var(--ve-color-coerce, #f97316); border: 2px solid var(--ve-color-coerce, #f97316); }\n.ve-conn-badge.badge-substring[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-substring, #14b8a6) 10%, var(--mj-bg-surface)); color: var(--ve-color-substring, #14b8a6); border: 2px solid var(--ve-color-substring, #14b8a6); }\n.ve-conn-badge.badge-custom[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-custom, #a855f7) 10%, var(--mj-bg-surface)); color: var(--ve-color-custom, #a855f7); border: 2px solid var(--ve-color-custom, #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-text-secondary);\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-text-secondary);\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-text-secondary);\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.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar, \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.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \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.cards-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.map-table-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \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}"] });
 };
 PipelinesComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'IntegrationPipelines')
@@ -2115,7 +2100,7 @@ PipelinesComponent = __decorate([
 export { PipelinesComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PipelinesComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-integration-pipelines', template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Integration Pipelines\"\n    Icon=\"fa-solid fa-diagram-project\"\n    Subtitle=\"Data transformation and routing pipelines\">\n    @if (IntegrationCount > 0) {\n      <div meta>\n        <mj-stat-badge [Count]=\"IntegrationCount\" Label=\"pipelines\"></mj-stat-badge>\n        <mj-stat-badge [Count]=\"TotalMapCount\" Label=\"entity maps\"></mj-stat-badge>\n      </div>\n    }\n    <div actions>\n      <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"ExpandAll()\" title=\"Expand All\">\n        <i class=\"fa-solid fa-angles-down\"></i>\n      </button>\n      <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"CollapseAll()\" title=\"Collapse All\">\n        <i class=\"fa-solid fa-angles-up\"></i>\n      </button>\n      <mj-refresh-button [Loading]=\"IsLoading\" (Clicked)=\"LoadData()\"></mj-refresh-button>\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search integrations or entities...\"\n        [Value]=\"GlobalSearch\"\n        (ValueChange)=\"OnGlobalSearchValue($event)\">\n      </mj-page-search>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body [Flex]=\"true\" [Padding]=\"false\">\n<div class=\"pipelines-container\">\n\n  <!-- ===================================================================== -->\n  <!-- MAP LIST VIEW (hidden when editor is open)                            -->\n  <!-- ===================================================================== -->\n  @if (!VisualEditorOpen) {\n\n    <!-- Main content area -->\n    <div class=\"pipelines-content\">\n      @if (IsLoading && PipelineCards.length === 0) {\n        <div class=\"content-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          <span>Loading pipelines...</span>\n        </div>\n      } @else if (PipelineCards.length === 0) {\n        <div class=\"content-empty\">\n          <i class=\"fa-solid fa-diagram-project empty-icon\"></i>\n          <h3>No Integration Pipelines</h3>\n          <p>Configure integrations to see data flow pipelines here.</p>\n        </div>\n      } @else {\n        <div class=\"cards-list\">\n          @for (card of FilteredCards; track card.IntegrationID) {\n            <!-- Pipeline card -->\n            <div class=\"pipeline-card\" [class.expanded]=\"card.IsExpanded\">\n\n              <!-- Card header (always visible) -->\n              <div class=\"card-header\" (click)=\"ToggleCard(card)\">\n                <div class=\"card-header-left\">\n                  <div class=\"card-status-dot\" [style.backgroundColor]=\"card.StatusColor\"></div>\n                  <i [class]=\"card.Icon + ' card-icon'\"></i>\n                  <div class=\"card-info\">\n                    <span class=\"card-name\">{{ card.IntegrationName }}</span>\n                    <span class=\"card-meta\">\n                      {{ card.EntityMapCount }} maps\n                      <span class=\"meta-sep\">&middot;</span>\n                      {{ card.ActiveMapCount }} active\n                      <span class=\"meta-sep\">&middot;</span>\n                      {{ card.UniqueEntityCount }} entities\n                    </span>\n                  </div>\n                </div>\n                <div class=\"card-header-right\">\n                  <span class=\"card-status-label\" [style.color]=\"card.StatusColor\">\n                    {{ card.StatusLabel }}\n                  </span>\n                  @if (card.LastSync) {\n                    <span class=\"card-last-sync\">{{ card.LastSync }}</span>\n                  }\n                  <!-- Mini flow indicator -->\n                  <div class=\"mini-flow\">\n                    <span class=\"mini-flow-dot source\"></span>\n                    <span class=\"mini-flow-line\"></span>\n                    <span class=\"mini-flow-count\">{{ card.EntityMapCount }}</span>\n                    <span class=\"mini-flow-line\"></span>\n                    <span class=\"mini-flow-dot dest\"></span>\n                  </div>\n                  <i class=\"fa-solid card-chevron\"\n                     [class.fa-chevron-down]=\"!card.IsExpanded\"\n                     [class.fa-chevron-up]=\"card.IsExpanded\"></i>\n                </div>\n              </div>\n\n              <!-- Expanded entity map table -->\n              @if (card.IsExpanded) {\n                <div class=\"card-body\">\n                  <!-- Search within this integration -->\n                  <div class=\"card-search-bar\">\n                    <i class=\"fa-solid fa-filter card-search-icon\"></i>\n                    <input type=\"text\"\n                           class=\"card-search-input\"\n                           placeholder=\"Filter entity maps...\"\n                           [value]=\"card.SearchTerm\"\n                           (input)=\"OnCardSearch(card, $event)\" />\n                    <span class=\"card-search-count\">\n                      {{ card.FilteredMaps.length }} of {{ card.EntityMapCount }}\n                    </span>\n                  </div>\n\n                  <!-- Table header -->\n                  <div class=\"map-table-head\">\n                    <span class=\"map-col-toggle\">Sync</span>\n                    <span class=\"map-col-source\">External Object</span>\n                    <span class=\"map-col-direction\"></span>\n                    <span class=\"map-col-dest\">MJ Entity</span>\n                    <span class=\"map-col-meta\">Config</span>\n                  </div>\n\n                  <!-- Table body -->\n                  <div class=\"map-table-body\">\n                    @for (em of card.FilteredMaps; track em.ID) {\n                      <div class=\"map-row\"\n                           [class.sync-disabled]=\"!em.SyncEnabled\"\n                           (click)=\"OnMapRowClick(card, em)\">\n                        <span class=\"map-col-toggle\" (click)=\"$event.stopPropagation()\">\n                          <label class=\"sync-toggle\" [title]=\"em.SyncEnabled ? 'Sync enabled \u2014 click to disable' : 'Sync disabled \u2014 click to enable'\">\n                            <input type=\"checkbox\"\n                                   [checked]=\"em.SyncEnabled\"\n                                   (change)=\"OnToggleSyncEnabled(card, em, $event)\" />\n                            <span class=\"sync-toggle-track\"></span>\n                          </label>\n                        </span>\n                        <span class=\"map-col-source\" [title]=\"em.ExternalObjectName\">\n                          {{ em.ExternalObjectLabel ?? em.ExternalObjectName }}\n                        </span>\n                        <span class=\"map-col-direction\">\n                          <span [class]=\"DirectionBadgeClass(em.SyncDirection)\">\n                            {{ DirectionText(em.SyncDirection) }}\n                          </span>\n                        </span>\n                        <span class=\"map-col-dest\" [title]=\"em.Entity\">\n                          {{ em.Entity }}\n                        </span>\n                        <span class=\"map-col-meta\">\n                          @if (em.MatchStrategy) {\n                            <span class=\"map-config-badge\" [title]=\"'Match: ' + em.MatchStrategy\">\n                              <i class=\"fa-solid fa-link\"></i>\n                            </span>\n                          }\n                          <span class=\"map-config-badge\" [title]=\"'Conflict: ' + em.ConflictResolution\">\n                            <i class=\"fa-solid fa-arrows-rotate\"></i>\n                          </span>\n                          <span class=\"map-edit-hint\">\n                            <i class=\"fa-solid fa-chevron-right\"></i>\n                          </span>\n                        </span>\n                      </div>\n                    } @empty {\n                      <div class=\"map-table-empty\">\n                        No entity maps match your filter.\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n  } @else {\n\n    <!-- ===================================================================== -->\n    <!-- VISUAL FIELD MAPPING EDITOR (inline, replaces map list)               -->\n    <!-- ===================================================================== -->\n\n    <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)=\"CloseVisualEditor()\" title=\"Back to Pipelines\">\n            <i class=\"fa-solid fa-arrow-left\"></i>\n          </button>\n          <div class=\"ve-header-title\">\n            <span class=\"ve-source-label\">{{ EditorEntityMap?.ExternalObjectLabel ?? EditorEntityMap?.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\">{{ EditorEntityMap?.Entity }}</span>\n          </div>\n          <!-- SyncEnabled toggle in editor header -->\n          @if (EditorEntityMap) {\n            <label class=\"sync-toggle ve-sync-toggle\"\n                   [title]=\"EditorEntityMap.SyncEnabled ? 'Sync enabled' : 'Sync disabled'\">\n              <input type=\"checkbox\"\n                     [checked]=\"EditorEntityMap.SyncEnabled\"\n                     (change)=\"OnToggleEditorSyncEnabled($event)\" />\n              <span class=\"sync-toggle-track\"></span>\n            </label>\n            <span class=\"ve-sync-label\">{{ EditorEntityMap.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\"\n                  [disabled]=\"IsRunningPipeline\"\n                  (click)=\"RunSchemaPipeline()\"\n                  title=\"Generate DDL, run CodeGen, and restart MJAPI for this mapping\">\n            @if (IsRunningPipeline) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Running Pipeline...\n            } @else {\n              <i class=\"fa-solid fa-gears\"></i> Run Schema Pipeline\n            }\n          </button>\n          @if (PipelineResultMessage) {\n            <span [class]=\"PipelineResultSuccess ? 've-save-success' : 've-error-msg'\">\n              <i [class]=\"PipelineResultSuccess ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'\"></i>\n              {{ PipelineResultMessage }}\n            </span>\n          }\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: {{ EditorEntityMap?.ExternalObjectLabel ?? EditorEntityMap?.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: {{ EditorEntityMap?.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\">{{ EditorEntityMap?.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\">{{ EditorEntityMap?.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\">{{ EditorEntityMap?.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\">{{ EditorEntityMap?.Priority }}</span>\n                      </div>\n                      @if (EditorEntityMap?.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 \u2192 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  }\n</div>\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* =========================================================================\n   Integration Pipelines - Card Layout + Visual Editor\n   ========================================================================= */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* Slot passthrough now in <mj-page-header>; stat badges now via <mj-stat-badge>. */\n\n/* ---------------------------------------------------------------------------\n   Container\n   --------------------------------------------------------------------------- */\n\n.pipelines-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-page);\n  position: relative;\n  overflow: hidden;\n}\n\n/* ---------------------------------------------------------------------------\n   Toolbar\n   --------------------------------------------------------------------------- */\n\n.pipelines-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  z-index: 10;\n}\n\n.toolbar-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.toolbar-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-title i { color: var(--mj-color-indigo-500); }\n\n.toolbar-count-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 22px;\n  height: 22px;\n  padding: 0 6px;\n  border-radius: 11px;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.toolbar-map-count {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.global-search {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.search-icon {\n  position: absolute;\n  left: 10px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  pointer-events: none;\n}\n\n.search-input {\n  width: 240px;\n  height: 32px;\n  padding: 0 12px 0 30px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease, background 150ms ease;\n}\n\n.search-input:focus {\n  border-color: var(--mj-color-indigo-500);\n  background: var(--mj-bg-surface);\n}\n\n.search-input::placeholder { color: var(--mj-color-neutral-300); }\n\n.toolbar-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: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-size: 13px;\n}\n\n.toolbar-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-color-neutral-300);\n  color: var(--mj-text-primary);\n}\n\n.toolbar-btn:active { background: var(--mj-bg-surface-active); }\n\n.toolbar-divider {\n  width: 1px;\n  height: 20px;\n  background: var(--mj-border-default);\n  margin: 0 4px;\n}\n\n/* ---------------------------------------------------------------------------\n   Content area\n   --------------------------------------------------------------------------- */\n\n.pipelines-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.content-loading,\n.content-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.content-loading i { font-size: 28px; color: var(--mj-color-indigo-500); }\n.content-loading span { font-size: 14px; }\n.content-empty .empty-icon { font-size: 48px; color: var(--mj-color-neutral-300); }\n.content-empty h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--mj-text-muted); }\n.content-empty p { margin: 0; font-size: 13px; color: var(--mj-text-disabled); }\n\n/* ---------------------------------------------------------------------------\n   Cards list\n   --------------------------------------------------------------------------- */\n\n.cards-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  max-width: 1200px;\n  margin: 0 auto;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n/* ---------------------------------------------------------------------------\n   Pipeline card\n   --------------------------------------------------------------------------- */\n\n.pipeline-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  overflow: hidden;\n  transition: box-shadow 200ms ease, border-color 200ms ease;\n}\n\n.pipeline-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }\n\n.pipeline-card.expanded {\n  border-color: var(--mj-color-indigo-100);\n  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);\n}\n\n/* Card header */\n.card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 18px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 150ms ease;\n}\n\n.card-header:hover { background: var(--mj-bg-page); }\n\n.card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n  flex: 1;\n}\n\n.card-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n\n.card-icon {\n  font-size: 18px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n  width: 24px;\n  text-align: center;\n}\n\n.card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.card-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-meta { font-size: 12px; color: var(--mj-text-disabled); }\n.meta-sep { color: var(--mj-color-neutral-300); margin: 0 2px; }\n\n.card-header-right {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  flex-shrink: 0;\n}\n\n.card-status-label { font-size: 12px; font-weight: 600; }\n.card-last-sync { font-size: 11px; color: var(--mj-text-disabled); }\n\n/* Mini flow indicator */\n.mini-flow { display: flex; align-items: center; gap: 4px; }\n.mini-flow-dot { width: 8px; height: 8px; border-radius: 50%; }\n.mini-flow-dot.source { background: var(--mj-brand-primary); }\n.mini-flow-dot.dest { background: var(--mj-color-success-600); }\n.mini-flow-line { width: 16px; height: 2px; background: var(--mj-border-default); border-radius: 1px; }\n.mini-flow-count {\n  font-size: 10px; font-weight: 700; color: var(--mj-color-indigo-500);\n  background: var(--mj-color-indigo-50); padding: 1px 5px; border-radius: 4px;\n}\n\n.card-chevron { font-size: 12px; color: var(--mj-text-disabled); transition: transform 200ms ease; }\n\n/* ---------------------------------------------------------------------------\n   Card body (expanded entity maps)\n   --------------------------------------------------------------------------- */\n\n.card-body {\n  border-top: 1px solid var(--mj-border-subtle);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  /* When card is expanded, card-body takes remaining space in the cards-list scroll area.\n     Limit to ~60vh so the table body scrolls internally while headers stay pinned. */\n  max-height: 60vh;\n}\n\n/* Search bar within card */\n.card-search-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 18px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.card-search-icon { font-size: 11px; color: var(--mj-text-disabled); flex-shrink: 0; }\n\n.card-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-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.card-search-input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.card-search-input::placeholder { color: var(--mj-color-neutral-300); }\n.card-search-count { font-size: 11px; color: var(--mj-text-disabled); white-space: nowrap; flex-shrink: 0; }\n\n/* Map table header */\n.map-table-head {\n  display: flex;\n  align-items: center;\n  padding: 6px 18px;\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n  flex-shrink: 0;\n}\n\n/* Map table body \u2014 scrolls within the constrained card-body */\n.map-table-body {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n.map-table-empty {\n  padding: 24px 18px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n/* Map table columns */\n/* map-col-toggle width is set in the sync toggle section above */\n.map-col-source { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-direction { width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.map-col-dest { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-meta { width: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }\n\n/* Map row */\n.map-row {\n  display: flex;\n  align-items: center;\n  padding: 8px 18px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n}\n\n.map-row:hover { background: var(--mj-color-indigo-50); }\n.map-row.sync-disabled { opacity: 0.55; }\n.map-row.sync-disabled:hover { opacity: 0.8; }\n\n/* map-status-dot removed \u2014 replaced by sync-toggle */\n\n.map-config-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 4px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n}\n\n.map-edit-hint {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 4px;\n  color: var(--mj-color-neutral-300);\n  font-size: 11px;\n  transition: color 150ms ease;\n}\n\n.map-row:hover .map-edit-hint { color: var(--mj-color-indigo-500); }\n\n/* ---------------------------------------------------------------------------\n   Sync toggle column\n   --------------------------------------------------------------------------- */\n\n.map-col-toggle {\n  width: 50px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sync-toggle {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.sync-toggle input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.sync-toggle-track {\n  width: 30px;\n  height: 16px;\n  border-radius: 8px;\n  background: var(--mj-color-neutral-300);\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: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n  transition: transform 200ms ease;\n}\n\n.sync-toggle input:checked + .sync-toggle-track {\n  background: var(--mj-color-success-600);\n}\n\n.sync-toggle input:checked + .sync-toggle-track::after {\n  transform: translateX(14px);\n}\n\n/* ---------------------------------------------------------------------------\n   Direction Badges\n   --------------------------------------------------------------------------- */\n\n.direction-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 36px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n.direction-badge.pull { background: var(--mj-color-info-100); color: var(--mj-brand-primary); }\n.direction-badge.push { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.direction-badge.bidirectional { background: var(--mj-color-warning-100); color: var(--mj-color-warning-600); }\n\n/* =========================================================================\n   VISUAL EDITOR (inline panel, replaces map list)\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-error-msg {\n  color: var(--mj-status-error);\n  font-size: 0.8125rem;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 8px;\n}\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/* 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-text-secondary);\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-text-secondary);\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 \u2014 categorical data-viz colors */\n.ve-conn-line.conn-direct { stroke: var(--mj-brand-primary); stroke-dasharray: none; }\n.ve-conn-line.conn-regex { stroke: var(--ve-color-regex, #8b5cf6); stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split { stroke: var(--mj-status-warning); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine { stroke: var(--mj-status-success); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup { stroke: var(--ve-color-lookup, #0ea5e9); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format { stroke: var(--ve-color-format, #ec4899); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce { stroke: var(--ve-color-coerce, #f97316); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring { stroke: var(--ve-color-substring, #14b8a6); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom { stroke: var(--ve-color-custom, #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: var(--mj-brand-primary-subtle); color: var(--mj-brand-primary); border: 2px solid var(--mj-brand-primary); }\n.ve-conn-badge.badge-regex { background: color-mix(in srgb, var(--ve-color-regex, #8b5cf6) 10%, var(--mj-bg-surface)); color: var(--ve-color-regex, #8b5cf6); border: 2px solid var(--ve-color-regex, #8b5cf6); }\n.ve-conn-badge.badge-split { background: var(--mj-status-warning-subtle); color: var(--mj-status-warning); border: 2px solid var(--mj-status-warning); }\n.ve-conn-badge.badge-combine { background: var(--mj-status-success-subtle); color: var(--mj-status-success); border: 2px solid var(--mj-status-success); }\n.ve-conn-badge.badge-lookup { background: color-mix(in srgb, var(--ve-color-lookup, #0ea5e9) 10%, var(--mj-bg-surface)); color: var(--ve-color-lookup, #0ea5e9); border: 2px solid var(--ve-color-lookup, #0ea5e9); }\n.ve-conn-badge.badge-format { background: color-mix(in srgb, var(--ve-color-format, #ec4899) 10%, var(--mj-bg-surface)); color: var(--ve-color-format, #ec4899); border: 2px solid var(--ve-color-format, #ec4899); }\n.ve-conn-badge.badge-coerce { background: color-mix(in srgb, var(--ve-color-coerce, #f97316) 10%, var(--mj-bg-surface)); color: var(--ve-color-coerce, #f97316); border: 2px solid var(--ve-color-coerce, #f97316); }\n.ve-conn-badge.badge-substring { background: color-mix(in srgb, var(--ve-color-substring, #14b8a6) 10%, var(--mj-bg-surface)); color: var(--ve-color-substring, #14b8a6); border: 2px solid var(--ve-color-substring, #14b8a6); }\n.ve-conn-badge.badge-custom { background: color-mix(in srgb, var(--ve-color-custom, #a855f7) 10%, var(--mj-bg-surface)); color: var(--ve-color-custom, #a855f7); border: 2px solid var(--ve-color-custom, #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-text-secondary);\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-text-secondary);\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-text-secondary);\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.cards-list::-webkit-scrollbar,\n.map-table-body::-webkit-scrollbar,\n.ve-canvas-scroll::-webkit-scrollbar,\n.ve-transform-panel::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n.cards-list::-webkit-scrollbar-track,\n.map-table-body::-webkit-scrollbar-track,\n.ve-canvas-scroll::-webkit-scrollbar-track,\n.ve-transform-panel::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.cards-list::-webkit-scrollbar-thumb,\n.map-table-body::-webkit-scrollbar-thumb,\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.cards-list::-webkit-scrollbar-thumb:hover,\n.map-table-body::-webkit-scrollbar-thumb:hover,\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"] }]
+        args: [{ standalone: false, selector: 'app-integration-pipelines', template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Integration Pipelines\"\n    Icon=\"fa-solid fa-diagram-project\"\n    Subtitle=\"Data transformation and routing pipelines\">\n    <!-- [meta] intentionally omitted \u2014 chrome slot discipline audit Task B.\n         Pipelines count mirrored the visible list; entity-maps count was\n         cross-aggregate reference info that didn't drive action on this page. -->\n    <div actions>\n      <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"ExpandAll()\" title=\"Expand All\">\n        <i class=\"fa-solid fa-angles-down\"></i>\n      </button>\n      <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"CollapseAll()\" title=\"Collapse All\">\n        <i class=\"fa-solid fa-angles-up\"></i>\n      </button>\n      <mj-refresh-button [Loading]=\"IsLoading\" (Clicked)=\"LoadData()\"></mj-refresh-button>\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search integrations or entities...\"\n        [Value]=\"GlobalSearch\"\n        (ValueChange)=\"OnGlobalSearchValue($event)\">\n      </mj-page-search>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body [Flex]=\"true\" [Padding]=\"false\">\n<div class=\"pipelines-container\">\n\n  <!-- ===================================================================== -->\n  <!-- MAP LIST VIEW (hidden when editor is open)                            -->\n  <!-- ===================================================================== -->\n  @if (!VisualEditorOpen) {\n\n    <!-- Main content area -->\n    <div class=\"pipelines-content\">\n      @if (IsLoading && PipelineCards.length === 0) {\n        <div class=\"content-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          <span>Loading pipelines...</span>\n        </div>\n      } @else if (PipelineCards.length === 0) {\n        <div class=\"content-empty\">\n          <i class=\"fa-solid fa-diagram-project empty-icon\"></i>\n          <h3>No Integration Pipelines</h3>\n          <p>Configure integrations to see data flow pipelines here.</p>\n        </div>\n      } @else {\n        <div class=\"cards-list\">\n          @for (card of FilteredCards; track card.IntegrationID) {\n            <!-- Pipeline card -->\n            <div class=\"pipeline-card\" [class.expanded]=\"card.IsExpanded\">\n\n              <!-- Card header (always visible) -->\n              <div class=\"card-header\" (click)=\"ToggleCard(card)\">\n                <div class=\"card-header-left\">\n                  <div class=\"card-status-dot\" [style.backgroundColor]=\"card.StatusColor\"></div>\n                  <i [class]=\"card.Icon + ' card-icon'\"></i>\n                  <div class=\"card-info\">\n                    <span class=\"card-name\">{{ card.IntegrationName }}</span>\n                    <span class=\"card-meta\">\n                      {{ card.EntityMapCount }} maps\n                      <span class=\"meta-sep\">&middot;</span>\n                      {{ card.ActiveMapCount }} active\n                      <span class=\"meta-sep\">&middot;</span>\n                      {{ card.UniqueEntityCount }} entities\n                    </span>\n                  </div>\n                </div>\n                <div class=\"card-header-right\">\n                  <span class=\"card-status-label\" [style.color]=\"card.StatusColor\">\n                    {{ card.StatusLabel }}\n                  </span>\n                  @if (card.LastSync) {\n                    <span class=\"card-last-sync\">{{ card.LastSync }}</span>\n                  }\n                  <!-- Mini flow indicator -->\n                  <div class=\"mini-flow\">\n                    <span class=\"mini-flow-dot source\"></span>\n                    <span class=\"mini-flow-line\"></span>\n                    <span class=\"mini-flow-count\">{{ card.EntityMapCount }}</span>\n                    <span class=\"mini-flow-line\"></span>\n                    <span class=\"mini-flow-dot dest\"></span>\n                  </div>\n                  <i class=\"fa-solid card-chevron\"\n                     [class.fa-chevron-down]=\"!card.IsExpanded\"\n                     [class.fa-chevron-up]=\"card.IsExpanded\"></i>\n                </div>\n              </div>\n\n              <!-- Expanded entity map table -->\n              @if (card.IsExpanded) {\n                <div class=\"card-body\">\n                  <!-- Search within this integration -->\n                  <div class=\"card-search-bar\">\n                    <i class=\"fa-solid fa-filter card-search-icon\"></i>\n                    <input type=\"text\"\n                           class=\"card-search-input\"\n                           placeholder=\"Filter entity maps...\"\n                           [value]=\"card.SearchTerm\"\n                           (input)=\"OnCardSearch(card, $event)\" />\n                    <span class=\"card-search-count\">\n                      {{ card.FilteredMaps.length }} of {{ card.EntityMapCount }}\n                    </span>\n                  </div>\n\n                  <!-- Table header -->\n                  <div class=\"map-table-head\">\n                    <span class=\"map-col-toggle\">Sync</span>\n                    <span class=\"map-col-source\">External Object</span>\n                    <span class=\"map-col-direction\"></span>\n                    <span class=\"map-col-dest\">MJ Entity</span>\n                    <span class=\"map-col-meta\">Config</span>\n                  </div>\n\n                  <!-- Table body -->\n                  <div class=\"map-table-body\">\n                    @for (em of card.FilteredMaps; track em.ID) {\n                      <div class=\"map-row\"\n                           [class.sync-disabled]=\"!em.SyncEnabled\"\n                           (click)=\"OnMapRowClick(card, em)\">\n                        <span class=\"map-col-toggle\" (click)=\"$event.stopPropagation()\">\n                          <label class=\"sync-toggle\" [title]=\"em.SyncEnabled ? 'Sync enabled \u2014 click to disable' : 'Sync disabled \u2014 click to enable'\">\n                            <input type=\"checkbox\"\n                                   [checked]=\"em.SyncEnabled\"\n                                   (change)=\"OnToggleSyncEnabled(card, em, $event)\" />\n                            <span class=\"sync-toggle-track\"></span>\n                          </label>\n                        </span>\n                        <span class=\"map-col-source\" [title]=\"em.ExternalObjectName\">\n                          {{ em.ExternalObjectLabel ?? em.ExternalObjectName }}\n                        </span>\n                        <span class=\"map-col-direction\">\n                          <span [class]=\"DirectionBadgeClass(em.SyncDirection)\">\n                            {{ DirectionText(em.SyncDirection) }}\n                          </span>\n                        </span>\n                        <span class=\"map-col-dest\" [title]=\"em.Entity\">\n                          {{ em.Entity }}\n                        </span>\n                        <span class=\"map-col-meta\">\n                          @if (em.MatchStrategy) {\n                            <span class=\"map-config-badge\" [title]=\"'Match: ' + em.MatchStrategy\">\n                              <i class=\"fa-solid fa-link\"></i>\n                            </span>\n                          }\n                          <span class=\"map-config-badge\" [title]=\"'Conflict: ' + em.ConflictResolution\">\n                            <i class=\"fa-solid fa-arrows-rotate\"></i>\n                          </span>\n                          <span class=\"map-edit-hint\">\n                            <i class=\"fa-solid fa-chevron-right\"></i>\n                          </span>\n                        </span>\n                      </div>\n                    } @empty {\n                      <div class=\"map-table-empty\">\n                        No entity maps match your filter.\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n  } @else {\n\n    <!-- ===================================================================== -->\n    <!-- VISUAL FIELD MAPPING EDITOR (inline, replaces map list)               -->\n    <!-- ===================================================================== -->\n\n    <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)=\"CloseVisualEditor()\" title=\"Back to Pipelines\">\n            <i class=\"fa-solid fa-arrow-left\"></i>\n          </button>\n          <div class=\"ve-header-title\">\n            <span class=\"ve-source-label\">{{ EditorEntityMap?.ExternalObjectLabel ?? EditorEntityMap?.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\">{{ EditorEntityMap?.Entity }}</span>\n          </div>\n          <!-- SyncEnabled toggle in editor header -->\n          @if (EditorEntityMap) {\n            <label class=\"sync-toggle ve-sync-toggle\"\n                   [title]=\"EditorEntityMap.SyncEnabled ? 'Sync enabled' : 'Sync disabled'\">\n              <input type=\"checkbox\"\n                     [checked]=\"EditorEntityMap.SyncEnabled\"\n                     (change)=\"OnToggleEditorSyncEnabled($event)\" />\n              <span class=\"sync-toggle-track\"></span>\n            </label>\n            <span class=\"ve-sync-label\">{{ EditorEntityMap.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\"\n                  [disabled]=\"IsRunningPipeline\"\n                  (click)=\"RunSchemaPipeline()\"\n                  title=\"Generate DDL, run CodeGen, and restart MJAPI for this mapping\">\n            @if (IsRunningPipeline) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Running Pipeline...\n            } @else {\n              <i class=\"fa-solid fa-gears\"></i> Run Schema Pipeline\n            }\n          </button>\n          @if (PipelineResultMessage) {\n            <span [class]=\"PipelineResultSuccess ? 've-save-success' : 've-error-msg'\">\n              <i [class]=\"PipelineResultSuccess ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'\"></i>\n              {{ PipelineResultMessage }}\n            </span>\n          }\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: {{ EditorEntityMap?.ExternalObjectLabel ?? EditorEntityMap?.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: {{ EditorEntityMap?.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\">{{ EditorEntityMap?.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\">{{ EditorEntityMap?.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\">{{ EditorEntityMap?.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\">{{ EditorEntityMap?.Priority }}</span>\n                      </div>\n                      @if (EditorEntityMap?.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 \u2192 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  }\n</div>\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* =========================================================================\n   Integration Pipelines - Card Layout + Visual Editor\n   ========================================================================= */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* Slot passthrough now in <mj-page-header>; stat badges now via <mj-stat-badge>. */\n\n/* ---------------------------------------------------------------------------\n   Container\n   --------------------------------------------------------------------------- */\n\n.pipelines-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-page);\n  position: relative;\n  overflow: hidden;\n}\n\n/* ---------------------------------------------------------------------------\n   Toolbar\n   --------------------------------------------------------------------------- */\n\n.pipelines-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  z-index: 10;\n}\n\n.toolbar-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.toolbar-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toolbar-title i { color: var(--mj-color-indigo-500); }\n\n.toolbar-count-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 22px;\n  height: 22px;\n  padding: 0 6px;\n  border-radius: 11px;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.toolbar-map-count {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.global-search {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.search-icon {\n  position: absolute;\n  left: 10px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  pointer-events: none;\n}\n\n.search-input {\n  width: 240px;\n  height: 32px;\n  padding: 0 12px 0 30px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease, background 150ms ease;\n}\n\n.search-input:focus {\n  border-color: var(--mj-color-indigo-500);\n  background: var(--mj-bg-surface);\n}\n\n.search-input::placeholder { color: var(--mj-color-neutral-300); }\n\n.toolbar-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: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n  font-size: 13px;\n}\n\n.toolbar-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-color-neutral-300);\n  color: var(--mj-text-primary);\n}\n\n.toolbar-btn:active { background: var(--mj-bg-surface-active); }\n\n.toolbar-divider {\n  width: 1px;\n  height: 20px;\n  background: var(--mj-border-default);\n  margin: 0 4px;\n}\n\n/* ---------------------------------------------------------------------------\n   Content area\n   --------------------------------------------------------------------------- */\n\n.pipelines-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.content-loading,\n.content-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.content-loading i { font-size: 28px; color: var(--mj-color-indigo-500); }\n.content-loading span { font-size: 14px; }\n.content-empty .empty-icon { font-size: 48px; color: var(--mj-color-neutral-300); }\n.content-empty h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--mj-text-muted); }\n.content-empty p { margin: 0; font-size: 13px; color: var(--mj-text-disabled); }\n\n/* ---------------------------------------------------------------------------\n   Cards list\n   --------------------------------------------------------------------------- */\n\n.cards-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  max-width: 1200px;\n  margin: 0 auto;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n/* ---------------------------------------------------------------------------\n   Pipeline card\n   --------------------------------------------------------------------------- */\n\n.pipeline-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  overflow: hidden;\n  transition: box-shadow 200ms ease, border-color 200ms ease;\n}\n\n.pipeline-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }\n\n.pipeline-card.expanded {\n  border-color: var(--mj-color-indigo-100);\n  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);\n}\n\n/* Card header */\n.card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 18px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 150ms ease;\n}\n\n.card-header:hover { background: var(--mj-bg-page); }\n\n.card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n  flex: 1;\n}\n\n.card-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n\n.card-icon {\n  font-size: 18px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n  width: 24px;\n  text-align: center;\n}\n\n.card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.card-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-meta { font-size: 12px; color: var(--mj-text-disabled); }\n.meta-sep { color: var(--mj-color-neutral-300); margin: 0 2px; }\n\n.card-header-right {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  flex-shrink: 0;\n}\n\n.card-status-label { font-size: 12px; font-weight: 600; }\n.card-last-sync { font-size: 11px; color: var(--mj-text-disabled); }\n\n/* Mini flow indicator */\n.mini-flow { display: flex; align-items: center; gap: 4px; }\n.mini-flow-dot { width: 8px; height: 8px; border-radius: 50%; }\n.mini-flow-dot.source { background: var(--mj-brand-primary); }\n.mini-flow-dot.dest { background: var(--mj-color-success-600); }\n.mini-flow-line { width: 16px; height: 2px; background: var(--mj-border-default); border-radius: 1px; }\n.mini-flow-count {\n  font-size: 10px; font-weight: 700; color: var(--mj-color-indigo-500);\n  background: var(--mj-color-indigo-50); padding: 1px 5px; border-radius: 4px;\n}\n\n.card-chevron { font-size: 12px; color: var(--mj-text-disabled); transition: transform 200ms ease; }\n\n/* ---------------------------------------------------------------------------\n   Card body (expanded entity maps)\n   --------------------------------------------------------------------------- */\n\n.card-body {\n  border-top: 1px solid var(--mj-border-subtle);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  /* When card is expanded, card-body takes remaining space in the cards-list scroll area.\n     Limit to ~60vh so the table body scrolls internally while headers stay pinned. */\n  max-height: 60vh;\n}\n\n/* Search bar within card */\n.card-search-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 18px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.card-search-icon { font-size: 11px; color: var(--mj-text-disabled); flex-shrink: 0; }\n\n.card-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-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.card-search-input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.card-search-input::placeholder { color: var(--mj-color-neutral-300); }\n.card-search-count { font-size: 11px; color: var(--mj-text-disabled); white-space: nowrap; flex-shrink: 0; }\n\n/* Map table header */\n.map-table-head {\n  display: flex;\n  align-items: center;\n  padding: 6px 18px;\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n  flex-shrink: 0;\n}\n\n/* Map table body \u2014 scrolls within the constrained card-body */\n.map-table-body {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n.map-table-empty {\n  padding: 24px 18px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n/* Map table columns */\n/* map-col-toggle width is set in the sync toggle section above */\n.map-col-source { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-direction { width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n.map-col-dest { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.map-col-meta { width: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }\n\n/* Map row */\n.map-row {\n  display: flex;\n  align-items: center;\n  padding: 8px 18px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n}\n\n.map-row:hover { background: var(--mj-color-indigo-50); }\n.map-row.sync-disabled { opacity: 0.55; }\n.map-row.sync-disabled:hover { opacity: 0.8; }\n\n/* map-status-dot removed \u2014 replaced by sync-toggle */\n\n.map-config-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 4px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n}\n\n.map-edit-hint {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 4px;\n  color: var(--mj-color-neutral-300);\n  font-size: 11px;\n  transition: color 150ms ease;\n}\n\n.map-row:hover .map-edit-hint { color: var(--mj-color-indigo-500); }\n\n/* ---------------------------------------------------------------------------\n   Sync toggle column\n   --------------------------------------------------------------------------- */\n\n.map-col-toggle {\n  width: 50px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sync-toggle {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.sync-toggle input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.sync-toggle-track {\n  width: 30px;\n  height: 16px;\n  border-radius: 8px;\n  background: var(--mj-color-neutral-300);\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: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n  transition: transform 200ms ease;\n}\n\n.sync-toggle input:checked + .sync-toggle-track {\n  background: var(--mj-color-success-600);\n}\n\n.sync-toggle input:checked + .sync-toggle-track::after {\n  transform: translateX(14px);\n}\n\n/* ---------------------------------------------------------------------------\n   Direction Badges\n   --------------------------------------------------------------------------- */\n\n.direction-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 36px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n.direction-badge.pull { background: var(--mj-color-info-100); color: var(--mj-brand-primary); }\n.direction-badge.push { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.direction-badge.bidirectional { background: var(--mj-color-warning-100); color: var(--mj-color-warning-600); }\n\n/* =========================================================================\n   VISUAL EDITOR (inline panel, replaces map list)\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-error-msg {\n  color: var(--mj-status-error);\n  font-size: 0.8125rem;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 8px;\n}\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/* 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-text-secondary);\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-text-secondary);\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 \u2014 categorical data-viz colors */\n.ve-conn-line.conn-direct { stroke: var(--mj-brand-primary); stroke-dasharray: none; }\n.ve-conn-line.conn-regex { stroke: var(--ve-color-regex, #8b5cf6); stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split { stroke: var(--mj-status-warning); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine { stroke: var(--mj-status-success); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup { stroke: var(--ve-color-lookup, #0ea5e9); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format { stroke: var(--ve-color-format, #ec4899); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce { stroke: var(--ve-color-coerce, #f97316); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring { stroke: var(--ve-color-substring, #14b8a6); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom { stroke: var(--ve-color-custom, #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: var(--mj-brand-primary-subtle); color: var(--mj-brand-primary); border: 2px solid var(--mj-brand-primary); }\n.ve-conn-badge.badge-regex { background: color-mix(in srgb, var(--ve-color-regex, #8b5cf6) 10%, var(--mj-bg-surface)); color: var(--ve-color-regex, #8b5cf6); border: 2px solid var(--ve-color-regex, #8b5cf6); }\n.ve-conn-badge.badge-split { background: var(--mj-status-warning-subtle); color: var(--mj-status-warning); border: 2px solid var(--mj-status-warning); }\n.ve-conn-badge.badge-combine { background: var(--mj-status-success-subtle); color: var(--mj-status-success); border: 2px solid var(--mj-status-success); }\n.ve-conn-badge.badge-lookup { background: color-mix(in srgb, var(--ve-color-lookup, #0ea5e9) 10%, var(--mj-bg-surface)); color: var(--ve-color-lookup, #0ea5e9); border: 2px solid var(--ve-color-lookup, #0ea5e9); }\n.ve-conn-badge.badge-format { background: color-mix(in srgb, var(--ve-color-format, #ec4899) 10%, var(--mj-bg-surface)); color: var(--ve-color-format, #ec4899); border: 2px solid var(--ve-color-format, #ec4899); }\n.ve-conn-badge.badge-coerce { background: color-mix(in srgb, var(--ve-color-coerce, #f97316) 10%, var(--mj-bg-surface)); color: var(--ve-color-coerce, #f97316); border: 2px solid var(--ve-color-coerce, #f97316); }\n.ve-conn-badge.badge-substring { background: color-mix(in srgb, var(--ve-color-substring, #14b8a6) 10%, var(--mj-bg-surface)); color: var(--ve-color-substring, #14b8a6); border: 2px solid var(--ve-color-substring, #14b8a6); }\n.ve-conn-badge.badge-custom { background: color-mix(in srgb, var(--ve-color-custom, #a855f7) 10%, var(--mj-bg-surface)); color: var(--ve-color-custom, #a855f7); border: 2px solid var(--ve-color-custom, #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-text-secondary);\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-text-secondary);\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-text-secondary);\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.cards-list::-webkit-scrollbar,\n.map-table-body::-webkit-scrollbar,\n.ve-canvas-scroll::-webkit-scrollbar,\n.ve-transform-panel::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n.cards-list::-webkit-scrollbar-track,\n.map-table-body::-webkit-scrollbar-track,\n.ve-canvas-scroll::-webkit-scrollbar-track,\n.ve-transform-panel::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.cards-list::-webkit-scrollbar-thumb,\n.map-table-body::-webkit-scrollbar-thumb,\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.cards-list::-webkit-scrollbar-thumb:hover,\n.map-table-body::-webkit-scrollbar-thumb:hover,\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, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PipelinesComponent, { className: "PipelinesComponent", filePath: "src/Integration/components/pipelines/pipelines.component.ts", lineNumber: 80 }); })();
 export function LoadPipelinesComponent() {