@memberjunction/ng-dashboards 5.34.0 → 5.35.0

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

@@ -13,21 +13,33 @@ import { IntegrationDataService, ResolveIntegrationIcon } from '../../services/i
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-ui-components";
 const _forTrack0 = ($index, $item) => $item.IntegrationID;
 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_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵelement(1, "i", 23);
+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);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Loading pipelines...");
     i0.ɵɵelementEnd()();
 } }
-function PipelinesComponent_Conditional_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵelement(1, "i", 24);
+function PipelinesComponent_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "i", 20);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No Integration Pipelines");
     i0.ɵɵelementEnd();
@@ -35,1099 +47,1062 @@ function PipelinesComponent_Conditional_1_Conditional_22_Template(rf, ctx) { if
     i0.ɵɵtext(5, "Configure integrations to see data flow pipelines here.");
     i0.ɵɵelementEnd()();
 } }
-function PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 36);
+function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 32);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const card_r4 = i0.ɵɵnextContext().$implicit;
+    const card_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(card_r4.LastSync);
+    i0.ɵɵtextInterpolate(card_r3.LastSync);
 } }
-function PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_For_18_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 64);
-    i0.ɵɵelement(1, "i", 67);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const em_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("title", "Match: " + em_r7.MatchStrategy);
+    const em_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", "Match: " + em_r6.MatchStrategy);
 } }
-function PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_For_18_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 57);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_For_18_Template_div_click_0_listener() { const em_r7 = i0.ɵɵrestoreView(_r6).$implicit; const card_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMapRowClick(card_r4, em_r7)); });
-    i0.ɵɵelementStart(1, "span", 58);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_For_18_Template_span_click_1_listener($event) { i0.ɵɵrestoreView(_r6); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "label", 59)(3, "input", 60);
-    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_For_18_Template_input_change_3_listener($event) { const em_r7 = i0.ɵɵrestoreView(_r6).$implicit; const card_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnToggleSyncEnabled(card_r4, em_r7, $event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "span", 61);
+function PipelinesComponent_Conditional_13_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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "span", 62);
+    i0.ɵɵelementStart(5, "span", 58);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 51)(8, "span");
+    i0.ɵɵelementStart(7, "span", 47)(8, "span");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "span", 63);
+    i0.ɵɵelementStart(10, "span", 59);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 53);
-    i0.ɵɵconditionalCreate(13, PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_For_18_Conditional_13_Template, 2, 1, "span", 64);
-    i0.ɵɵelementStart(14, "span", 64);
-    i0.ɵɵelement(15, "i", 18);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "span", 65);
-    i0.ɵɵelement(17, "i", 66);
+    i0.ɵɵelementStart(16, "span", 62);
+    i0.ɵɵelement(17, "i", 63);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const em_r7 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("sync-disabled", !em_r7.SyncEnabled);
+    const em_r6 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassProp("sync-disabled", !em_r6.SyncEnabled);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", em_r7.SyncEnabled ? "Sync enabled \u2014 click to disable" : "Sync disabled \u2014 click to enable");
+    i0.ɵɵproperty("title", em_r6.SyncEnabled ? "Sync enabled \u2014 click to disable" : "Sync disabled \u2014 click to enable");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", em_r7.SyncEnabled);
+    i0.ɵɵproperty("checked", em_r6.SyncEnabled);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", em_r7.ExternalObjectName);
+    i0.ɵɵproperty("title", em_r6.ExternalObjectName);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", em_r7.ExternalObjectLabel ?? em_r7.ExternalObjectName, " ");
+    i0.ɵɵtextInterpolate1(" ", em_r6.ExternalObjectLabel ?? em_r6.ExternalObjectName, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.DirectionBadgeClass(em_r7.SyncDirection));
+    i0.ɵɵclassMap(ctx_r0.DirectionBadgeClass(em_r6.SyncDirection));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.DirectionText(em_r7.SyncDirection), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.DirectionText(em_r6.SyncDirection), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("title", em_r7.Entity);
+    i0.ɵɵproperty("title", em_r6.Entity);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", em_r7.Entity, " ");
+    i0.ɵɵtextInterpolate1(" ", em_r6.Entity, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(em_r7.MatchStrategy ? 13 : -1);
+    i0.ɵɵconditional(em_r6.MatchStrategy ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("title", "Conflict: " + em_r7.ConflictResolution);
+    i0.ɵɵproperty("title", "Conflict: " + em_r6.ConflictResolution);
 } }
-function PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_ForEmpty_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56);
+function PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_ForEmpty_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52);
     i0.ɵɵtext(1, " No entity maps match your filter. ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 43)(1, "div", 44);
-    i0.ɵɵelement(2, "i", 45);
-    i0.ɵɵelementStart(3, "input", 46);
-    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r5); const card_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCardSearch(card_r4, $event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 47);
+function PipelinesComponent_Conditional_13_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.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 43);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 48)(7, "span", 49);
+    i0.ɵɵelementStart(6, "div", 44)(7, "span", 45);
     i0.ɵɵtext(8, "Sync");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 50);
+    i0.ɵɵelementStart(9, "span", 46);
     i0.ɵɵtext(10, "External Object");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(11, "span", 51);
-    i0.ɵɵelementStart(12, "span", 52);
+    i0.ɵɵelement(11, "span", 47);
+    i0.ɵɵelementStart(12, "span", 48);
     i0.ɵɵtext(13, "MJ Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 53);
+    i0.ɵɵelementStart(14, "span", 49);
     i0.ɵɵtext(15, "Config");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 54);
-    i0.ɵɵrepeaterCreate(17, PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_For_18_Template, 18, 13, "div", 55, _forTrack1, false, PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_ForEmpty_19_Template, 2, 0, "div", 56);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const card_r4 = i0.ɵɵnextContext().$implicit;
+    const card_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("value", card_r4.SearchTerm);
+    i0.ɵɵproperty("value", card_r3.SearchTerm);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2(" ", card_r4.FilteredMaps.length, " of ", card_r4.EntityMapCount, " ");
+    i0.ɵɵtextInterpolate2(" ", card_r3.FilteredMaps.length, " of ", card_r3.EntityMapCount, " ");
     i0.ɵɵadvance(12);
-    i0.ɵɵrepeater(card_r4.FilteredMaps);
+    i0.ɵɵrepeater(card_r3.FilteredMaps);
 } }
-function PipelinesComponent_Conditional_1_Conditional_23_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 26)(1, "div", 27);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_1_Conditional_23_For_2_Template_div_click_1_listener() { const card_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ToggleCard(card_r4)); });
-    i0.ɵɵelementStart(2, "div", 28);
-    i0.ɵɵelement(3, "div", 29)(4, "i");
-    i0.ɵɵelementStart(5, "div", 30)(6, "span", 31);
+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);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 32);
+    i0.ɵɵelementStart(8, "span", 28);
     i0.ɵɵtext(9);
-    i0.ɵɵelementStart(10, "span", 33);
+    i0.ɵɵelementStart(10, "span", 29);
     i0.ɵɵtext(11, "\u00B7");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(12);
-    i0.ɵɵelementStart(13, "span", 33);
+    i0.ɵɵelementStart(13, "span", 29);
     i0.ɵɵtext(14, "\u00B7");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(16, "div", 34)(17, "span", 35);
