@memberjunction/ng-dashboards 5.8.0 → 5.10.0

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

@@ -0,0 +1,2057 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
+import { RunView } from '@memberjunction/core';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { IntegrationEngineBase } from '@memberjunction/integration-engine-base';
+import { IntegrationDataService, ResolveIntegrationIcon } from '../../services/integration-data.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+const _forTrack0 = ($index, $item) => $item.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);
+    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);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "No Integration Pipelines");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    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);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const card_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(card_r4.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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const em_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", "Match: " + em_r7.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);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "span", 62);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 51)(8, "span");
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "span", 63);
+    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.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "span", 65);
+    i0.ɵɵelement(17, "i", 66);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const em_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassProp("sync-disabled", !em_r7.SyncEnabled);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", em_r7.SyncEnabled ? "Sync enabled \u2014 click to disable" : "Sync disabled \u2014 click to enable");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", em_r7.SyncEnabled);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", em_r7.ExternalObjectName);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", em_r7.ExternalObjectLabel ?? em_r7.ExternalObjectName, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.DirectionBadgeClass(em_r7.SyncDirection));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.DirectionText(em_r7.SyncDirection), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", em_r7.Entity);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", em_r7.Entity, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(em_r7.MatchStrategy ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", "Conflict: " + em_r7.ConflictResolution);
+} }
+function PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_ForEmpty_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 56);
+    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);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 48)(7, "span", 49);
+    i0.ɵɵtext(8, "Sync");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 50);
+    i0.ɵɵtext(10, "External Object");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(11, "span", 51);
+    i0.ɵɵelementStart(12, "span", 52);
+    i0.ɵɵtext(13, "MJ Entity");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span", 53);
+    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.ɵɵelementEnd()();
+} if (rf & 2) {
+    const card_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", card_r4.SearchTerm);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" ", card_r4.FilteredMaps.length, " of ", card_r4.EntityMapCount, " ");
+    i0.ɵɵadvance(12);
+    i0.ɵɵrepeater(card_r4.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);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 32);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementStart(10, "span", 33);
+    i0.ɵɵtext(11, "\u00B7");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(12);
+    i0.ɵɵelementStart(13, "span", 33);
+    i0.ɵɵtext(14, "\u00B7");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(16, "div", 34)(17, "span", 35);
+    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.ɵɵtext(24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(25, "span", 39)(26, "span", 41);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(27, "i", 42);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(28, PipelinesComponent_Conditional_1_Conditional_23_For_2_Conditional_28_Template, 20, 4, "div", 43);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const card_r4 = ctx.$implicit;
+    i0.ɵɵclassProp("expanded", card_r4.IsExpanded);
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("background-color", card_r4.StatusColor);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(card_r4.Icon + " card-icon");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(card_r4.IntegrationName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", card_r4.EntityMapCount, " maps ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", card_r4.ActiveMapCount, " active ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", card_r4.UniqueEntityCount, " entities ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("color", card_r4.StatusColor);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", card_r4.StatusLabel, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(card_r4.LastSync ? 19 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(card_r4.EntityMapCount);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("fa-chevron-down", !card_r4.IsExpanded)("fa-chevron-up", card_r4.IsExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(card_r4.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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.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);
+    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);
+} }
+function PipelinesComponent_Conditional_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 94)(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)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "span", 61);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 95);
+    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");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.EditorEntityMap.SyncEnabled);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap.SyncEnabled ? "Sync On" : "Sync Off");
+} }
+function PipelinesComponent_Conditional_2_Conditional_40_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 23);
+    i0.ɵɵtext(1, " Saving... ");
+} }
+function PipelinesComponent_Conditional_2_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 96);
+    i0.ɵɵtext(1, " Save ");
+} }
+function PipelinesComponent_Conditional_2_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 89);
+    i0.ɵɵelement(1, "i", 97);
+    i0.ɵɵtext(2, " Saved ");
+    i0.ɵɵelementEnd();
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 102);
+    i0.ɵɵelement(1, "i", 23);
+    i0.ɵɵtext(2, " Loading... ");
+    i0.ɵɵelementEnd();
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_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_43_Conditional_1_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r11 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(col_r11);
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_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()) ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(row_r13[col_r12] ?? "");
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_Conditional_1_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_2_Conditional_43_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);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.PreviewSourceColumns);
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_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_2_Conditional_43_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_43_Conditional_1_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r1.PreviewSourceColumns);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.PreviewSourceRows);
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 98)(1, "div", 99);
+    i0.ɵɵelement(2, "i", 82);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 100);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_43_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", 101);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_2_Conditional_43_Conditional_1_Conditional_7_Template, 3, 0, "div", 102)(8, PipelinesComponent_Conditional_2_Conditional_43_Conditional_1_Conditional_8_Template, 2, 0, "div", 103)(9, PipelinesComponent_Conditional_2_Conditional_43_Conditional_1_Conditional_9_Template, 9, 0, "div", 104);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = 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.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.PreviewSourceLoading ? 7 : ctx_r1.PreviewSourceRows.length === 0 ? 8 : 9);
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 102);
+    i0.ɵɵelement(1, "i", 23);
+    i0.ɵɵtext(2, " Loading... ");
+    i0.ɵɵelementEnd();
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_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_43_Conditional_2_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r15 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(col_r15);
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_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()) ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(row_r17[col_r16] ?? "");
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_Conditional_2_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_2_Conditional_43_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);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.PreviewDestColumns);
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_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_2_Conditional_43_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_43_Conditional_2_Conditional_9_For_8_Template, 3, 0, "tr", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r1.PreviewDestColumns);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.PreviewDestRows);
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 98)(1, "div", 99);
+    i0.ɵɵelement(2, "i", 84);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 100);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_43_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", 101);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_2_Conditional_43_Conditional_2_Conditional_7_Template, 3, 0, "div", 102)(8, PipelinesComponent_Conditional_2_Conditional_43_Conditional_2_Conditional_8_Template, 2, 0, "div", 103)(9, PipelinesComponent_Conditional_2_Conditional_43_Conditional_2_Conditional_9_Template, 9, 0, "div", 104);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Dest Preview: ", ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.Entity);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.PreviewDestLoading ? 7 : ctx_r1.PreviewDestRows.length === 0 ? 8 : 9);
+} }
+function PipelinesComponent_Conditional_2_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵconditionalCreate(1, PipelinesComponent_Conditional_2_Conditional_43_Conditional_1_Template, 10, 2, "div", 98);
+    i0.ɵɵconditionalCreate(2, PipelinesComponent_Conditional_2_Conditional_43_Conditional_2_Template, 10, 2, "div", 98);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowSourcePreview ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowDestPreview ? 2 : -1);
+} }
+function PipelinesComponent_Conditional_2_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 91);
+    i0.ɵɵelement(1, "i", 67);
+    i0.ɵɵtext(2, " Click a destination field to map from ");
+    i0.ɵɵelementStart(3, "strong");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 107);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_44_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.CancelConnect()); });
+    i0.ɵɵtext(6, "Cancel");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.ConnectingFromSource);
+} }
+function PipelinesComponent_Conditional_2_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 93);
+    i0.ɵɵelement(1, "i", 23);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Loading field mappings...");
+    i0.ɵɵelementEnd()();
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_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_47_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_47_Conditional_8_For_26_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 137);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_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", 138);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 139);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 140);
+    i0.ɵɵconditionalCreate(6, PipelinesComponent_Conditional_2_Conditional_47_Conditional_8_For_26_Conditional_6_Template, 2, 0, "span", 141);
+    i0.ɵɵconditionalCreate(7, PipelinesComponent_Conditional_2_Conditional_47_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);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", sf_r22.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(sf_r22.Label || sf_r22.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(sf_r22.Type);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(sf_r22.IsPrimaryKey ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(sf_r22.IsRequired ? 7 : -1);
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_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_47_Conditional_8_For_30_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "path", 143);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_Conditional_8_For_30_Template_path_click_0_listener($event) { const ɵ$index_483_r24 = i0.ɵɵrestoreView(_r23).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.SelectConnection(ɵ$index_483_r24, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "foreignObject", 144);
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(2, "div", 145);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_Conditional_8_For_30_Template_div_click_2_listener($event) { const ɵ$index_483_r24 = i0.ɵɵrestoreView(_r23).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.SelectConnection(ɵ$index_483_r24, $event)); });
+    i0.ɵɵelement(3, "i");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const conn_r25 = ctx.$implicit;
+    const ɵ$index_483_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_483_r24);
+    i0.ɵɵattribute("d", ctx_r1.GetConnectionPath(conn_r25));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x", ctx_r1.SVG_WIDTH / 2 - 14)("y", ctx_r1.GetConnectionMidY(conn_r25) - 14);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("ve-conn-badge " + ctx_r1.GetConnectionBadgeClass(conn_r25));
+    i0.ɵɵclassProp("selected", ctx_r1.SelectedConnectionIdx === ɵ$index_483_r24);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.GetConnectionDirectionIcon(conn_r25));
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_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_47_Conditional_8_For_33_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 137);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_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", 138);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 139);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 140);
+    i0.ɵɵconditionalCreate(6, PipelinesComponent_Conditional_2_Conditional_47_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);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", df_r27.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(df_r27.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(df_r27.Type);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(df_r27.IsRequired ? 6 : -1);
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_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_47_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 114)(1, "div", 117)(2, "div", 118)(3, "div", 119);
+    i0.ɵɵelement(4, "i", 82);
+    i0.ɵɵtext(5, " Source Fields ");
+    i0.ɵɵelementStart(6, "span", 120);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(8, "div", 121);
+    i0.ɵɵelementStart(9, "div", 122);
+    i0.ɵɵelement(10, "i", 84);
+    i0.ɵɵtext(11, " MJ Entity Fields ");
+    i0.ɵɵelementStart(12, "span", 120);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(14, "div", 123)(15, "div", 124);
+    i0.ɵɵelement(16, "i", 125);
+    i0.ɵɵelementStart(17, "input", 126);
+    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_2_Conditional_47_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.ɵɵelementEnd()();
+    i0.ɵɵelement(18, "div", 127);
+    i0.ɵɵelementStart(19, "div", 124);
+    i0.ɵɵelement(20, "i", 125);
+    i0.ɵɵelementStart(21, "input", 128);
+    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_2_Conditional_47_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.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(22, "div", 129);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_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", 130)(24, "div", 131);
+    i0.ɵɵrepeaterCreate(25, PipelinesComponent_Conditional_2_Conditional_47_Conditional_8_For_26_Template, 8, 13, "div", 132, _forTrack2);
+    i0.ɵɵconditionalCreate(27, PipelinesComponent_Conditional_2_Conditional_47_Conditional_8_Conditional_27_Template, 2, 0, "div", 133);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(28, "svg", 134);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_Conditional_8_Template_svg_click_28_listener($event) { i0.ɵɵrestoreView(_r20); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵrepeaterCreate(29, PipelinesComponent_Conditional_2_Conditional_47_Conditional_8_For_30_Template, 4, 13, null, null, _forTrack3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(31, "div", 135);
+    i0.ɵɵrepeaterCreate(32, PipelinesComponent_Conditional_2_Conditional_47_Conditional_8_For_33_Template, 7, 12, "div", 136, _forTrack2);
+    i0.ɵɵconditionalCreate(34, PipelinesComponent_Conditional_2_Conditional_47_Conditional_8_Conditional_34_Template, 2, 0, "div", 133);
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorSourceFields.length);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorDestFields.length);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.EditorSearchSource);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.EditorSearchDest);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("min-height", ctx_r1.EditorCanvasHeight, "px");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.FilteredEditorSourceFields);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.FilteredEditorSourceFields.length === 0 ? 27 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("width", ctx_r1.SVG_WIDTH)("height", ctx_r1.EditorCanvasHeight)("viewBox", "0 0 " + ctx_r1.SVG_WIDTH + " " + ctx_r1.EditorCanvasHeight);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.VisibleConnections);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.FilteredEditorDestFields);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.FilteredEditorDestFields.length === 0 ? 34 : -1);
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 146);
+    i0.ɵɵelement(1, "i", 23);
+    i0.ɵɵtext(2, " Loading stats... ");
+    i0.ɵɵelementEnd();
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_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", 150)(4, "span", 151);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 152);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.SyncStatusClass(ctx_r1.InfoLastSync.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-circle-check", ctx_r1.InfoLastSync.Status === "Success")("fa-circle-xmark", ctx_r1.InfoLastSync.Status === "Failed")("fa-spinner", ctx_r1.InfoLastSync.Status === "In Progress")("fa-clock", ctx_r1.InfoLastSync.Status === "Pending");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.InfoLastSync.Status);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.InfoLastSync.TotalRecords, " records processed");
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_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", 158);
+    i0.ɵɵtext(4, "Configured");
+    i0.ɵɵelementEnd()();
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_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", 84);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 150)(5, "span", 151);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 152);
+    i0.ɵɵtext(8, "MJ Records");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "div", 148)(10, "div", 153);
+    i0.ɵɵelement(11, "i", 82);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "div", 150)(13, "span", 151);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "span", 152);
+    i0.ɵɵtext(16, "Source Fields");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(17, "div", 148)(18, "div", 154);
+    i0.ɵɵelement(19, "i", 18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 150)(21, "span", 151);
+    i0.ɵɵtext(22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "span", 152);
+    i0.ɵɵtext(24, "Last Sync");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(25, PipelinesComponent_Conditional_2_Conditional_47_Conditional_14_Conditional_2_Conditional_25_Template, 8, 11, "div", 148);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "div", 155)(27, "div", 156)(28, "span", 157);
+    i0.ɵɵtext(29, "Sync Direction");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "span", 158);
+    i0.ɵɵtext(31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(32, "div", 156)(33, "span", 157);
+    i0.ɵɵtext(34, "Conflict Resolution");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(35, "span", 158);
+    i0.ɵɵtext(36);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(37, "div", 156)(38, "span", 157);
+    i0.ɵɵtext(39, "Delete Behavior");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(40, "span", 158);
+    i0.ɵɵtext(41);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(42, "div", 156)(43, "span", 157);
+    i0.ɵɵtext(44, "Priority");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(45, "span", 158);
+    i0.ɵɵtext(46);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(47, PipelinesComponent_Conditional_2_Conditional_47_Conditional_14_Conditional_2_Conditional_47_Template, 5, 0, "div", 156);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.InfoDestRecordCount ?? "-");
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorSourceFields.length);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatSyncDate((ctx_r1.InfoLastSync == null ? null : ctx_r1.InfoLastSync.StartedAt) ?? null));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.InfoLastSync ? 25 : -1);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.SyncDirection);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.ConflictResolution);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.DeleteBehavior);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.Priority);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.MatchStrategy) ? 47 : -1);
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 115);
+    i0.ɵɵconditionalCreate(1, PipelinesComponent_Conditional_2_Conditional_47_Conditional_14_Conditional_1_Template, 3, 0, "div", 146)(2, PipelinesComponent_Conditional_2_Conditional_47_Conditional_14_Conditional_2_Template, 48, 9);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.InfoPanelLoading ? 1 : 2);
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 96);
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 96);
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_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);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(tt_r31.Label);
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_For_42_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 195)(1, "label");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 196);
+    i0.ɵɵlistener("input", function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_For_42_Conditional_9_For_2_Template_input_input_3_listener($event) { const key_r34 = i0.ɵɵrestoreView(_r33).$implicit; const ɵ$index_708_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_708_r30, key_r34, $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);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(key_r34);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("placeholder", i0.ɵɵinterpolate(key_r34))("value", ctx_r1.GetConfigValue(step_r32, key_r34));
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_For_42_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 189);
+    i0.ɵɵrepeaterCreate(1, PipelinesComponent_Conditional_2_Conditional_47_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);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.GetConfigKeys(step_r32));
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_For_42_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 179)(1, "div", 184)(2, "span", 185);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "select", 186);
+    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_For_42_Template_select_change_4_listener($event) { const ɵ$index_708_r30 = i0.ɵɵrestoreView(_r29).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnConnectionTransformChange(ɵ$index_708_r30, $event.target.value)); });
+    i0.ɵɵrepeaterCreate(5, PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_For_42_For_6_Template, 2, 3, "option", 187, _forTrack4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 188);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_For_42_Template_button_click_7_listener() { const ɵ$index_708_r30 = i0.ɵɵrestoreView(_r29).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.RemoveTransformStep(ɵ$index_708_r30)); });
+    i0.ɵɵelement(8, "i", 183);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(9, PipelinesComponent_Conditional_2_Conditional_47_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", 191);
+    i0.ɵɵlistener("change", function PipelinesComponent_Conditional_2_Conditional_47_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", 192);
+    i0.ɵɵtext(15, "Fail");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "option", 193);
+    i0.ɵɵtext(17, "Skip");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "option", 194);
+    i0.ɵɵtext(19, "Null");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const step_r32 = ctx.$implicit;
+    const ɵ$index_708_r30 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ɵ$index_708_r30 + 1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", step_r32.Type);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.TRANSFORM_TYPES);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(step_r32.Type !== "direct" ? 9 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", step_r32.OnError);
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_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_47_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 160);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r28); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 161)(2, "span", 162);
+    i0.ɵɵtext(3, "Mapping Details");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 163);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_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", 101);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 164)(7, "div", 165)(8, "span", 166);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(10, "i", 167);
+    i0.ɵɵelementStart(11, "span", 168);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(13, "div", 169)(14, "label", 170);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_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", 171);
+    i0.ɵɵconditionalCreate(16, PipelinesComponent_Conditional_2_Conditional_47_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", 170);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_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", 171);
+    i0.ɵɵconditionalCreate(21, PipelinesComponent_Conditional_2_Conditional_47_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", 172)(25, "label", 173);
+    i0.ɵɵtext(26, "Direction");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "div", 174)(28, "button", 175);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnConnectionDirectionChange("SourceToDest")); });
+    i0.ɵɵtext(29, " Source \u2192 Dest ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "button", 175);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnConnectionDirectionChange("DestToSource")); });
+    i0.ɵɵtext(31, " Dest \u2192 Source ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "button", 175);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnConnectionDirectionChange("Both")); });
+    i0.ɵɵtext(33, " Both ");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(34, "div", 172)(35, "div", 176)(36, "label", 173);
+    i0.ɵɵtext(37, "Transform Pipeline");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(38, "button", 177);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_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", 178);
+    i0.ɵɵtext(40, " Add Step ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(41, PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_For_42_Template, 20, 4, "div", 179, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵconditionalCreate(43, PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_Conditional_43_Template, 2, 0, "div", 180);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(44, "div", 181)(45, "button", 182);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_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", 183);
+    i0.ɵɵtext(47, " Remove Mapping ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const conn_r35 = ctx;
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(conn_r35.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.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(conn_r35.DestFieldName);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", conn_r35.IsKeyField);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(conn_r35.IsKeyField ? 16 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("active", conn_r35.IsRequired);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(conn_r35.IsRequired ? 21 : -1);
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("active", conn_r35.Direction === "SourceToDest");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", conn_r35.Direction === "DestToSource");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", conn_r35.Direction === "Both");
+    i0.ɵɵadvance(9);
+    i0.ɵɵrepeater(conn_r35.TransformSteps);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(conn_r35.TransformSteps.length === 0 ? 43 : -1);
+} }
+function PipelinesComponent_Conditional_2_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 108)(1, "div", 109)(2, "div", 110);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleFieldMaps()); });
+    i0.ɵɵelement(3, "i", 111);
+    i0.ɵɵelementStart(4, "span", 112);
+    i0.ɵɵtext(5, "Field Mappings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 113);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(8, PipelinesComponent_Conditional_2_Conditional_47_Conditional_8_Template, 35, 11, "div", 114);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 109)(10, "div", 110);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Conditional_47_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.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_47_Conditional_14_Template, 3, 1, "div", 115);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(15, PipelinesComponent_Conditional_2_Conditional_47_Conditional_15_Template, 48, 21, "div", 116);
+} if (rf & 2) {
+    let tmp_11_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("collapsed", !ctx_r1.FieldMapsExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.FieldMapsExpanded)("fa-chevron-right", !ctx_r1.FieldMapsExpanded);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("", ctx_r1.EditorMappedCount, " mapped");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.FieldMapsExpanded ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("collapsed", !ctx_r1.InfoPanelExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.InfoPanelExpanded)("fa-chevron-right", !ctx_r1.InfoPanelExpanded);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.InfoPanelExpanded ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_11_0 = ctx_r1.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);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 72)(6, "span", 73);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 74);
+    i0.ɵɵelement(9, "i", 75);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 76);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(12, PipelinesComponent_Conditional_2_Conditional_12_Template, 5, 3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "div", 77)(14, "span", 78)(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.ɵɵtext(21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(22, " key ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(23, "span", 79);
+    i0.ɵɵelementStart(24, "span", 78)(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.ɵɵ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.ɵɵ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.AutoMapEditorFields()); });
+    i0.ɵɵelement(37, "i", 87);
+    i0.ɵɵtext(38, " Auto-Map ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(39, "button", 88);
+    i0.ɵɵlistener("click", function PipelinesComponent_Conditional_2_Template_button_click_39_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SaveVisualEditor()); });
+    i0.ɵɵconditionalCreate(40, PipelinesComponent_Conditional_2_Conditional_40_Template, 2, 0)(41, PipelinesComponent_Conditional_2_Conditional_41_Template, 2, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(42, PipelinesComponent_Conditional_2_Conditional_42_Template, 3, 0, "span", 89);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(43, PipelinesComponent_Conditional_2_Conditional_43_Template, 3, 2, "div", 90);
+    i0.ɵɵconditionalCreate(44, PipelinesComponent_Conditional_2_Conditional_44_Template, 7, 1, "div", 91);
+    i0.ɵɵelementStart(45, "div", 92);
+    i0.ɵɵconditionalCreate(46, PipelinesComponent_Conditional_2_Conditional_46_Template, 4, 0, "div", 93)(47, PipelinesComponent_Conditional_2_Conditional_47_Template, 16, 16);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = 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.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorEntityMap == null ? null : ctx_r1.EditorEntityMap.Entity);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.EditorEntityMap ? 12 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorMappedCount);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorKeyFieldCount);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.EditorRequiredCount);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.ShowSourcePreview);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.ShowDestPreview);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("disabled", !ctx_r1.HasEditorChanges || ctx_r1.EditorSaving);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.EditorSaving ? 40 : 41);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.EditorSaveSuccess && !ctx_r1.HasEditorChanges ? 42 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowSourcePreview || ctx_r1.ShowDestPreview ? 43 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ConnectingFromSource ? 44 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("has-transform-panel", ctx_r1.SelectedConnectionIdx !== null);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.EditorLoading ? 46 : 47);
+} }
+let PipelinesComponent = class PipelinesComponent extends BaseResourceComponent {
+    // ---------------------------------------------------------------------------
+    // Public state — Card list
+    // ---------------------------------------------------------------------------
+    PipelineCards = [];
+    IsLoading = false;
+    GlobalSearch = '';
+    // ---------------------------------------------------------------------------
+    // Visual Editor state
+    // ---------------------------------------------------------------------------
+    VisualEditorOpen = false;
+    EditorEntityMap = null;
+    EditorCard = null;
+    EditorSourceFields = [];
+    EditorDestFields = [];
+    EditorConnections = [];
+    EditorLoading = false;
+    EditorSaving = false;
+    EditorSaveSuccess = false;
+    /** Currently selected connection index (opens transform panel) */
+    SelectedConnectionIdx = null;
+    /** When non-null, user is in "connect mode" — next dest click creates a mapping */
+    ConnectingFromSource = null;
+    /** Search/filter within the visual editor columns */
+    EditorSearchSource = '';
+    EditorSearchDest = '';
+    /** Data preview state */
+    ShowSourcePreview = false;
+    ShowDestPreview = false;
+    PreviewSourceLoading = false;
+    PreviewDestLoading = false;
+    PreviewSourceRows = [];
+    PreviewDestRows = [];
+    PreviewSourceColumns = [];
+    PreviewDestColumns = [];
+    /** Collapsible section state */
+    FieldMapsExpanded = true;
+    InfoPanelExpanded = false;
+    /** Info panel data */
+    InfoPanelLoading = false;
+    InfoDestRecordCount = null;
+    InfoLastSync = null;
+    /** SVG layout constants */
+    FIELD_HEIGHT = 40;
+    SVG_WIDTH = 200;
+    /** Transform type metadata */
+    TRANSFORM_TYPES = [
+        { Value: 'direct', Label: 'Direct', Icon: 'fa-solid fa-arrow-right' },
+        { Value: 'regex', Label: 'Regex', Icon: 'fa-solid fa-code' },
+        { Value: 'split', Label: 'Split', Icon: 'fa-solid fa-scissors' },
+        { Value: 'combine', Label: 'Combine', Icon: 'fa-solid fa-object-group' },
+        { Value: 'lookup', Label: 'Lookup', Icon: 'fa-solid fa-book' },
+        { Value: 'format', Label: 'Format', Icon: 'fa-solid fa-font' },
+        { Value: 'coerce', Label: 'Coerce', Icon: 'fa-solid fa-exchange-alt' },
+        { Value: 'substring', Label: 'Substring', Icon: 'fa-solid fa-text-width' },
+        { Value: 'custom', Label: 'Custom', Icon: 'fa-solid fa-wand-magic-sparkles' }
+    ];
+    // ---------------------------------------------------------------------------
+    // Private
+    // ---------------------------------------------------------------------------
+    dataService = inject(IntegrationDataService);
+    cdr = inject(ChangeDetectorRef);
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    async ngOnInit() {
+        await this.LoadData();
+    }
+    ngOnDestroy() {
+        // Clean up if needed
+    }
+    // ---------------------------------------------------------------------------
+    // Resource overrides
+    // ---------------------------------------------------------------------------
+    async GetResourceDisplayName(_data) {
+        return 'Pipelines';
+    }
+    async GetResourceIconClass(_data) {
+        return 'fa-solid fa-diagram-project';
+    }
+    // ---------------------------------------------------------------------------
+    // Data loading
+    // ---------------------------------------------------------------------------
+    async LoadData() {
+        this.IsLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const provider = this.RunViewToUse;
+            const [summaries, allEntityMaps] = await Promise.all([
+                this.dataService.LoadIntegrationSummaries(provider),
+                this.loadAllEntityMaps(provider)
+            ]);
+            this.BuildCards(summaries, allEntityMaps);
+        }
+        catch (err) {
+            console.error('[PipelinesComponent] Failed to load data:', err);
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Card building
+    // ---------------------------------------------------------------------------
+    BuildCards(summaries, allEntityMaps) {
+        this.PipelineCards = summaries.map(summary => {
+            const maps = allEntityMaps.filter(m => UUIDsEqual(m.CompanyIntegrationID, summary.Integration.ID));
+            const activeMaps = maps.filter(m => m.SyncEnabled);
+            const uniqueEntities = new Set(maps.map(m => m.EntityID)).size;
+            return {
+                IntegrationID: summary.Integration.ID,
+                IntegrationName: summary.Integration.Integration ?? summary.Integration.Name,
+                Icon: this.resolveIcon(summary),
+                StatusColor: this.statusToColor(summary.StatusColor),
+                StatusLabel: this.statusToLabel(summary.StatusColor),
+                EntityMapCount: maps.length,
+                ActiveMapCount: activeMaps.length,
+                UniqueEntityCount: uniqueEntities,
+                LastSync: summary.RelativeTime,
+                IsExpanded: false,
+                EntityMaps: maps,
+                FilteredMaps: maps,
+                SearchTerm: ''
+            };
+        });
+    }
+    // ---------------------------------------------------------------------------
+    // Card expand / collapse
+    // ---------------------------------------------------------------------------
+    ToggleCard(card) {
+        card.IsExpanded = !card.IsExpanded;
+        if (card.IsExpanded) {
+            card.FilteredMaps = this.applyMapFilter(card);
+        }
+    }
+    ExpandAll() {
+        for (const card of this.PipelineCards) {
+            card.IsExpanded = true;
+            card.FilteredMaps = this.applyMapFilter(card);
+        }
+    }
+    CollapseAll() {
+        for (const card of this.PipelineCards) {
+            card.IsExpanded = false;
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Search / filter
+    // ---------------------------------------------------------------------------
+    OnCardSearch(card, event) {
+        const input = event.target;
+        card.SearchTerm = input.value;
+        card.FilteredMaps = this.applyMapFilter(card);
+        this.cdr.detectChanges();
+    }
+    OnGlobalSearchChange(event) {
+        const input = event.target;
+        this.GlobalSearch = input.value;
+        this.cdr.detectChanges();
+    }
+    get FilteredCards() {
+        if (!this.GlobalSearch.trim())
+            return this.PipelineCards;
+        const term = this.GlobalSearch.toLowerCase();
+        return this.PipelineCards.filter(card => card.IntegrationName.toLowerCase().includes(term) ||
+            card.EntityMaps.some(m => (m.ExternalObjectLabel ?? m.ExternalObjectName).toLowerCase().includes(term) ||
+                m.Entity.toLowerCase().includes(term)));
+    }
+    // ---------------------------------------------------------------------------
+    // Entity map row click → Open Visual Editor
+    // ---------------------------------------------------------------------------
+    OnMapRowClick(card, entityMap) {
+        this.OpenVisualEditor(card, entityMap);
+    }
+    // ---------------------------------------------------------------------------
+    // SyncEnabled toggle
+    // ---------------------------------------------------------------------------
+    async OnToggleSyncEnabled(card, em, event) {
+        const checkbox = event.target;
+        const newValue = checkbox.checked;
+        em.SyncEnabled = newValue;
+        card.ActiveMapCount = card.EntityMaps.filter(m => m.SyncEnabled).length;
+        this.cdr.detectChanges();
+        try {
+            await this.dataService.ToggleEntityMapEnabled(em.ID, newValue);
+        }
+        catch (err) {
+            // Revert on failure
+            em.SyncEnabled = !newValue;
+            card.ActiveMapCount = card.EntityMaps.filter(m => m.SyncEnabled).length;
+            checkbox.checked = !newValue;
+            console.error('[PipelinesComponent] Failed to toggle SyncEnabled:', err);
+            this.cdr.detectChanges();
+        }
+    }
+    async OnToggleEditorSyncEnabled(event) {
+        if (!this.EditorEntityMap || !this.EditorCard)
+            return;
+        const checkbox = event.target;
+        const newValue = checkbox.checked;
+        this.EditorEntityMap.SyncEnabled = newValue;
+        this.EditorCard.ActiveMapCount = this.EditorCard.EntityMaps.filter(m => m.SyncEnabled).length;
+        this.cdr.detectChanges();
+        try {
+            await this.dataService.ToggleEntityMapEnabled(this.EditorEntityMap.ID, newValue);
+        }
+        catch (err) {
+            this.EditorEntityMap.SyncEnabled = !newValue;
+            this.EditorCard.ActiveMapCount = this.EditorCard.EntityMaps.filter(m => m.SyncEnabled).length;
+            checkbox.checked = !newValue;
+            console.error('[PipelinesComponent] Failed to toggle SyncEnabled:', err);
+            this.cdr.detectChanges();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Data preview
+    // ---------------------------------------------------------------------------
+    async ToggleSourcePreview() {
+        this.ShowSourcePreview = !this.ShowSourcePreview;
+        if (this.ShowSourcePreview && this.PreviewSourceRows.length === 0) {
+            await this.loadSourcePreview();
+        }
+        this.cdr.detectChanges();
+    }
+    async ToggleDestPreview() {
+        this.ShowDestPreview = !this.ShowDestPreview;
+        if (this.ShowDestPreview && this.PreviewDestRows.length === 0) {
+            await this.loadDestPreview();
+        }
+        this.cdr.detectChanges();
+    }
+    async loadSourcePreview() {
+        if (!this.EditorEntityMap || !this.EditorCard)
+            return;
+        this.PreviewSourceLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const rows = await this.dataService.PreviewSourceData(this.EditorCard.IntegrationID, this.EditorEntityMap.ExternalObjectName, 5);
+            this.PreviewSourceRows = rows;
+            this.PreviewSourceColumns = rows.length > 0 ? Object.keys(rows[0]) : [];
+        }
+        catch (err) {
+            console.error('[PipelinesComponent] Failed to load source preview:', err);
+            this.PreviewSourceRows = [];
+            this.PreviewSourceColumns = [];
+        }
+        finally {
+            this.PreviewSourceLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    async loadDestPreview() {
+        if (!this.EditorEntityMap)
+            return;
+        this.PreviewDestLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const rows = await this.dataService.PreviewDestinationData(this.EditorEntityMap.EntityID, 5, this.RunViewToUse);
+            this.PreviewDestRows = rows;
+            this.PreviewDestColumns = rows.length > 0 ? Object.keys(rows[0]) : [];
+        }
+        catch (err) {
+            console.error('[PipelinesComponent] Failed to load dest preview:', err);
+            this.PreviewDestRows = [];
+            this.PreviewDestColumns = [];
+        }
+        finally {
+            this.PreviewDestLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Collapsible sections
+    // ---------------------------------------------------------------------------
+    ToggleFieldMaps() {
+        this.FieldMapsExpanded = !this.FieldMapsExpanded;
+        this.cdr.detectChanges();
+    }
+    ToggleInfoPanel() {
+        this.InfoPanelExpanded = !this.InfoPanelExpanded;
+        if (this.InfoPanelExpanded && this.InfoDestRecordCount === null) {
+            this.loadInfoPanelData();
+        }
+        this.cdr.detectChanges();
+    }
+    async loadInfoPanelData() {
+        if (!this.EditorEntityMap || !this.EditorCard)
+            return;
+        this.InfoPanelLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const [destCount, lastSync] = await Promise.all([
+                this.dataService.GetDestinationRecordCount(this.EditorEntityMap.EntityID, this.RunViewToUse),
+                this.dataService.GetLastSyncForEntity(this.EditorCard.IntegrationID, this.EditorEntityMap.EntityID, this.RunViewToUse)
+            ]);
+            this.InfoDestRecordCount = destCount;
+            this.InfoLastSync = lastSync;
+        }
+        catch (err) {
+            console.error('[PipelinesComponent] Failed to load info panel data:', err);
+        }
+        finally {
+            this.InfoPanelLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    FormatSyncDate(dateStr) {
+        if (!dateStr)
+            return 'Never';
+        const d = new Date(dateStr);
+        const now = new Date();
+        const diffMs = now.getTime() - d.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        if (diffMins < 1)
+            return 'Just now';
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        const diffHours = Math.floor(diffMins / 60);
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        const diffDays = Math.floor(diffHours / 24);
+        if (diffDays < 7)
+            return `${diffDays}d ago`;
+        return d.toLocaleDateString();
+    }
+    SyncStatusClass(status) {
+        switch (status) {
+            case 'Success': return 'info-status-success';
+            case 'Failed': return 'info-status-error';
+            case 'In Progress': return 'info-status-running';
+            default: return 'info-status-pending';
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Template helpers
+    // ---------------------------------------------------------------------------
+    /**
+     * Direction arrows for entity-level sync direction.
+     * Pull = data flows FROM external source INTO MJ = right arrow (→)
+     * Push = data flows FROM MJ OUT to external = left arrow (←)
+     */
+    DirectionLabel(direction) {
+        if (direction === 'Pull')
+            return '\u2192';
+        if (direction === 'Push')
+            return '\u2190';
+        if (direction === 'Bidirectional')
+            return '\u2194';
+        return '\u2192';
+    }
+    DirectionBadgeClass(direction) {
+        if (direction === 'Pull')
+            return 'direction-badge pull';
+        if (direction === 'Push')
+            return 'direction-badge push';
+        if (direction === 'Bidirectional')
+            return 'direction-badge bidirectional';
+        return 'direction-badge';
+    }
+    DirectionText(direction) {
+        if (direction === 'Pull')
+            return 'Pull \u2192';
+        if (direction === 'Push')
+            return '\u2190 Push';
+        if (direction === 'Bidirectional')
+            return '\u2194 Bi';
+        return 'Pull \u2192';
+    }
+    get IntegrationCount() {
+        return this.PipelineCards.length;
+    }
+    get TotalMapCount() {
+        return this.PipelineCards.reduce((sum, c) => sum + c.EntityMapCount, 0);
+    }
+    // ===========================================================================
+    // VISUAL FIELD MAPPING EDITOR
+    // ===========================================================================
+    // ---------------------------------------------------------------------------
+    // Open / Close
+    // ---------------------------------------------------------------------------
+    OpenVisualEditor(card, entityMap) {
+        this.EditorCard = card;
+        this.EditorEntityMap = entityMap;
+        this.VisualEditorOpen = true;
+        this.SelectedConnectionIdx = null;
+        this.ConnectingFromSource = null;
+        this.EditorSearchSource = '';
+        this.EditorSearchDest = '';
+        this.EditorSaveSuccess = false;
+        this.ShowSourcePreview = false;
+        this.ShowDestPreview = false;
+        this.PreviewSourceRows = [];
+        this.PreviewDestRows = [];
+        this.PreviewSourceColumns = [];
+        this.PreviewDestColumns = [];
+        this.FieldMapsExpanded = true;
+        this.InfoPanelExpanded = false;
+        this.InfoDestRecordCount = null;
+        this.InfoLastSync = null;
+        this.cdr.detectChanges();
+        this.LoadVisualEditorData();
+    }
+    CloseVisualEditor() {
+        this.VisualEditorOpen = false;
+        this.EditorEntityMap = null;
+        this.EditorCard = null;
+        this.EditorSourceFields = [];
+        this.EditorDestFields = [];
+        this.EditorConnections = [];
+        this.SelectedConnectionIdx = null;
+        this.ConnectingFromSource = null;
+        this.cdr.detectChanges();
+    }
+    async LoadVisualEditorData() {
+        if (!this.EditorEntityMap || !this.EditorCard)
+            return;
+        this.EditorLoading = true;
+        this.cdr.detectChanges();
+        const entityMap = this.EditorEntityMap;
+        try {
+            // Load field maps and dest fields in parallel
+            const [fieldMaps, destFields] = await Promise.all([
+                this.dataService.LoadFieldMaps(entityMap.ID, this.RunViewToUse),
+                this.dataService.LoadEntityFields(entityMap.EntityID, this.RunViewToUse)
+            ]);
+            // Build source fields from IntegrationObjectField metadata
+            const sourceFields = this.resolveSourceFieldsFromMetadata(this.EditorCard.IntegrationID, entityMap.ExternalObjectName);
+            if (sourceFields.length > 0) {
+                this.EditorSourceFields = sourceFields;
+            }
+            else {
+                // Fallback: derive source fields from existing field maps
+                this.EditorSourceFields = fieldMaps.map(fm => ({
+                    Name: fm.SourceFieldName,
+                    Label: fm.SourceFieldLabel ?? fm.SourceFieldName,
+                    Type: '',
+                    IsRequired: fm.IsRequired,
+                    IsPrimaryKey: fm.IsKeyField
+                }));
+            }
+            // Build dest fields (exclude __mj system fields — they are read-only)
+            this.EditorDestFields = destFields
+                .filter(f => !f.Name.startsWith('__mj'))
+                .map(f => ({
+                Name: f.Name,
+                Type: f.Type,
+                IsRequired: f.IsRequired
+            }));
+            // Build connections
+            this.EditorConnections = fieldMaps
+                .filter(fm => fm.Status === 'Active')
+                .map(fm => ({
+                ID: fm.ID,
+                SourceFieldName: fm.SourceFieldName,
+                DestFieldName: fm.DestinationFieldName,
+                IsKeyField: fm.IsKeyField,
+                IsRequired: fm.IsRequired,
+                Direction: fm.Direction,
+                TransformSteps: this.parseTransformPipeline(fm.TransformPipeline),
+                IsDirty: false,
+                IsNew: false,
+                MarkedForDelete: false
+            }));
+        }
+        catch (err) {
+            console.error('[PipelinesComponent] Failed to load editor data:', err);
+        }
+        finally {
+            this.EditorLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Filtered field lists
+    // ---------------------------------------------------------------------------
+    get FilteredEditorSourceFields() {
+        if (!this.EditorSearchSource.trim())
+            return this.EditorSourceFields;
+        const term = this.EditorSearchSource.toLowerCase();
+        return this.EditorSourceFields.filter(f => f.Name.toLowerCase().includes(term) || f.Label.toLowerCase().includes(term));
+    }
+    get FilteredEditorDestFields() {
+        if (!this.EditorSearchDest.trim())
+            return this.EditorDestFields;
+        const term = this.EditorSearchDest.toLowerCase();
+        return this.EditorDestFields.filter(f => f.Name.toLowerCase().includes(term));
+    }
+    /** Only show connections where both source and dest are visible */
+    get VisibleConnections() {
+        return this.EditorConnections.filter(c => !c.MarkedForDelete &&
+            this.getSourceFieldIndex(c.SourceFieldName) >= 0 &&
+            this.getDestFieldIndex(c.DestFieldName) >= 0);
+    }
+    // ---------------------------------------------------------------------------
+    // SVG Calculations
+    // ---------------------------------------------------------------------------
+    get EditorCanvasHeight() {
+        const sourceHeight = this.FilteredEditorSourceFields.length * this.FIELD_HEIGHT;
+        const destHeight = this.FilteredEditorDestFields.length * this.FIELD_HEIGHT;
+        return Math.max(sourceHeight, destHeight, 200);
+    }
+    GetConnectionPath(conn) {
+        const sourceY = this.getSourceFieldY(conn.SourceFieldName);
+        const destY = this.getDestFieldY(conn.DestFieldName);
+        if (sourceY < 0 || destY < 0)
+            return '';
+        const cp1x = this.SVG_WIDTH * 0.35;
+        const cp2x = this.SVG_WIDTH * 0.65;
+        return `M 0 ${sourceY} C ${cp1x} ${sourceY}, ${cp2x} ${destY}, ${this.SVG_WIDTH} ${destY}`;
+    }
+    GetConnectionMidY(conn) {
+        const sourceY = this.getSourceFieldY(conn.SourceFieldName);
+        const destY = this.getDestFieldY(conn.DestFieldName);
+        return (sourceY + destY) / 2;
+    }
+    GetConnectionLineClass(conn) {
+        const type = this.getPrimaryTransformType(conn);
+        return `conn-${type}`;
+    }
+    GetConnectionBadgeClass(conn) {
+        const type = this.getPrimaryTransformType(conn);
+        return `badge-${type}`;
+    }
+    GetConnectionTransformIcon(conn) {
+        const type = this.getPrimaryTransformType(conn);
+        return this.TRANSFORM_TYPES.find(t => t.Value === type)?.Icon ?? 'fa-solid fa-arrow-right';
+    }
+    /** Direction-aware icon for the SVG connection badge */
+    GetConnectionDirectionIcon(conn) {
+        switch (conn.Direction) {
+            case 'DestToSource': return 'fa-solid fa-arrow-left';
+            case 'Both': return 'fa-solid fa-right-left';
+            default: return 'fa-solid fa-arrow-right';
+        }
+    }
+    GetTransformTypeLabel(type) {
+        return this.TRANSFORM_TYPES.find(t => t.Value === type)?.Label ?? type;
+    }
+    // ---------------------------------------------------------------------------
+    // Field mapped state
+    // ---------------------------------------------------------------------------
+    IsSourceFieldMapped(fieldName) {
+        return this.EditorConnections.some(c => !c.MarkedForDelete && c.SourceFieldName === fieldName);
+    }
+    IsDestFieldMapped(fieldName) {
+        return this.EditorConnections.some(c => !c.MarkedForDelete && c.DestFieldName === fieldName);
+    }
+    // ---------------------------------------------------------------------------
+    // Creating connections (click source → click dest)
+    // ---------------------------------------------------------------------------
+    OnEditorSourceClick(fieldName) {
+        // Don't allow starting a new connection from an already-mapped field
+        if (this.IsSourceFieldMapped(fieldName))
+            return;
+        if (this.ConnectingFromSource === fieldName) {
+            this.ConnectingFromSource = null;
+        }
+        else {
+            this.ConnectingFromSource = fieldName;
+            this.SelectedConnectionIdx = null;
+        }
+        this.cdr.detectChanges();
+    }
+    OnEditorDestClick(fieldName) {
+        if (!this.ConnectingFromSource)
+            return;
+        // Don't allow mapping to an already-mapped dest field
+        if (this.IsDestFieldMapped(fieldName))
+            return;
+        // Check if this mapping already exists
+        const existing = this.EditorConnections.find(c => !c.MarkedForDelete && c.SourceFieldName === this.ConnectingFromSource && c.DestFieldName === fieldName);
+        if (existing) {
+            this.ConnectingFromSource = null;
+            return;
+        }
+        // Create new connection
+        this.EditorConnections.push({
+            ID: null,
+            SourceFieldName: this.ConnectingFromSource,
+            DestFieldName: fieldName,
+            IsKeyField: false,
+            IsRequired: false,
+            Direction: 'SourceToDest',
+            TransformSteps: [{ Type: 'direct', Config: {}, OnError: 'Fail' }],
+            IsDirty: true,
+            IsNew: true,
+            MarkedForDelete: false
+        });
+        this.ConnectingFromSource = null;
+        this.SelectedConnectionIdx = this.EditorConnections.length - 1;
+        this.cdr.detectChanges();
+    }
+    CancelConnect() {
+        this.ConnectingFromSource = null;
+        this.cdr.detectChanges();
+    }
+    // ---------------------------------------------------------------------------
+    // Connection selection / editing
+    // ---------------------------------------------------------------------------
+    SelectConnection(index, event) {
+        event.stopPropagation();
+        this.SelectedConnectionIdx = this.SelectedConnectionIdx === index ? null : index;
+        this.ConnectingFromSource = null;
+        this.cdr.detectChanges();
+    }
+    DeselectConnection() {
+        this.SelectedConnectionIdx = null;
+        this.cdr.detectChanges();
+    }
+    get SelectedConnection() {
+        if (this.SelectedConnectionIdx == null)
+            return null;
+        return this.EditorConnections[this.SelectedConnectionIdx] ?? null;
+    }
+    RemoveSelectedConnection() {
+        if (this.SelectedConnectionIdx == null)
+            return;
+        const conn = this.EditorConnections[this.SelectedConnectionIdx];
+        if (conn.IsNew) {
+            this.EditorConnections.splice(this.SelectedConnectionIdx, 1);
+        }
+        else {
+            conn.MarkedForDelete = true;
+            conn.IsDirty = true;
+        }
+        this.SelectedConnectionIdx = null;
+        this.cdr.detectChanges();
+    }
+    ToggleConnectionKey() {
+        const conn = this.SelectedConnection;
+        if (!conn)
+            return;
+        conn.IsKeyField = !conn.IsKeyField;
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    ToggleConnectionRequired() {
+        const conn = this.SelectedConnection;
+        if (!conn)
+            return;
+        conn.IsRequired = !conn.IsRequired;
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    GetDirectionArrowClass(direction) {
+        switch (direction) {
+            case 'DestToSource': return 'fa-arrow-left';
+            case 'Both': return 'fa-right-left';
+            default: return 'fa-arrow-right';
+        }
+    }
+    OnConnectionDirectionChange(direction) {
+        const conn = this.SelectedConnection;
+        if (!conn)
+            return;
+        conn.Direction = direction;
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    OnConnectionTransformChange(stepIndex, type) {
+        const conn = this.SelectedConnection;
+        if (!conn || !conn.TransformSteps[stepIndex])
+            return;
+        conn.TransformSteps[stepIndex].Type = type;
+        conn.TransformSteps[stepIndex].Config = this.getDefaultConfigForType(type);
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    OnTransformConfigChange(conn, stepIndex, key, value) {
+        if (!conn.TransformSteps[stepIndex])
+            return;
+        conn.TransformSteps[stepIndex].Config[key] = value;
+        conn.IsDirty = true;
+    }
+    AddTransformStep() {
+        const conn = this.SelectedConnection;
+        if (!conn)
+            return;
+        conn.TransformSteps.push({ Type: 'direct', Config: {}, OnError: 'Fail' });
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    RemoveTransformStep(stepIndex) {
+        const conn = this.SelectedConnection;
+        if (!conn)
+            return;
+        conn.TransformSteps.splice(stepIndex, 1);
+        conn.IsDirty = true;
+        this.cdr.detectChanges();
+    }
+    // ---------------------------------------------------------------------------
+    // Save / Auto-map
+    // ---------------------------------------------------------------------------
+    get HasEditorChanges() {
+        return this.EditorConnections.some(c => c.IsDirty);
+    }
+    async SaveVisualEditor() {
+        if (!this.EditorEntityMap)
+            return;
+        this.EditorSaving = true;
+        this.EditorSaveSuccess = false;
+        this.cdr.detectChanges();
+        try {
+            for (const conn of this.EditorConnections) {
+                if (!conn.IsDirty)
+                    continue;
+                if (conn.MarkedForDelete && conn.ID) {
+                    await this.dataService.DeleteFieldMap(conn.ID);
+                }
+                else if (conn.IsNew && !conn.MarkedForDelete) {
+                    await this.dataService.CreateFieldMap({
+                        EntityMapID: this.EditorEntityMap.ID,
+                        SourceFieldName: conn.SourceFieldName,
+                        DestinationFieldName: conn.DestFieldName,
+                        IsKeyField: conn.IsKeyField,
+                        IsRequired: conn.IsRequired,
+                        Direction: conn.Direction,
+                        TransformPipeline: this.serializeTransformPipeline(conn.TransformSteps)
+                    });
+                }
+                else if (conn.ID && !conn.MarkedForDelete) {
+                    await this.dataService.UpdateFieldMap(conn.ID, {
+                        SourceFieldName: conn.SourceFieldName,
+                        DestinationFieldName: conn.DestFieldName,
+                        IsKeyField: conn.IsKeyField,
+                        IsRequired: conn.IsRequired,
+                        Direction: conn.Direction,
+                        TransformPipeline: this.serializeTransformPipeline(conn.TransformSteps)
+                    });
+                }
+            }
+            // Reload to get clean state
+            await this.LoadVisualEditorData();
+            this.EditorSaveSuccess = true;
+            this.SelectedConnectionIdx = null;
+        }
+        catch (err) {
+            console.error('[PipelinesComponent] Failed to save field mappings:', err);
+        }
+        finally {
+            this.EditorSaving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    async AutoMapEditorFields() {
+        if (!this.EditorEntityMap || !this.EditorCard)
+            return;
+        // Match source to dest by name (case-insensitive)
+        const destMap = new Map();
+        for (const df of this.EditorDestFields) {
+            destMap.set(df.Name.toLowerCase(), df);
+        }
+        let addedCount = 0;
+        for (const sf of this.EditorSourceFields) {
+            // Skip if already mapped
+            if (this.IsSourceFieldMapped(sf.Name))
+                continue;
+            const destMatch = destMap.get(sf.Name.toLowerCase());
+            if (!destMatch)
+                continue;
+            if (this.IsDestFieldMapped(destMatch.Name))
+                continue;
+            this.EditorConnections.push({
+                ID: null,
+                SourceFieldName: sf.Name,
+                DestFieldName: destMatch.Name,
+                IsKeyField: sf.IsPrimaryKey,
+                IsRequired: sf.IsRequired || destMatch.IsRequired,
+                Direction: 'SourceToDest',
+                TransformSteps: [{ Type: 'direct', Config: {}, OnError: 'Fail' }],
+                IsDirty: true,
+                IsNew: true,
+                MarkedForDelete: false
+            });
+            addedCount++;
+        }
+        if (addedCount > 0) {
+            this.cdr.detectChanges();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Editor computed props
+    // ---------------------------------------------------------------------------
+    get EditorMappedCount() {
+        return this.EditorConnections.filter(c => !c.MarkedForDelete).length;
+    }
+    get EditorKeyFieldCount() {
+        return this.EditorConnections.filter(c => !c.MarkedForDelete && c.IsKeyField).length;
+    }
+    get EditorRequiredCount() {
+        return this.EditorConnections.filter(c => !c.MarkedForDelete && c.IsRequired).length;
+    }
+    /** Get transform config keys for inline editing */
+    GetConfigKeys(step) {
+        return Object.keys(step.Config);
+    }
+    GetConfigValue(step, key) {
+        const val = step.Config[key];
+        if (val == null)
+            return '';
+        if (typeof val === 'object')
+            return JSON.stringify(val);
+        return String(val);
+    }
+    // ---------------------------------------------------------------------------
+    // Private helpers
+    // ---------------------------------------------------------------------------
+    getSourceFieldIndex(fieldName) {
+        return this.FilteredEditorSourceFields.findIndex(f => f.Name === fieldName);
+    }
+    getDestFieldIndex(fieldName) {
+        return this.FilteredEditorDestFields.findIndex(f => f.Name === fieldName);
+    }
+    getSourceFieldY(fieldName) {
+        const idx = this.getSourceFieldIndex(fieldName);
+        if (idx < 0)
+            return -1;
+        return idx * this.FIELD_HEIGHT + this.FIELD_HEIGHT / 2;
+    }
+    getDestFieldY(fieldName) {
+        const idx = this.getDestFieldIndex(fieldName);
+        if (idx < 0)
+            return -1;
+        return idx * this.FIELD_HEIGHT + this.FIELD_HEIGHT / 2;
+    }
+    getPrimaryTransformType(conn) {
+        if (conn.TransformSteps.length === 0)
+            return 'direct';
+        return conn.TransformSteps[0].Type;
+    }
+    parseTransformPipeline(json) {
+        if (!json || json.trim() === '')
+            return [];
+        try {
+            const parsed = JSON.parse(json);
+            if (!Array.isArray(parsed))
+                return [];
+            return parsed.map(step => ({
+                Type: step.Type ?? 'direct',
+                Config: step.Config ?? {},
+                OnError: step.OnError ?? 'Fail'
+            }));
+        }
+        catch {
+            return [];
+        }
+    }
+    serializeTransformPipeline(steps) {
+        if (steps.length === 0)
+            return null;
+        return JSON.stringify(steps.map(s => ({ Type: s.Type, Config: s.Config, OnError: s.OnError })));
+    }
+    getDefaultConfigForType(type) {
+        switch (type) {
+            case 'direct': return {};
+            case 'regex': return { Pattern: '', Replacement: '', Flags: 'g' };
+            case 'split': return { Delimiter: ',', Index: 0 };
+            case 'combine': return { SourceFields: [], Separator: ' ' };
+            case 'lookup': return { Map: {}, Default: '' };
+            case 'format': return { FormatString: '', FormatType: 'date' };
+            case 'coerce': return { TargetType: 'string' };
+            case 'substring': return { Start: 0, Length: 10 };
+            case 'custom': return { Expression: 'value' };
+        }
+    }
+    /**
+     * Resolve source fields from IntegrationObjectField metadata via IntegrationEngineBase.
+     * CompanyIntegrationID → Integration → IntegrationObject → IntegrationObjectFields.
+     */
+    resolveSourceFieldsFromMetadata(companyIntegrationID, externalObjectName) {
+        const engine = IntegrationEngineBase.Instance;
+        const integration = engine.GetIntegrationForCompanyIntegration(companyIntegrationID);
+        if (!integration)
+            return [];
+        const obj = engine.GetIntegrationObject(integration.ID, externalObjectName);
+        if (!obj)
+            return [];
+        const fields = engine.GetIntegrationObjectFields(obj.ID);
+        return fields
+            .filter(f => f.Status === 'Active')
+            .sort((a, b) => a.Sequence - b.Sequence)
+            .map(f => ({
+            Name: f.Name,
+            Label: f.DisplayName || f.Name,
+            Type: f.Type,
+            IsRequired: f.IsRequired,
+            IsPrimaryKey: f.IsPrimaryKey
+        }));
+    }
+    applyMapFilter(card) {
+        if (!card.SearchTerm.trim())
+            return card.EntityMaps;
+        const term = card.SearchTerm.toLowerCase();
+        return card.EntityMaps.filter(m => (m.ExternalObjectLabel ?? m.ExternalObjectName).toLowerCase().includes(term) ||
+            m.Entity.toLowerCase().includes(term));
+    }
+    async loadAllEntityMaps(provider) {
+        const rv = new RunView(provider ?? null);
+        const result = await rv.RunView({
+            EntityName: 'MJ: Company Integration Entity Maps',
+            ExtraFilter: '',
+            OrderBy: 'CompanyIntegrationID, Priority, ExternalObjectName',
+            Fields: ['ID', 'CompanyIntegrationID', 'ExternalObjectName', 'ExternalObjectLabel',
+                'EntityID', 'SyncDirection', 'SyncEnabled', 'MatchStrategy',
+                'ConflictResolution', 'Priority', 'DeleteBehavior', 'Status', 'Entity'],
+            ResultType: 'simple'
+        });
+        return result.Results;
+    }
+    resolveIcon(summary) {
+        if (summary.SourceType?.IconClass) {
+            return summary.SourceType.IconClass;
+        }
+        const name = summary.Integration.Integration ?? summary.Integration.Name;
+        return ResolveIntegrationIcon(name);
+    }
+    statusToColor(color) {
+        if (color === 'green')
+            return '#059669';
+        if (color === 'amber')
+            return '#d97706';
+        if (color === 'red')
+            return '#dc2626';
+        return '#9ca3af';
+    }
+    statusToLabel(color) {
+        if (color === 'green')
+            return 'Healthy';
+        if (color === 'amber')
+            return 'Warning';
+        if (color === 'red')
+            return 'Error';
+        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", "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-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, 48, 18, "div", 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            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-color-neutral-700);\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-color-neutral-700);\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-color-neutral-700);\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-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-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.ve-col-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer[_ngcontent-%COMP%] { \n }\n\n\n\n\n\n\n.ve-canvas-scroll[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.ve-canvas-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  position: relative;\n}\n\n\n\n\n\n\n.ve-field-col[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.ve-field-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 14px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background 150ms ease, opacity 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n  box-sizing: border-box;\n}\n\n.ve-field-item.mapped[_ngcontent-%COMP%] { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  background: var(--mj-bg-page);\n}\n\n.ve-field-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-indigo-50);\n  opacity: 1;\n}\n\n.ve-field-item.connecting[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-100);\n  opacity: 1;\n  box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-success-100);\n  box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--mj-color-neutral-700);\n  font-weight: 500;\n}\n\n.ve-field-type[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.ve-fbadge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 3px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n}\n\n.ve-fbadge.pk[_ngcontent-%COMP%] { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty[_ngcontent-%COMP%] {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n\n\n\n\n\n.ve-svg[_ngcontent-%COMP%] {\n  display: block;\n}\n\n.ve-conn-line[_ngcontent-%COMP%] {\n  fill: none;\n  stroke-width: 2;\n  cursor: pointer;\n  transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n\n\n.ve-conn-line.conn-direct[_ngcontent-%COMP%] { stroke: #6366f1; stroke-dasharray: none; }\n.ve-conn-line.conn-regex[_ngcontent-%COMP%] { stroke: #8b5cf6; stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split[_ngcontent-%COMP%] { stroke: #f59e0b; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine[_ngcontent-%COMP%] { stroke: #10b981; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup[_ngcontent-%COMP%] { stroke: #0ea5e9; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format[_ngcontent-%COMP%] { stroke: #ec4899; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce[_ngcontent-%COMP%] { stroke: #f97316; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring[_ngcontent-%COMP%] { stroke: #14b8a6; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom[_ngcontent-%COMP%] { stroke: #a855f7; stroke-dasharray: 2 3; }\n\n.ve-conn-line[_ngcontent-%COMP%]:hover { stroke-width: 3.5; }\n.ve-conn-line.selected[_ngcontent-%COMP%] { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n\n\n.ve-badge-fo[_ngcontent-%COMP%] { overflow: visible; }\n\n.ve-conn-badge[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct[_ngcontent-%COMP%] { background: #eef2ff; color: #6366f1; border: 2px solid #6366f1; }\n.ve-conn-badge.badge-regex[_ngcontent-%COMP%] { background: #f5f3ff; color: #8b5cf6; border: 2px solid #8b5cf6; }\n.ve-conn-badge.badge-split[_ngcontent-%COMP%] { background: #fffbeb; color: #f59e0b; border: 2px solid #f59e0b; }\n.ve-conn-badge.badge-combine[_ngcontent-%COMP%] { background: #ecfdf5; color: #10b981; border: 2px solid #10b981; }\n.ve-conn-badge.badge-lookup[_ngcontent-%COMP%] { background: #f0f9ff; color: #0ea5e9; border: 2px solid #0ea5e9; }\n.ve-conn-badge.badge-format[_ngcontent-%COMP%] { background: #fdf2f8; color: #ec4899; border: 2px solid #ec4899; }\n.ve-conn-badge.badge-coerce[_ngcontent-%COMP%] { background: #fff7ed; color: #f97316; border: 2px solid #f97316; }\n.ve-conn-badge.badge-substring[_ngcontent-%COMP%] { background: #f0fdfa; color: #14b8a6; border: 2px solid #14b8a6; }\n.ve-conn-badge.badge-custom[_ngcontent-%COMP%] { background: #faf5ff; color: #a855f7; border: 2px solid #a855f7; }\n\n.ve-conn-badge[_ngcontent-%COMP%]:hover { transform: scale(1.2); }\n.ve-conn-badge.selected[_ngcontent-%COMP%] { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n\n\n\n\n\n.ve-transform-panel[_ngcontent-%COMP%] {\n  width: 320px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  animation: _ngcontent-%COMP%_slideInRight 200ms ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { opacity: 0; transform: translateX(20px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.ve-tp-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.ve-tp-close[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 150ms ease;\n}\n\n.ve-tp-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n\n\n.ve-tp-mapping-info[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.ve-tp-field[_ngcontent-%COMP%] {\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 12px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 110px;\n}\n\n.ve-tp-field.source[_ngcontent-%COMP%] { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n\n\n.ve-tp-toggles[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.ve-tp-toggle-box[_ngcontent-%COMP%] {\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-color-neutral-300);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  color: var(--mj-bg-surface);\n  transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-500);\n  border-color: var(--mj-color-indigo-500);\n}\n\n\n\n.ve-tp-section[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 8px;\n}\n\n.ve-tp-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n\n\n.ve-tp-direction-btns[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 6px 8px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:last-child { border-right: none; }\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%] { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n\n\n.ve-tp-add-step[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-tp-add-step[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n.ve-tp-step-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 5px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  transition: all 150ms ease;\n  flex-shrink: 0;\n}\n\n.ve-tp-remove-step[_ngcontent-%COMP%]:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config[_ngcontent-%COMP%] {\n  padding: 8px 10px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  width: 80px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n  height: 24px;\n  padding: 0 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 11px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-no-steps[_ngcontent-%COMP%] {\n  padding: 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  font-style: italic;\n}\n\n\n\n.ve-tp-footer[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  margin-top: auto;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n.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')
+], PipelinesComponent);
+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\" (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-color-neutral-700);\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-color-neutral-700);\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-color-neutral-700);\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-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-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.ve-col-search input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search input::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer { /* SVG gap */ }\n\n/* ---------------------------------------------------------------------------\n   Canvas scroll + grid\n   --------------------------------------------------------------------------- */\n\n.ve-canvas-scroll {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.ve-canvas-grid {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  position: relative;\n}\n\n/* ---------------------------------------------------------------------------\n   Field columns\n   --------------------------------------------------------------------------- */\n\n.ve-field-col {\n  display: flex;\n  flex-direction: column;\n}\n\n.ve-field-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 14px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background 150ms ease, opacity 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n  box-sizing: border-box;\n}\n\n.ve-field-item.mapped { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped {\n  opacity: 0.5;\n  background: var(--mj-bg-page);\n}\n\n.ve-field-item:hover {\n  background: var(--mj-color-indigo-50);\n  opacity: 1;\n}\n\n.ve-field-item.connecting {\n  background: var(--mj-color-indigo-100);\n  opacity: 1;\n  box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target:hover {\n  background: var(--mj-color-success-100);\n  box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--mj-color-neutral-700);\n  font-weight: 500;\n}\n\n.ve-field-type {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges {\n  display: flex;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.ve-fbadge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 3px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n}\n\n.ve-fbadge.pk { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n/* ---------------------------------------------------------------------------\n   SVG connections\n   --------------------------------------------------------------------------- */\n\n.ve-svg {\n  display: block;\n}\n\n.ve-conn-line {\n  fill: none;\n  stroke-width: 2;\n  cursor: pointer;\n  transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n/* Transform-based line styles */\n.ve-conn-line.conn-direct { stroke: #6366f1; stroke-dasharray: none; }\n.ve-conn-line.conn-regex { stroke: #8b5cf6; stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split { stroke: #f59e0b; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine { stroke: #10b981; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup { stroke: #0ea5e9; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format { stroke: #ec4899; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce { stroke: #f97316; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring { stroke: #14b8a6; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom { stroke: #a855f7; stroke-dasharray: 2 3; }\n\n.ve-conn-line:hover { stroke-width: 3.5; }\n.ve-conn-line.selected { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n/* Connection badge at midpoint */\n.ve-badge-fo { overflow: visible; }\n\n.ve-conn-badge {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct { background: #eef2ff; color: #6366f1; border: 2px solid #6366f1; }\n.ve-conn-badge.badge-regex { background: #f5f3ff; color: #8b5cf6; border: 2px solid #8b5cf6; }\n.ve-conn-badge.badge-split { background: #fffbeb; color: #f59e0b; border: 2px solid #f59e0b; }\n.ve-conn-badge.badge-combine { background: #ecfdf5; color: #10b981; border: 2px solid #10b981; }\n.ve-conn-badge.badge-lookup { background: #f0f9ff; color: #0ea5e9; border: 2px solid #0ea5e9; }\n.ve-conn-badge.badge-format { background: #fdf2f8; color: #ec4899; border: 2px solid #ec4899; }\n.ve-conn-badge.badge-coerce { background: #fff7ed; color: #f97316; border: 2px solid #f97316; }\n.ve-conn-badge.badge-substring { background: #f0fdfa; color: #14b8a6; border: 2px solid #14b8a6; }\n.ve-conn-badge.badge-custom { background: #faf5ff; color: #a855f7; border: 2px solid #a855f7; }\n\n.ve-conn-badge:hover { transform: scale(1.2); }\n.ve-conn-badge.selected { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n/* ---------------------------------------------------------------------------\n   Transform Panel (right side)\n   --------------------------------------------------------------------------- */\n\n.ve-transform-panel {\n  width: 320px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  animation: slideInRight 200ms ease;\n}\n\n@keyframes slideInRight {\n  from { opacity: 0; transform: translateX(20px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.ve-tp-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.ve-tp-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 150ms ease;\n}\n\n.ve-tp-close:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n/* Mapping info */\n.ve-tp-mapping-info {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.ve-tp-field {\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 12px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 110px;\n}\n\n.ve-tp-field.source { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n/* Toggles */\n.ve-tp-toggles {\n  display: flex;\n  gap: 16px;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.ve-tp-toggle-box {\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-color-neutral-300);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  color: var(--mj-bg-surface);\n  transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active {\n  background: var(--mj-color-indigo-500);\n  border-color: var(--mj-color-indigo-500);\n}\n\n/* Sections */\n.ve-tp-section {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label {\n  display: block;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 8px;\n}\n\n.ve-tp-section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* Direction buttons */\n.ve-tp-direction-btns {\n  display: flex;\n  gap: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.ve-tp-direction-btns button {\n  flex: 1;\n  padding: 6px 8px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns button:last-child { border-right: none; }\n.ve-tp-direction-btns button:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns button.active { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n/* Transform steps */\n.ve-tp-add-step {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-tp-add-step:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step {\n  margin-top: 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n.ve-tp-step-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.ve-tp-type-select {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-type-select:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 5px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  transition: all 150ms ease;\n  flex-shrink: 0;\n}\n\n.ve-tp-remove-step:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config {\n  padding: 8px 10px;\n}\n\n.ve-tp-config-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.ve-tp-config-row:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row label {\n  width: 80px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.ve-tp-config-row input {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror label {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-tp-step-onerror select {\n  height: 24px;\n  padding: 0 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 11px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-no-steps {\n  padding: 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  font-style: italic;\n}\n\n/* Footer */\n.ve-tp-footer {\n  padding: 14px 16px;\n  margin-top: auto;\n  flex-shrink: 0;\n}\n\n/* ---------------------------------------------------------------------------\n   Scrollbar styling\n   --------------------------------------------------------------------------- */\n\n.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() {
+    // Tree-shaking prevention: importing this module causes
+    // @RegisterClass decorators to fire, registering components.
+}
+//# sourceMappingURL=pipelines.component.js.map