+    i0.ɵɵelementStart(16, "div", 30)(17, "span", 31);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(19, PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_19_Template, 2, 1, "span", 36);
-    i0.ɵɵelementStart(20, "div", 37);
-    i0.ɵɵelement(21, "span", 38)(22, "span", 39);
-    i0.ɵɵelementStart(23, "span", 40);
+    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.ɵɵtext(24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(25, "span", 39)(26, "span", 41);
+    i0.ɵɵelement(25, "span", 35)(26, "span", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(27, "i", 42);
+    i0.ɵɵelement(27, "i", 38);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(28, PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_Template, 20, 4, "div", 43);
+    i0.ɵɵconditionalCreate(28, PipelinesComponent_Conditional_13_Conditional_3_For_2_Conditional_28_Template, 20, 4, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const card_r4 = ctx.$implicit;
-    i0.ɵɵclassProp("expanded", card_r4.IsExpanded);
+    const card_r3 = ctx.$implicit;
+    i0.ɵɵclassProp("expanded", card_r3.IsExpanded);
     i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("background-color", card_r4.StatusColor);
+    i0.ɵɵstyleProp("background-color", card_r3.StatusColor);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(card_r4.Icon + " card-icon");
+    i0.ɵɵclassMap(card_r3.Icon + " card-icon");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(card_r4.IntegrationName);
+    i0.ɵɵtextInterpolate(card_r3.IntegrationName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", card_r4.EntityMapCount, " maps ");
+    i0.ɵɵtextInterpolate1(" ", card_r3.EntityMapCount, " maps ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", card_r4.ActiveMapCount, " active ");
+    i0.ɵɵtextInterpolate1(" ", card_r3.ActiveMapCount, " active ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", card_r4.UniqueEntityCount, " entities ");
+    i0.ɵɵtextInterpolate1(" ", card_r3.UniqueEntityCount, " entities ");
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("color", card_r4.StatusColor);
+    i0.ɵɵstyleProp("color", card_r3.StatusColor);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", card_r4.StatusLabel, " ");
+    i0.ɵɵtextInterpolate1(" ", card_r3.StatusLabel, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(card_r4.LastSync ? 19 : -1);
+    i0.ɵɵconditional(card_r3.LastSync ? 19 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(card_r4.EntityMapCount);
+    i0.ɵɵtextInterpolate(card_r3.EntityMapCount);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("fa-chevron-down", !card_r4.IsExpanded)("fa-chevron-up", card_r4.IsExpanded);
+    i0.ɵɵclassProp("fa-chevron-down", !card_r3.IsExpanded)("fa-chevron-up", card_r3.IsExpanded);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(card_r4.IsExpanded ? 28 : -1);
+    i0.ɵɵconditional(card_r3.IsExpanded ? 28 : -1);
 } }
-function PipelinesComponent_Conditional_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_1_Conditional_23_For_2_Template, 29, 20, "div", 25, _forTrack0);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.FilteredCards);
+    i0.ɵɵrepeater(ctx_r0.FilteredCards);
 } }
-function PipelinesComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "h2", 4);
-    i0.ɵɵelement(3, "i", 5);
-    i0.ɵɵtext(4, " Pipelines ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 6);
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 7);
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 8)(10, "div", 9);
-    i0.ɵɵelement(11, "i", 10);
-    i0.ɵɵelementStart(12, "input", 11);
-    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_1_Template_input_input_12_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnGlobalSearchChange($event)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "button", 12);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_1_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ExpandAll()); });
-    i0.ɵɵelement(14, "i", 13);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 14);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_1_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CollapseAll()); });
-    i0.ɵɵelement(16, "i", 15);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(17, "div", 16);
-    i0.ɵɵelementStart(18, "button", 17);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_1_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.LoadData()); });
-    i0.ɵɵelement(19, "i", 18);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(20, "div", 19);
-    i0.ɵɵconditionalCreate(21, PipelinesComponent_Conditional_1_Conditional_21_Template, 4, 0, "div", 20)(22, PipelinesComponent_Conditional_1_Conditional_22_Template, 6, 0, "div", 21)(23, PipelinesComponent_Conditional_1_Conditional_23_Template, 3, 0, "div", 22);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.IntegrationCount);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r1.TotalMapCount, " entity maps");
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r1.GlobalSearch);
-    i0.ɵɵadvance(7);
-    i0.ɵɵclassProp("fa-spin", ctx_r1.IsLoading);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.IsLoading && ctx_r1.PipelineCards.length === 0 ? 21 : ctx_r1.PipelineCards.length === 0 ? 22 : 23);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.IsLoading && ctx_r0.PipelineCards.length === 0 ? 1 : ctx_r0.PipelineCards.length === 0 ? 2 : 3);
 } }
-function PipelinesComponent_Conditional_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 96)(1, "input", 60);
-    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_2_Conditional_12_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnToggleEditorSyncEnabled($event)); });
+function PipelinesComponent_Conditional_14_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.ɵɵelementEnd();
-    i0.ɵɵelement(2, "span", 61);
+    i0.ɵɵelement(2, "span", 57);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 97);
+    i0.ɵɵelementStart(3, "span", 94);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("title", ctx_r1.EditorEntityMap.SyncEnabled ? "Sync enabled" : "Sync disabled");
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", ctx_r0.EditorEntityMap.SyncEnabled ? "Sync enabled" : "Sync disabled");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.EditorEntityMap.SyncEnabled);
+    i0.ɵɵproperty("checked", ctx_r0.EditorEntityMap.SyncEnabled);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap.SyncEnabled ? "Sync On" : "Sync Off");
+    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap.SyncEnabled ? "Sync On" : "Sync Off");
 } }
-function PipelinesComponent_Conditional_2_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 23);
+function PipelinesComponent_Conditional_14_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 19);
     i0.ɵɵtext(1, " Running Pipeline... ");
 } }
-function PipelinesComponent_Conditional_2_Conditional_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 98);
+function PipelinesComponent_Conditional_14_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 95);
     i0.ɵɵtext(1, " Run Schema Pipeline ");
 } }
-function PipelinesComponent_Conditional_2_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_14_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_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(ctx_r1.PipelineResultSuccess ? "ve-save-success" : "ve-error-msg");
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r0.PipelineResultSuccess ? "ve-save-success" : "ve-error-msg");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.PipelineResultSuccess ? "fa-solid fa-circle-check" : "fa-solid fa-circle-xmark");
+    i0.ɵɵclassMap(ctx_r0.PipelineResultSuccess ? "fa-solid fa-circle-check" : "fa-solid fa-circle-xmark");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.PipelineResultMessage, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.PipelineResultMessage, " ");
 } }
-function PipelinesComponent_Conditional_2_Conditional_45_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 23);
+function PipelinesComponent_Conditional_14_Conditional_45_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 19);
     i0.ɵɵtext(1, " Saving... ");
 } }
-function PipelinesComponent_Conditional_2_Conditional_46_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 99);
+function PipelinesComponent_Conditional_14_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 96);
     i0.ɵɵtext(1, " Save ");
 } }
-function PipelinesComponent_Conditional_2_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 91);
-    i0.ɵɵelement(1, "i", 100);
+function PipelinesComponent_Conditional_14_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 88);
+    i0.ɵɵelement(1, "i", 97);
     i0.ɵɵtext(2, " Saved ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 105);
-    i0.ɵɵelement(1, "i", 23);
+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);
     i0.ɵɵtext(2, " Loading... ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 106);
+function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 103);
     i0.ɵɵtext(1, "No source data available");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "th");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r11 = ctx.$implicit;
+    const col_r10 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(col_r11);
+    i0.ɵɵtextInterpolate(col_r10);
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_9_For_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td", 109);
+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);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r12 = ctx.$implicit;
-    const row_r13 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("title", (row_r13[col_r12] == null ? null : row_r13[col_r12].toString()) ?? "");
+    const col_r11 = ctx.$implicit;
+    const row_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", (row_r12[col_r11] == null ? null : row_r12[col_r11].toString()) ?? "");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(row_r13[col_r12] ?? "");
+    i0.ɵɵtextInterpolate(row_r12[col_r11] ?? "");
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr");
-    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_9_For_8_For_2_Template, 2, 2, "td", 109, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_For_8_For_2_Template, 2, 2, "td", 106, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
+    const ctx_r0 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.PreviewSourceColumns);
+    i0.ɵɵrepeater(ctx_r0.PreviewSourceColumns);
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 107)(1, "table", 108)(2, "thead")(3, "tr");
-    i0.ɵɵrepeaterCreate(4, PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_9_For_5_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
+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);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "tbody");
-    i0.ɵɵrepeaterCreate(7, PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(7, PipelinesComponent_Conditional_14_Conditional_48_Conditional_1_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
-    i0.ɵɵrepeater(ctx_r1.PreviewSourceColumns);
+    i0.ɵɵrepeater(ctx_r0.PreviewSourceColumns);
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r1.PreviewSourceRows);
+    i0.ɵɵrepeater(ctx_r0.PreviewSourceRows);
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 101)(1, "div", 102);
-    i0.ɵɵelement(2, "i", 82);
+function PipelinesComponent_Conditional_14_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(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 103);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ShowSourcePreview = false); });
-    i0.ɵɵelement(6, "i", 104);
+    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.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_7_Template, 3, 0, "div", 105)(8, PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_8_Template, 2, 0, "div", 106)(9, PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Conditional_9_Template, 9, 0, "div", 107);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Source Preview: ", (ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.ExternalObjectLabel) ?? (ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.ExternalObjectName));
+    i0.ɵɵtextInterpolate1("Source Preview: ", (ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.ExternalObjectLabel) ?? (ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.ExternalObjectName));
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.PreviewSourceLoading ? 7 : ctx_r1.PreviewSourceRows.length === 0 ? 8 : 9);
+    i0.ɵɵconditional(ctx_r0.PreviewSourceLoading ? 7 : ctx_r0.PreviewSourceRows.length === 0 ? 8 : 9);
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 105);
-    i0.ɵɵelement(1, "i", 23);
+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);
     i0.ɵɵtext(2, " Loading... ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 106);
+function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 103);
     i0.ɵɵtext(1, "No destination data available");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "th");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r15 = ctx.$implicit;
+    const col_r14 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(col_r15);
+    i0.ɵɵtextInterpolate(col_r14);
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_9_For_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td", 109);
+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);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r16 = ctx.$implicit;
-    const row_r17 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("title", (row_r17[col_r16] == null ? null : row_r17[col_r16].toString()) ?? "");
+    const col_r15 = ctx.$implicit;
+    const row_r16 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", (row_r16[col_r15] == null ? null : row_r16[col_r15].toString()) ?? "");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(row_r17[col_r16] ?? "");
+    i0.ɵɵtextInterpolate(row_r16[col_r15] ?? "");
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
+function PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr");
-    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_9_For_8_For_2_Template, 2, 2, "td", 109, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_For_8_For_2_Template, 2, 2, "td", 106, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
+    const ctx_r0 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.PreviewDestColumns);
+    i0.ɵɵrepeater(ctx_r0.PreviewDestColumns);
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 107)(1, "table", 108)(2, "thead")(3, "tr");
-    i0.ɵɵrepeaterCreate(4, PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_9_For_5_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
+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);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "tbody");
-    i0.ɵɵrepeaterCreate(7, PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(7, PipelinesComponent_Conditional_14_Conditional_48_Conditional_2_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
-    i0.ɵɵrepeater(ctx_r1.PreviewDestColumns);
+    i0.ɵɵrepeater(ctx_r0.PreviewDestColumns);
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r1.PreviewDestRows);
+    i0.ɵɵrepeater(ctx_r0.PreviewDestRows);
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 101)(1, "div", 102);
-    i0.ɵɵelement(2, "i", 84);
+function PipelinesComponent_Conditional_14_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(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 103);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ShowDestPreview = false); });
-    i0.ɵɵelement(6, "i", 104);
+    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.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_7_Template, 3, 0, "div", 105)(8, PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_8_Template, 2, 0, "div", 106)(9, PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Conditional_9_Template, 9, 0, "div", 107);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Dest Preview: ", ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.Entity);
+    i0.ɵɵtextInterpolate1("Dest Preview: ", ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.Entity);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.PreviewDestLoading ? 7 : ctx_r1.PreviewDestRows.length === 0 ? 8 : 9);
+    i0.ɵɵconditional(ctx_r0.PreviewDestLoading ? 7 : ctx_r0.PreviewDestRows.length === 0 ? 8 : 9);
 } }
-function PipelinesComponent_Conditional_2_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 92);
-    i0.ɵɵconditionalCreate(1, PipelinesComponent_Conditional_2_Conditional_48_Conditional_1_Template, 10, 2, "div", 101);
-    i0.ɵɵconditionalCreate(2, PipelinesComponent_Conditional_2_Conditional_48_Conditional_2_Template, 10, 2, "div", 101);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ShowSourcePreview ? 1 : -1);
+    i0.ɵɵconditional(ctx_r0.ShowSourcePreview ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ShowDestPreview ? 2 : -1);
+    i0.ɵɵconditional(ctx_r0.ShowDestPreview ? 2 : -1);
 } }
-function PipelinesComponent_Conditional_2_Conditional_49_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 93);
-    i0.ɵɵelement(1, "i", 67);
+function PipelinesComponent_Conditional_14_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵelement(1, "i", 64);
     i0.ɵɵtext(2, " Click a destination field to map from ");
     i0.ɵɵelementStart(3, "strong");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 110);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_49_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.CancelConnect()); });
+    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.ɵɵtext(6, "Cancel");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.ConnectingFromSource);
+    i0.ɵɵtextInterpolate(ctx_r0.ConnectingFromSource);
 } }
-function PipelinesComponent_Conditional_2_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 95);
-    i0.ɵɵelement(1, "i", 23);
+function PipelinesComponent_Conditional_14_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵelement(1, "i", 19);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Loading field mappings...");
     i0.ɵɵelementEnd()();
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_26_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 144);
+function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_26_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 141);
     i0.ɵɵtext(1, "PK");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_26_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 145);
+function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_26_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 142);
     i0.ɵɵtext(1, "*");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_26_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 140);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_26_Template_div_click_0_listener($event) { const sf_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.OnEditorSourceClick(sf_r22.Name); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "span", 141);
+function PipelinesComponent_Conditional_14_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.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 142);
+    i0.ɵɵelementStart(3, "span", 139);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 143);
-    i0.ɵɵconditionalCreate(6, PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_26_Conditional_6_Template, 2, 0, "span", 144);
-    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_26_Conditional_7_Template, 2, 0, "span", 145);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const sf_r22 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("height", ctx_r1.FIELD_HEIGHT, "px");
-    i0.ɵɵclassProp("mapped", ctx_r1.IsSourceFieldMapped(sf_r22.Name))("unmapped", !ctx_r1.IsSourceFieldMapped(sf_r22.Name))("connecting", ctx_r1.ConnectingFromSource === sf_r22.Name);
+    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);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("title", sf_r22.Name);
+    i0.ɵɵproperty("title", sf_r21.Name);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(sf_r22.Label || sf_r22.Name);
+    i0.ɵɵtextInterpolate(sf_r21.Label || sf_r21.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(sf_r22.Type);
+    i0.ɵɵtextInterpolate(sf_r21.Type);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(sf_r22.IsPrimaryKey ? 6 : -1);
+    i0.ɵɵconditional(sf_r21.IsPrimaryKey ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(sf_r22.IsRequired ? 7 : -1);
+    i0.ɵɵconditional(sf_r21.IsRequired ? 7 : -1);
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 136);
+function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 133);
     i0.ɵɵtext(1, "No source fields found");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_30_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
+function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_30_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "path", 146);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_30_Template_path_click_0_listener($event) { const ɵ$index_501_r24 = i0.ɵɵrestoreView(_r23).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.SelectConnection(ɵ$index_501_r24, $event)); });
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "foreignObject", 147);
+    i0.ɵɵelementStart(1, "foreignObject", 144);
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(2, "div", 148);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_30_Template_div_click_2_listener($event) { const ɵ$index_501_r24 = i0.ɵɵrestoreView(_r23).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.SelectConnection(ɵ$index_501_r24, $event)); });
+    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.ɵɵelement(3, "i");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const conn_r25 = ctx.$implicit;
-    const ɵ$index_501_r24 = ctx.$index;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassMap("ve-conn-line " + ctx_r1.GetConnectionLineClass(conn_r25));
-    i0.ɵɵclassProp("selected", ctx_r1.SelectedConnectionIdx === ɵ$index_501_r24);
-    i0.ɵɵattribute("d", ctx_r1.GetConnectionPath(conn_r25));
+    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));
     i0.ɵɵadvance();
-    i0.ɵɵattribute("x", ctx_r1.SVG_WIDTH / 2 - 14)("y", ctx_r1.GetConnectionMidY(conn_r25) - 14);
+    i0.ɵɵattribute("x", ctx_r0.SVG_WIDTH / 2 - 14)("y", ctx_r0.GetConnectionMidY(conn_r24) - 14);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("ve-conn-badge " + ctx_r1.GetConnectionBadgeClass(conn_r25));
-    i0.ɵɵclassProp("selected", ctx_r1.SelectedConnectionIdx === ɵ$index_501_r24);
+    i0.ɵɵclassMap("ve-conn-badge " + ctx_r0.GetConnectionBadgeClass(conn_r24));
+    i0.ɵɵclassProp("selected", ctx_r0.SelectedConnectionIdx === ɵ$index_493_r23);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.GetConnectionDirectionIcon(conn_r25));
+    i0.ɵɵclassMap(ctx_r0.GetConnectionDirectionIcon(conn_r24));
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_33_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 145);
+function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_For_33_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 142);
     i0.ɵɵtext(1, "*");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_33_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 140);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_33_Template_div_click_0_listener($event) { const df_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.OnEditorDestClick(df_r27.Name); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "span", 141);
+function PipelinesComponent_Conditional_14_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.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 142);
+    i0.ɵɵelementStart(3, "span", 139);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 143);
-    i0.ɵɵconditionalCreate(6, PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_33_Conditional_6_Template, 2, 0, "span", 145);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const df_r27 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("height", ctx_r1.FIELD_HEIGHT, "px");
-    i0.ɵɵclassProp("mapped", ctx_r1.IsDestFieldMapped(df_r27.Name))("unmapped", !ctx_r1.IsDestFieldMapped(df_r27.Name))("connect-target", ctx_r1.ConnectingFromSource !== null);
+    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);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("title", df_r27.Name);
+    i0.ɵɵproperty("title", df_r26.Name);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(df_r27.Name);
+    i0.ɵɵtextInterpolate(df_r26.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(df_r27.Type);
+    i0.ɵɵtextInterpolate(df_r26.Type);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(df_r27.IsRequired ? 6 : -1);
+    i0.ɵɵconditional(df_r26.IsRequired ? 6 : -1);
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_Conditional_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 136);
+function PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 133);
     i0.ɵɵtext(1, "No destination fields found");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 117)(1, "div", 120)(2, "div", 121)(3, "div", 122);
-    i0.ɵɵelement(4, "i", 82);
+function PipelinesComponent_Conditional_14_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.ɵɵtext(5, " Source Fields ");
-    i0.ɵɵelementStart(6, "span", 123);
+    i0.ɵɵelementStart(6, "span", 120);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(8, "div", 124);
-    i0.ɵɵelementStart(9, "div", 125);
-    i0.ɵɵelement(10, "i", 84);
+    i0.ɵɵelement(8, "div", 121);
+    i0.ɵɵelementStart(9, "div", 122);
+    i0.ɵɵelement(10, "i", 81);
     i0.ɵɵtext(11, " MJ Entity Fields ");
-    i0.ɵɵelementStart(12, "span", 123);
+    i0.ɵɵelementStart(12, "span", 120);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "div", 126)(15, "div", 127);
-    i0.ɵɵelement(16, "i", 128);
-    i0.ɵɵelementStart(17, "input", 129);
-    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_Template_input_input_17_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.EditorSearchSource = $event.target.value); });
+    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.ɵɵelementEnd()();
-    i0.ɵɵelement(18, "div", 130);
-    i0.ɵɵelementStart(19, "div", 127);
-    i0.ɵɵelement(20, "i", 128);
-    i0.ɵɵelementStart(21, "input", 131);
-    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_Template_input_input_21_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.EditorSearchDest = $event.target.value); });
+    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.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(22, "div", 132);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_Template_div_click_22_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.DeselectConnection()); });
-    i0.ɵɵelementStart(23, "div", 133)(24, "div", 134);
-    i0.ɵɵrepeaterCreate(25, PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_26_Template, 8, 13, "div", 135, _forTrack2);
-    i0.ɵɵconditionalCreate(27, PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_Conditional_27_Template, 2, 0, "div", 136);
+    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.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(28, "svg", 137);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_Template_svg_click_28_listener($event) { i0.ɵɵrestoreView(_r20); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵrepeaterCreate(29, PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_30_Template, 4, 13, null, null, _forTrack3);
+    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.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(31, "div", 138);
-    i0.ɵɵrepeaterCreate(32, PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_For_33_Template, 7, 12, "div", 139, _forTrack2);
-    i0.ɵɵconditionalCreate(34, PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_Conditional_34_Template, 2, 0, "div", 136);
+    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.ɵɵelementEnd()()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorSourceFields.length);
+    i0.ɵɵtextInterpolate(ctx_r0.EditorSourceFields.length);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorDestFields.length);
+    i0.ɵɵtextInterpolate(ctx_r0.EditorDestFields.length);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r1.EditorSearchSource);
+    i0.ɵɵproperty("value", ctx_r0.EditorSearchSource);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r1.EditorSearchDest);
+    i0.ɵɵproperty("value", ctx_r0.EditorSearchDest);
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("min-height", ctx_r1.EditorCanvasHeight, "px");
+    i0.ɵɵstyleProp("min-height", ctx_r0.EditorCanvasHeight, "px");
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.FilteredEditorSourceFields);
+    i0.ɵɵrepeater(ctx_r0.FilteredEditorSourceFields);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.FilteredEditorSourceFields.length === 0 ? 27 : -1);
+    i0.ɵɵconditional(ctx_r0.FilteredEditorSourceFields.length === 0 ? 27 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("width", ctx_r1.SVG_WIDTH)("height", ctx_r1.EditorCanvasHeight)("viewBox", "0 0 " + ctx_r1.SVG_WIDTH + " " + ctx_r1.EditorCanvasHeight);
+    i0.ɵɵattribute("width", ctx_r0.SVG_WIDTH)("height", ctx_r0.EditorCanvasHeight)("viewBox", "0 0 " + ctx_r0.SVG_WIDTH + " " + ctx_r0.EditorCanvasHeight);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.VisibleConnections);
+    i0.ɵɵrepeater(ctx_r0.VisibleConnections);
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r1.FilteredEditorDestFields);
+    i0.ɵɵrepeater(ctx_r0.FilteredEditorDestFields);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.FilteredEditorDestFields.length === 0 ? 34 : -1);
+    i0.ɵɵconditional(ctx_r0.FilteredEditorDestFields.length === 0 ? 34 : -1);
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 149);
-    i0.ɵɵelement(1, "i", 23);
+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);
     i0.ɵɵtext(2, " Loading stats... ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_14_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 151)(1, "div", 162);
-    i0.ɵɵelement(2, "i", 114);
+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);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 153)(4, "span", 154);
+    i0.ɵɵelementStart(3, "div", 150)(4, "span", 151);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 155);
+    i0.ɵɵelementStart(6, "span", 152);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
+    const ctx_r0 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.SyncStatusClass(ctx_r1.InfoLastSync.Status));
+    i0.ɵɵproperty("ngClass", ctx_r0.SyncStatusClass(ctx_r0.InfoLastSync.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-circle-check", ctx_r1.InfoLastSync.Status === "Success")("fa-circle-xmark", ctx_r1.InfoLastSync.Status === "Failed")("fa-spinner", ctx_r1.InfoLastSync.Status === "In Progress")("fa-clock", ctx_r1.InfoLastSync.Status === "Pending");
+    i0.ɵɵ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.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.InfoLastSync.Status);
+    i0.ɵɵtextInterpolate(ctx_r0.InfoLastSync.Status);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r1.InfoLastSync.TotalRecords, " records processed");
+    i0.ɵɵtextInterpolate1("", ctx_r0.InfoLastSync.TotalRecords, " records processed");
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_14_Conditional_2_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 159)(1, "span", 160);
+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);
     i0.ɵɵtext(2, "Match Strategy");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 161);
+    i0.ɵɵelementStart(3, "span", 158);
     i0.ɵɵtext(4, "Configured");
     i0.ɵɵelementEnd()();
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 150)(1, "div", 151)(2, "div", 152);
-    i0.ɵɵelement(3, "i", 84);
+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);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 153)(5, "span", 154);
+    i0.ɵɵelementStart(4, "div", 150)(5, "span", 151);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 155);
+    i0.ɵɵelementStart(7, "span", 152);
     i0.ɵɵtext(8, "MJ Records");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 151)(10, "div", 156);
-    i0.ɵɵelement(11, "i", 82);
+    i0.ɵɵelementStart(9, "div", 148)(10, "div", 153);
+    i0.ɵɵelement(11, "i", 79);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 153)(13, "span", 154);
+    i0.ɵɵelementStart(12, "div", 150)(13, "span", 151);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "span", 155);
+    i0.ɵɵelementStart(15, "span", 152);
     i0.ɵɵtext(16, "Source Fields");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 151)(18, "div", 157);
-    i0.ɵɵelement(19, "i", 18);
+    i0.ɵɵelementStart(17, "div", 148)(18, "div", 154);
+    i0.ɵɵelement(19, "i", 61);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 153)(21, "span", 154);
+    i0.ɵɵelementStart(20, "div", 150)(21, "span", 151);
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "span", 155);
+    i0.ɵɵelementStart(23, "span", 152);
     i0.ɵɵtext(24, "Last Sync");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(25, PipelinesComponent_Conditional_2_Conditional_52_Conditional_14_Conditional_2_Conditional_25_Template, 8, 11, "div", 151);
+    i0.ɵɵconditionalCreate(25, PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Conditional_2_Conditional_25_Template, 8, 11, "div", 148);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 158)(27, "div", 159)(28, "span", 160);
+    i0.ɵɵelementStart(26, "div", 155)(27, "div", 156)(28, "span", 157);
     i0.ɵɵtext(29, "Sync Direction");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 161);
+    i0.ɵɵelementStart(30, "span", 158);
     i0.ɵɵtext(31);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "div", 159)(33, "span", 160);
+    i0.ɵɵelementStart(32, "div", 156)(33, "span", 157);
     i0.ɵɵtext(34, "Conflict Resolution");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "span", 161);
+    i0.ɵɵelementStart(35, "span", 158);
     i0.ɵɵtext(36);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(37, "div", 159)(38, "span", 160);
+    i0.ɵɵelementStart(37, "div", 156)(38, "span", 157);
     i0.ɵɵtext(39, "Delete Behavior");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(40, "span", 161);
+    i0.ɵɵelementStart(40, "span", 158);
     i0.ɵɵtext(41);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(42, "div", 159)(43, "span", 160);
+    i0.ɵɵelementStart(42, "div", 156)(43, "span", 157);
     i0.ɵɵtext(44, "Priority");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "span", 161);
+    i0.ɵɵelementStart(45, "span", 158);
     i0.ɵɵtext(46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(47, PipelinesComponent_Conditional_2_Conditional_52_Conditional_14_Conditional_2_Conditional_47_Template, 5, 0, "div", 159);
+    i0.ɵɵconditionalCreate(47, PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Conditional_2_Conditional_47_Template, 5, 0, "div", 156);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.InfoDestRecordCount ?? "-");
+    i0.ɵɵtextInterpolate(ctx_r0.InfoDestRecordCount ?? "-");
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorSourceFields.length);
+    i0.ɵɵtextInterpolate(ctx_r0.EditorSourceFields.length);
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(ctx_r1.FormatSyncDate((ctx_r1.InfoLastSync == null ? null : ctx_r1.InfoLastSync.StartedAt) ?? null));
+    i0.ɵɵtextInterpolate(ctx_r0.FormatSyncDate((ctx_r0.InfoLastSync == null ? null : ctx_r0.InfoLastSync.StartedAt) ?? null));
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.InfoLastSync ? 25 : -1);
+    i0.ɵɵconditional(ctx_r0.InfoLastSync ? 25 : -1);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.SyncDirection);
+    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.SyncDirection);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.ConflictResolution);
+    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.ConflictResolution);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.DeleteBehavior);
+    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.DeleteBehavior);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.Priority);
+    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.Priority);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.MatchStrategy) ? 47 : -1);
+    i0.ɵɵconditional((ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.MatchStrategy) ? 47 : -1);
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 118);
-    i0.ɵɵconditionalCreate(1, PipelinesComponent_Conditional_2_Conditional_52_Conditional_14_Conditional_1_Template, 3, 0, "div", 149)(2, PipelinesComponent_Conditional_2_Conditional_52_Conditional_14_Conditional_2_Template, 48, 9);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.InfoPanelLoading ? 1 : 2);
+    i0.ɵɵconditional(ctx_r0.InfoPanelLoading ? 1 : 2);
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 99);
+function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 96);
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 99);
+function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 96);
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 190);
+function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_For_42_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 187);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tt_r31 = ctx.$implicit;
-    const step_r32 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", tt_r31.Value)("selected", tt_r31.Value === step_r32.Type);
+    const tt_r30 = ctx.$implicit;
+    const step_r31 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", tt_r30.Value)("selected", tt_r30.Value === step_r31.Type);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(tt_r31.Label);
+    i0.ɵɵtextInterpolate(tt_r30.Label);
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 198)(1, "label");
+function PipelinesComponent_Conditional_14_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.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 199);
-    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_Conditional_9_For_2_Template_input_input_3_listener($event) { const key_r34 = i0.ɵɵrestoreView(_r33).$implicit; const ɵ$index_726_r30 = i0.ɵɵnextContext(2).$index; const conn_r35 = i0.ɵɵnextContext(); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(conn_r35, ɵ$index_726_r30, key_r34, $event.target.value)); });
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const key_r34 = ctx.$implicit;
-    const step_r32 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const key_r33 = ctx.$implicit;
+    const step_r31 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(key_r34);
+    i0.ɵɵtextInterpolate(key_r33);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("placeholder", i0.ɵɵinterpolate(key_r34))("value", ctx_r1.GetConfigValue(step_r32, key_r34));
+    i0.ɵɵproperty("placeholder", i0.ɵɵinterpolate(key_r33))("value", ctx_r0.GetConfigValue(step_r31, key_r33));
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 192);
-    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_Conditional_9_For_2_Template, 4, 4, "div", 198, i0.ɵɵrepeaterTrackByIdentity);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const step_r32 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const step_r31 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.GetConfigKeys(step_r32));
+    i0.ɵɵrepeater(ctx_r0.GetConfigKeys(step_r31));
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 182)(1, "div", 187)(2, "span", 188);
+function PipelinesComponent_Conditional_14_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.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "select", 189);
-    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_Template_select_change_4_listener($event) { const ɵ$index_726_r30 = i0.ɵɵrestoreView(_r29).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnConnectionTransformChange(ɵ$index_726_r30, $event.target.value)); });
-    i0.ɵɵrepeaterCreate(5, PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_For_6_Template, 2, 3, "option", 190, _forTrack4);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 191);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_Template_button_click_7_listener() { const ɵ$index_726_r30 = i0.ɵɵrestoreView(_r29).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.RemoveTransformStep(ɵ$index_726_r30)); });
-    i0.ɵɵelement(8, "i", 186);
+    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.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_Conditional_9_Template, 3, 0, "div", 192);
-    i0.ɵɵelementStart(10, "div", 193)(11, "label");
+    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.ɵɵtext(12, "On Error:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "select", 194);
-    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_Template_select_change_13_listener($event) { const step_r32 = i0.ɵɵrestoreView(_r29).$implicit; const conn_r35 = i0.ɵɵnextContext(); step_r32.OnError = $event.target.value; return i0.ɵɵresetView(conn_r35.IsDirty = true); });
-    i0.ɵɵelementStart(14, "option", 195);
+    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.ɵɵtext(15, "Fail");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "option", 196);
+    i0.ɵɵelementStart(16, "option", 193);
     i0.ɵɵtext(17, "Skip");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "option", 197);
+    i0.ɵɵelementStart(18, "option", 194);
     i0.ɵɵtext(19, "Null");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const step_r32 = ctx.$implicit;
-    const ɵ$index_726_r30 = ctx.$index;
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const step_r31 = ctx.$implicit;
+    const ɵ$index_718_r29 = ctx.$index;
+    const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ɵ$index_726_r30 + 1);
+    i0.ɵɵtextInterpolate(ɵ$index_718_r29 + 1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", step_r32.Type);
+    i0.ɵɵproperty("value", step_r31.Type);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.TRANSFORM_TYPES);
+    i0.ɵɵrepeater(ctx_r0.TRANSFORM_TYPES);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(step_r32.Type !== "direct" ? 9 : -1);
+    i0.ɵɵconditional(step_r31.Type !== "direct" ? 9 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", step_r32.OnError);
+    i0.ɵɵproperty("value", step_r31.OnError);
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Conditional_43_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 183);
+function PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 180);
     i0.ɵɵtext(1, " No transform steps. Data passes through as-is. ");
     i0.ɵɵelementEnd();
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 163);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r28); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "div", 164)(2, "span", 165);
+function PipelinesComponent_Conditional_14_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.ɵɵtext(3, "Mapping Details");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 166);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.DeselectConnection()); });
-    i0.ɵɵelement(5, "i", 104);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 167)(7, "div", 168)(8, "span", 169);
+    i0.ɵɵelementStart(6, "div", 164)(7, "div", 165)(8, "span", 166);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(10, "i", 170);
-    i0.ɵɵelementStart(11, "span", 171);
+    i0.ɵɵelement(10, "i", 167);
+    i0.ɵɵelementStart(11, "span", 168);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 172)(14, "label", 173);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Template_label_click_14_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ToggleConnectionKey()); });
-    i0.ɵɵelementStart(15, "span", 174);
-    i0.ɵɵconditionalCreate(16, PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Conditional_16_Template, 1, 0, "i", 99);
+    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.ɵɵelementEnd();
     i0.ɵɵelementStart(17, "span");
     i0.ɵɵtext(18, "Key Field");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "label", 173);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Template_label_click_19_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ToggleConnectionRequired()); });
-    i0.ɵɵelementStart(20, "span", 174);
-    i0.ɵɵconditionalCreate(21, PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Conditional_21_Template, 1, 0, "i", 99);
+    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.ɵɵelementEnd();
     i0.ɵɵelementStart(22, "span");
     i0.ɵɵtext(23, "Required");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(24, "div", 175)(25, "label", 176);
+    i0.ɵɵelementStart(24, "div", 172)(25, "label", 173);
     i0.ɵɵtext(26, "Direction");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "div", 177)(28, "button", 178);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnConnectionDirectionChange("SourceToDest")); });
+    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.ɵɵtext(29, " Source \u2192 Dest ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "button", 178);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnConnectionDirectionChange("DestToSource")); });
+    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.ɵɵtext(31, " Dest \u2192 Source ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "button", 178);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnConnectionDirectionChange("Both")); });
+    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.ɵɵtext(33, " Both ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(34, "div", 175)(35, "div", 179)(36, "label", 176);
+    i0.ɵɵelementStart(34, "div", 172)(35, "div", 176)(36, "label", 173);
     i0.ɵɵtext(37, "Transform Pipeline");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "button", 180);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Template_button_click_38_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.AddTransformStep()); });
-    i0.ɵɵelement(39, "i", 181);
+    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.ɵɵtext(40, " Add Step ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(41, PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_For_42_Template, 20, 4, "div", 182, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵconditionalCreate(43, PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Conditional_43_Template, 2, 0, "div", 183);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(44, "div", 184)(45, "button", 185);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.RemoveSelectedConnection()); });
-    i0.ɵɵelement(46, "i", 186);
+    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.ɵɵtext(47, " Remove Mapping ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const conn_r35 = ctx;
+    const conn_r34 = ctx;
     i0.ɵɵadvance(9);
-    i0.ɵɵtextInterpolate(conn_r35.SourceFieldName);
+    i0.ɵɵtextInterpolate(conn_r34.SourceFieldName);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-arrow-right", conn_r35.Direction === "SourceToDest")("fa-arrow-left", conn_r35.Direction === "DestToSource")("fa-right-left", conn_r35.Direction === "Both");
+    i0.ɵɵclassProp("fa-arrow-right", conn_r34.Direction === "SourceToDest")("fa-arrow-left", conn_r34.Direction === "DestToSource")("fa-right-left", conn_r34.Direction === "Both");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(conn_r35.DestFieldName);
+    i0.ɵɵtextInterpolate(conn_r34.DestFieldName);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", conn_r35.IsKeyField);
+    i0.ɵɵclassProp("active", conn_r34.IsKeyField);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(conn_r35.IsKeyField ? 16 : -1);
+    i0.ɵɵconditional(conn_r34.IsKeyField ? 16 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("active", conn_r35.IsRequired);
+    i0.ɵɵclassProp("active", conn_r34.IsRequired);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(conn_r35.IsRequired ? 21 : -1);
+    i0.ɵɵconditional(conn_r34.IsRequired ? 21 : -1);
     i0.ɵɵadvance(7);
-    i0.ɵɵclassProp("active", conn_r35.Direction === "SourceToDest");
+    i0.ɵɵclassProp("active", conn_r34.Direction === "SourceToDest");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", conn_r35.Direction === "DestToSource");
+    i0.ɵɵclassProp("active", conn_r34.Direction === "DestToSource");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", conn_r35.Direction === "Both");
+    i0.ɵɵclassProp("active", conn_r34.Direction === "Both");
     i0.ɵɵadvance(9);
-    i0.ɵɵrepeater(conn_r35.TransformSteps);
+    i0.ɵɵrepeater(conn_r34.TransformSteps);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(conn_r35.TransformSteps.length === 0 ? 43 : -1);
+    i0.ɵɵconditional(conn_r34.TransformSteps.length === 0 ? 43 : -1);
 } }
-function PipelinesComponent_Conditional_2_Conditional_52_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 111)(1, "div", 112)(2, "div", 113);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleFieldMaps()); });
-    i0.ɵɵelement(3, "i", 114);
-    i0.ɵɵelementStart(4, "span", 115);
+function PipelinesComponent_Conditional_14_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.ɵɵtext(5, "Field Mappings");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 116);
+    i0.ɵɵelementStart(6, "span", 113);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, PipelinesComponent_Conditional_2_Conditional_52_Conditional_8_Template, 35, 11, "div", 117);
+    i0.ɵɵconditionalCreate(8, PipelinesComponent_Conditional_14_Conditional_52_Conditional_8_Template, 35, 11, "div", 114);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 112)(10, "div", 113);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_52_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleInfoPanel()); });
-    i0.ɵɵelement(11, "i", 114);
-    i0.ɵɵelementStart(12, "span", 115);
+    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.ɵɵtext(13, "Sync Info");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(14, PipelinesComponent_Conditional_2_Conditional_52_Conditional_14_Template, 3, 1, "div", 118);
+    i0.ɵɵconditionalCreate(14, PipelinesComponent_Conditional_14_Conditional_52_Conditional_14_Template, 3, 1, "div", 115);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(15, PipelinesComponent_Conditional_2_Conditional_52_Conditional_15_Template, 48, 21, "div", 119);
+    i0.ɵɵconditionalCreate(15, PipelinesComponent_Conditional_14_Conditional_52_Conditional_15_Template, 48, 21, "div", 116);
 } if (rf & 2) {
     let tmp_11_0;
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("collapsed", !ctx_r1.FieldMapsExpanded);
+    i0.ɵɵclassProp("collapsed", !ctx_r0.FieldMapsExpanded);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.FieldMapsExpanded)("fa-chevron-right", !ctx_r1.FieldMapsExpanded);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.FieldMapsExpanded)("fa-chevron-right", !ctx_r0.FieldMapsExpanded);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("", ctx_r1.EditorMappedCount, " mapped");
+    i0.ɵɵtextInterpolate1("", ctx_r0.EditorMappedCount, " mapped");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.FieldMapsExpanded ? 8 : -1);
+    i0.ɵɵconditional(ctx_r0.FieldMapsExpanded ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("collapsed", !ctx_r1.InfoPanelExpanded);
+    i0.ɵɵclassProp("collapsed", !ctx_r0.InfoPanelExpanded);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.InfoPanelExpanded)("fa-chevron-right", !ctx_r1.InfoPanelExpanded);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.InfoPanelExpanded)("fa-chevron-right", !ctx_r0.InfoPanelExpanded);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.InfoPanelExpanded ? 14 : -1);
+    i0.ɵɵconditional(ctx_r0.InfoPanelExpanded ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_11_0 = ctx_r1.SelectedConnection) ? 15 : -1, tmp_11_0);
+    i0.ɵɵconditional((tmp_11_0 = ctx_r0.SelectedConnection) ? 15 : -1, tmp_11_0);
 } }
-function PipelinesComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 68)(2, "div", 69)(3, "button", 70);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseVisualEditor()); });
-    i0.ɵɵelement(4, "i", 71);
+function PipelinesComponent_Conditional_14_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.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 72)(6, "span", 73);
+    i0.ɵɵelementStart(5, "div", 69)(6, "span", 70);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 74);
-    i0.ɵɵelement(9, "i", 75);
+    i0.ɵɵelementStart(8, "span", 71);
+    i0.ɵɵelement(9, "i", 72);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 76);
+    i0.ɵɵelementStart(10, "span", 73);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(12, PipelinesComponent_Conditional_2_Conditional_12_Template, 5, 3);
+    i0.ɵɵconditionalCreate(12, PipelinesComponent_Conditional_14_Conditional_12_Template, 5, 3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 77)(14, "span", 78)(15, "strong");
+    i0.ɵɵelementStart(13, "div", 74)(14, "span", 75)(15, "strong");
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(17, " mapped ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(18, "span", 79);
-    i0.ɵɵelementStart(19, "span", 78)(20, "strong");
+    i0.ɵɵelement(18, "span", 76);
+    i0.ɵɵelementStart(19, "span", 75)(20, "strong");
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(22, " key ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(23, "span", 79);
-    i0.ɵɵelementStart(24, "span", 78)(25, "strong");
+    i0.ɵɵelement(23, "span", 76);
+    i0.ɵɵelementStart(24, "span", 75)(25, "strong");
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(27, " required ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(28, "div", 80)(29, "button", 81);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleSourcePreview()); });
-    i0.ɵɵelement(30, "i", 82);
+    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.ɵɵtext(31, " Source Data ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "button", 83);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleDestPreview()); });
-    i0.ɵɵelement(33, "i", 84);
+    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.ɵɵtext(34, " MJ Data ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(35, "div", 85);
-    i0.ɵɵelementStart(36, "button", 86);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.RunSchemaPipeline()); });
-    i0.ɵɵconditionalCreate(37, PipelinesComponent_Conditional_2_Conditional_37_Template, 2, 0)(38, PipelinesComponent_Conditional_2_Conditional_38_Template, 2, 0);
+    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.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(39, PipelinesComponent_Conditional_2_Conditional_39_Template, 3, 5, "span", 87);
-    i0.ɵɵelement(40, "div", 85);
-    i0.ɵɵelementStart(41, "button", 88);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Template_button_click_41_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.AutoMapEditorFields()); });
-    i0.ɵɵelement(42, "i", 89);
+    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.ɵɵtext(43, " Auto-Map ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(44, "button", 90);
-    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Template_button_click_44_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SaveVisualEditor()); });
-    i0.ɵɵconditionalCreate(45, PipelinesComponent_Conditional_2_Conditional_45_Template, 2, 0)(46, PipelinesComponent_Conditional_2_Conditional_46_Template, 2, 0);
+    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.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(47, PipelinesComponent_Conditional_2_Conditional_47_Template, 3, 0, "span", 91);
+    i0.ɵɵconditionalCreate(47, PipelinesComponent_Conditional_14_Conditional_47_Template, 3, 0, "span", 88);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(48, PipelinesComponent_Conditional_2_Conditional_48_Template, 3, 2, "div", 92);
-    i0.ɵɵconditionalCreate(49, PipelinesComponent_Conditional_2_Conditional_49_Template, 7, 1, "div", 93);
-    i0.ɵɵelementStart(50, "div", 94);
-    i0.ɵɵconditionalCreate(51, PipelinesComponent_Conditional_2_Conditional_51_Template, 4, 0, "div", 95)(52, PipelinesComponent_Conditional_2_Conditional_52_Template, 16, 16);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate((ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.ExternalObjectLabel) ?? (ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.ExternalObjectName));
+    i0.ɵɵtextInterpolate((ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.ExternalObjectLabel) ?? (ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.ExternalObjectName));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.Entity);
+    i0.ɵɵtextInterpolate(ctx_r0.EditorEntityMap == null ? null : ctx_r0.EditorEntityMap.Entity);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.EditorEntityMap ? 12 : -1);
+    i0.ɵɵconditional(ctx_r0.EditorEntityMap ? 12 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorMappedCount);
+    i0.ɵɵtextInterpolate(ctx_r0.EditorMappedCount);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorKeyFieldCount);
+    i0.ɵɵtextInterpolate(ctx_r0.EditorKeyFieldCount);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.EditorRequiredCount);
+    i0.ɵɵtextInterpolate(ctx_r0.EditorRequiredCount);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r1.ShowSourcePreview);
+    i0.ɵɵclassProp("active", ctx_r0.ShowSourcePreview);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r1.ShowDestPreview);
+    i0.ɵɵclassProp("active", ctx_r0.ShowDestPreview);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("disabled", ctx_r1.IsRunningPipeline);
+    i0.ɵɵproperty("disabled", ctx_r0.IsRunningPipeline);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.IsRunningPipeline ? 37 : 38);
+    i0.ɵɵconditional(ctx_r0.IsRunningPipeline ? 37 : 38);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.PipelineResultMessage ? 39 : -1);
+    i0.ɵɵconditional(ctx_r0.PipelineResultMessage ? 39 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("disabled", !ctx_r1.HasEditorChanges || ctx_r1.EditorSaving);
+    i0.ɵɵproperty("disabled", !ctx_r0.HasEditorChanges || ctx_r0.EditorSaving);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.EditorSaving ? 45 : 46);
+    i0.ɵɵconditional(ctx_r0.EditorSaving ? 45 : 46);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.EditorSaveSuccess && !ctx_r1.HasEditorChanges ? 47 : -1);
+    i0.ɵɵconditional(ctx_r0.EditorSaveSuccess && !ctx_r0.HasEditorChanges ? 47 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ShowSourcePreview || ctx_r1.ShowDestPreview ? 48 : -1);
+    i0.ɵɵconditional(ctx_r0.ShowSourcePreview || ctx_r0.ShowDestPreview ? 48 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ConnectingFromSource ? 49 : -1);
+    i0.ɵɵconditional(ctx_r0.ConnectingFromSource ? 49 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("has-transform-panel", ctx_r1.SelectedConnectionIdx !== null);
+    i0.ɵɵclassProp("has-transform-panel", ctx_r0.SelectedConnectionIdx !== null);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.EditorLoading ? 51 : 52);
+    i0.ɵɵconditional(ctx_r0.EditorLoading ? 51 : 52);
 } }
 let PipelinesComponent = class PipelinesComponent extends BaseResourceComponent {
     // ---------------------------------------------------------------------------
@@ -1298,6 +1273,11 @@ let PipelinesComponent = class PipelinesComponent extends BaseResourceComponent
         this.GlobalSearch = input.value;
         this.cdr.detectChanges();
     }
+    /** Bridge for <mj-page-search> which emits a plain string. */
+    OnGlobalSearchValue(value) {
+        this.GlobalSearch = value;
+        this.cdr.detectChanges();
+    }
     get FilteredCards() {
         if (!this.GlobalSearch.trim())
             return this.PipelineCards;
@@ -2096,14 +2076,38 @@ 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: 3, vars: 1, consts: [[1, "pipelines-container"], [1, "ve-container"], [1, "pipelines-toolbar"], [1, "toolbar-left"], [1, "toolbar-title"], [1, "fa-solid", "fa-diagram-project"], [1, "toolbar-count-badge"], [1, "toolbar-map-count"], [1, "toolbar-right"], [1, "global-search"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search integrations or entities...", 1, "search-input", 3, "input", "value"], ["title", "Expand All", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse All", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-angles-up"], [1, "toolbar-divider"], ["title", "Refresh", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "pipelines-content"], [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, "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, "div", 0);
-            i0.ɵɵconditionalCreate(1, PipelinesComponent_Conditional_1_Template, 24, 6)(2, PipelinesComponent_Conditional_2_Template, 53, 21, "div", 1);
+    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);
+            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.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "mj-refresh-button", 7);
+            i0.ɵɵlistener("Clicked", function PipelinesComponent_Template_mj_refresh_button_Clicked_8_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.ɵɵ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.ɵɵelementEnd()()();
         } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.IntegrationCount > 0 ? 2 : -1);
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("Loading", ctx.IsLoading);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Value", ctx.GlobalSearch);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.VisualEditorOpen ? 1 : 2);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption], 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.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.ɵɵ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}"] });
 };
 PipelinesComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'IntegrationPipelines')
@@ -2111,7 +2115,7 @@ PipelinesComponent = __decorate([
 export { PipelinesComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PipelinesComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-integration-pipelines', template: "<div class=\"pipelines-container\">\n\n  <!-- ===================================================================== -->\n  <!-- MAP LIST VIEW (hidden when editor is open)                            -->\n  <!-- ===================================================================== -->\n  @if (!VisualEditorOpen) {\n\n    <!-- Toolbar -->\n    <div class=\"pipelines-toolbar\">\n      <div class=\"toolbar-left\">\n        <h2 class=\"toolbar-title\">\n          <i class=\"fa-solid fa-diagram-project\"></i>\n          Pipelines\n        </h2>\n        <span class=\"toolbar-count-badge\">{{ IntegrationCount }}</span>\n        <span class=\"toolbar-map-count\">{{ TotalMapCount }} entity maps</span>\n      </div>\n      <div class=\"toolbar-right\">\n        <div class=\"global-search\">\n          <i class=\"fa-solid fa-search search-icon\"></i>\n          <input type=\"text\"\n                 class=\"search-input\"\n                 placeholder=\"Search integrations or entities...\"\n                 [value]=\"GlobalSearch\"\n                 (input)=\"OnGlobalSearchChange($event)\" />\n        </div>\n        <button class=\"toolbar-btn\" (click)=\"ExpandAll()\" title=\"Expand All\">\n          <i class=\"fa-solid fa-angles-down\"></i>\n        </button>\n        <button class=\"toolbar-btn\" (click)=\"CollapseAll()\" title=\"Collapse All\">\n          <i class=\"fa-solid fa-angles-up\"></i>\n        </button>\n        <div class=\"toolbar-divider\"></div>\n        <button class=\"toolbar-btn\" (click)=\"LoadData()\" title=\"Refresh\">\n          <i class=\"fa-solid fa-arrows-rotate\" [class.fa-spin]=\"IsLoading\"></i>\n        </button>\n      </div>\n    </div>\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", 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/* ---------------------------------------------------------------------------\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    @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"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PipelinesComponent, { className: "PipelinesComponent", filePath: "src/Integration/components/pipelines/pipelines.component.ts", lineNumber: 80 }); })();
 export function LoadPipelinesComponent() {