npm - @memberjunction/ng-dashboards - Versions diffs - 5.22.0 → 5.24.0 - Mend

@memberjunction/ng-dashboards 5.22.0 → 5.24.0

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

Files changed (245) hide show

package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js CHANGED Viewed

@@ -13,10 +13,8 @@ import { IntegrationDataService } from '../../services/integration-data.service'
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-buttons";
-import * as i4 from "@progress/kendo-angular-dropdowns";
-import * as i5 from "@progress/kendo-angular-inputs";
-import * as i6 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@memberjunction/ng-ui-components";
+import * as i4 from "@memberjunction/ng-shared-generic";
 const _c0 = () => ({ ID: "", Name: "-- Select --" });
 const _c1 = () => ["Pull", "Push", "Bidirectional"];
 const _c2 = () => ({ Name: "", Label: "Select source object..." });
@@ -54,35 +52,35 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Con
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 44);
-    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_13_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.SelectedSourceObjectName, $event) || (ctx_r1.SelectedSourceObjectName = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("valueChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_13_Template_kendo_dropdownlist_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnSourceObjectChange($event)); });
+    i0.ɵɵelementStart(0, "mj-dropdown", 44);
+    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_13_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.SelectedSourceObjectName, $event) || (ctx_r1.SelectedSourceObjectName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ValueChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_13_Template_mj_dropdown_ValueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnSourceObjectChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("data", ctx_r1.DiscoveredObjects)("textField", "Label")("valueField", "Name")("valuePrimitive", true);
+    i0.ɵɵproperty("Data", ctx_r1.DiscoveredObjects)("ValuePrimitive", true);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.SelectedSourceObjectName);
-    i0.ɵɵproperty("filterable", true)("defaultItem", i0.ɵɵpureFunction0(7, _c2));
+    i0.ɵɵproperty("Filterable", true)("DefaultItem", i0.ɵɵpureFunction0(5, _c2));
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_21_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-loading", 16);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_21_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 45);
-    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_21_Conditional_4_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(5); i0.ɵɵtwoWayBindingSet(ctx_r1.SelectedEntityID, $event) || (ctx_r1.SelectedEntityID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "mj-dropdown", 46);
+    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_21_Conditional_4_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(5); i0.ɵɵtwoWayBindingSet(ctx_r1.SelectedEntityID, $event) || (ctx_r1.SelectedEntityID = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("data", ctx_r1.MJEntities)("textField", "Name")("valueField", "ID")("valuePrimitive", true);
+    i0.ɵɵproperty("Data", ctx_r1.MJEntities)("ValuePrimitive", true);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.SelectedEntityID);
-    i0.ɵɵproperty("filterable", true)("defaultItem", i0.ɵɵpureFunction0(7, _c3));
+    i0.ɵɵproperty("Filterable", true)("DefaultItem", i0.ɵɵpureFunction0(5, _c3));
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 29)(1, "label");
     i0.ɵɵtext(2, "Target MJ Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_21_Conditional_3_Template, 1, 0, "mj-loading", 16)(4, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_21_Conditional_4_Template, 1, 8, "kendo-dropdownlist", 32);
+    i0.ɵɵconditionalCreate(3, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_21_Conditional_3_Template, 1, 0, "mj-loading", 16)(4, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_21_Conditional_4_Template, 1, 6, "mj-dropdown", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -90,7 +88,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Con
     i0.ɵɵconditional(ctx_r1.IsLoadingEntities ? 3 : 4);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 50);
+    i0.ɵɵelementStart(0, "span", 51);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -107,7 +105,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Con
     i0.ɵɵtext(1, " Preview DDL ");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵelementStart(0, "div", 54);
     i0.ɵɵelement(1, "i", 43);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -117,7 +115,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Con
     i0.ɵɵtextInterpolate1(" ", ctx_r1.DDLPreviewError, " ");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "pre", 54);
+    i0.ɵɵelementStart(0, "pre", 55);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -127,17 +125,17 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Con
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 51)(1, "button", 52);
+    i0.ɵɵelementStart(0, "div", 52)(1, "button", 53);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.PreviewDDL()); });
     i0.ɵɵconditionalCreate(2, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Conditional_2_Template, 2, 0)(3, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Conditional_3_Template, 2, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Conditional_4_Template, 3, 1, "div", 53);
-    i0.ɵɵconditionalCreate(5, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Conditional_5_Template, 2, 1, "pre", 54);
+    i0.ɵɵconditionalCreate(4, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Conditional_4_Template, 3, 1, "div", 54);
+    i0.ɵɵconditionalCreate(5, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Conditional_5_Template, 2, 1, "pre", 55);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("look", "outline")("size", "small")("disabled", ctx_r1.IsGeneratingDDL);
+    i0.ɵɵproperty("disabled", ctx_r1.IsGeneratingDDL);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.IsGeneratingDDL ? 2 : 3);
     i0.ɵɵadvance(2);
@@ -147,38 +145,38 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Con
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 37)(1, "div", 46);
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 47);
     i0.ɵɵtext(2, "Define New Entity");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 29)(4, "label");
     i0.ɵɵtext(5, "DB Schema");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "kendo-combobox", 47);
-    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Template_kendo_combobox_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.NewEntitySchemaName, $event) || (ctx_r1.NewEntitySchemaName = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("valueChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Template_kendo_combobox_valueChange_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnSchemaNameChange()); });
+    i0.ɵɵelementStart(6, "mj-combobox", 48);
+    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Template_mj_combobox_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.NewEntitySchemaName, $event) || (ctx_r1.NewEntitySchemaName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ValueChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Template_mj_combobox_ValueChange_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnSchemaNameChange()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 48)(8, "div", 29)(9, "label");
+    i0.ɵɵelementStart(7, "div", 49)(8, "div", 29)(9, "label");
     i0.ɵɵtext(10, "Table Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "input", 49);
+    i0.ɵɵelementStart(11, "input", 50);
     i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.NewEntityTableName, $event) || (ctx_r1.NewEntityTableName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_12_Template, 2, 1, "span", 50);
+    i0.ɵɵconditionalCreate(12, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_12_Template, 2, 1, "span", 51);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(13, "div", 29)(14, "label");
     i0.ɵɵtext(15, "Entity Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "input", 49);
+    i0.ɵɵelementStart(16, "input", 50);
     i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Template_input_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.NewEntityName, $event) || (ctx_r1.NewEntityName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(17, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Template, 6, 6, "div", 51);
+    i0.ɵɵconditionalCreate(17, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Conditional_17_Template, 6, 4, "div", 52);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵproperty("data", ctx_r1.DBSchemas);
+    i0.ɵɵproperty("Data", ctx_r1.DBSchemas);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.NewEntitySchemaName);
-    i0.ɵɵproperty("allowCustom", true)("filterable", true)("placeholder", "Select or type schema...");
+    i0.ɵɵproperty("AllowCustom", true)("Filterable", true);
     i0.ɵɵadvance(5);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.NewEntityTableName);
     i0.ɵɵproperty("placeholder", ctx_r1.SuggestedTableName || "Table name");
@@ -199,7 +197,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Con
     i0.ɵɵtext(1, " Create Pending Map ");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 55);
+    i0.ɵɵelement(0, "i", 56);
     i0.ɵɵtext(1, " Add Map ");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
@@ -215,7 +213,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Tem
     i0.ɵɵelementStart(7, "div", 29)(8, "label");
     i0.ɵɵtext(9, "Source Object");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_10_Template, 3, 0, "div", 30)(11, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_11_Template, 3, 1, "div", 31)(12, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_12_Template, 2, 0, "div", 31)(13, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_13_Template, 1, 8, "kendo-dropdownlist", 32);
+    i0.ɵɵconditionalCreate(10, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_10_Template, 3, 0, "div", 30)(11, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_11_Template, 3, 1, "div", 31)(12, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_12_Template, 2, 0, "div", 31)(13, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_13_Template, 1, 6, "mj-dropdown", 32);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(14, "div", 33)(15, "button", 34);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.SetTargetMode("existing")); });
@@ -228,12 +226,12 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Tem
     i0.ɵɵtext(20, " New Entity ");
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(21, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_21_Template, 5, 1, "div", 29);
-    i0.ɵɵconditionalCreate(22, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Template, 18, 11, "div", 37);
+    i0.ɵɵconditionalCreate(22, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Conditional_22_Template, 18, 10, "div", 37);
     i0.ɵɵelementStart(23, "div", 29)(24, "label");
     i0.ɵɵtext(25, "Sync Direction");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "kendo-dropdownlist", 38);
-    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Template_kendo_dropdownlist_ngModelChange_26_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.AddSyncDirection, $event) || (ctx_r1.AddSyncDirection = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(26, "mj-dropdown", 38);
+    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Template_mj_dropdown_ngModelChange_26_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.AddSyncDirection, $event) || (ctx_r1.AddSyncDirection = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(27, "div", 39)(28, "button", 40);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.SaveAddMap()); });
@@ -256,18 +254,16 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Tem
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.TargetMode === "new" ? 22 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("data", i0.ɵɵpureFunction0(14, _c1));
+    i0.ɵɵproperty("Data", i0.ɵɵpureFunction0(11, _c1));
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.AddSyncDirection);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("themeColor", "primary")("size", "small")("disabled", !ctx_r1.IsAddFormValid || ctx_r1.IsSavingEntityMap);
+    i0.ɵɵproperty("disabled", !ctx_r1.IsAddFormValid || ctx_r1.IsSavingEntityMap);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.IsSavingEntityMap ? 29 : ctx_r1.TargetMode === "new" ? 30 : 31);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("size", "small");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 23)(1, "input", 56);
+    i0.ɵɵelementStart(0, "div", 23)(1, "input", 57);
     i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_8_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.EntityMapSearchText, $event) || (ctx_r1.EntityMapSearchText = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -279,7 +275,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_9_Tem
     const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "p", 15);
     i0.ɵɵtext(1, " No entity maps configured. ");
-    i0.ɵɵelementStart(2, "a", 57);
+    i0.ɵɵelementStart(2, "a", 58);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_9_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OpenAddPanel()); });
     i0.ɵɵtext(3, "Add one");
     i0.ɵɵelementEnd()();
@@ -294,44 +290,43 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_10_Te
     i0.ɵɵtextInterpolate1("No matches for \"", ctx_r1.EntityMapSearchText, "\".");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 68);
+    i0.ɵɵelementStart(0, "span", 69);
     i0.ɵɵtext(1, "Pending");
     i0.ɵɵelementEnd();
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-switch", 73);
-    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Conditional_16_Template_kendo_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const item_r12 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(item_r12.RealMap.SyncEnabled, $event) || (item_r12.RealMap.SyncEnabled = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("valueChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Conditional_16_Template_kendo_switch_valueChange_0_listener() { i0.ɵɵrestoreView(_r13); const item_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnToggleEntityMap(item_r12.RealMap)); });
+    i0.ɵɵelementStart(0, "mj-switch", 74);
+    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Conditional_16_Template_mj_switch_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const item_r12 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(item_r12.RealMap.SyncEnabled, $event) || (item_r12.RealMap.SyncEnabled = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Conditional_16_Template_mj_switch_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r13); const item_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnToggleEntityMap(item_r12.RealMap)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r12 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵtwoWayProperty("ngModel", item_r12.RealMap.SyncEnabled);
-    i0.ɵɵproperty("size", "small");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 59);
+    i0.ɵɵelementStart(0, "div", 60);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Template_div_click_0_listener() { const item_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMapSelect(item_r12)); });
-    i0.ɵɵelementStart(1, "div", 60)(2, "span", 61);
+    i0.ɵɵelementStart(1, "div", 61)(2, "span", 62);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 62);
-    i0.ɵɵelement(5, "i", 63);
+    i0.ɵɵelementStart(4, "span", 63);
+    i0.ɵɵelement(5, "i", 64);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 64);
+    i0.ɵɵelementStart(6, "span", 65);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 65)(9, "div", 66)(10, "span", 67);
+    i0.ɵɵelementStart(8, "div", 66)(9, "div", 67)(10, "span", 68);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Conditional_12_Template, 2, 0, "span", 68);
+    i0.ɵɵconditionalCreate(12, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Conditional_12_Template, 2, 0, "span", 69);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 69)(14, "button", 70);
+    i0.ɵɵelementStart(13, "div", 70)(14, "button", 71);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Template_button_click_14_listener($event) { const item_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnDeleteMap(item_r12, $event)); });
-    i0.ɵɵelement(15, "i", 71);
+    i0.ɵɵelement(15, "i", 72);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(16, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Conditional_16_Template, 1, 2, "kendo-switch", 72);
+    i0.ɵɵconditionalCreate(16, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Conditional_16_Template, 1, 1, "mj-switch", 73);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const item_r12 = ctx.$implicit;
@@ -350,7 +345,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_Fo
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵrepeaterCreate(1, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Template, 17, 9, "div", 58, _forTrack0);
+    i0.ɵɵrepeaterCreate(1, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_For_2_Template, 17, 9, "div", 59, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -367,14 +362,12 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Template(rf, ctx)
     i0.ɵɵelement(5, "i", 21);
     i0.ɵɵtext(6, " Add Map ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(7, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Template, 34, 15, "div", 22);
+    i0.ɵɵconditionalCreate(7, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_7_Template, 34, 12, "div", 22);
     i0.ɵɵconditionalCreate(8, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_8_Template, 2, 1, "div", 23);
     i0.ɵɵconditionalCreate(9, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_9_Template, 4, 0, "p", 15)(10, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_10_Template, 2, 1, "p", 15)(11, MappingWorkspaceComponent_Conditional_6_Conditional_7_Conditional_11_Template, 3, 0, "div", 24);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("look", "flat")("size", "small");
-    i0.ɵɵadvance(3);
+    i0.ɵɵadvance(7);
     i0.ɵɵconditional(ctx_r1.ShowAddPanel ? 7 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.AllMaps.length > 0 ? 8 : -1);
@@ -383,55 +376,53 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_7_Template(rf, ctx)
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵelement(1, "i", 74);
+    i0.ɵɵelement(1, "i", 75);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "Select an entity map from the left panel to view and edit field mappings.");
     i0.ɵɵelementEnd()();
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 55);
+    i0.ɵɵelement(0, "i", 56);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " 2 ");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_35_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 84)(1, "h4", 86);
+    i0.ɵɵelementStart(0, "div", 85)(1, "h4", 87);
     i0.ɵɵelement(2, "i", 35);
     i0.ɵɵtext(3, " Generated DDL ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "pre", 87);
+    i0.ɵɵelementStart(4, "pre", 88);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 88)(7, "button", 89);
+    i0.ɵɵelementStart(6, "div", 89)(7, "button", 90);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_35_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.CopyDDLToClipboard(ctx_r1.SelectedPendingMap.DDLContent)); });
-    i0.ɵɵelement(8, "i", 90);
+    i0.ɵɵelement(8, "i", 91);
     i0.ɵɵtext(9, " Copy DDL ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.SelectedPendingMap.DDLContent);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("look", "outline")("size", "small");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_For_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 98);
+    i0.ɵɵelement(0, "i", 99);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_For_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 99);
+    i0.ɵɵelementStart(0, "span", 100);
     i0.ɵɵtext(1, "*");
     i0.ɵɵelementEnd();
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 95)(1, "span", 96);
+    i0.ɵɵelementStart(0, "div", 96)(1, "span", 97);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 97);
+    i0.ɵɵelementStart(3, "span", 98);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_For_8_Conditional_5_Template, 1, 0, "i", 98);
-    i0.ɵɵconditionalCreate(6, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_For_8_Conditional_6_Template, 2, 0, "span", 99);
+    i0.ɵɵconditionalCreate(5, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_For_8_Conditional_5_Template, 1, 0, "i", 99);
+    i0.ɵɵconditionalCreate(6, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_For_8_Conditional_6_Template, 2, 0, "span", 100);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r15 = ctx.$implicit;
@@ -445,14 +436,14 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_F
     i0.ɵɵconditional(field_r15.IsRequired ? 6 : -1);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 85)(1, "h4", 91);
-    i0.ɵɵelement(2, "i", 92);
+    i0.ɵɵelementStart(0, "div", 86)(1, "h4", 92);
+    i0.ɵɵelement(2, "i", 93);
     i0.ɵɵtext(3, " Source Fields ");
-    i0.ɵɵelementStart(4, "span", 93);
+    i0.ɵɵelementStart(4, "span", 94);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 94);
-    i0.ɵɵrepeaterCreate(7, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_For_8_Template, 7, 4, "div", 95, _forTrack1);
+    i0.ɵɵelementStart(6, "div", 95);
+    i0.ɵɵrepeaterCreate(7, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_For_8_Template, 7, 4, "div", 96, _forTrack1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -462,8 +453,8 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_T
     i0.ɵɵrepeater(ctx_r1.SelectedPendingMap.SourceFields);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12)(1, "div", 75);
-    i0.ɵɵelement(2, "i", 76);
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 76);
+    i0.ɵɵelement(2, "i", 77);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4);
@@ -475,35 +466,35 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_10_Template(rf, ctx
     i0.ɵɵelementEnd();
     i0.ɵɵtext(9, " to be created. Run the DDL migration and CodeGen to activate this mapping. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 77)(11, "div", 78)(12, "div", 79);
-    i0.ɵɵelement(13, "i", 55);
+    i0.ɵɵelementStart(10, "div", 78)(11, "div", 79)(12, "div", 80);
+    i0.ɵɵelement(13, "i", 56);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 80);
+    i0.ɵɵelementStart(14, "span", 81);
     i0.ɵɵtext(15, "Map Created");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(16, "div", 81);
-    i0.ɵɵelementStart(17, "div", 78)(18, "div", 82);
-    i0.ɵɵconditionalCreate(19, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_19_Template, 1, 0, "i", 55)(20, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_20_Template, 1, 0);
+    i0.ɵɵelement(16, "div", 82);
+    i0.ɵɵelementStart(17, "div", 79)(18, "div", 83);
+    i0.ɵɵconditionalCreate(19, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_19_Template, 1, 0, "i", 56)(20, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_20_Template, 1, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "span", 80);
+    i0.ɵɵelementStart(21, "span", 81);
     i0.ɵɵtext(22, "DDL Generated");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(23, "div", 81);
-    i0.ɵɵelementStart(24, "div", 78)(25, "div", 83);
+    i0.ɵɵelement(23, "div", 82);
+    i0.ɵɵelementStart(24, "div", 79)(25, "div", 84);
     i0.ɵɵtext(26, "3");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "span", 80);
+    i0.ɵɵelementStart(27, "span", 81);
     i0.ɵɵtext(28, "Deploy & CodeGen");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(29, "div", 81);
-    i0.ɵɵelementStart(30, "div", 78)(31, "div", 83);
+    i0.ɵɵelement(29, "div", 82);
+    i0.ɵɵelementStart(30, "div", 79)(31, "div", 84);
     i0.ɵɵtext(32, "4");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "span", 80);
+    i0.ɵɵelementStart(33, "span", 81);
     i0.ɵɵtext(34, "Ready to Sync");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(35, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_35_Template, 10, 3, "div", 84);
-    i0.ɵɵconditionalCreate(36, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_Template, 9, 1, "div", 85);
+    i0.ɵɵconditionalCreate(35, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_35_Template, 10, 1, "div", 85);
+    i0.ɵɵconditionalCreate(36, MappingWorkspaceComponent_Conditional_6_Conditional_10_Conditional_36_Template, 9, 1, "div", 86);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -527,14 +518,14 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_11_Template(rf, ctx
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 100);
+    i0.ɵɵelementStart(0, "div", 101);
     i0.ɵɵelement(1, "i", 36);
-    i0.ɵɵelementStart(2, "div", 112)(3, "p")(4, "strong");
+    i0.ɵɵelementStart(2, "div", 113)(3, "p")(4, "strong");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(6, " by matching source and destination field names.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "button", 89);
+    i0.ɵɵelementStart(7, "button", 114);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_0_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.DismissAutoMapBanner()); });
     i0.ɵɵelement(8, "i", 28);
     i0.ɵɵelementEnd()();
@@ -542,8 +533,6 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_0_Te
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate2("", ctx_r1.AutoMapCount, " field", ctx_r1.AutoMapCount !== 1 ? "s" : "", " auto-mapped");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("look", "flat")("size", "small");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_1_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -555,9 +544,9 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_1_Fo
     i0.ɵɵtextInterpolate(warning_r18);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101);
+    i0.ɵɵelementStart(0, "div", 102);
     i0.ɵɵelement(1, "i", 43);
-    i0.ɵɵelementStart(2, "div", 113);
+    i0.ɵɵelementStart(2, "div", 115);
     i0.ɵɵrepeaterCreate(3, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_1_For_4_Template, 2, 1, "span", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -570,21 +559,21 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_15_T
     i0.ɵɵtext(1, " Saving... ");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 114);
+    i0.ɵɵelement(0, "i", 116);
     i0.ɵɵtext(1, " Save ");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "p", 15);
     i0.ɵɵtext(1, " No field mappings yet. ");
-    i0.ɵɵelementStart(2, "a", 57);
+    i0.ɵɵelementStart(2, "a", 58);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_17_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.AddFieldMapping()); });
     i0.ɵɵtext(3, "Add one");
     i0.ɵɵelementEnd()();
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 134);
+    i0.ɵɵelementStart(0, "input", 136);
     i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_3_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r21); const field_r22 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(field_r22.SourceFieldName, $event) || (field_r22.SourceFieldName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_3_Template_input_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r21); const field_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnFieldChanged(field_r22)); });
     i0.ɵɵelementEnd();
@@ -593,7 +582,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
     i0.ɵɵtwoWayProperty("ngModel", field_r22.SourceFieldName);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 137);
+    i0.ɵɵelementStart(0, "span", 139);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -602,30 +591,30 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
     i0.ɵɵtextInterpolate(field_r22.SourceFieldType);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 138);
-    i0.ɵɵelement(1, "i", 129);
+    i0.ɵɵelementStart(0, "span", 140);
+    i0.ɵɵelement(1, "i", 131);
     i0.ɵɵtext(2, " PK");
     i0.ɵɵelementEnd();
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 139);
+    i0.ɵɵelementStart(0, "span", 141);
     i0.ɵɵtext(1, "REQ");
     i0.ɵɵelementEnd();
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 140);
+    i0.ɵɵelementStart(0, "span", 142);
     i0.ɵɵtext(1, "RO");
     i0.ɵɵelementEnd();
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 135);
+    i0.ɵɵelementStart(0, "div", 137);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 136);
-    i0.ɵɵconditionalCreate(3, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_3_Template, 2, 1, "span", 137);
-    i0.ɵɵconditionalCreate(4, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_4_Template, 3, 0, "span", 138);
-    i0.ɵɵconditionalCreate(5, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_5_Template, 2, 0, "span", 139);
-    i0.ɵɵconditionalCreate(6, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_6_Template, 2, 0, "span", 140);
+    i0.ɵɵelementStart(2, "div", 138);
+    i0.ɵɵconditionalCreate(3, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_3_Template, 2, 1, "span", 139);
+    i0.ɵɵconditionalCreate(4, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_4_Template, 3, 0, "span", 140);
+    i0.ɵɵconditionalCreate(5, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_5_Template, 2, 0, "span", 141);
+    i0.ɵɵconditionalCreate(6, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Conditional_6_Template, 2, 0, "span", 142);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r22 = i0.ɵɵnextContext().$implicit;
@@ -642,13 +631,13 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 141);
+    i0.ɵɵelementStart(0, "button", 143);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const field_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.ToggleTransformEditor(field_r22)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 142);
+    i0.ɵɵelementStart(4, "span", 144);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -664,9 +653,9 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 143);
+    i0.ɵɵelementStart(0, "button", 145);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const field_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.ToggleTransformEditor(field_r22)); });
-    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵelement(1, "i", 64);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -677,7 +666,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
     i0.ɵɵtextInterpolate(field_r22.TransformPipeline.length > 0 ? ctx_r1.GetTransformLabel(field_r22.TransformPipeline[0].Type) : "Direct");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_9_For_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 146);
+    i0.ɵɵelementStart(0, "option", 148);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -688,13 +677,13 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "select", 144);
+    i0.ɵɵelementStart(0, "select", 146);
     i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_9_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r25); const field_r22 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(field_r22.DestinationFieldName, $event) || (field_r22.DestinationFieldName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_9_Template_select_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r25); const field_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnFieldChanged(field_r22)); });
-    i0.ɵɵelementStart(1, "option", 145);
+    i0.ɵɵelementStart(1, "option", 147);
     i0.ɵɵtext(2, "-- Select destination --");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_9_For_4_Template, 2, 2, "option", 146, _forTrack0);
+    i0.ɵɵrepeaterCreate(3, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_9_For_4_Template, 2, 2, "option", 148, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r22 = i0.ɵɵnextContext().$implicit;
@@ -705,7 +694,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 147);
+    i0.ɵɵelementStart(0, "input", 149);
     i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_10_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r27); const field_r22 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(field_r22.DestinationFieldName, $event) || (field_r22.DestinationFieldName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_10_Template_input_ngModelChange_0_listener() { i0.ɵɵrestoreView(_r27); const field_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnFieldChanged(field_r22)); });
     i0.ɵɵelementEnd();
@@ -714,7 +703,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
     i0.ɵɵtwoWayProperty("ngModel", field_r22.DestinationFieldName);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 146);
+    i0.ɵɵelementStart(0, "option", 148);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -725,10 +714,10 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_17_Template(rf, ctx) { if (rf & 1) {
     const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 161)(1, "label");
+    i0.ɵɵelementStart(0, "div", 163)(1, "label");
     i0.ɵɵtext(2, "Default value (when source is null)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 164);
+    i0.ɵɵelementStart(3, "input", 166);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_17_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r34); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["DefaultValue"] = $event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -738,22 +727,22 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_18_Template(rf, ctx) { if (rf & 1) {
     const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 162)(1, "div", 161)(2, "label");
+    i0.ɵɵelementStart(0, "div", 164)(1, "div", 163)(2, "label");
     i0.ɵɵtext(3, "Pattern");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "input", 165);
+    i0.ɵɵelementStart(4, "input", 167);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_18_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r35); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["Pattern"] = $event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 161)(6, "label");
+    i0.ɵɵelementStart(5, "div", 163)(6, "label");
     i0.ɵɵtext(7, "Replacement");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "input", 166);
+    i0.ɵɵelementStart(8, "input", 168);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_18_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r35); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["Replacement"] = $event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 163)(10, "label");
+    i0.ɵɵelementStart(9, "div", 165)(10, "label");
     i0.ɵɵtext(11, "Flags");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "input", 167);
+    i0.ɵɵelementStart(12, "input", 169);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_18_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r35); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["Flags"] = $event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -767,16 +756,16 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_19_Template(rf, ctx) { if (rf & 1) {
     const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 162)(1, "div", 161)(2, "label");
+    i0.ɵɵelementStart(0, "div", 164)(1, "div", 163)(2, "label");
     i0.ɵɵtext(3, "Delimiter");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "input", 168);
+    i0.ɵɵelementStart(4, "input", 170);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_19_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r36); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["Delimiter"] = $event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 163)(6, "label");
+    i0.ɵɵelementStart(5, "div", 165)(6, "label");
     i0.ɵɵtext(7, "Part index (0-based)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "input", 169);
+    i0.ɵɵelementStart(8, "input", 171);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_19_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r36); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["Index"] = +$event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -788,7 +777,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_20_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r38 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 173);
+    i0.ɵɵelementStart(0, "button", 175);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_20_For_5_Template_button_click_0_listener() { const sf_r39 = i0.ɵɵrestoreView(_r38).$implicit; const step_r31 = i0.ɵɵnextContext(2).$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.ToggleCombineField(step_r31.Config, sf_r39); return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -802,16 +791,16 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_20_Template(rf, ctx) { if (rf & 1) {
     const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 161)(1, "label");
+    i0.ɵɵelementStart(0, "div", 163)(1, "label");
     i0.ɵɵtext(2, "Source fields to combine");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 170);
-    i0.ɵɵrepeaterCreate(4, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_20_For_5_Template, 2, 3, "button", 171, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(3, "div", 172);
+    i0.ɵɵrepeaterCreate(4, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_20_For_5_Template, 2, 3, "button", 173, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 163)(7, "label");
+    i0.ɵɵelementStart(6, "div", 165)(7, "label");
     i0.ɵɵtext(8, "Separator");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "input", 172);
+    i0.ɵɵelementStart(9, "input", 174);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_20_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r37); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["Separator"] = $event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -824,14 +813,14 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_21_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r41 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 175)(1, "input", 178);
+    i0.ɵɵelementStart(0, "div", 177)(1, "input", 180);
     i0.ɵɵlistener("change", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_21_For_5_Template_input_change_1_listener($event) { const entry_r42 = i0.ɵɵrestoreView(_r41).$implicit; const step_r31 = i0.ɵɵnextContext(2).$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.UpdateLookupEntry(step_r31.Config, entry_r42.key, $event.target.value, entry_r42.value); return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(2, "i", 179);
-    i0.ɵɵelementStart(3, "input", 180);
+    i0.ɵɵelement(2, "i", 181);
+    i0.ɵɵelementStart(3, "input", 182);
     i0.ɵɵlistener("change", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_21_For_5_Template_input_change_3_listener($event) { const entry_r42 = i0.ɵɵrestoreView(_r41).$implicit; const step_r31 = i0.ɵɵnextContext(2).$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.UpdateLookupEntry(step_r31.Config, entry_r42.key, entry_r42.key, $event.target.value); return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 181);
+    i0.ɵɵelementStart(4, "button", 183);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_21_For_5_Template_button_click_4_listener() { const entry_r42 = i0.ɵɵrestoreView(_r41).$implicit; const step_r31 = i0.ɵɵnextContext(2).$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.RemoveLookupEntry(step_r31.Config, entry_r42.key); return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelement(5, "i", 28);
     i0.ɵɵelementEnd()();
@@ -844,20 +833,20 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_21_Template(rf, ctx) { if (rf & 1) {
     const _r40 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 161)(1, "label");
+    i0.ɵɵelementStart(0, "div", 163)(1, "label");
     i0.ɵɵtext(2, "Value mapping");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 174);
-    i0.ɵɵrepeaterCreate(4, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_21_For_5_Template, 6, 2, "div", 175, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵelementStart(6, "button", 176);
+    i0.ɵɵelementStart(3, "div", 176);
+    i0.ɵɵrepeaterCreate(4, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_21_For_5_Template, 6, 2, "div", 177, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(6, "button", 178);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_21_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r40); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.AddLookupEntry(step_r31.Config); return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelement(7, "i", 21);
     i0.ɵɵtext(8, " Add mapping ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 163)(10, "label");
+    i0.ɵɵelementStart(9, "div", 165)(10, "label");
     i0.ɵɵtext(11, "Default (when no match)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "input", 177);
+    i0.ɵɵelementStart(12, "input", 179);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_21_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r40); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["Default"] = $event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -870,24 +859,24 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_22_Template(rf, ctx) { if (rf & 1) {
     const _r43 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 162)(1, "div", 163)(2, "label");
+    i0.ɵɵelementStart(0, "div", 164)(1, "div", 165)(2, "label");
     i0.ɵɵtext(3, "Format type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "select", 144);
+    i0.ɵɵelementStart(4, "select", 146);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_22_Template_select_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r43); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["FormatType"] = $event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
-    i0.ɵɵelementStart(5, "option", 182);
+    i0.ɵɵelementStart(5, "option", 184);
     i0.ɵɵtext(6, "Date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "option", 183);
+    i0.ɵɵelementStart(7, "option", 185);
     i0.ɵɵtext(8, "Number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "option", 184);
+    i0.ɵɵelementStart(9, "option", 186);
     i0.ɵɵtext(10, "String");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 161)(12, "label");
+    i0.ɵɵelementStart(11, "div", 163)(12, "label");
     i0.ɵɵtext(13, "Format string");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "input", 185);
+    i0.ɵɵelementStart(14, "input", 187);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_22_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r43); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["FormatString"] = $event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -899,21 +888,21 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_23_Template(rf, ctx) { if (rf & 1) {
     const _r44 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 163)(1, "label");
+    i0.ɵɵelementStart(0, "div", 165)(1, "label");
     i0.ɵɵtext(2, "Target type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "select", 144);
+    i0.ɵɵelementStart(3, "select", 146);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_23_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r44); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["TargetType"] = $event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
-    i0.ɵɵelementStart(4, "option", 184);
+    i0.ɵɵelementStart(4, "option", 186);
     i0.ɵɵtext(5, "String");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "option", 183);
+    i0.ɵɵelementStart(6, "option", 185);
     i0.ɵɵtext(7, "Number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "option", 186);
+    i0.ɵɵelementStart(8, "option", 188);
     i0.ɵɵtext(9, "Boolean");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "option", 182);
+    i0.ɵɵelementStart(10, "option", 184);
     i0.ɵɵtext(11, "Date");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -923,16 +912,16 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_24_Template(rf, ctx) { if (rf & 1) {
     const _r45 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 162)(1, "div", 163)(2, "label");
+    i0.ɵɵelementStart(0, "div", 164)(1, "div", 165)(2, "label");
     i0.ɵɵtext(3, "Start index");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "input", 169);
+    i0.ɵɵelementStart(4, "input", 171);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_24_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r45); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["Start"] = +$event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 163)(6, "label");
+    i0.ɵɵelementStart(5, "div", 165)(6, "label");
     i0.ɵɵtext(7, "Length (blank = to end)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "input", 187);
+    i0.ɵɵelementStart(8, "input", 189);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_24_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r45); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["Length"] = $event ? +$event : undefined; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -944,9 +933,9 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_25_Template(rf, ctx) { if (rf & 1) {
     const _r46 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 161)(1, "label");
+    i0.ɵɵelementStart(0, "div", 163)(1, "label");
     i0.ɵɵtext(2, "JavaScript expression ");
-    i0.ɵɵelementStart(3, "span", 188);
+    i0.ɵɵelementStart(3, "span", 190);
     i0.ɵɵtext(4, "(use ");
     i0.ɵɵelementStart(5, "code");
     i0.ɵɵtext(6, "value");
@@ -957,7 +946,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
     i0.ɵɵelementEnd();
     i0.ɵɵtext(10, ")");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "textarea", 189);
+    i0.ɵɵelementStart(11, "textarea", 191);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_25_Template_textarea_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r46); const step_r31 = i0.ɵɵnextContext().$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); step_r31.Config["Expression"] = $event; return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -967,31 +956,31 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Template(rf, ctx) { if (rf & 1) {
     const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 151)(1, "div", 152)(2, "span", 153);
+    i0.ɵɵelementStart(0, "div", 153)(1, "div", 154)(2, "span", 155);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "select", 154);
+    i0.ɵɵelementStart(4, "select", 156);
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Template_select_ngModelChange_4_listener($event) { const step_r31 = i0.ɵɵrestoreView(_r30).$implicit; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnTransformTypeChange(field_r22, step_r31, $event)); });
-    i0.ɵɵrepeaterCreate(5, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_For_6_Template, 2, 2, "option", 146, _forTrack2);
+    i0.ɵɵrepeaterCreate(5, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_For_6_Template, 2, 2, "option", 148, _forTrack2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "select", 155);
+    i0.ɵɵelementStart(7, "select", 157);
     i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Template_select_ngModelChange_7_listener($event) { const step_r31 = i0.ɵɵrestoreView(_r30).$implicit; i0.ɵɵtwoWayBindingSet(step_r31.OnError, $event) || (step_r31.OnError = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Template_select_ngModelChange_7_listener() { i0.ɵɵrestoreView(_r30); const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnTransformConfigChange(field_r22)); });
-    i0.ɵɵelementStart(8, "option", 156);
+    i0.ɵɵelementStart(8, "option", 158);
     i0.ɵɵtext(9, "Fail");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "option", 157);
+    i0.ɵɵelementStart(10, "option", 159);
     i0.ɵɵtext(11, "Skip row");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "option", 158);
+    i0.ɵɵelementStart(12, "option", 160);
     i0.ɵɵtext(13, "Set null");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "button", 159);
+    i0.ɵɵelementStart(14, "button", 161);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Template_button_click_14_listener() { const ɵ$index_534_r33 = i0.ɵɵrestoreView(_r30).$index; const field_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.RemoveTransformStep(field_r22, ɵ$index_534_r33)); });
-    i0.ɵɵelement(15, "i", 71);
+    i0.ɵɵelement(15, "i", 72);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 160);
-    i0.ɵɵconditionalCreate(17, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_17_Template, 4, 1, "div", 161)(18, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_18_Template, 13, 3, "div", 162)(19, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_19_Template, 9, 2, "div", 162)(20, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_20_Template, 10, 1)(21, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_21_Template, 13, 1)(22, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_22_Template, 15, 2, "div", 162)(23, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_23_Template, 12, 1, "div", 163)(24, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_24_Template, 9, 2, "div", 162)(25, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_25_Template, 12, 1, "div", 161);
+    i0.ɵɵelementStart(16, "div", 162);
+    i0.ɵɵconditionalCreate(17, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_17_Template, 4, 1, "div", 163)(18, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_18_Template, 13, 3, "div", 164)(19, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_19_Template, 9, 2, "div", 164)(20, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_20_Template, 10, 1)(21, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_21_Template, 13, 1)(22, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_22_Template, 15, 2, "div", 164)(23, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_23_Template, 12, 1, "div", 165)(24, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_24_Template, 9, 2, "div", 164)(25, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Case_25_Template, 12, 1, "div", 163);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     let tmp_30_0;
@@ -1011,16 +1000,16 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 133)(1, "div", 148)(2, "span", 149);
+    i0.ɵɵelementStart(0, "div", 135)(1, "div", 150)(2, "span", 151);
     i0.ɵɵelement(3, "i", 36);
     i0.ɵɵtext(4, " Transform Pipeline");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 150);
+    i0.ɵɵelementStart(5, "button", 152);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r29); const field_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.AddTransformStep(field_r22)); });
     i0.ɵɵelement(6, "i", 21);
     i0.ɵɵtext(7, " Add Step ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(8, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Template, 26, 4, "div", 151, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(8, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_For_9_Template, 26, 4, "div", 153, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r22 = i0.ɵɵnextContext().$implicit;
@@ -1029,33 +1018,33 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 116)(1, "div", 117)(2, "div", 118);
-    i0.ɵɵconditionalCreate(3, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_3_Template, 1, 1, "input", 119)(4, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Template, 7, 5);
+    i0.ɵɵelementStart(0, "div", 118)(1, "div", 119)(2, "div", 120);
+    i0.ɵɵconditionalCreate(3, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_3_Template, 1, 1, "input", 121)(4, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_4_Template, 7, 5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 120);
-    i0.ɵɵconditionalCreate(6, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_6_Template, 6, 5, "button", 121)(7, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_7_Template, 4, 1, "button", 122);
+    i0.ɵɵelementStart(5, "div", 122);
+    i0.ɵɵconditionalCreate(6, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_6_Template, 6, 5, "button", 123)(7, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_7_Template, 4, 1, "button", 124);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 123);
-    i0.ɵɵconditionalCreate(9, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_9_Template, 5, 1, "select", 124)(10, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_10_Template, 1, 1, "input", 125);
+    i0.ɵɵelementStart(8, "div", 125);
+    i0.ɵɵconditionalCreate(9, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_9_Template, 5, 1, "select", 126)(10, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_10_Template, 1, 1, "input", 127);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 126)(12, "label", 127)(13, "input", 128);
+    i0.ɵɵelementStart(11, "div", 128)(12, "label", 129)(13, "input", 130);
     i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Template_input_ngModelChange_13_listener($event) { const field_r22 = i0.ɵɵrestoreView(_r20).$implicit; i0.ɵɵtwoWayBindingSet(field_r22.IsKeyField, $event) || (field_r22.IsKeyField = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Template_input_ngModelChange_13_listener() { const field_r22 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnFieldChanged(field_r22)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(14, "i", 129);
+    i0.ɵɵelement(14, "i", 131);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "label", 130)(16, "input", 128);
+    i0.ɵɵelementStart(15, "label", 132)(16, "input", 130);
     i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Template_input_ngModelChange_16_listener($event) { const field_r22 = i0.ɵɵrestoreView(_r20).$implicit; i0.ɵɵtwoWayBindingSet(field_r22.IsRequired, $event) || (field_r22.IsRequired = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Template_input_ngModelChange_16_listener() { const field_r22 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnFieldChanged(field_r22)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "span", 131);
+    i0.ɵɵelementStart(17, "span", 133);
     i0.ɵɵtext(18, "*");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(19, "button", 132);
+    i0.ɵɵelementStart(19, "button", 134);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Template_button_click_19_listener() { const ɵ$index_430_r28 = i0.ɵɵrestoreView(_r20).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.RemoveFieldMapping(ɵ$index_430_r28)); });
     i0.ɵɵelement(20, "i", 28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(21, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_Template, 10, 0, "div", 133);
+    i0.ɵɵconditionalCreate(21, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Conditional_21_Template, 10, 0, "div", 135);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r22 = ctx.$implicit;
@@ -1075,8 +1064,8 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_F
     i0.ɵɵconditional(field_r22.ShowTransformEditor && field_r22.TransformPipeline.length > 0 ? 21 : -1);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 107);
-    i0.ɵɵrepeaterCreate(1, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Template, 22, 10, "div", 115, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(0, "div", 108);
+    i0.ɵɵrepeaterCreate(1, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_For_2_Template, 22, 10, "div", 117, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1084,7 +1073,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_T
     i0.ɵɵrepeater(ctx_r1.ActiveEditableFields);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 192);
+    i0.ɵɵelement(0, "mj-loading", 194);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 15);
@@ -1121,7 +1110,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_C
     i0.ɵɵrepeater(ctx_r1.GetPreviewColumns(ctx_r1.SourcePreviewData));
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 193)(1, "table", 194)(2, "thead")(3, "tr");
+    i0.ɵɵelementStart(0, "div", 195)(1, "table", 196)(2, "thead")(3, "tr");
     i0.ɵɵrepeaterCreate(4, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Conditional_9_For_5_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "tbody");
@@ -1136,15 +1125,15 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_C
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     const _r47 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 111)(1, "div", 190)(2, "h4");
-    i0.ɵɵelement(3, "i", 191);
+    i0.ɵɵelementStart(0, "div", 112)(1, "div", 192)(2, "h4");
+    i0.ɵɵelement(3, "i", 193);
     i0.ɵɵtext(4, " Source Data Preview");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "button", 27);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r47); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.CloseSourcePreview()); });
     i0.ɵɵelement(6, "i", 28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Conditional_7_Template, 1, 0, "mj-loading", 192)(8, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Conditional_8_Template, 2, 0, "p", 15)(9, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Conditional_9_Template, 9, 0, "div", 193);
+    i0.ɵɵconditionalCreate(7, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Conditional_7_Template, 1, 0, "mj-loading", 194)(8, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Conditional_8_Template, 2, 0, "p", 15)(9, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Conditional_9_Template, 9, 0, "div", 195);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1152,7 +1141,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_T
     i0.ɵɵconditional(ctx_r1.IsLoadingSourcePreview ? 7 : ctx_r1.SourcePreviewData.length === 0 ? 8 : 9);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 195);
+    i0.ɵɵelement(0, "mj-loading", 197);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 15);
@@ -1189,7 +1178,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_C
     i0.ɵɵrepeater(ctx_r1.GetPreviewColumns(ctx_r1.DestPreviewData));
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 193)(1, "table", 194)(2, "thead")(3, "tr");
+    i0.ɵɵelementStart(0, "div", 195)(1, "table", 196)(2, "thead")(3, "tr");
     i0.ɵɵrepeaterCreate(4, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Conditional_9_For_5_Template, 2, 1, "th", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "tbody");
@@ -1204,7 +1193,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_C
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r51 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 111)(1, "div", 190)(2, "h4");
+    i0.ɵɵelementStart(0, "div", 112)(1, "div", 192)(2, "h4");
     i0.ɵɵelement(3, "i", 35);
     i0.ɵɵtext(4, " Destination Data Preview");
     i0.ɵɵelementEnd();
@@ -1212,7 +1201,7 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_T
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r51); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.CloseDestPreview()); });
     i0.ɵɵelement(6, "i", 28);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Conditional_7_Template, 1, 0, "mj-loading", 195)(8, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Conditional_8_Template, 2, 0, "p", 15)(9, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Conditional_9_Template, 9, 0, "div", 193);
+    i0.ɵɵconditionalCreate(7, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Conditional_7_Template, 1, 0, "mj-loading", 197)(8, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Conditional_8_Template, 2, 0, "p", 15)(9, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Conditional_9_Template, 9, 0, "div", 195);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1221,19 +1210,19 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_T
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_0_Template, 9, 4, "div", 100);
-    i0.ɵɵconditionalCreate(1, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_1_Template, 5, 0, "div", 101);
-    i0.ɵɵelementStart(2, "div", 102)(3, "h3", 103);
+    i0.ɵɵconditionalCreate(0, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_0_Template, 9, 2, "div", 101);
+    i0.ɵɵconditionalCreate(1, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_1_Template, 5, 0, "div", 102);
+    i0.ɵɵelementStart(2, "div", 103)(3, "h3", 104);
     i0.ɵɵtext(4, " Field Mappings ");
-    i0.ɵɵelementStart(5, "span", 104);
+    i0.ɵɵelementStart(5, "span", 105);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 105)(8, "button", 106);
+    i0.ɵɵelementStart(7, "div", 106)(8, "button", 107);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RerunAutoMap()); });
     i0.ɵɵelement(9, "i", 36);
     i0.ɵɵtext(10, " Auto-Map ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 89);
+    i0.ɵɵelementStart(11, "button", 90);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.AddFieldMapping()); });
     i0.ɵɵelement(12, "i", 21);
     i0.ɵɵtext(13, " Add Field ");
@@ -1242,19 +1231,19 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Template(rf, ctx
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SaveFieldMappings()); });
     i0.ɵɵconditionalCreate(15, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_15_Template, 2, 0)(16, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_16_Template, 2, 0);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(17, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_17_Template, 4, 0, "p", 15)(18, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_Template, 3, 0, "div", 107);
-    i0.ɵɵelementStart(19, "div", 108)(20, "div", 109)(21, "button", 52);
+    i0.ɵɵconditionalCreate(17, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_17_Template, 4, 0, "p", 15)(18, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_18_Template, 3, 0, "div", 108);
+    i0.ɵɵelementStart(19, "div", 109)(20, "div", 110)(21, "button", 53);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.LoadSourcePreview()); });
-    i0.ɵɵelement(22, "i", 110);
+    i0.ɵɵelement(22, "i", 111);
     i0.ɵɵtext(23, " Preview Source ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "button", 52);
+    i0.ɵɵelementStart(24, "button", 53);
     i0.ɵɵlistener("click", function MappingWorkspaceComponent_Conditional_6_Conditional_12_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.LoadDestPreview()); });
     i0.ɵɵelement(25, "i", 35);
     i0.ɵɵtext(26, " Preview Destination ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(27, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Template, 10, 1, "div", 111);
-    i0.ɵɵconditionalCreate(28, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Template, 10, 1, "div", 111);
+    i0.ɵɵconditionalCreate(27, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_27_Template, 10, 1, "div", 112);
+    i0.ɵɵconditionalCreate(28, MappingWorkspaceComponent_Conditional_6_Conditional_12_Conditional_28_Template, 10, 1, "div", 112);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1264,19 +1253,17 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_12_Template(rf, ctx
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate1("(", ctx_r1.ActiveEditableFields.length, ")");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("look", "outline")("size", "small")("disabled", ctx_r1.IsLoadingSourceFields);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("look", "outline")("size", "small");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("themeColor", "primary")("size", "small")("disabled", !ctx_r1.HasDirtyFields || ctx_r1.IsSavingFields);
+    i0.ɵɵproperty("disabled", ctx_r1.IsLoadingSourceFields);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("disabled", !ctx_r1.HasDirtyFields || ctx_r1.IsSavingFields);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.IsSavingFields ? 15 : 16);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.ActiveEditableFields.length === 0 ? 17 : 18);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("look", "outline")("size", "small")("disabled", ctx_r1.IsLoadingSourcePreview);
+    i0.ɵɵproperty("disabled", ctx_r1.IsLoadingSourcePreview);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("look", "outline")("size", "small")("disabled", ctx_r1.IsLoadingDestPreview);
+    i0.ɵɵproperty("disabled", ctx_r1.IsLoadingDestPreview);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.ShowSourcePreview ? 27 : -1);
     i0.ɵɵadvance();
@@ -1296,25 +1283,25 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_18_Template(rf, ctx
     i0.ɵɵelementEnd();
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_19_Conditional_22_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 201)(1, "div", 202);
+    i0.ɵɵelementStart(0, "div", 203)(1, "div", 204);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 203)(4, "div", 204)(5, "span", 205);
+    i0.ɵɵelementStart(3, "div", 205)(4, "div", 206)(5, "span", 207);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 206);
+    i0.ɵɵelementStart(7, "span", 208);
     i0.ɵɵtext(8, "Created");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 204)(10, "span", 205);
+    i0.ɵɵelementStart(9, "div", 206)(10, "span", 207);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 206);
+    i0.ɵɵelementStart(12, "span", 208);
     i0.ɵɵtext(13, "Updated");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 204)(15, "span", 205);
+    i0.ɵɵelementStart(14, "div", 206)(15, "span", 207);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "span", 206);
+    i0.ɵɵelementStart(17, "span", 208);
     i0.ɵɵtext(18, "Errors");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -1331,36 +1318,36 @@ function MappingWorkspaceComponent_Conditional_6_Conditional_19_Conditional_22_F
     i0.ɵɵtextInterpolate1(" ", detail_r55.RecordsErrored, " ");
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_19_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h4", 200);
+    i0.ɵɵelementStart(0, "h4", 202);
     i0.ɵɵtext(1, "Per-Entity Stats");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(2, MappingWorkspaceComponent_Conditional_6_Conditional_19_Conditional_22_For_3_Template, 19, 6, "div", 201, _forTrack3);
+    i0.ɵɵrepeaterCreate(2, MappingWorkspaceComponent_Conditional_6_Conditional_19_Conditional_22_For_3_Template, 19, 6, "div", 203, _forTrack3);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.RunEntityDetails);
 } }
 function MappingWorkspaceComponent_Conditional_6_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 196)(1, "div", 197)(2, "span", 198);
+    i0.ɵɵelementStart(0, "div", 198)(1, "div", 199)(2, "span", 200);
     i0.ɵɵtext(3, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 199);
+    i0.ɵɵelementStart(4, "span", 201);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 197)(7, "span", 198);
+    i0.ɵɵelementStart(6, "div", 199)(7, "span", 200);
     i0.ɵɵtext(8, "Started");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 197)(12, "span", 198);
+    i0.ɵɵelementStart(11, "div", 199)(12, "span", 200);
     i0.ɵɵtext(13, "Total Records");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(14, "span");
     i0.ɵɵtext(15);
     i0.ɵɵpipe(16, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 197)(18, "span", 198);
+    i0.ɵɵelementStart(17, "div", 199)(18, "span", 200);
     i0.ɵɵtext(19, "Run By");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(20, "span");
@@ -1387,14 +1374,14 @@ function MappingWorkspaceComponent_Conditional_6_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "div", 6)(3, "label", 7);
     i0.ɵɵtext(4, "Integration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "kendo-dropdownlist", 8);
-    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Template_kendo_dropdownlist_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.SelectedIntegrationID, $event) || (ctx_r1.SelectedIntegrationID = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("valueChange", function MappingWorkspaceComponent_Conditional_6_Template_kendo_dropdownlist_valueChange_5_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnIntegrationChange($event)); });
+    i0.ɵɵelementStart(5, "mj-dropdown", 8);
+    i0.ɵɵtwoWayListener("ngModelChange", function MappingWorkspaceComponent_Conditional_6_Template_mj_dropdown_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.SelectedIntegrationID, $event) || (ctx_r1.SelectedIntegrationID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ValueChange", function MappingWorkspaceComponent_Conditional_6_Template_mj_dropdown_ValueChange_5_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnIntegrationChange($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, MappingWorkspaceComponent_Conditional_6_Conditional_6_Template, 1, 0, "mj-loading", 9)(7, MappingWorkspaceComponent_Conditional_6_Conditional_7_Template, 12, 5);
+    i0.ɵɵconditionalCreate(6, MappingWorkspaceComponent_Conditional_6_Conditional_6_Template, 1, 0, "mj-loading", 9)(7, MappingWorkspaceComponent_Conditional_6_Conditional_7_Template, 12, 3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "div", 10);
-    i0.ɵɵconditionalCreate(9, MappingWorkspaceComponent_Conditional_6_Conditional_9_Template, 4, 0, "div", 11)(10, MappingWorkspaceComponent_Conditional_6_Conditional_10_Template, 37, 9, "div", 12)(11, MappingWorkspaceComponent_Conditional_6_Conditional_11_Template, 1, 0, "mj-loading", 13)(12, MappingWorkspaceComponent_Conditional_6_Conditional_12_Template, 29, 21);
+    i0.ɵɵconditionalCreate(9, MappingWorkspaceComponent_Conditional_6_Conditional_9_Template, 4, 0, "div", 11)(10, MappingWorkspaceComponent_Conditional_6_Conditional_10_Template, 37, 9, "div", 12)(11, MappingWorkspaceComponent_Conditional_6_Conditional_11_Template, 1, 0, "mj-loading", 13)(12, MappingWorkspaceComponent_Conditional_6_Conditional_12_Template, 29, 11);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(13, "div", 14)(14, "h4", 7);
     i0.ɵɵtext(15, "Last Run Details");
@@ -1404,9 +1391,9 @@ function MappingWorkspaceComponent_Conditional_6_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("data", ctx_r1.Integrations)("textField", "Name")("valueField", "ID")("valuePrimitive", true);
+    i0.ɵɵproperty("Data", ctx_r1.Integrations)("ValuePrimitive", true);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.SelectedIntegrationID);
-    i0.ɵɵproperty("defaultItem", i0.ɵɵpureFunction0(9, _c0));
+    i0.ɵɵproperty("DefaultItem", i0.ɵɵpureFunction0(7, _c0));
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.IsLoadingEntityMaps ? 6 : ctx_r1.SelectedIntegrationID ? 7 : -1);
     i0.ɵɵadvance(3);
@@ -1482,6 +1469,7 @@ let MappingWorkspaceComponent = class MappingWorkspaceComponent extends BaseReso
     pendingCounter = 0;
     async ngOnInit() {
         await this.LoadIntegrations();
+        this.NotifyLoadComplete();
     }
     // =====================================================================
     // Computed Properties
@@ -2346,17 +2334,17 @@ let MappingWorkspaceComponent = class MappingWorkspaceComponent extends BaseReso
         return 'fa-solid fa-diagram-project';
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵMappingWorkspaceComponent_BaseFactory; return function MappingWorkspaceComponent_Factory(__ngFactoryType__) { return (ɵMappingWorkspaceComponent_BaseFactory || (ɵMappingWorkspaceComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MappingWorkspaceComponent)))(__ngFactoryType__ || MappingWorkspaceComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MappingWorkspaceComponent, selectors: [["app-mapping-workspace"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 1, consts: [[1, "mapping-workspace"], [1, "workspace-header"], [1, "fa-solid", "fa-diagram-project"], ["text", "Loading integrations...", "size", "medium"], [1, "workspace-body"], [1, "left-panel"], [1, "integration-selector"], [1, "panel-label"], [3, "ngModelChange", "valueChange", "data", "textField", "valueField", "valuePrimitive", "ngModel", "defaultItem"], ["text", "Loading entity maps...", "size", "small"], [1, "center-panel"], [1, "placeholder-message"], [1, "pending-entity-panel"], ["text", "Loading field maps...", "size", "medium"], [1, "right-panel"], [1, "empty-hint"], ["text", "Loading...", "size", "small"], [1, "entity-map-header"], [1, "panel-label", 2, "margin", "0"], [1, "header-actions"], ["kendoButton", "", "title", "Add entity map", 3, "click", "look", "size"], [1, "fa-solid", "fa-plus"], [1, "add-map-panel"], [1, "search-box"], [1, "entity-map-list"], [1, "add-panel-top"], [1, "fa-solid", "fa-plus-circle"], [1, "add-panel-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "form-group"], [1, "source-loading"], [1, "discover-error-inline"], [3, "data", "textField", "valueField", "valuePrimitive", "ngModel", "filterable", "defaultItem"], [1, "target-mode-toggle"], [1, "target-mode-btn", 3, "click"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "new-entity-form"], [3, "ngModelChange", "data", "ngModel"], [1, "add-form-actions"], ["kendoButton", "", 3, "click", "themeColor", "size", "disabled"], ["kendoButton", "", 3, "click", "size"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-triangle-exclamation"], [3, "ngModelChange", "valueChange", "data", "textField", "valueField", "valuePrimitive", "ngModel", "filterable", "defaultItem"], [3, "ngModelChange", "data", "textField", "valueField", "valuePrimitive", "ngModel", "filterable", "defaultItem"], [1, "section-label"], [3, "ngModelChange", "valueChange", "data", "ngModel", "allowCustom", "filterable", "placeholder"], [1, "form-row"], ["kendoTextBox", "", 3, "ngModelChange", "ngModel", "placeholder"], [1, "auto-hint"], [1, "ddl-preview-section"], ["kendoButton", "", 3, "click", "look", "size", "disabled"], [1, "discover-error-inline", 2, "margin-top", "8px"], [1, "ddl-preview-code"], [1, "fa-solid", "fa-check"], ["kendoTextBox", "", "placeholder", "Search entity maps...", 3, "ngModelChange", "ngModel"], ["href", "javascript:void(0)", 2, "color", "var(--mj-brand-primary)", 3, "click"], [1, "entity-map-item", 3, "selected", "pending"], [1, "entity-map-item", 3, "click"], [1, "em-top-row"], [1, "em-name"], [1, "em-arrow"], [1, "fa-solid", "fa-arrow-right"], [1, "em-entity"], [1, "em-bottom-row"], [1, "em-badges"], [1, "badge", "badge-direction"], [1, "badge", "badge-pending"], [1, "em-actions"], ["title", "Delete", 1, "em-delete", 3, "click"], [1, "fa-solid", "fa-trash-can"], [3, "ngModel", "size"], [3, "ngModelChange", "valueChange", "ngModel", "size"], [1, "fa-solid", "fa-hand-pointer"], [1, "pending-icon"], [1, "fa-solid", "fa-clock"], [1, "pending-steps"], [1, "step"], [1, "step-circle", "done"], [1, "step-label"], [1, "step-connector"], [1, "step-circle", 3, "ngClass"], [1, "step-circle", "future"], [1, "ddl-preview-inline"], [1, "pending-fields-section"], [2, "font-size", "14px", "margin-bottom", "8px"], [1, "ddl-code-block"], [1, "ddl-actions"], ["kendoButton", "", 3, "click", "look", "size"], [1, "fa-solid", "fa-copy"], [2, "font-size", "14px", "margin", "16px 0 8px"], [1, "fa-solid", "fa-list"], [2, "color", "var(--mj-text-muted)", "font-weight", "400"], [1, "pending-fields-list"], [1, "pending-field-item"], [1, "pending-field-name"], [1, "pending-field-type"], ["title", "Key field", 1, "fa-solid", "fa-key", "key-icon"], [1, "pending-field-req"], [1, "auto-map-banner"], [1, "validation-banner"], [1, "field-mapping-header"], [1, "panel-title"], [1, "field-count"], [1, "field-mapping-actions"], ["kendoButton", "", "title", "Auto-match source and destination fields by name", 3, "click", "look", "size", "disabled"], [1, "field-map-cards"], [1, "data-preview-section"], [1, "preview-actions"], [1, "fa-solid", "fa-cloud-arrow-down"], [1, "preview-panel"], [1, "banner-text"], [1, "validation-warnings"], [1, "fa-solid", "fa-floppy-disk"], [1, "field-map-card", 3, "validation-error", "has-transform"], [1, "field-map-card"], [1, "fmc-row"], [1, "fmc-source"], ["type", "text", "placeholder", "Source field name", 1, "fmc-input", 3, "ngModel"], [1, "fmc-transform-zone"], [1, "fmc-transform-pill", 3, "title"], ["title", "Click to change transform type", 1, "fmc-transform-pill", "fmc-transform-direct"], [1, "fmc-dest"], [1, "fmc-select", 3, "ngModel"], ["type", "text", "placeholder", "Destination field", 1, "fmc-input", 3, "ngModel"], [1, "fmc-flags"], ["title", "Key field for matching", 1, "fmc-flag"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-key"], ["title", "Required field", 1, "fmc-flag"], [1, "fmc-req-star"], ["title", "Remove mapping", 1, "fmc-remove", 3, "click"], [1, "fmc-transform-editor"], ["type", "text", "placeholder", "Source field name", 1, "fmc-input", 3, "ngModelChange", "ngModel"], [1, "fmc-field-name"], [1, "fmc-badges"], [1, "fmc-badge", "badge-type"], ["title", "Primary Key", 1, "fmc-badge", "badge-pk"], ["title", "Required", 1, "fmc-badge", "badge-req"], ["title", "Read-Only", 1, "fmc-badge", "badge-ro"], [1, "fmc-transform-pill", 3, "click", "title"], [1, "fmc-step-count"], ["title", "Click to change transform type", 1, "fmc-transform-pill", "fmc-transform-direct", 3, "click"], [1, "fmc-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["type", "text", "placeholder", "Destination field", 1, "fmc-input", 3, "ngModelChange", "ngModel"], [1, "fmc-te-header"], [1, "fmc-te-title"], ["title", "Add another step", 1, "fmc-te-add", 3, "click"], [1, "fmc-te-step"], [1, "fmc-te-step-header"], [1, "fmc-te-step-num"], [1, "fmc-te-type-select", 3, "ngModelChange", "ngModel"], ["title", "On error", 1, "fmc-te-error-select", 3, "ngModelChange", "ngModel"], ["value", "Fail"], ["value", "Skip"], ["value", "Null"], ["title", "Remove step", 1, "fmc-te-remove-step", 3, "click"], [1, "fmc-te-config"], [1, "fmc-te-field"], [1, "fmc-te-row"], [1, "fmc-te-field", "fmc-te-sm"], ["type", "text", "placeholder", "Leave empty for no default", 1, "fmc-input", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "e.g. (\\d{3})-(\\d{4})", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "e.g. $1$2", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "gi", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", ",", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], ["type", "number", "min", "0", 1, "fmc-input", 3, "ngModelChange", "ngModel"], [1, "fmc-combine-chips"], [1, "fmc-chip", 3, "selected"], ["type", "text", "placeholder", " ", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], [1, "fmc-chip", 3, "click"], [1, "fmc-lookup-table"], [1, "fmc-lookup-row"], [1, "fmc-lookup-add", 3, "click"], ["type", "text", "placeholder", "null", 1, "fmc-input", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "Source value", 1, "fmc-input", 3, "change", "value"], [1, "fa-solid", "fa-arrow-right", "fmc-lookup-arrow"], ["type", "text", "placeholder", "Mapped value", 1, "fmc-input", 3, "change", "value"], [1, "fmc-lookup-del", 3, "click"], ["value", "date"], ["value", "number"], ["value", "string"], ["type", "text", "placeholder", "ISO or decimal places", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], ["value", "boolean"], ["type", "number", "min", "1", 1, "fmc-input", 3, "ngModelChange", "ngModel"], [1, "fmc-te-hint"], ["placeholder", "value.toUpperCase()", "rows", "2", 1, "fmc-input", "mono", "fmc-textarea", 3, "ngModelChange", "ngModel"], [1, "preview-panel-header"], [1, "fa-solid", "fa-cloud"], ["text", "Loading source data...", "size", "small"], [1, "preview-table-wrapper"], [1, "preview-table"], ["text", "Loading destination data...", "size", "small"], [1, "run-summary-card"], [1, "run-summary-row"], [1, "label"], [1, "run-status"], [1, "panel-label", 2, "margin-top", "16px"], [1, "entity-stat-card"], [1, "entity-stat-name"], [1, "entity-stat-grid"], [1, "mini-stat"], [1, "mini-val"], [1, "mini-label"]], template: function MappingWorkspaceComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MappingWorkspaceComponent, selectors: [["app-mapping-workspace"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 1, consts: [[1, "mapping-workspace"], [1, "workspace-header"], [1, "fa-solid", "fa-diagram-project"], ["text", "Loading integrations...", "size", "medium"], [1, "workspace-body"], [1, "left-panel"], [1, "integration-selector"], [1, "panel-label"], ["TextField", "Name", "ValueField", "ID", 3, "ngModelChange", "ValueChange", "Data", "ValuePrimitive", "ngModel", "DefaultItem"], ["text", "Loading entity maps...", "size", "small"], [1, "center-panel"], [1, "placeholder-message"], [1, "pending-entity-panel"], ["text", "Loading field maps...", "size", "medium"], [1, "right-panel"], [1, "empty-hint"], ["text", "Loading...", "size", "small"], [1, "entity-map-header"], [1, "panel-label", 2, "margin", "0"], [1, "header-actions"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Add entity map", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "add-map-panel"], [1, "search-box"], [1, "entity-map-list"], [1, "add-panel-top"], [1, "fa-solid", "fa-plus-circle"], [1, "add-panel-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "form-group"], [1, "source-loading"], [1, "discover-error-inline"], ["TextField", "Label", "ValueField", "Name", 3, "Data", "ValuePrimitive", "ngModel", "Filterable", "DefaultItem"], [1, "target-mode-toggle"], [1, "target-mode-btn", 3, "click"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "new-entity-form"], [3, "ngModelChange", "Data", "ngModel"], [1, "add-form-actions"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], ["mjButton", "", "size", "sm", 3, "click"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-triangle-exclamation"], ["TextField", "Label", "ValueField", "Name", 3, "ngModelChange", "ValueChange", "Data", "ValuePrimitive", "ngModel", "Filterable", "DefaultItem"], ["TextField", "Name", "ValueField", "ID", 3, "Data", "ValuePrimitive", "ngModel", "Filterable", "DefaultItem"], ["TextField", "Name", "ValueField", "ID", 3, "ngModelChange", "Data", "ValuePrimitive", "ngModel", "Filterable", "DefaultItem"], [1, "section-label"], ["Placeholder", "Select or type schema...", 3, "ngModelChange", "ValueChange", "Data", "ngModel", "AllowCustom", "Filterable"], [1, "form-row"], [1, "mj-input", 3, "ngModelChange", "ngModel", "placeholder"], [1, "auto-hint"], [1, "ddl-preview-section"], ["mjButton", "", "variant", "outline", "size", "sm", 3, "click", "disabled"], [1, "discover-error-inline", 2, "margin-top", "8px"], [1, "ddl-preview-code"], [1, "fa-solid", "fa-check"], ["placeholder", "Search entity maps...", 1, "mj-input", 3, "ngModelChange", "ngModel"], ["href", "javascript:void(0)", 2, "color", "var(--mj-brand-primary)", 3, "click"], [1, "entity-map-item", 3, "selected", "pending"], [1, "entity-map-item", 3, "click"], [1, "em-top-row"], [1, "em-name"], [1, "em-arrow"], [1, "fa-solid", "fa-arrow-right"], [1, "em-entity"], [1, "em-bottom-row"], [1, "em-badges"], [1, "badge", "badge-direction"], [1, "badge", "badge-pending"], [1, "em-actions"], ["title", "Delete", 1, "em-delete", 3, "click"], [1, "fa-solid", "fa-trash-can"], [3, "ngModel"], [3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-hand-pointer"], [1, "pending-icon"], [1, "fa-solid", "fa-clock"], [1, "pending-steps"], [1, "step"], [1, "step-circle", "done"], [1, "step-label"], [1, "step-connector"], [1, "step-circle", 3, "ngClass"], [1, "step-circle", "future"], [1, "ddl-preview-inline"], [1, "pending-fields-section"], [2, "font-size", "14px", "margin-bottom", "8px"], [1, "ddl-code-block"], [1, "ddl-actions"], ["mjButton", "", "variant", "outline", "size", "sm", 3, "click"], [1, "fa-solid", "fa-copy"], [2, "font-size", "14px", "margin", "16px 0 8px"], [1, "fa-solid", "fa-list"], [2, "color", "var(--mj-text-muted)", "font-weight", "400"], [1, "pending-fields-list"], [1, "pending-field-item"], [1, "pending-field-name"], [1, "pending-field-type"], ["title", "Key field", 1, "fa-solid", "fa-key", "key-icon"], [1, "pending-field-req"], [1, "auto-map-banner"], [1, "validation-banner"], [1, "field-mapping-header"], [1, "panel-title"], [1, "field-count"], [1, "field-mapping-actions"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Auto-match source and destination fields by name", 3, "click", "disabled"], [1, "field-map-cards"], [1, "data-preview-section"], [1, "preview-actions"], [1, "fa-solid", "fa-cloud-arrow-down"], [1, "preview-panel"], [1, "banner-text"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click"], [1, "validation-warnings"], [1, "fa-solid", "fa-floppy-disk"], [1, "field-map-card", 3, "validation-error", "has-transform"], [1, "field-map-card"], [1, "fmc-row"], [1, "fmc-source"], ["type", "text", "placeholder", "Source field name", 1, "fmc-input", 3, "ngModel"], [1, "fmc-transform-zone"], [1, "fmc-transform-pill", 3, "title"], ["title", "Click to change transform type", 1, "fmc-transform-pill", "fmc-transform-direct"], [1, "fmc-dest"], [1, "fmc-select", 3, "ngModel"], ["type", "text", "placeholder", "Destination field", 1, "fmc-input", 3, "ngModel"], [1, "fmc-flags"], ["title", "Key field for matching", 1, "fmc-flag"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-key"], ["title", "Required field", 1, "fmc-flag"], [1, "fmc-req-star"], ["title", "Remove mapping", 1, "fmc-remove", 3, "click"], [1, "fmc-transform-editor"], ["type", "text", "placeholder", "Source field name", 1, "fmc-input", 3, "ngModelChange", "ngModel"], [1, "fmc-field-name"], [1, "fmc-badges"], [1, "fmc-badge", "badge-type"], ["title", "Primary Key", 1, "fmc-badge", "badge-pk"], ["title", "Required", 1, "fmc-badge", "badge-req"], ["title", "Read-Only", 1, "fmc-badge", "badge-ro"], [1, "fmc-transform-pill", 3, "click", "title"], [1, "fmc-step-count"], ["title", "Click to change transform type", 1, "fmc-transform-pill", "fmc-transform-direct", 3, "click"], [1, "fmc-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], ["type", "text", "placeholder", "Destination field", 1, "fmc-input", 3, "ngModelChange", "ngModel"], [1, "fmc-te-header"], [1, "fmc-te-title"], ["title", "Add another step", 1, "fmc-te-add", 3, "click"], [1, "fmc-te-step"], [1, "fmc-te-step-header"], [1, "fmc-te-step-num"], [1, "fmc-te-type-select", 3, "ngModelChange", "ngModel"], ["title", "On error", 1, "fmc-te-error-select", 3, "ngModelChange", "ngModel"], ["value", "Fail"], ["value", "Skip"], ["value", "Null"], ["title", "Remove step", 1, "fmc-te-remove-step", 3, "click"], [1, "fmc-te-config"], [1, "fmc-te-field"], [1, "fmc-te-row"], [1, "fmc-te-field", "fmc-te-sm"], ["type", "text", "placeholder", "Leave empty for no default", 1, "fmc-input", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "e.g. (\\d{3})-(\\d{4})", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "e.g. $1$2", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "gi", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", ",", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], ["type", "number", "min", "0", 1, "fmc-input", 3, "ngModelChange", "ngModel"], [1, "fmc-combine-chips"], [1, "fmc-chip", 3, "selected"], ["type", "text", "placeholder", " ", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], [1, "fmc-chip", 3, "click"], [1, "fmc-lookup-table"], [1, "fmc-lookup-row"], [1, "fmc-lookup-add", 3, "click"], ["type", "text", "placeholder", "null", 1, "fmc-input", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "Source value", 1, "fmc-input", 3, "change", "value"], [1, "fa-solid", "fa-arrow-right", "fmc-lookup-arrow"], ["type", "text", "placeholder", "Mapped value", 1, "fmc-input", 3, "change", "value"], [1, "fmc-lookup-del", 3, "click"], ["value", "date"], ["value", "number"], ["value", "string"], ["type", "text", "placeholder", "ISO or decimal places", 1, "fmc-input", "mono", 3, "ngModelChange", "ngModel"], ["value", "boolean"], ["type", "number", "min", "1", 1, "fmc-input", 3, "ngModelChange", "ngModel"], [1, "fmc-te-hint"], ["placeholder", "value.toUpperCase()", "rows", "2", 1, "fmc-input", "mono", "fmc-textarea", 3, "ngModelChange", "ngModel"], [1, "preview-panel-header"], [1, "fa-solid", "fa-cloud"], ["text", "Loading source data...", "size", "small"], [1, "preview-table-wrapper"], [1, "preview-table"], ["text", "Loading destination data...", "size", "small"], [1, "run-summary-card"], [1, "run-summary-row"], [1, "label"], [1, "run-status"], [1, "panel-label", 2, "margin-top", "16px"], [1, "entity-stat-card"], [1, "entity-stat-name"], [1, "entity-stat-grid"], [1, "mini-stat"], [1, "mini-val"], [1, "mini-label"]], template: function MappingWorkspaceComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h2");
             i0.ɵɵelement(3, "i", 2);
             i0.ɵɵtext(4, " Mapping Workspace");
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(5, MappingWorkspaceComponent_Conditional_5_Template, 1, 0, "mj-loading", 3)(6, MappingWorkspaceComponent_Conditional_6_Template, 20, 10, "div", 4);
+            i0.ɵɵconditionalCreate(5, MappingWorkspaceComponent_Conditional_5_Template, 1, 0, "mj-loading", 3)(6, MappingWorkspaceComponent_Conditional_6_Template, 20, 8, "div", 4);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(5);
             i0.ɵɵconditional(ctx.IsLoadingIntegrations ? 5 : 6);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.CheckboxControlValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.MinValidator, i2.NgModel, i3.ButtonComponent, i4.ComboBoxComponent, i4.DropDownListComponent, i5.TextBoxDirective, i5.SwitchComponent, i6.LoadingComponent, i1.DecimalPipe], styles: [".mapping-workspace[_ngcontent-%COMP%] { padding: 24px; height: 100%; display: flex; flex-direction: column; }\n.workspace-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 16px;\n}\n.workspace-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0; font-size: 20px; font-weight: 600;\n}\n.workspace-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 8px; color: var(--mj-color-indigo-500); }\n\n\n\n.workspace-body[_ngcontent-%COMP%] {\n  display: flex; flex: 1; gap: 1px; background: var(--mj-border-default);\n  border-radius: 10px; overflow: hidden; min-height: 500px;\n}\n\n.left-panel[_ngcontent-%COMP%] { width: 320px; min-width: 280px; background: var(--mj-bg-surface); padding: 16px; overflow-y: auto; flex-shrink: 0; }\n.center-panel[_ngcontent-%COMP%] { flex: 1; background: var(--mj-bg-surface); padding: 20px; overflow-y: auto; }\n.right-panel[_ngcontent-%COMP%] { width: 280px; min-width: 240px; background: var(--mj-bg-surface); padding: 16px; overflow-y: auto; flex-shrink: 0; }\n\n\n\n.panel-label[_ngcontent-%COMP%] {\n  font-size: 11px; font-weight: 700; color: var(--mj-text-disabled);\n  text-transform: uppercase; letter-spacing: 0.6px;\n  margin: 0 0 6px 0; display: block;\n}\n.panel-title[_ngcontent-%COMP%] { margin: 0 0 12px 0; font-size: 16px; font-weight: 600; }\n.panel-title[_ngcontent-%COMP%]   .field-count[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-weight: 400; font-size: 13px; }\n.empty-hint[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 13px; font-style: italic; }\n.search-box[_ngcontent-%COMP%] { margin-bottom: 12px; }\n\n\n\n.integration-selector[_ngcontent-%COMP%] { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--mj-border-subtle); }\n\n\n\n.entity-map-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 10px;\n}\n.header-actions[_ngcontent-%COMP%] { display: flex; gap: 4px; }\n\n\n\n.add-map-panel[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page); border: 1px solid var(--mj-border-default); border-radius: 10px;\n  padding: 16px; margin-bottom: 14px;\n}\n.add-panel-top[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 14px;\n}\n.add-panel-top[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] { margin: 0; font-size: 14px; font-weight: 600; }\n.add-panel-close[_ngcontent-%COMP%] {\n  background: none; border: none; cursor: pointer; color: var(--mj-text-disabled); font-size: 14px;\n}\n.add-panel-close[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n\n.form-group[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }\n.form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.form-row[_ngcontent-%COMP%] { display: flex; gap: 10px; }\n.form-row[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] { flex: 1; }\n\n.source-loading[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 8px;\n  font-size: 12px; color: var(--mj-text-disabled); padding: 6px 0;\n}\n.source-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n.discover-error-inline[_ngcontent-%COMP%] {\n  font-size: 12px; color: var(--mj-color-error-600); padding: 6px 0;\n}\n.discover-error-inline[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 4px; }\n\n\n\n.target-mode-toggle[_ngcontent-%COMP%] {\n  display: flex; border: 1px solid var(--mj-border-default); border-radius: 6px;\n  overflow: hidden; margin-bottom: 12px;\n}\n.target-mode-btn[_ngcontent-%COMP%] {\n  flex: 1; padding: 8px 12px; font-size: 12px; font-weight: 600;\n  text-align: center; cursor: pointer; background: var(--mj-bg-surface); border: none;\n  color: var(--mj-text-muted); transition: all 0.15s;\n}\n.target-mode-btn[_ngcontent-%COMP%]:first-child { border-right: 1px solid var(--mj-border-default); }\n.target-mode-btn.active[_ngcontent-%COMP%] { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n.target-mode-btn[_ngcontent-%COMP%]:not(.active):hover { background: var(--mj-status-info-bg); color: var(--mj-color-indigo-500); }\n.target-mode-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 4px; }\n\n\n\n.new-entity-form[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 8px;\n  padding: 14px; margin-bottom: 12px;\n}\n.new-entity-form[_ngcontent-%COMP%]   .section-label[_ngcontent-%COMP%] {\n  font-size: 11px; font-weight: 700; color: var(--mj-color-indigo-500);\n  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;\n}\n.auto-hint[_ngcontent-%COMP%] { font-size: 10px; color: var(--mj-text-disabled); font-style: italic; }\n\n\n\n.ddl-preview-section[_ngcontent-%COMP%] { margin-top: 8px; }\n.ddl-preview-code[_ngcontent-%COMP%] {\n  background: var(--mj-text-primary); color: var(--mj-color-neutral-300); padding: 10px;\n  border-radius: 4px; font-size: 11px; line-height: 1.5;\n  max-height: 200px; overflow: auto; white-space: pre-wrap;\n  word-break: break-word; margin-top: 8px;\n}\n\n.add-form-actions[_ngcontent-%COMP%] { display: flex; gap: 6px; padding-top: 4px; }\n\n\n\n.entity-map-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 4px; }\n.entity-map-item[_ngcontent-%COMP%] {\n  padding: 8px 10px; border-radius: 6px;\n  cursor: pointer; border: 1px solid var(--mj-border-subtle); transition: all 0.15s;\n}\n.entity-map-item[_ngcontent-%COMP%]:hover { background: var(--mj-bg-page); }\n.entity-map-item.selected[_ngcontent-%COMP%] { background: var(--mj-status-info-bg); border-color: var(--mj-color-indigo-500); }\n.entity-map-item.pending[_ngcontent-%COMP%] { border-left: 3px solid var(--mj-status-warning); }\n\n.em-top-row[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 4px;\n  font-size: 13px; margin-bottom: 4px;\n}\n.em-name[_ngcontent-%COMP%] { font-weight: 600; }\n.em-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 11px; }\n.em-entity[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.em-bottom-row[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  font-size: 11px; color: var(--mj-text-disabled);\n}\n.em-badges[_ngcontent-%COMP%] { display: flex; gap: 4px; align-items: center; }\n.badge[_ngcontent-%COMP%] {\n  font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600;\n}\n.badge-direction[_ngcontent-%COMP%] { background: var(--mj-bg-surface-hover); color: var(--mj-text-muted); }\n.badge-pending[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.em-actions[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; }\n.em-delete[_ngcontent-%COMP%] {\n  opacity: 0; transition: opacity 0.15s;\n  cursor: pointer; color: var(--mj-color-error-600); background: none; border: none;\n  padding: 2px 4px; font-size: 12px;\n}\n.entity-map-item[_ngcontent-%COMP%]:hover   .em-delete[_ngcontent-%COMP%] { opacity: 1; }\n\n\n\n.placeholder-message[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; align-items: center;\n  justify-content: center; height: 300px; color: var(--mj-text-disabled);\n}\n.placeholder-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 36px; margin-bottom: 12px; }\n.placeholder-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { text-align: center; }\n\n\n\n.pending-entity-panel[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg); border: 1px solid var(--mj-color-warning-200); border-radius: 10px;\n  padding: 24px; text-align: center;\n}\n.pending-icon[_ngcontent-%COMP%] { font-size: 40px; color: var(--mj-status-warning); margin-bottom: 12px; }\n.pending-entity-panel[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { font-size: 16px; margin-bottom: 8px; }\n.pending-entity-panel[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { font-size: 13px; color: var(--mj-text-disabled); margin-bottom: 16px; line-height: 1.5; }\n\n\n\n.pending-steps[_ngcontent-%COMP%] {\n  display: flex; gap: 0; margin: 20px 0; justify-content: center; align-items: center;\n}\n.step[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; align-items: center; gap: 6px;\n  padding: 0 16px;\n}\n.step-circle[_ngcontent-%COMP%] {\n  width: 36px; height: 36px; border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 14px; font-weight: 700;\n}\n.step-circle.done[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.step-circle.current[_ngcontent-%COMP%] { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n.step-circle.future[_ngcontent-%COMP%] { background: var(--mj-bg-surface-hover); color: var(--mj-text-disabled); }\n.step-label[_ngcontent-%COMP%] { font-size: 10px; font-weight: 600; color: var(--mj-text-disabled); text-transform: uppercase; white-space: nowrap; }\n.step-connector[_ngcontent-%COMP%] { width: 32px; height: 2px; background: var(--mj-border-default); align-self: center; margin-bottom: 18px; }\n.step-connector.done[_ngcontent-%COMP%] { background: var(--mj-color-success-700); }\n\n\n\n.ddl-preview-inline[_ngcontent-%COMP%] { margin-top: 16px; text-align: left; }\n.ddl-code-block[_ngcontent-%COMP%] {\n  background: var(--mj-text-primary); color: var(--mj-color-neutral-300); padding: 12px;\n  border-radius: 6px; font-size: 12px; line-height: 1.5;\n  max-height: 250px; overflow: auto; white-space: pre-wrap;\n}\n.ddl-actions[_ngcontent-%COMP%] { display: flex; gap: 8px; margin-top: 12px; justify-content: center; }\n\n\n\n.pending-fields-section[_ngcontent-%COMP%] { text-align: left; }\n.pending-fields-list[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; gap: 2px;\n  max-height: 200px; overflow-y: auto;\n}\n.pending-field-item[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 8px;\n  padding: 4px 8px; font-size: 13px; border-radius: 4px;\n}\n.pending-field-item[_ngcontent-%COMP%]:hover { background: var(--mj-status-warning-bg); }\n.pending-field-name[_ngcontent-%COMP%] { font-weight: 600; }\n.pending-field-type[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); background: var(--mj-bg-surface-hover); padding: 1px 6px; border-radius: 3px; }\n.pending-field-req[_ngcontent-%COMP%] { color: var(--mj-color-error-600); font-weight: 700; }\n\n\n\n.auto-map-banner[_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg); border: 1px solid var(--mj-color-info-100); border-radius: 8px;\n  padding: 12px 16px; margin-bottom: 16px;\n  display: flex; align-items: center; gap: 12px;\n}\n.auto-map-banner[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); font-size: 18px; }\n.auto-map-banner[_ngcontent-%COMP%]   .banner-text[_ngcontent-%COMP%] { flex: 1; }\n.auto-map-banner[_ngcontent-%COMP%]   .banner-text[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { font-size: 13px; color: var(--mj-text-muted); margin: 0; }\n.auto-map-banner[_ngcontent-%COMP%]   .banner-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] { color: var(--mj-text-primary); }\n\n\n\n.field-mapping-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 16px;\n}\n.field-mapping-actions[_ngcontent-%COMP%] { display: flex; gap: 6px; }\n\n\n\n.field-map-cards[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; gap: 6px;\n}\n\n.field-map-card[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  background: var(--mj-bg-surface);\n  transition: all 0.2s ease;\n  overflow: hidden;\n}\n.field-map-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: 0 2px 8px rgba(74, 108, 247, 0.06);\n}\n.field-map-card.has-transform[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-color-indigo-500);\n}\n.field-map-card.validation-error[_ngcontent-%COMP%] {\n  border-color: var(--mj-color-warning-200);\n  background: var(--mj-status-warning-bg);\n}\n\n\n\n.fmc-row[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 10px;\n  padding: 10px 14px;\n}\n\n\n\n.fmc-source[_ngcontent-%COMP%] {\n  flex: 1; min-width: 0;\n}\n.fmc-field-name[_ngcontent-%COMP%] {\n  font-size: 13px; font-weight: 600; color: var(--mj-text-primary);\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.fmc-badges[_ngcontent-%COMP%] {\n  display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap;\n}\n.fmc-badge[_ngcontent-%COMP%] {\n  font-size: 9px; font-weight: 700; padding: 1px 5px;\n  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px;\n  white-space: nowrap; line-height: 1.5;\n}\n.badge-type[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover); color: var(--mj-text-muted);\n}\n.badge-pk[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, var(--mj-color-warning-100), var(--mj-color-warning-200));\n  color: var(--mj-color-warning-800);\n}\n.badge-pk[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 8px; margin-right: 2px; }\n.badge-req[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, var(--mj-color-error-100), var(--mj-color-error-200));\n  color: var(--mj-color-error-800);\n}\n.badge-ro[_ngcontent-%COMP%] {\n  background: var(--mj-color-purple-50); color: var(--mj-color-purple-700);\n}\n\n\n\n.fmc-transform-zone[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  display: flex; align-items: center; justify-content: center;\n  width: 100px;\n}\n.fmc-arrow-btn[_ngcontent-%COMP%] {\n  width: 32px; height: 32px;\n  border-radius: 50%; border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page); color: var(--mj-text-disabled);\n  cursor: pointer; font-size: 12px;\n  display: flex; align-items: center; justify-content: center;\n  transition: all 0.2s;\n}\n.fmc-arrow-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); border-color: var(--mj-color-indigo-500);\n  transform: scale(1.1);\n}\n.fmc-transform-pill[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 4px;\n  padding: 4px 10px; border-radius: 16px;\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border: 1px solid var(--mj-color-indigo-200); color: var(--mj-color-indigo-700);\n  font-size: 11px; font-weight: 600;\n  cursor: pointer; transition: all 0.2s;\n  white-space: nowrap;\n}\n.fmc-transform-pill[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, var(--mj-color-indigo-100), var(--mj-color-indigo-200));\n  transform: scale(1.02);\n}\n.fmc-transform-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n.fmc-transform-direct[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, var(--mj-bg-page), var(--mj-bg-surface-hover));\n  border-color: var(--mj-color-neutral-300); color: var(--mj-text-muted);\n}\n.fmc-transform-direct[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border-color: var(--mj-color-indigo-200); color: var(--mj-color-indigo-700);\n}\n.fmc-step-count[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-700); color: var(--mj-bg-surface); font-size: 9px;\n  padding: 0 4px; border-radius: 8px; font-weight: 700;\n}\n\n\n\n.fmc-dest[_ngcontent-%COMP%] {\n  flex: 1; min-width: 0;\n}\n.fmc-select[_ngcontent-%COMP%] {\n  width: 100%; padding: 6px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  transition: border-color 0.15s;\n}\n.fmc-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); outline: none; box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.12); }\n\n\n\n.fmc-input[_ngcontent-%COMP%] {\n  width: 100%; padding: 5px 8px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  transition: border-color 0.15s;\n}\n.fmc-input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); outline: none; box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.12); }\n.fmc-input.mono[_ngcontent-%COMP%] { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 12px; }\n\n\n\n.fmc-flags[_ngcontent-%COMP%] {\n  display: flex; gap: 6px; flex-shrink: 0;\n}\n.fmc-flag[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 3px;\n  font-size: 11px; color: var(--mj-text-disabled); cursor: pointer;\n  padding: 2px 4px; border-radius: 4px;\n  transition: color 0.15s;\n}\n.fmc-flag[_ngcontent-%COMP%]:hover { color: var(--mj-color-indigo-500); }\n.fmc-flag[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 13px; height: 13px; cursor: pointer;\n  accent-color: var(--mj-color-indigo-500);\n}\n.fmc-flag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n.fmc-req-star[_ngcontent-%COMP%] { font-size: 14px; font-weight: 700; color: inherit; }\n\n\n\n.fmc-remove[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 13px; padding: 4px;\n  border-radius: 4px; transition: all 0.15s;\n}\n.fmc-remove[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); background: var(--mj-status-error-bg); }\n\n\n\n.fmc-transform-editor[_ngcontent-%COMP%] {\n  border-top: 1px solid var(--mj-bg-surface-hover);\n  background: linear-gradient(180deg, var(--mj-color-indigo-50) 0%, var(--mj-bg-page) 100%);\n  padding: 12px 14px;\n}\n.fmc-te-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 10px;\n}\n.fmc-te-title[_ngcontent-%COMP%] {\n  font-size: 11px; font-weight: 700; color: var(--mj-color-indigo-500);\n  text-transform: uppercase; letter-spacing: 0.5px;\n}\n.fmc-te-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 4px; }\n.fmc-te-add[_ngcontent-%COMP%] {\n  font-size: 11px; font-weight: 600; color: var(--mj-color-indigo-500);\n  background: none; border: 1px solid var(--mj-color-indigo-200);\n  border-radius: 6px; padding: 3px 10px;\n  cursor: pointer; transition: all 0.15s;\n}\n.fmc-te-add[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-50); }\n.fmc-te-add[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 3px; font-size: 10px; }\n\n\n\n.fmc-te-step[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 10px 12px;\n  margin-bottom: 8px;\n  transition: box-shadow 0.15s;\n}\n.fmc-te-step[_ngcontent-%COMP%]:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.05); }\n.fmc-te-step[_ngcontent-%COMP%]:last-child { margin-bottom: 0; }\n\n.fmc-te-step-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;\n}\n.fmc-te-step-num[_ngcontent-%COMP%] {\n  width: 22px; height: 22px; border-radius: 50%;\n  background: linear-gradient(135deg, var(--mj-color-indigo-500), var(--mj-color-indigo-500));\n  color: var(--mj-bg-surface); font-size: 11px; font-weight: 700;\n  display: flex; align-items: center; justify-content: center;\n  flex-shrink: 0;\n}\n.fmc-te-type-select[_ngcontent-%COMP%] {\n  flex: 1; padding: 4px 8px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 12px; font-weight: 600;\n  color: var(--mj-text-primary); background: var(--mj-bg-page);\n}\n.fmc-te-type-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); outline: none; }\n.fmc-te-error-select[_ngcontent-%COMP%] {\n  width: 100px; padding: 4px 6px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 11px; color: var(--mj-text-muted);\n  background: var(--mj-bg-page);\n}\n.fmc-te-error-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); outline: none; }\n.fmc-te-remove-step[_ngcontent-%COMP%] {\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 12px; padding: 4px;\n  border-radius: 4px; transition: all 0.15s;\n}\n.fmc-te-remove-step[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); background: var(--mj-status-error-bg); }\n\n\n\n.fmc-te-config[_ngcontent-%COMP%] {\n  padding-left: 30px;\n}\n.fmc-te-field[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n.fmc-te-field[_ngcontent-%COMP%]:last-child { margin-bottom: 0; }\n.fmc-te-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block; font-size: 11px; font-weight: 600;\n  color: var(--mj-text-muted); margin-bottom: 3px;\n}\n.fmc-te-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover); padding: 0 3px; border-radius: 3px;\n  font-size: 10px; color: var(--mj-color-indigo-700);\n}\n.fmc-te-hint[_ngcontent-%COMP%] { font-weight: 400; color: var(--mj-text-disabled); }\n.fmc-te-row[_ngcontent-%COMP%] {\n  display: flex; gap: 10px; align-items: flex-end;\n}\n.fmc-te-sm[_ngcontent-%COMP%] { max-width: 140px; }\n.fmc-textarea[_ngcontent-%COMP%] {\n  resize: vertical; min-height: 40px;\n}\n\n\n\n.fmc-combine-chips[_ngcontent-%COMP%] {\n  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;\n}\n.fmc-chip[_ngcontent-%COMP%] {\n  font-size: 11px; padding: 3px 8px; border-radius: 14px;\n  border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface);\n  color: var(--mj-text-muted); cursor: pointer;\n  transition: all 0.15s; font-weight: 500;\n}\n.fmc-chip[_ngcontent-%COMP%]:hover { border-color: var(--mj-color-indigo-300); color: var(--mj-color-indigo-700); }\n.fmc-chip.selected[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border-color: var(--mj-color-indigo-400); color: var(--mj-color-indigo-700); font-weight: 600;\n}\n\n\n\n.fmc-lookup-table[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; gap: 4px; margin-top: 4px;\n}\n.fmc-lookup-row[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 6px;\n}\n.fmc-lookup-row[_ngcontent-%COMP%]   .fmc-input[_ngcontent-%COMP%] { flex: 1; }\n.fmc-lookup-arrow[_ngcontent-%COMP%] { color: var(--mj-color-indigo-200); font-size: 10px; flex-shrink: 0; }\n.fmc-lookup-del[_ngcontent-%COMP%] {\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 11px; padding: 2px;\n  transition: color 0.15s;\n}\n.fmc-lookup-del[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); }\n.fmc-lookup-add[_ngcontent-%COMP%] {\n  font-size: 11px; color: var(--mj-color-indigo-500); background: none;\n  border: 1px dashed var(--mj-color-indigo-200); border-radius: 6px;\n  padding: 4px 10px; cursor: pointer;\n  transition: all 0.15s; margin-top: 2px;\n}\n.fmc-lookup-add[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-50); }\n.fmc-lookup-add[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 3px; font-size: 10px; }\n\n\n\n.data-preview-section[_ngcontent-%COMP%] { margin-top: 24px; border-top: 1px solid var(--mj-border-subtle); padding-top: 16px; }\n.preview-actions[_ngcontent-%COMP%] { display: flex; gap: 8px; margin-bottom: 12px; }\n\n.preview-panel[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page); border: 1px solid var(--mj-border-default); border-radius: 8px;\n  padding: 12px; margin-bottom: 12px;\n}\n.preview-panel-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 8px;\n}\n.preview-panel-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] { font-size: 13px; font-weight: 600; margin: 0; }\n.preview-panel-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.preview-table-wrapper[_ngcontent-%COMP%] { overflow-x: auto; }\n.preview-table[_ngcontent-%COMP%] {\n  width: 100%; border-collapse: collapse; font-size: 12px;\n}\n.preview-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left; padding: 5px 8px;\n  background: var(--mj-border-default); font-weight: 600; font-size: 10px;\n  text-transform: uppercase; color: var(--mj-text-muted);\n  border-bottom: 1px solid var(--mj-border-default); white-space: nowrap;\n}\n.preview-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 4px 8px; border-bottom: 1px solid var(--mj-border-subtle);\n  white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;\n}\n.preview-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover { background: var(--mj-status-info-bg); }\n\n\n\n.run-summary-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page); border-radius: 8px; padding: 12px;\n}\n.run-summary-row[_ngcontent-%COMP%] {\n  display: flex; justify-content: space-between;\n  padding: 4px 0; font-size: 13px;\n}\n.run-summary-row[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] { color: var(--mj-text-muted); font-weight: 500; }\n.run-status[_ngcontent-%COMP%] {\n  font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 600;\n}\n.status-green[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.status-amber[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n.status-red[_ngcontent-%COMP%]   { background: var(--mj-status-error-bg); color: var(--mj-color-error-600); }\n\n.entity-stat-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page); border-radius: 6px; padding: 10px;\n  margin-bottom: 8px;\n}\n.entity-stat-name[_ngcontent-%COMP%] { font-size: 13px; font-weight: 600; margin-bottom: 6px; }\n.entity-stat-grid[_ngcontent-%COMP%] { display: flex; gap: 12px; }\n.mini-stat[_ngcontent-%COMP%] { text-align: center; }\n.mini-val[_ngcontent-%COMP%] { display: block; font-size: 16px; font-weight: 600; }\n.mini-val.has-errors[_ngcontent-%COMP%] { color: var(--mj-color-error-600); }\n.mini-label[_ngcontent-%COMP%] { font-size: 10px; color: var(--mj-text-disabled); }\n\n\n\n.validation-banner[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-50); border: 1px solid var(--mj-color-warning-200); border-radius: 8px;\n  padding: 10px 14px; margin-bottom: 14px;\n  display: flex; align-items: flex-start; gap: 10px;\n  font-size: 13px; color: var(--mj-color-warning-600);\n}\n.validation-banner[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { margin-top: 2px; }\n.validation-warnings[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; }\n\n.field-map-card.validation-error[_ngcontent-%COMP%]   .fmc-source[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-color-warning-600);\n  padding-left: 8px;\n}\n\n\n\n@media (max-width: 1100px) { .right-panel[_ngcontent-%COMP%] { display: none; } }\n@media (max-width: 800px) { .left-panel[_ngcontent-%COMP%] { width: 260px; } }"] });
+        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.CheckboxControlValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.MinValidator, i2.NgModel, i3.MJButtonDirective, i3.MJComboboxComponent, i3.MJDropdownComponent, i3.MJSwitchComponent, i4.LoadingComponent, i1.DecimalPipe], styles: [".mapping-workspace[_ngcontent-%COMP%] { padding: 24px; height: 100%; display: flex; flex-direction: column; }\n.workspace-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 16px;\n}\n.workspace-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0; font-size: 20px; font-weight: 600;\n}\n.workspace-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 8px; color: var(--mj-color-indigo-500); }\n\n\n\n.workspace-body[_ngcontent-%COMP%] {\n  display: flex; flex: 1; gap: 1px; background: var(--mj-border-default);\n  border-radius: 10px; overflow: hidden; min-height: 500px;\n}\n\n.left-panel[_ngcontent-%COMP%] { width: 320px; min-width: 280px; background: var(--mj-bg-surface); padding: 16px; overflow-y: auto; flex-shrink: 0; }\n.center-panel[_ngcontent-%COMP%] { flex: 1; background: var(--mj-bg-surface); padding: 20px; overflow-y: auto; }\n.right-panel[_ngcontent-%COMP%] { width: 280px; min-width: 240px; background: var(--mj-bg-surface); padding: 16px; overflow-y: auto; flex-shrink: 0; }\n\n\n\n.panel-label[_ngcontent-%COMP%] {\n  font-size: 11px; font-weight: 700; color: var(--mj-text-disabled);\n  text-transform: uppercase; letter-spacing: 0.6px;\n  margin: 0 0 6px 0; display: block;\n}\n.panel-title[_ngcontent-%COMP%] { margin: 0 0 12px 0; font-size: 16px; font-weight: 600; }\n.panel-title[_ngcontent-%COMP%]   .field-count[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-weight: 400; font-size: 13px; }\n.empty-hint[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 13px; font-style: italic; }\n.search-box[_ngcontent-%COMP%] { margin-bottom: 12px; }\n\n\n\n.integration-selector[_ngcontent-%COMP%] { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--mj-border-subtle); }\n\n\n\n.entity-map-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 10px;\n}\n.header-actions[_ngcontent-%COMP%] { display: flex; gap: 4px; }\n\n\n\n.add-map-panel[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page); border: 1px solid var(--mj-border-default); border-radius: 10px;\n  padding: 16px; margin-bottom: 14px;\n}\n.add-panel-top[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 14px;\n}\n.add-panel-top[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] { margin: 0; font-size: 14px; font-weight: 600; }\n.add-panel-close[_ngcontent-%COMP%] {\n  background: none; border: none; cursor: pointer; color: var(--mj-text-disabled); font-size: 14px;\n}\n.add-panel-close[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n\n.form-group[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }\n.form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.form-row[_ngcontent-%COMP%] { display: flex; gap: 10px; }\n.form-row[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] { flex: 1; }\n\n.source-loading[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 8px;\n  font-size: 12px; color: var(--mj-text-disabled); padding: 6px 0;\n}\n.source-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n.discover-error-inline[_ngcontent-%COMP%] {\n  font-size: 12px; color: var(--mj-color-error-600); padding: 6px 0;\n}\n.discover-error-inline[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 4px; }\n\n\n\n.target-mode-toggle[_ngcontent-%COMP%] {\n  display: flex; border: 1px solid var(--mj-border-default); border-radius: 6px;\n  overflow: hidden; margin-bottom: 12px;\n}\n.target-mode-btn[_ngcontent-%COMP%] {\n  flex: 1; padding: 8px 12px; font-size: 12px; font-weight: 600;\n  text-align: center; cursor: pointer; background: var(--mj-bg-surface); border: none;\n  color: var(--mj-text-muted); transition: all 0.15s;\n}\n.target-mode-btn[_ngcontent-%COMP%]:first-child { border-right: 1px solid var(--mj-border-default); }\n.target-mode-btn.active[_ngcontent-%COMP%] { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n.target-mode-btn[_ngcontent-%COMP%]:not(.active):hover { background: var(--mj-status-info-bg); color: var(--mj-color-indigo-500); }\n.target-mode-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 4px; }\n\n\n\n.new-entity-form[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 8px;\n  padding: 14px; margin-bottom: 12px;\n}\n.new-entity-form[_ngcontent-%COMP%]   .section-label[_ngcontent-%COMP%] {\n  font-size: 11px; font-weight: 700; color: var(--mj-color-indigo-500);\n  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;\n}\n.auto-hint[_ngcontent-%COMP%] { font-size: 10px; color: var(--mj-text-disabled); font-style: italic; }\n\n\n\n.ddl-preview-section[_ngcontent-%COMP%] { margin-top: 8px; }\n.ddl-preview-code[_ngcontent-%COMP%] {\n  background: var(--mj-text-primary); color: var(--mj-color-neutral-300); padding: 10px;\n  border-radius: 4px; font-size: 11px; line-height: 1.5;\n  max-height: 200px; overflow: auto; white-space: pre-wrap;\n  word-break: break-word; margin-top: 8px;\n}\n\n.add-form-actions[_ngcontent-%COMP%] { display: flex; gap: 6px; padding-top: 4px; }\n\n\n\n.entity-map-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 4px; }\n.entity-map-item[_ngcontent-%COMP%] {\n  padding: 8px 10px; border-radius: 6px;\n  cursor: pointer; border: 1px solid var(--mj-border-subtle); transition: all 0.15s;\n}\n.entity-map-item[_ngcontent-%COMP%]:hover { background: var(--mj-bg-page); }\n.entity-map-item.selected[_ngcontent-%COMP%] { background: var(--mj-status-info-bg); border-color: var(--mj-color-indigo-500); }\n.entity-map-item.pending[_ngcontent-%COMP%] { border-left: 3px solid var(--mj-status-warning); }\n\n.em-top-row[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 4px;\n  font-size: 13px; margin-bottom: 4px;\n}\n.em-name[_ngcontent-%COMP%] { font-weight: 600; }\n.em-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 11px; }\n.em-entity[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.em-bottom-row[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  font-size: 11px; color: var(--mj-text-disabled);\n}\n.em-badges[_ngcontent-%COMP%] { display: flex; gap: 4px; align-items: center; }\n.badge[_ngcontent-%COMP%] {\n  font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600;\n}\n.badge-direction[_ngcontent-%COMP%] { background: var(--mj-bg-surface-hover); color: var(--mj-text-muted); }\n.badge-pending[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.em-actions[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; }\n.em-delete[_ngcontent-%COMP%] {\n  opacity: 0; transition: opacity 0.15s;\n  cursor: pointer; color: var(--mj-color-error-600); background: none; border: none;\n  padding: 2px 4px; font-size: 12px;\n}\n.entity-map-item[_ngcontent-%COMP%]:hover   .em-delete[_ngcontent-%COMP%] { opacity: 1; }\n\n\n\n.placeholder-message[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; align-items: center;\n  justify-content: center; height: 300px; color: var(--mj-text-disabled);\n}\n.placeholder-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 36px; margin-bottom: 12px; }\n.placeholder-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { text-align: center; }\n\n\n\n.pending-entity-panel[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg); border: 1px solid var(--mj-color-warning-200); border-radius: 10px;\n  padding: 24px; text-align: center;\n}\n.pending-icon[_ngcontent-%COMP%] { font-size: 40px; color: var(--mj-status-warning); margin-bottom: 12px; }\n.pending-entity-panel[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { font-size: 16px; margin-bottom: 8px; }\n.pending-entity-panel[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { font-size: 13px; color: var(--mj-text-disabled); margin-bottom: 16px; line-height: 1.5; }\n\n\n\n.pending-steps[_ngcontent-%COMP%] {\n  display: flex; gap: 0; margin: 20px 0; justify-content: center; align-items: center;\n}\n.step[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; align-items: center; gap: 6px;\n  padding: 0 16px;\n}\n.step-circle[_ngcontent-%COMP%] {\n  width: 36px; height: 36px; border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 14px; font-weight: 700;\n}\n.step-circle.done[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.step-circle.current[_ngcontent-%COMP%] { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n.step-circle.future[_ngcontent-%COMP%] { background: var(--mj-bg-surface-hover); color: var(--mj-text-disabled); }\n.step-label[_ngcontent-%COMP%] { font-size: 10px; font-weight: 600; color: var(--mj-text-disabled); text-transform: uppercase; white-space: nowrap; }\n.step-connector[_ngcontent-%COMP%] { width: 32px; height: 2px; background: var(--mj-border-default); align-self: center; margin-bottom: 18px; }\n.step-connector.done[_ngcontent-%COMP%] { background: var(--mj-color-success-700); }\n\n\n\n.ddl-preview-inline[_ngcontent-%COMP%] { margin-top: 16px; text-align: left; }\n.ddl-code-block[_ngcontent-%COMP%] {\n  background: var(--mj-text-primary); color: var(--mj-color-neutral-300); padding: 12px;\n  border-radius: 6px; font-size: 12px; line-height: 1.5;\n  max-height: 250px; overflow: auto; white-space: pre-wrap;\n}\n.ddl-actions[_ngcontent-%COMP%] { display: flex; gap: 8px; margin-top: 12px; justify-content: center; }\n\n\n\n.pending-fields-section[_ngcontent-%COMP%] { text-align: left; }\n.pending-fields-list[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; gap: 2px;\n  max-height: 200px; overflow-y: auto;\n}\n.pending-field-item[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 8px;\n  padding: 4px 8px; font-size: 13px; border-radius: 4px;\n}\n.pending-field-item[_ngcontent-%COMP%]:hover { background: var(--mj-status-warning-bg); }\n.pending-field-name[_ngcontent-%COMP%] { font-weight: 600; }\n.pending-field-type[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-disabled); background: var(--mj-bg-surface-hover); padding: 1px 6px; border-radius: 3px; }\n.pending-field-req[_ngcontent-%COMP%] { color: var(--mj-color-error-600); font-weight: 700; }\n\n\n\n.auto-map-banner[_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg); border: 1px solid var(--mj-color-info-100); border-radius: 8px;\n  padding: 12px 16px; margin-bottom: 16px;\n  display: flex; align-items: center; gap: 12px;\n}\n.auto-map-banner[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); font-size: 18px; }\n.auto-map-banner[_ngcontent-%COMP%]   .banner-text[_ngcontent-%COMP%] { flex: 1; }\n.auto-map-banner[_ngcontent-%COMP%]   .banner-text[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { font-size: 13px; color: var(--mj-text-muted); margin: 0; }\n.auto-map-banner[_ngcontent-%COMP%]   .banner-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] { color: var(--mj-text-primary); }\n\n\n\n.field-mapping-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 16px;\n}\n.field-mapping-actions[_ngcontent-%COMP%] { display: flex; gap: 6px; }\n\n\n\n.field-map-cards[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; gap: 6px;\n}\n\n.field-map-card[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  background: var(--mj-bg-surface);\n  transition: all 0.2s ease;\n  overflow: hidden;\n}\n.field-map-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: 0 2px 8px rgba(74, 108, 247, 0.06);\n}\n.field-map-card.has-transform[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-color-indigo-500);\n}\n.field-map-card.validation-error[_ngcontent-%COMP%] {\n  border-color: var(--mj-color-warning-200);\n  background: var(--mj-status-warning-bg);\n}\n\n\n\n.fmc-row[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 10px;\n  padding: 10px 14px;\n}\n\n\n\n.fmc-source[_ngcontent-%COMP%] {\n  flex: 1; min-width: 0;\n}\n.fmc-field-name[_ngcontent-%COMP%] {\n  font-size: 13px; font-weight: 600; color: var(--mj-text-primary);\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.fmc-badges[_ngcontent-%COMP%] {\n  display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap;\n}\n.fmc-badge[_ngcontent-%COMP%] {\n  font-size: 9px; font-weight: 700; padding: 1px 5px;\n  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px;\n  white-space: nowrap; line-height: 1.5;\n}\n.badge-type[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover); color: var(--mj-text-muted);\n}\n.badge-pk[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, var(--mj-color-warning-100), var(--mj-color-warning-200));\n  color: var(--mj-color-warning-800);\n}\n.badge-pk[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 8px; margin-right: 2px; }\n.badge-req[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, var(--mj-color-error-100), var(--mj-color-error-200));\n  color: var(--mj-color-error-800);\n}\n.badge-ro[_ngcontent-%COMP%] {\n  background: var(--mj-color-purple-50); color: var(--mj-color-purple-700);\n}\n\n\n\n.fmc-transform-zone[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  display: flex; align-items: center; justify-content: center;\n  width: 100px;\n}\n.fmc-arrow-btn[_ngcontent-%COMP%] {\n  width: 32px; height: 32px;\n  border-radius: 50%; border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page); color: var(--mj-text-disabled);\n  cursor: pointer; font-size: 12px;\n  display: flex; align-items: center; justify-content: center;\n  transition: all 0.2s;\n}\n.fmc-arrow-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); border-color: var(--mj-color-indigo-500);\n  transform: scale(1.1);\n}\n.fmc-transform-pill[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 4px;\n  padding: 4px 10px; border-radius: 16px;\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border: 1px solid var(--mj-color-indigo-200); color: var(--mj-color-indigo-700);\n  font-size: 11px; font-weight: 600;\n  cursor: pointer; transition: all 0.2s;\n  white-space: nowrap;\n}\n.fmc-transform-pill[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, var(--mj-color-indigo-100), var(--mj-color-indigo-200));\n  transform: scale(1.02);\n}\n.fmc-transform-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n.fmc-transform-direct[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, var(--mj-bg-page), var(--mj-bg-surface-hover));\n  border-color: var(--mj-color-neutral-300); color: var(--mj-text-muted);\n}\n.fmc-transform-direct[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border-color: var(--mj-color-indigo-200); color: var(--mj-color-indigo-700);\n}\n.fmc-step-count[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-700); color: var(--mj-bg-surface); font-size: 9px;\n  padding: 0 4px; border-radius: 8px; font-weight: 700;\n}\n\n\n\n.fmc-dest[_ngcontent-%COMP%] {\n  flex: 1; min-width: 0;\n}\n.fmc-select[_ngcontent-%COMP%] {\n  width: 100%; padding: 6px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  transition: border-color 0.15s;\n}\n.fmc-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); outline: none; box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.12); }\n\n\n\n.fmc-input[_ngcontent-%COMP%] {\n  width: 100%; padding: 5px 8px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  transition: border-color 0.15s;\n}\n.fmc-input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); outline: none; box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.12); }\n.fmc-input.mono[_ngcontent-%COMP%] { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 12px; }\n\n\n\n.fmc-flags[_ngcontent-%COMP%] {\n  display: flex; gap: 6px; flex-shrink: 0;\n}\n.fmc-flag[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 3px;\n  font-size: 11px; color: var(--mj-text-disabled); cursor: pointer;\n  padding: 2px 4px; border-radius: 4px;\n  transition: color 0.15s;\n}\n.fmc-flag[_ngcontent-%COMP%]:hover { color: var(--mj-color-indigo-500); }\n.fmc-flag[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 13px; height: 13px; cursor: pointer;\n  accent-color: var(--mj-color-indigo-500);\n}\n.fmc-flag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n.fmc-req-star[_ngcontent-%COMP%] { font-size: 14px; font-weight: 700; color: inherit; }\n\n\n\n.fmc-remove[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 13px; padding: 4px;\n  border-radius: 4px; transition: all 0.15s;\n}\n.fmc-remove[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); background: var(--mj-status-error-bg); }\n\n\n\n.fmc-transform-editor[_ngcontent-%COMP%] {\n  border-top: 1px solid var(--mj-bg-surface-hover);\n  background: linear-gradient(180deg, var(--mj-color-indigo-50) 0%, var(--mj-bg-page) 100%);\n  padding: 12px 14px;\n}\n.fmc-te-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 10px;\n}\n.fmc-te-title[_ngcontent-%COMP%] {\n  font-size: 11px; font-weight: 700; color: var(--mj-color-indigo-500);\n  text-transform: uppercase; letter-spacing: 0.5px;\n}\n.fmc-te-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 4px; }\n.fmc-te-add[_ngcontent-%COMP%] {\n  font-size: 11px; font-weight: 600; color: var(--mj-color-indigo-500);\n  background: none; border: 1px solid var(--mj-color-indigo-200);\n  border-radius: 6px; padding: 3px 10px;\n  cursor: pointer; transition: all 0.15s;\n}\n.fmc-te-add[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-50); }\n.fmc-te-add[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 3px; font-size: 10px; }\n\n\n\n.fmc-te-step[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 10px 12px;\n  margin-bottom: 8px;\n  transition: box-shadow 0.15s;\n}\n.fmc-te-step[_ngcontent-%COMP%]:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.05); }\n.fmc-te-step[_ngcontent-%COMP%]:last-child { margin-bottom: 0; }\n\n.fmc-te-step-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;\n}\n.fmc-te-step-num[_ngcontent-%COMP%] {\n  width: 22px; height: 22px; border-radius: 50%;\n  background: linear-gradient(135deg, var(--mj-color-indigo-500), var(--mj-color-indigo-500));\n  color: var(--mj-bg-surface); font-size: 11px; font-weight: 700;\n  display: flex; align-items: center; justify-content: center;\n  flex-shrink: 0;\n}\n.fmc-te-type-select[_ngcontent-%COMP%] {\n  flex: 1; padding: 4px 8px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 12px; font-weight: 600;\n  color: var(--mj-text-primary); background: var(--mj-bg-page);\n}\n.fmc-te-type-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); outline: none; }\n.fmc-te-error-select[_ngcontent-%COMP%] {\n  width: 100px; padding: 4px 6px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 11px; color: var(--mj-text-muted);\n  background: var(--mj-bg-page);\n}\n.fmc-te-error-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); outline: none; }\n.fmc-te-remove-step[_ngcontent-%COMP%] {\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 12px; padding: 4px;\n  border-radius: 4px; transition: all 0.15s;\n}\n.fmc-te-remove-step[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); background: var(--mj-status-error-bg); }\n\n\n\n.fmc-te-config[_ngcontent-%COMP%] {\n  padding-left: 30px;\n}\n.fmc-te-field[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n.fmc-te-field[_ngcontent-%COMP%]:last-child { margin-bottom: 0; }\n.fmc-te-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block; font-size: 11px; font-weight: 600;\n  color: var(--mj-text-muted); margin-bottom: 3px;\n}\n.fmc-te-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover); padding: 0 3px; border-radius: 3px;\n  font-size: 10px; color: var(--mj-color-indigo-700);\n}\n.fmc-te-hint[_ngcontent-%COMP%] { font-weight: 400; color: var(--mj-text-disabled); }\n.fmc-te-row[_ngcontent-%COMP%] {\n  display: flex; gap: 10px; align-items: flex-end;\n}\n.fmc-te-sm[_ngcontent-%COMP%] { max-width: 140px; }\n.fmc-textarea[_ngcontent-%COMP%] {\n  resize: vertical; min-height: 40px;\n}\n\n\n\n.fmc-combine-chips[_ngcontent-%COMP%] {\n  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;\n}\n.fmc-chip[_ngcontent-%COMP%] {\n  font-size: 11px; padding: 3px 8px; border-radius: 14px;\n  border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface);\n  color: var(--mj-text-muted); cursor: pointer;\n  transition: all 0.15s; font-weight: 500;\n}\n.fmc-chip[_ngcontent-%COMP%]:hover { border-color: var(--mj-color-indigo-300); color: var(--mj-color-indigo-700); }\n.fmc-chip.selected[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border-color: var(--mj-color-indigo-400); color: var(--mj-color-indigo-700); font-weight: 600;\n}\n\n\n\n.fmc-lookup-table[_ngcontent-%COMP%] {\n  display: flex; flex-direction: column; gap: 4px; margin-top: 4px;\n}\n.fmc-lookup-row[_ngcontent-%COMP%] {\n  display: flex; align-items: center; gap: 6px;\n}\n.fmc-lookup-row[_ngcontent-%COMP%]   .fmc-input[_ngcontent-%COMP%] { flex: 1; }\n.fmc-lookup-arrow[_ngcontent-%COMP%] { color: var(--mj-color-indigo-200); font-size: 10px; flex-shrink: 0; }\n.fmc-lookup-del[_ngcontent-%COMP%] {\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 11px; padding: 2px;\n  transition: color 0.15s;\n}\n.fmc-lookup-del[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); }\n.fmc-lookup-add[_ngcontent-%COMP%] {\n  font-size: 11px; color: var(--mj-color-indigo-500); background: none;\n  border: 1px dashed var(--mj-color-indigo-200); border-radius: 6px;\n  padding: 4px 10px; cursor: pointer;\n  transition: all 0.15s; margin-top: 2px;\n}\n.fmc-lookup-add[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-50); }\n.fmc-lookup-add[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 3px; font-size: 10px; }\n\n\n\n.data-preview-section[_ngcontent-%COMP%] { margin-top: 24px; border-top: 1px solid var(--mj-border-subtle); padding-top: 16px; }\n.preview-actions[_ngcontent-%COMP%] { display: flex; gap: 8px; margin-bottom: 12px; }\n\n.preview-panel[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page); border: 1px solid var(--mj-border-default); border-radius: 8px;\n  padding: 12px; margin-bottom: 12px;\n}\n.preview-panel-header[_ngcontent-%COMP%] {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 8px;\n}\n.preview-panel-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] { font-size: 13px; font-weight: 600; margin: 0; }\n.preview-panel-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.preview-table-wrapper[_ngcontent-%COMP%] { overflow-x: auto; }\n.preview-table[_ngcontent-%COMP%] {\n  width: 100%; border-collapse: collapse; font-size: 12px;\n}\n.preview-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left; padding: 5px 8px;\n  background: var(--mj-border-default); font-weight: 600; font-size: 10px;\n  text-transform: uppercase; color: var(--mj-text-muted);\n  border-bottom: 1px solid var(--mj-border-default); white-space: nowrap;\n}\n.preview-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 4px 8px; border-bottom: 1px solid var(--mj-border-subtle);\n  white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;\n}\n.preview-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover { background: var(--mj-status-info-bg); }\n\n\n\n.run-summary-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page); border-radius: 8px; padding: 12px;\n}\n.run-summary-row[_ngcontent-%COMP%] {\n  display: flex; justify-content: space-between;\n  padding: 4px 0; font-size: 13px;\n}\n.run-summary-row[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] { color: var(--mj-text-muted); font-weight: 500; }\n.run-status[_ngcontent-%COMP%] {\n  font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 600;\n}\n.status-green[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.status-amber[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n.status-red[_ngcontent-%COMP%]   { background: var(--mj-status-error-bg); color: var(--mj-color-error-600); }\n\n.entity-stat-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page); border-radius: 6px; padding: 10px;\n  margin-bottom: 8px;\n}\n.entity-stat-name[_ngcontent-%COMP%] { font-size: 13px; font-weight: 600; margin-bottom: 6px; }\n.entity-stat-grid[_ngcontent-%COMP%] { display: flex; gap: 12px; }\n.mini-stat[_ngcontent-%COMP%] { text-align: center; }\n.mini-val[_ngcontent-%COMP%] { display: block; font-size: 16px; font-weight: 600; }\n.mini-val.has-errors[_ngcontent-%COMP%] { color: var(--mj-color-error-600); }\n.mini-label[_ngcontent-%COMP%] { font-size: 10px; color: var(--mj-text-disabled); }\n\n\n\n.validation-banner[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-50); border: 1px solid var(--mj-color-warning-200); border-radius: 8px;\n  padding: 10px 14px; margin-bottom: 14px;\n  display: flex; align-items: flex-start; gap: 10px;\n  font-size: 13px; color: var(--mj-color-warning-600);\n}\n.validation-banner[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { margin-top: 2px; }\n.validation-warnings[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; }\n\n.field-map-card.validation-error[_ngcontent-%COMP%]   .fmc-source[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-color-warning-600);\n  padding-left: 8px;\n}\n\n\n\n@media (max-width: 1100px) { .right-panel[_ngcontent-%COMP%] { display: none; } }\n@media (max-width: 800px) { .left-panel[_ngcontent-%COMP%] { width: 260px; } }"] });
 };
 MappingWorkspaceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'IntegrationMappingWorkspace')
@@ -2364,7 +2352,7 @@ MappingWorkspaceComponent = __decorate([
 export { MappingWorkspaceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MappingWorkspaceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-mapping-workspace', template: "<div class=\"mapping-workspace\">\n  <div class=\"workspace-header\">\n    <h2><i class=\"fa-solid fa-diagram-project\"></i> Mapping Workspace</h2>\n  </div>\n\n  @if (IsLoadingIntegrations) {\n    <mj-loading text=\"Loading integrations...\" size=\"medium\"></mj-loading>\n  } @else {\n    <div class=\"workspace-body\">\n      <!-- ============================================================ -->\n      <!-- LEFT PANEL: Integration selector + Entity map list -->\n      <!-- ============================================================ -->\n      <div class=\"left-panel\">\n        <div class=\"integration-selector\">\n          <label class=\"panel-label\">Integration</label>\n          <kendo-dropdownlist\n            [data]=\"Integrations\"\n            [textField]=\"'Name'\"\n            [valueField]=\"'ID'\"\n            [valuePrimitive]=\"true\"\n            [(ngModel)]=\"SelectedIntegrationID\"\n            (valueChange)=\"OnIntegrationChange($event)\"\n            [defaultItem]=\"{ ID: '', Name: '-- Select --' }\">\n          </kendo-dropdownlist>\n        </div>\n\n        @if (IsLoadingEntityMaps) {\n          <mj-loading text=\"Loading entity maps...\" size=\"small\"></mj-loading>\n        } @else if (SelectedIntegrationID) {\n          <!-- Entity Map Header -->\n          <div class=\"entity-map-header\">\n            <span class=\"panel-label\" style=\"margin: 0;\">Entity Maps</span>\n            <div class=\"header-actions\">\n              <button kendoButton [look]=\"'flat'\" [size]=\"'small'\"\n                      (click)=\"OpenAddPanel()\" title=\"Add entity map\">\n                <i class=\"fa-solid fa-plus\"></i> Add Map\n              </button>\n            </div>\n          </div>\n\n          <!-- ==================== ADD MAP PANEL ==================== -->\n          @if (ShowAddPanel) {\n            <div class=\"add-map-panel\">\n              <div class=\"add-panel-top\">\n                <h5><i class=\"fa-solid fa-plus-circle\"></i> Add Entity Map</h5>\n                <button class=\"add-panel-close\" (click)=\"CloseAddPanel()\">\n                  <i class=\"fa-solid fa-times\"></i>\n                </button>\n              </div>\n\n              <!-- Source Object Dropdown -->\n              <div class=\"form-group\">\n                <label>Source Object</label>\n                @if (IsDiscoveringObjects) {\n                  <div class=\"source-loading\">\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i> Discovering objects...\n                  </div>\n                } @else if (DiscoverError) {\n                  <div class=\"discover-error-inline\">\n                    <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                    {{ DiscoverError }}\n                  </div>\n                } @else if (DiscoveredObjects.length === 0) {\n                  <div class=\"discover-error-inline\">\n                    No objects found in external system.\n                  </div>\n                } @else {\n                  <kendo-dropdownlist\n                    [data]=\"DiscoveredObjects\"\n                    [textField]=\"'Label'\"\n                    [valueField]=\"'Name'\"\n                    [valuePrimitive]=\"true\"\n                    [(ngModel)]=\"SelectedSourceObjectName\"\n                    (valueChange)=\"OnSourceObjectChange($event)\"\n                    [filterable]=\"true\"\n                    [defaultItem]=\"{ Name: '', Label: 'Select source object...' }\">\n                  </kendo-dropdownlist>\n                }\n              </div>\n\n              <!-- Target Mode Toggle -->\n              <div class=\"target-mode-toggle\">\n                <button class=\"target-mode-btn\"\n                        [class.active]=\"TargetMode === 'existing'\"\n                        (click)=\"SetTargetMode('existing')\">\n                  <i class=\"fa-solid fa-database\"></i> Existing Entity\n                </button>\n                <button class=\"target-mode-btn\"\n                        [class.active]=\"TargetMode === 'new'\"\n                        (click)=\"SetTargetMode('new')\">\n                  <i class=\"fa-solid fa-wand-magic-sparkles\"></i> New Entity\n                </button>\n              </div>\n\n              <!-- Existing entity picker -->\n              @if (TargetMode === 'existing') {\n                <div class=\"form-group\">\n                  <label>Target MJ Entity</label>\n                  @if (IsLoadingEntities) {\n                    <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n                  } @else {\n                    <kendo-dropdownlist\n                      [data]=\"MJEntities\"\n                      [textField]=\"'Name'\"\n                      [valueField]=\"'ID'\"\n                      [valuePrimitive]=\"true\"\n                      [(ngModel)]=\"SelectedEntityID\"\n                      [filterable]=\"true\"\n                      [defaultItem]=\"{ ID: null, Name: 'Select entity...' }\">\n                    </kendo-dropdownlist>\n                  }\n                </div>\n              }\n\n              <!-- New entity form -->\n              @if (TargetMode === 'new') {\n                <div class=\"new-entity-form\">\n                  <div class=\"section-label\">Define New Entity</div>\n                  <div class=\"form-group\">\n                    <label>DB Schema</label>\n                    <kendo-combobox\n                      [data]=\"DBSchemas\"\n                      [(ngModel)]=\"NewEntitySchemaName\"\n                      (valueChange)=\"OnSchemaNameChange()\"\n                      [allowCustom]=\"true\"\n                      [filterable]=\"true\"\n                      [placeholder]=\"'Select or type schema...'\">\n                    </kendo-combobox>\n                  </div>\n                  <div class=\"form-row\">\n                    <div class=\"form-group\">\n                      <label>Table Name</label>\n                      <input kendoTextBox [(ngModel)]=\"NewEntityTableName\"\n                             [placeholder]=\"SuggestedTableName || 'Table name'\" />\n                      @if (SuggestedTableName && !NewEntityTableName) {\n                        <span class=\"auto-hint\">Suggested: {{ SuggestedTableName }}</span>\n                      }\n                    </div>\n                    <div class=\"form-group\">\n                      <label>Entity Name</label>\n                      <input kendoTextBox [(ngModel)]=\"NewEntityName\"\n                             [placeholder]=\"SuggestedEntityName || 'Entity name'\" />\n                    </div>\n                  </div>\n\n                  <!-- DDL Preview -->\n                  @if (SelectedSourceObjectName && NewEntitySchemaName && NewEntityTableName) {\n                    <div class=\"ddl-preview-section\">\n                      <button kendoButton [look]=\"'outline'\" [size]=\"'small'\"\n                              [disabled]=\"IsGeneratingDDL\"\n                              (click)=\"PreviewDDL()\">\n                        @if (IsGeneratingDDL) {\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i> Generating...\n                        } @else {\n                          <i class=\"fa-solid fa-database\"></i> Preview DDL\n                        }\n                      </button>\n                      @if (DDLPreviewError) {\n                        <div class=\"discover-error-inline\" style=\"margin-top: 8px;\">\n                          <i class=\"fa-solid fa-triangle-exclamation\"></i> {{ DDLPreviewError }}\n                        </div>\n                      }\n                      @if (DDLPreviewContent) {\n                        <pre class=\"ddl-preview-code\">{{ DDLPreviewContent }}</pre>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n\n              <!-- Sync direction -->\n              <div class=\"form-group\">\n                <label>Sync Direction</label>\n                <kendo-dropdownlist\n                  [data]=\"['Pull', 'Push', 'Bidirectional']\"\n                  [(ngModel)]=\"AddSyncDirection\">\n                </kendo-dropdownlist>\n              </div>\n\n              <!-- Save / Cancel -->\n              <div class=\"add-form-actions\">\n                <button kendoButton [themeColor]=\"'primary'\" [size]=\"'small'\"\n                        [disabled]=\"!IsAddFormValid || IsSavingEntityMap\"\n                        (click)=\"SaveAddMap()\">\n                  @if (IsSavingEntityMap) {\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n                  } @else if (TargetMode === 'new') {\n                    <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Create Pending Map\n                  } @else {\n                    <i class=\"fa-solid fa-check\"></i> Add Map\n                  }\n                </button>\n                <button kendoButton [size]=\"'small'\" (click)=\"CloseAddPanel()\">\n                  Cancel\n                </button>\n              </div>\n            </div>\n          }\n\n          <!-- Search -->\n          @if (AllMaps.length > 0) {\n            <div class=\"search-box\">\n              <input kendoTextBox\n                     [(ngModel)]=\"EntityMapSearchText\"\n                     placeholder=\"Search entity maps...\" />\n            </div>\n          }\n\n          <!-- Entity Map List -->\n          @if (AllMaps.length === 0 && !ShowAddPanel) {\n            <p class=\"empty-hint\">\n              No entity maps configured.\n              <a href=\"javascript:void(0)\" (click)=\"OpenAddPanel()\" style=\"color: var(--mj-brand-primary);\">Add one</a>\n            </p>\n          } @else if (FilteredMaps.length === 0 && AllMaps.length > 0) {\n            <p class=\"empty-hint\">No matches for \"{{ EntityMapSearchText }}\".</p>\n          } @else {\n            <div class=\"entity-map-list\">\n              @for (item of FilteredMaps; track item.ID) {\n                <div class=\"entity-map-item\"\n                     [class.selected]=\"IsSelectedMap(item.ID)\"\n                     [class.pending]=\"item.IsPending\"\n                     (click)=\"OnMapSelect(item)\">\n                  <div class=\"em-top-row\">\n                    <span class=\"em-name\">{{ item.SourceName }}</span>\n                    <span class=\"em-arrow\"><i class=\"fa-solid fa-arrow-right\"></i></span>\n                    <span class=\"em-entity\">{{ item.TargetName }}</span>\n                  </div>\n                  <div class=\"em-bottom-row\">\n                    <div class=\"em-badges\">\n                      <span class=\"badge badge-direction\">{{ item.SyncDirection }}</span>\n                      @if (item.IsPending) {\n                        <span class=\"badge badge-pending\">Pending</span>\n                      }\n                    </div>\n                    <div class=\"em-actions\">\n                      <button class=\"em-delete\" title=\"Delete\"\n                              (click)=\"OnDeleteMap(item, $event)\">\n                        <i class=\"fa-solid fa-trash-can\"></i>\n                      </button>\n                      @if (!item.IsPending && item.RealMap) {\n                        <kendo-switch\n                          [(ngModel)]=\"item.RealMap.SyncEnabled\"\n                          [size]=\"'small'\"\n                          (valueChange)=\"OnToggleEntityMap(item.RealMap)\">\n                        </kendo-switch>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n\n      <!-- ============================================================ -->\n      <!-- CENTER PANEL: Field mapping / Pending entity / Placeholder -->\n      <!-- ============================================================ -->\n      <div class=\"center-panel\">\n        @if (!SelectedMapID) {\n          <!-- No selection placeholder -->\n          <div class=\"placeholder-message\">\n            <i class=\"fa-solid fa-hand-pointer\"></i>\n            <p>Select an entity map from the left panel to view and edit field mappings.</p>\n          </div>\n        } @else if (SelectedPendingMap) {\n          <!-- ==================== PENDING ENTITY VIEW ==================== -->\n          <div class=\"pending-entity-panel\">\n            <div class=\"pending-icon\"><i class=\"fa-solid fa-clock\"></i></div>\n            <h3>Pending Entity: {{ SelectedPendingMap.EntityName }}</h3>\n            <p>\n              This entity map is waiting for the target entity\n              <strong>{{ SelectedPendingMap.SchemaName }}.{{ SelectedPendingMap.TableName }}</strong>\n              to be created. Run the DDL migration and CodeGen to activate this mapping.\n            </p>\n\n            <!-- Progress stepper -->\n            <div class=\"pending-steps\">\n              <div class=\"step\">\n                <div class=\"step-circle done\"><i class=\"fa-solid fa-check\"></i></div>\n                <span class=\"step-label\">Map Created</span>\n              </div>\n              <div class=\"step-connector\" [class.done]=\"SelectedPendingMap.DDLContent\"></div>\n              <div class=\"step\">\n                <div class=\"step-circle\" [ngClass]=\"GetPendingStepStatus(SelectedPendingMap, 2)\">\n                  @if (SelectedPendingMap.DDLContent) {\n                    <i class=\"fa-solid fa-check\"></i>\n                  } @else {\n                    2\n                  }\n                </div>\n                <span class=\"step-label\">DDL Generated</span>\n              </div>\n              <div class=\"step-connector\"></div>\n              <div class=\"step\">\n                <div class=\"step-circle future\">3</div>\n                <span class=\"step-label\">Deploy & CodeGen</span>\n              </div>\n              <div class=\"step-connector\"></div>\n              <div class=\"step\">\n                <div class=\"step-circle future\">4</div>\n                <span class=\"step-label\">Ready to Sync</span>\n              </div>\n            </div>\n\n            <!-- DDL content -->\n            @if (SelectedPendingMap.DDLContent) {\n              <div class=\"ddl-preview-inline\">\n                <h4 style=\"font-size: 14px; margin-bottom: 8px;\">\n                  <i class=\"fa-solid fa-database\"></i> Generated DDL\n                </h4>\n                <pre class=\"ddl-code-block\">{{ SelectedPendingMap.DDLContent }}</pre>\n                <div class=\"ddl-actions\">\n                  <button kendoButton [look]=\"'outline'\" [size]=\"'small'\"\n                          (click)=\"CopyDDLToClipboard(SelectedPendingMap.DDLContent)\">\n                    <i class=\"fa-solid fa-copy\"></i> Copy DDL\n                  </button>\n                </div>\n              </div>\n            }\n\n            <!-- Source fields list -->\n            @if (SelectedPendingMap.SourceFields.length > 0) {\n              <div class=\"pending-fields-section\">\n                <h4 style=\"font-size: 14px; margin: 16px 0 8px;\">\n                  <i class=\"fa-solid fa-list\"></i> Source Fields\n                  <span style=\"color: var(--mj-text-muted); font-weight: 400;\">({{ SelectedPendingMap.SourceFields.length }})</span>\n                </h4>\n                <div class=\"pending-fields-list\">\n                  @for (field of SelectedPendingMap.SourceFields; track field.Name) {\n                    <div class=\"pending-field-item\">\n                      <span class=\"pending-field-name\">{{ field.Name }}</span>\n                      <span class=\"pending-field-type\">{{ field.Type }}</span>\n                      @if (field.IsPrimaryKey) {\n                        <i class=\"fa-solid fa-key key-icon\" title=\"Key field\"></i>\n                      }\n                      @if (field.IsRequired) {\n                        <span class=\"pending-field-req\">*</span>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        } @else if (IsLoadingFieldMaps) {\n          <mj-loading text=\"Loading field maps...\" size=\"medium\"></mj-loading>\n        } @else {\n          <!-- ==================== FIELD MAPPING EDITOR ==================== -->\n\n          <!-- Auto-map banner -->\n          @if (ShowAutoMapBanner) {\n            <div class=\"auto-map-banner\">\n              <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n              <div class=\"banner-text\">\n                <p><strong>{{ AutoMapCount }} field{{ AutoMapCount !== 1 ? 's' : '' }} auto-mapped</strong> by matching source and destination field names.</p>\n              </div>\n              <button kendoButton [look]=\"'flat'\" [size]=\"'small'\" (click)=\"DismissAutoMapBanner()\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            </div>\n          }\n\n          <!-- Validation warnings -->\n          @if (ActiveEditableFields.length > 0 && !MappingValidation.IsValid) {\n            <div class=\"validation-banner\">\n              <i class=\"fa-solid fa-triangle-exclamation\"></i>\n              <div class=\"validation-warnings\">\n                @for (warning of MappingValidation.Warnings; track warning) {\n                  <span>{{ warning }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"field-mapping-header\">\n            <h3 class=\"panel-title\">\n              Field Mappings\n              <span class=\"field-count\">({{ ActiveEditableFields.length }})</span>\n            </h3>\n            <div class=\"field-mapping-actions\">\n              <button kendoButton [look]=\"'outline'\" [size]=\"'small'\"\n                      [disabled]=\"IsLoadingSourceFields\"\n                      (click)=\"RerunAutoMap()\" title=\"Auto-match source and destination fields by name\">\n                <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Auto-Map\n              </button>\n              <button kendoButton [look]=\"'outline'\" [size]=\"'small'\"\n                      (click)=\"AddFieldMapping()\">\n                <i class=\"fa-solid fa-plus\"></i> Add Field\n              </button>\n              <button kendoButton [themeColor]=\"'primary'\" [size]=\"'small'\"\n                      [disabled]=\"!HasDirtyFields || IsSavingFields\"\n                      (click)=\"SaveFieldMappings()\">\n                @if (IsSavingFields) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n                } @else {\n                  <i class=\"fa-solid fa-floppy-disk\"></i> Save\n                }\n              </button>\n            </div>\n          </div>\n\n          @if (ActiveEditableFields.length === 0) {\n            <p class=\"empty-hint\">\n              No field mappings yet.\n              <a href=\"javascript:void(0)\" (click)=\"AddFieldMapping()\" style=\"color: var(--mj-brand-primary);\">Add one</a>\n            </p>\n          } @else {\n            <div class=\"field-map-cards\">\n              @for (field of ActiveEditableFields; track field; let i = $index) {\n                <div class=\"field-map-card\" [class.validation-error]=\"field.IsRequired && !field.DestinationFieldName\"\n                     [class.has-transform]=\"field.TransformPipeline.length > 0\">\n\n                  <!-- Main mapping row -->\n                  <div class=\"fmc-row\">\n                    <!-- Source column -->\n                    <div class=\"fmc-source\">\n                      @if (field.IsNew) {\n                        <input type=\"text\" class=\"fmc-input\" [(ngModel)]=\"field.SourceFieldName\"\n                               (ngModelChange)=\"OnFieldChanged(field)\" placeholder=\"Source field name\" />\n                      } @else {\n                        <div class=\"fmc-field-name\">{{ field.SourceFieldName }}</div>\n                        <div class=\"fmc-badges\">\n                          @if (field.SourceFieldType) {\n                            <span class=\"fmc-badge badge-type\">{{ field.SourceFieldType }}</span>\n                          }\n                          @if (field.IsSourcePK) {\n                            <span class=\"fmc-badge badge-pk\" title=\"Primary Key\"><i class=\"fa-solid fa-key\"></i> PK</span>\n                          }\n                          @if (field.IsSourceRequired) {\n                            <span class=\"fmc-badge badge-req\" title=\"Required\">REQ</span>\n                          }\n                          @if (field.IsSourceReadOnly) {\n                            <span class=\"fmc-badge badge-ro\" title=\"Read-Only\">RO</span>\n                          }\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Transform indicator -->\n                    <div class=\"fmc-transform-zone\">\n                      @if (field.TransformPipeline.length > 1) {\n                        <button class=\"fmc-transform-pill\" (click)=\"ToggleTransformEditor(field)\"\n                                [title]=\"field.TransformPipeline.length + ' transform step(s)'\">\n                          <i [class]=\"GetTransformIcon(field.TransformPipeline[0].Type)\"></i>\n                          <span>{{ GetTransformLabel(field.TransformPipeline[0].Type) }}</span>\n                          <span class=\"fmc-step-count\">+{{ field.TransformPipeline.length - 1 }}</span>\n                        </button>\n                      } @else {\n                        <button class=\"fmc-transform-pill fmc-transform-direct\" (click)=\"ToggleTransformEditor(field)\"\n                                title=\"Click to change transform type\">\n                          <i class=\"fa-solid fa-arrow-right\"></i>\n                          <span>{{ field.TransformPipeline.length > 0 ? GetTransformLabel(field.TransformPipeline[0].Type) : 'Direct' }}</span>\n                        </button>\n                      }\n                    </div>\n\n                    <!-- Destination column -->\n                    <div class=\"fmc-dest\">\n                      @if (DestinationFields.length > 0) {\n                        <select class=\"fmc-select\" [(ngModel)]=\"field.DestinationFieldName\"\n                                (ngModelChange)=\"OnFieldChanged(field)\">\n                          <option value=\"\">-- Select destination --</option>\n                          @for (df of DestinationFields; track df.ID) {\n                            <option [value]=\"df.Name\">{{ df.Name }}</option>\n                          }\n                        </select>\n                      } @else {\n                        <input type=\"text\" class=\"fmc-input\" [(ngModel)]=\"field.DestinationFieldName\"\n                               (ngModelChange)=\"OnFieldChanged(field)\" placeholder=\"Destination field\" />\n                      }\n                    </div>\n\n                    <!-- Sync flags -->\n                    <div class=\"fmc-flags\">\n                      <label class=\"fmc-flag\" title=\"Key field for matching\">\n                        <input type=\"checkbox\" [(ngModel)]=\"field.IsKeyField\"\n                               (ngModelChange)=\"OnFieldChanged(field)\" />\n                        <i class=\"fa-solid fa-key\"></i>\n                      </label>\n                      <label class=\"fmc-flag\" title=\"Required field\">\n                        <input type=\"checkbox\" [(ngModel)]=\"field.IsRequired\"\n                               (ngModelChange)=\"OnFieldChanged(field)\" />\n                        <span class=\"fmc-req-star\">*</span>\n                      </label>\n                    </div>\n\n                    <!-- Remove button -->\n                    <button class=\"fmc-remove\" title=\"Remove mapping\" (click)=\"RemoveFieldMapping(i)\">\n                      <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                  </div>\n\n                  <!-- Transform pipeline editor (expandable) -->\n                  @if (field.ShowTransformEditor && field.TransformPipeline.length > 0) {\n                    <div class=\"fmc-transform-editor\">\n                      <div class=\"fmc-te-header\">\n                        <span class=\"fmc-te-title\"><i class=\"fa-solid fa-wand-magic-sparkles\"></i> Transform Pipeline</span>\n                        <button class=\"fmc-te-add\" (click)=\"AddTransformStep(field)\" title=\"Add another step\">\n                          <i class=\"fa-solid fa-plus\"></i> Add Step\n                        </button>\n                      </div>\n                      @for (step of field.TransformPipeline; track $index; let si = $index) {\n                        <div class=\"fmc-te-step\">\n                          <div class=\"fmc-te-step-header\">\n                            <span class=\"fmc-te-step-num\">{{ si + 1 }}</span>\n                            <select class=\"fmc-te-type-select\" [ngModel]=\"step.Type\"\n                                    (ngModelChange)=\"OnTransformTypeChange(field, step, $event)\">\n                              @for (tt of TransformTypes; track tt.Value) {\n                                <option [value]=\"tt.Value\">{{ tt.Label }}</option>\n                              }\n                            </select>\n                            <select class=\"fmc-te-error-select\" [(ngModel)]=\"step.OnError\"\n                                    (ngModelChange)=\"OnTransformConfigChange(field)\" title=\"On error\">\n                              <option value=\"Fail\">Fail</option>\n                              <option value=\"Skip\">Skip row</option>\n                              <option value=\"Null\">Set null</option>\n                            </select>\n                            <button class=\"fmc-te-remove-step\" (click)=\"RemoveTransformStep(field, si)\" title=\"Remove step\">\n                              <i class=\"fa-solid fa-trash-can\"></i>\n                            </button>\n                          </div>\n\n                          <!-- Config editors per type -->\n                          <div class=\"fmc-te-config\">\n                            @switch (step.Type) {\n                              @case ('direct') {\n                                <div class=\"fmc-te-field\">\n                                  <label>Default value (when source is null)</label>\n                                  <input type=\"text\" class=\"fmc-input\" [ngModel]=\"step.Config['DefaultValue'] ?? ''\"\n                                         (ngModelChange)=\"step.Config['DefaultValue'] = $event; OnTransformConfigChange(field)\"\n                                         placeholder=\"Leave empty for no default\" />\n                                </div>\n                              }\n                              @case ('regex') {\n                                <div class=\"fmc-te-row\">\n                                  <div class=\"fmc-te-field\">\n                                    <label>Pattern</label>\n                                    <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['Pattern'] ?? ''\"\n                                           (ngModelChange)=\"step.Config['Pattern'] = $event; OnTransformConfigChange(field)\"\n                                           placeholder=\"e.g. (\\d{3})-(\\d{4})\" />\n                                  </div>\n                                  <div class=\"fmc-te-field\">\n                                    <label>Replacement</label>\n                                    <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['Replacement'] ?? ''\"\n                                           (ngModelChange)=\"step.Config['Replacement'] = $event; OnTransformConfigChange(field)\"\n                                           placeholder=\"e.g. $1$2\" />\n                                  </div>\n                                  <div class=\"fmc-te-field fmc-te-sm\">\n                                    <label>Flags</label>\n                                    <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['Flags'] ?? 'g'\"\n                                           (ngModelChange)=\"step.Config['Flags'] = $event; OnTransformConfigChange(field)\"\n                                           placeholder=\"gi\" />\n                                  </div>\n                                </div>\n                              }\n                              @case ('split') {\n                                <div class=\"fmc-te-row\">\n                                  <div class=\"fmc-te-field\">\n                                    <label>Delimiter</label>\n                                    <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['Delimiter'] ?? ','\"\n                                           (ngModelChange)=\"step.Config['Delimiter'] = $event; OnTransformConfigChange(field)\"\n                                           placeholder=\",\" />\n                                  </div>\n                                  <div class=\"fmc-te-field fmc-te-sm\">\n                                    <label>Part index (0-based)</label>\n                                    <input type=\"number\" class=\"fmc-input\" [ngModel]=\"step.Config['Index'] ?? 0\"\n                                           (ngModelChange)=\"step.Config['Index'] = +$event; OnTransformConfigChange(field)\"\n                                           min=\"0\" />\n                                  </div>\n                                </div>\n                              }\n                              @case ('combine') {\n                                <div class=\"fmc-te-field\">\n                                  <label>Source fields to combine</label>\n                                  <div class=\"fmc-combine-chips\">\n                                    @for (sf of GetAvailableSourceFields(); track sf) {\n                                      <button class=\"fmc-chip\" [class.selected]=\"IsCombineFieldSelected(step.Config, sf)\"\n                                              (click)=\"ToggleCombineField(step.Config, sf); OnTransformConfigChange(field)\">\n                                        {{ sf }}\n                                      </button>\n                                    }\n                                  </div>\n                                </div>\n                                <div class=\"fmc-te-field fmc-te-sm\">\n                                  <label>Separator</label>\n                                  <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['Separator'] ?? ' '\"\n                                         (ngModelChange)=\"step.Config['Separator'] = $event; OnTransformConfigChange(field)\"\n                                         placeholder=\" \" />\n                                </div>\n                              }\n                              @case ('lookup') {\n                                <div class=\"fmc-te-field\">\n                                  <label>Value mapping</label>\n                                  <div class=\"fmc-lookup-table\">\n                                    @for (entry of GetLookupEntries(step.Config); track $index) {\n                                      <div class=\"fmc-lookup-row\">\n                                        <input type=\"text\" class=\"fmc-input\" [value]=\"entry.key\" placeholder=\"Source value\"\n                                               (change)=\"UpdateLookupEntry(step.Config, entry.key, $any($event.target).value, entry.value); OnTransformConfigChange(field)\" />\n                                        <i class=\"fa-solid fa-arrow-right fmc-lookup-arrow\"></i>\n                                        <input type=\"text\" class=\"fmc-input\" [value]=\"entry.value\" placeholder=\"Mapped value\"\n                                               (change)=\"UpdateLookupEntry(step.Config, entry.key, entry.key, $any($event.target).value); OnTransformConfigChange(field)\" />\n                                        <button class=\"fmc-lookup-del\" (click)=\"RemoveLookupEntry(step.Config, entry.key); OnTransformConfigChange(field)\">\n                                          <i class=\"fa-solid fa-times\"></i>\n                                        </button>\n                                      </div>\n                                    }\n                                    <button class=\"fmc-lookup-add\" (click)=\"AddLookupEntry(step.Config); OnTransformConfigChange(field)\">\n                                      <i class=\"fa-solid fa-plus\"></i> Add mapping\n                                    </button>\n                                  </div>\n                                </div>\n                                <div class=\"fmc-te-field fmc-te-sm\">\n                                  <label>Default (when no match)</label>\n                                  <input type=\"text\" class=\"fmc-input\" [ngModel]=\"step.Config['Default'] ?? ''\"\n                                         (ngModelChange)=\"step.Config['Default'] = $event; OnTransformConfigChange(field)\"\n                                         placeholder=\"null\" />\n                                </div>\n                              }\n                              @case ('format') {\n                                <div class=\"fmc-te-row\">\n                                  <div class=\"fmc-te-field fmc-te-sm\">\n                                    <label>Format type</label>\n                                    <select class=\"fmc-select\" [ngModel]=\"step.Config['FormatType'] ?? 'date'\"\n                                            (ngModelChange)=\"step.Config['FormatType'] = $event; OnTransformConfigChange(field)\">\n                                      <option value=\"date\">Date</option>\n                                      <option value=\"number\">Number</option>\n                                      <option value=\"string\">String</option>\n                                    </select>\n                                  </div>\n                                  <div class=\"fmc-te-field\">\n                                    <label>Format string</label>\n                                    <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['FormatString'] ?? 'ISO'\"\n                                           (ngModelChange)=\"step.Config['FormatString'] = $event; OnTransformConfigChange(field)\"\n                                           placeholder=\"ISO or decimal places\" />\n                                  </div>\n                                </div>\n                              }\n                              @case ('coerce') {\n                                <div class=\"fmc-te-field fmc-te-sm\">\n                                  <label>Target type</label>\n                                  <select class=\"fmc-select\" [ngModel]=\"step.Config['TargetType'] ?? 'string'\"\n                                          (ngModelChange)=\"step.Config['TargetType'] = $event; OnTransformConfigChange(field)\">\n                                    <option value=\"string\">String</option>\n                                    <option value=\"number\">Number</option>\n                                    <option value=\"boolean\">Boolean</option>\n                                    <option value=\"date\">Date</option>\n                                  </select>\n                                </div>\n                              }\n                              @case ('substring') {\n                                <div class=\"fmc-te-row\">\n                                  <div class=\"fmc-te-field fmc-te-sm\">\n                                    <label>Start index</label>\n                                    <input type=\"number\" class=\"fmc-input\" [ngModel]=\"step.Config['Start'] ?? 0\"\n                                           (ngModelChange)=\"step.Config['Start'] = +$event; OnTransformConfigChange(field)\"\n                                           min=\"0\" />\n                                  </div>\n                                  <div class=\"fmc-te-field fmc-te-sm\">\n                                    <label>Length (blank = to end)</label>\n                                    <input type=\"number\" class=\"fmc-input\" [ngModel]=\"step.Config['Length'] ?? ''\"\n                                           (ngModelChange)=\"step.Config['Length'] = $event ? +$event : undefined; OnTransformConfigChange(field)\"\n                                           min=\"1\" />\n                                  </div>\n                                </div>\n                              }\n                              @case ('custom') {\n                                <div class=\"fmc-te-field\">\n                                  <label>JavaScript expression <span class=\"fmc-te-hint\">(use <code>value</code> and <code>fields</code>)</span></label>\n                                  <textarea class=\"fmc-input mono fmc-textarea\" [ngModel]=\"step.Config['Expression'] ?? 'value'\"\n                                            (ngModelChange)=\"step.Config['Expression'] = $event; OnTransformConfigChange(field)\"\n                                            placeholder=\"value.toUpperCase()\" rows=\"2\"></textarea>\n                                </div>\n                              }\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Data Preview Section -->\n          <div class=\"data-preview-section\">\n            <div class=\"preview-actions\">\n              <button kendoButton [look]=\"'outline'\" [size]=\"'small'\"\n                      [disabled]=\"IsLoadingSourcePreview\"\n                      (click)=\"LoadSourcePreview()\">\n                <i class=\"fa-solid fa-cloud-arrow-down\"></i> Preview Source\n              </button>\n              <button kendoButton [look]=\"'outline'\" [size]=\"'small'\"\n                      [disabled]=\"IsLoadingDestPreview\"\n                      (click)=\"LoadDestPreview()\">\n                <i class=\"fa-solid fa-database\"></i> Preview Destination\n              </button>\n            </div>\n\n            @if (ShowSourcePreview) {\n              <div class=\"preview-panel\">\n                <div class=\"preview-panel-header\">\n                  <h4><i class=\"fa-solid fa-cloud\"></i> Source Data Preview</h4>\n                  <button class=\"add-panel-close\" (click)=\"CloseSourcePreview()\">\n                    <i class=\"fa-solid fa-times\"></i>\n                  </button>\n                </div>\n                @if (IsLoadingSourcePreview) {\n                  <mj-loading text=\"Loading source data...\" size=\"small\"></mj-loading>\n                } @else if (SourcePreviewData.length === 0) {\n                  <p class=\"empty-hint\">No source data available.</p>\n                } @else {\n                  <div class=\"preview-table-wrapper\">\n                    <table class=\"preview-table\">\n                      <thead>\n                        <tr>\n                          @for (col of GetPreviewColumns(SourcePreviewData); track col) {\n                            <th>{{ col }}</th>\n                          }\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (row of SourcePreviewData; track $index) {\n                          <tr>\n                            @for (col of GetPreviewColumns(SourcePreviewData); track col) {\n                              <td>{{ FormatPreviewValue(row[col]) }}</td>\n                            }\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            }\n\n            @if (ShowDestPreview) {\n              <div class=\"preview-panel\">\n                <div class=\"preview-panel-header\">\n                  <h4><i class=\"fa-solid fa-database\"></i> Destination Data Preview</h4>\n                  <button class=\"add-panel-close\" (click)=\"CloseDestPreview()\">\n                    <i class=\"fa-solid fa-times\"></i>\n                  </button>\n                </div>\n                @if (IsLoadingDestPreview) {\n                  <mj-loading text=\"Loading destination data...\" size=\"small\"></mj-loading>\n                } @else if (DestPreviewData.length === 0) {\n                  <p class=\"empty-hint\">No destination data available.</p>\n                } @else {\n                  <div class=\"preview-table-wrapper\">\n                    <table class=\"preview-table\">\n                      <thead>\n                        <tr>\n                          @for (col of GetPreviewColumns(DestPreviewData); track col) {\n                            <th>{{ col }}</th>\n                          }\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (row of DestPreviewData; track $index) {\n                          <tr>\n                            @for (col of GetPreviewColumns(DestPreviewData); track col) {\n                              <td>{{ FormatPreviewValue(row[col]) }}</td>\n                            }\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- ============================================================ -->\n      <!-- RIGHT PANEL: Last run details -->\n      <!-- ============================================================ -->\n      <div class=\"right-panel\">\n        <h4 class=\"panel-label\">Last Run Details</h4>\n        @if (!SelectedIntegrationID) {\n          <p class=\"empty-hint\">Select an integration to see run details.</p>\n        } @else if (IsLoadingRunDetails) {\n          <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n        } @else if (!LatestRun) {\n          <p class=\"empty-hint\">No runs found.</p>\n        } @else {\n          <div class=\"run-summary-card\">\n            <div class=\"run-summary-row\">\n              <span class=\"label\">Status</span>\n              <span class=\"run-status\" [class]=\"'status-' + RunStatusColor\">\n                {{ LatestRun.Status }}\n              </span>\n            </div>\n            <div class=\"run-summary-row\">\n              <span class=\"label\">Started</span>\n              <span>{{ FormatDate(LatestRun.StartedAt) }}</span>\n            </div>\n            <div class=\"run-summary-row\">\n              <span class=\"label\">Total Records</span>\n              <span>{{ LatestRun.TotalRecords | number }}</span>\n            </div>\n            <div class=\"run-summary-row\">\n              <span class=\"label\">Run By</span>\n              <span>{{ LatestRun.RunByUser }}</span>\n            </div>\n          </div>\n\n          @if (RunEntityDetails.length > 0) {\n            <h4 class=\"panel-label\" style=\"margin-top: 16px;\">Per-Entity Stats</h4>\n            @for (detail of RunEntityDetails; track detail.EntityID) {\n              <div class=\"entity-stat-card\">\n                <div class=\"entity-stat-name\">{{ detail.Entity }}</div>\n                <div class=\"entity-stat-grid\">\n                  <div class=\"mini-stat\">\n                    <span class=\"mini-val\">{{ detail.RecordsCreated }}</span>\n                    <span class=\"mini-label\">Created</span>\n                  </div>\n                  <div class=\"mini-stat\">\n                    <span class=\"mini-val\">{{ detail.RecordsUpdated }}</span>\n                    <span class=\"mini-label\">Updated</span>\n                  </div>\n                  <div class=\"mini-stat\">\n                    <span class=\"mini-val\" [class.has-errors]=\"detail.RecordsErrored > 0\">\n                      {{ detail.RecordsErrored }}\n                    </span>\n                    <span class=\"mini-label\">Errors</span>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".mapping-workspace { padding: 24px; height: 100%; display: flex; flex-direction: column; }\n.workspace-header {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 16px;\n}\n.workspace-header h2 {\n  margin: 0; font-size: 20px; font-weight: 600;\n}\n.workspace-header h2 i { margin-right: 8px; color: var(--mj-color-indigo-500); }\n\n/* ===== Three-panel layout ===== */\n.workspace-body {\n  display: flex; flex: 1; gap: 1px; background: var(--mj-border-default);\n  border-radius: 10px; overflow: hidden; min-height: 500px;\n}\n\n.left-panel { width: 320px; min-width: 280px; background: var(--mj-bg-surface); padding: 16px; overflow-y: auto; flex-shrink: 0; }\n.center-panel { flex: 1; background: var(--mj-bg-surface); padding: 20px; overflow-y: auto; }\n.right-panel { width: 280px; min-width: 240px; background: var(--mj-bg-surface); padding: 16px; overflow-y: auto; flex-shrink: 0; }\n\n/* ===== Shared ===== */\n.panel-label {\n  font-size: 11px; font-weight: 700; color: var(--mj-text-disabled);\n  text-transform: uppercase; letter-spacing: 0.6px;\n  margin: 0 0 6px 0; display: block;\n}\n.panel-title { margin: 0 0 12px 0; font-size: 16px; font-weight: 600; }\n.panel-title .field-count { color: var(--mj-text-disabled); font-weight: 400; font-size: 13px; }\n.empty-hint { color: var(--mj-text-disabled); font-size: 13px; font-style: italic; }\n.search-box { margin-bottom: 12px; }\n\n/* ===== Integration selector ===== */\n.integration-selector { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--mj-border-subtle); }\n\n/* ===== Entity Map Header ===== */\n.entity-map-header {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 10px;\n}\n.header-actions { display: flex; gap: 4px; }\n\n/* ===== Add Map Panel ===== */\n.add-map-panel {\n  background: var(--mj-bg-page); border: 1px solid var(--mj-border-default); border-radius: 10px;\n  padding: 16px; margin-bottom: 14px;\n}\n.add-panel-top {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 14px;\n}\n.add-panel-top h5 { margin: 0; font-size: 14px; font-weight: 600; }\n.add-panel-close {\n  background: none; border: none; cursor: pointer; color: var(--mj-text-disabled); font-size: 14px;\n}\n.add-panel-close:hover { color: var(--mj-text-primary); }\n\n.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }\n.form-group label { font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.form-row { display: flex; gap: 10px; }\n.form-row .form-group { flex: 1; }\n\n.source-loading {\n  display: flex; align-items: center; gap: 8px;\n  font-size: 12px; color: var(--mj-text-disabled); padding: 6px 0;\n}\n.source-loading i { color: var(--mj-color-indigo-500); }\n\n.discover-error-inline {\n  font-size: 12px; color: var(--mj-color-error-600); padding: 6px 0;\n}\n.discover-error-inline i { margin-right: 4px; }\n\n/* Target mode toggle */\n.target-mode-toggle {\n  display: flex; border: 1px solid var(--mj-border-default); border-radius: 6px;\n  overflow: hidden; margin-bottom: 12px;\n}\n.target-mode-btn {\n  flex: 1; padding: 8px 12px; font-size: 12px; font-weight: 600;\n  text-align: center; cursor: pointer; background: var(--mj-bg-surface); border: none;\n  color: var(--mj-text-muted); transition: all 0.15s;\n}\n.target-mode-btn:first-child { border-right: 1px solid var(--mj-border-default); }\n.target-mode-btn.active { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n.target-mode-btn:not(.active):hover { background: var(--mj-status-info-bg); color: var(--mj-color-indigo-500); }\n.target-mode-btn i { margin-right: 4px; }\n\n/* New entity form */\n.new-entity-form {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 8px;\n  padding: 14px; margin-bottom: 12px;\n}\n.new-entity-form .section-label {\n  font-size: 11px; font-weight: 700; color: var(--mj-color-indigo-500);\n  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;\n}\n.auto-hint { font-size: 10px; color: var(--mj-text-disabled); font-style: italic; }\n\n/* DDL preview in add panel */\n.ddl-preview-section { margin-top: 8px; }\n.ddl-preview-code {\n  background: var(--mj-text-primary); color: var(--mj-color-neutral-300); padding: 10px;\n  border-radius: 4px; font-size: 11px; line-height: 1.5;\n  max-height: 200px; overflow: auto; white-space: pre-wrap;\n  word-break: break-word; margin-top: 8px;\n}\n\n.add-form-actions { display: flex; gap: 6px; padding-top: 4px; }\n\n/* ===== Entity Map List ===== */\n.entity-map-list { display: flex; flex-direction: column; gap: 4px; }\n.entity-map-item {\n  padding: 8px 10px; border-radius: 6px;\n  cursor: pointer; border: 1px solid var(--mj-border-subtle); transition: all 0.15s;\n}\n.entity-map-item:hover { background: var(--mj-bg-page); }\n.entity-map-item.selected { background: var(--mj-status-info-bg); border-color: var(--mj-color-indigo-500); }\n.entity-map-item.pending { border-left: 3px solid var(--mj-status-warning); }\n\n.em-top-row {\n  display: flex; align-items: center; gap: 4px;\n  font-size: 13px; margin-bottom: 4px;\n}\n.em-name { font-weight: 600; }\n.em-arrow { color: var(--mj-text-disabled); font-size: 11px; }\n.em-entity { color: var(--mj-text-muted); }\n\n.em-bottom-row {\n  display: flex; align-items: center; justify-content: space-between;\n  font-size: 11px; color: var(--mj-text-disabled);\n}\n.em-badges { display: flex; gap: 4px; align-items: center; }\n.badge {\n  font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600;\n}\n.badge-direction { background: var(--mj-bg-surface-hover); color: var(--mj-text-muted); }\n.badge-pending { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.em-actions { display: flex; align-items: center; gap: 4px; }\n.em-delete {\n  opacity: 0; transition: opacity 0.15s;\n  cursor: pointer; color: var(--mj-color-error-600); background: none; border: none;\n  padding: 2px 4px; font-size: 12px;\n}\n.entity-map-item:hover .em-delete { opacity: 1; }\n\n/* ===== Center Panel: Placeholder ===== */\n.placeholder-message {\n  display: flex; flex-direction: column; align-items: center;\n  justify-content: center; height: 300px; color: var(--mj-text-disabled);\n}\n.placeholder-message i { font-size: 36px; margin-bottom: 12px; }\n.placeholder-message p { text-align: center; }\n\n/* ===== Pending Entity Panel ===== */\n.pending-entity-panel {\n  background: var(--mj-status-warning-bg); border: 1px solid var(--mj-color-warning-200); border-radius: 10px;\n  padding: 24px; text-align: center;\n}\n.pending-icon { font-size: 40px; color: var(--mj-status-warning); margin-bottom: 12px; }\n.pending-entity-panel h3 { font-size: 16px; margin-bottom: 8px; }\n.pending-entity-panel p { font-size: 13px; color: var(--mj-text-disabled); margin-bottom: 16px; line-height: 1.5; }\n\n/* Stepper */\n.pending-steps {\n  display: flex; gap: 0; margin: 20px 0; justify-content: center; align-items: center;\n}\n.step {\n  display: flex; flex-direction: column; align-items: center; gap: 6px;\n  padding: 0 16px;\n}\n.step-circle {\n  width: 36px; height: 36px; border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 14px; font-weight: 700;\n}\n.step-circle.done { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.step-circle.current { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n.step-circle.future { background: var(--mj-bg-surface-hover); color: var(--mj-text-disabled); }\n.step-label { font-size: 10px; font-weight: 600; color: var(--mj-text-disabled); text-transform: uppercase; white-space: nowrap; }\n.step-connector { width: 32px; height: 2px; background: var(--mj-border-default); align-self: center; margin-bottom: 18px; }\n.step-connector.done { background: var(--mj-color-success-700); }\n\n/* DDL in pending view */\n.ddl-preview-inline { margin-top: 16px; text-align: left; }\n.ddl-code-block {\n  background: var(--mj-text-primary); color: var(--mj-color-neutral-300); padding: 12px;\n  border-radius: 6px; font-size: 12px; line-height: 1.5;\n  max-height: 250px; overflow: auto; white-space: pre-wrap;\n}\n.ddl-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: center; }\n\n/* Pending fields list */\n.pending-fields-section { text-align: left; }\n.pending-fields-list {\n  display: flex; flex-direction: column; gap: 2px;\n  max-height: 200px; overflow-y: auto;\n}\n.pending-field-item {\n  display: flex; align-items: center; gap: 8px;\n  padding: 4px 8px; font-size: 13px; border-radius: 4px;\n}\n.pending-field-item:hover { background: var(--mj-status-warning-bg); }\n.pending-field-name { font-weight: 600; }\n.pending-field-type { font-size: 11px; color: var(--mj-text-disabled); background: var(--mj-bg-surface-hover); padding: 1px 6px; border-radius: 3px; }\n.pending-field-req { color: var(--mj-color-error-600); font-weight: 700; }\n\n/* ===== Auto-map banner ===== */\n.auto-map-banner {\n  background: var(--mj-status-info-bg); border: 1px solid var(--mj-color-info-100); border-radius: 8px;\n  padding: 12px 16px; margin-bottom: 16px;\n  display: flex; align-items: center; gap: 12px;\n}\n.auto-map-banner > i { color: var(--mj-color-indigo-500); font-size: 18px; }\n.auto-map-banner .banner-text { flex: 1; }\n.auto-map-banner .banner-text p { font-size: 13px; color: var(--mj-text-muted); margin: 0; }\n.auto-map-banner .banner-text strong { color: var(--mj-text-primary); }\n\n/* ===== Field Mapping Editor ===== */\n.field-mapping-header {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 16px;\n}\n.field-mapping-actions { display: flex; gap: 6px; }\n\n/* ===== Field Map Cards (New world-class design) ===== */\n.field-map-cards {\n  display: flex; flex-direction: column; gap: 6px;\n}\n\n.field-map-card {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  background: var(--mj-bg-surface);\n  transition: all 0.2s ease;\n  overflow: hidden;\n}\n.field-map-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: 0 2px 8px rgba(74, 108, 247, 0.06);\n}\n.field-map-card.has-transform {\n  border-left: 3px solid var(--mj-color-indigo-500);\n}\n.field-map-card.validation-error {\n  border-color: var(--mj-color-warning-200);\n  background: var(--mj-status-warning-bg);\n}\n\n/* Main mapping row */\n.fmc-row {\n  display: flex; align-items: center; gap: 10px;\n  padding: 10px 14px;\n}\n\n/* Source column */\n.fmc-source {\n  flex: 1; min-width: 0;\n}\n.fmc-field-name {\n  font-size: 13px; font-weight: 600; color: var(--mj-text-primary);\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.fmc-badges {\n  display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap;\n}\n.fmc-badge {\n  font-size: 9px; font-weight: 700; padding: 1px 5px;\n  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px;\n  white-space: nowrap; line-height: 1.5;\n}\n.badge-type {\n  background: var(--mj-bg-surface-hover); color: var(--mj-text-muted);\n}\n.badge-pk {\n  background: linear-gradient(135deg, var(--mj-color-warning-100), var(--mj-color-warning-200));\n  color: var(--mj-color-warning-800);\n}\n.badge-pk i { font-size: 8px; margin-right: 2px; }\n.badge-req {\n  background: linear-gradient(135deg, var(--mj-color-error-100), var(--mj-color-error-200));\n  color: var(--mj-color-error-800);\n}\n.badge-ro {\n  background: var(--mj-color-purple-50); color: var(--mj-color-purple-700);\n}\n\n/* Transform zone (center arrow / pill) */\n.fmc-transform-zone {\n  flex-shrink: 0;\n  display: flex; align-items: center; justify-content: center;\n  width: 100px;\n}\n.fmc-arrow-btn {\n  width: 32px; height: 32px;\n  border-radius: 50%; border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page); color: var(--mj-text-disabled);\n  cursor: pointer; font-size: 12px;\n  display: flex; align-items: center; justify-content: center;\n  transition: all 0.2s;\n}\n.fmc-arrow-btn:hover {\n  background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); border-color: var(--mj-color-indigo-500);\n  transform: scale(1.1);\n}\n.fmc-transform-pill {\n  display: flex; align-items: center; gap: 4px;\n  padding: 4px 10px; border-radius: 16px;\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border: 1px solid var(--mj-color-indigo-200); color: var(--mj-color-indigo-700);\n  font-size: 11px; font-weight: 600;\n  cursor: pointer; transition: all 0.2s;\n  white-space: nowrap;\n}\n.fmc-transform-pill:hover {\n  background: linear-gradient(135deg, var(--mj-color-indigo-100), var(--mj-color-indigo-200));\n  transform: scale(1.02);\n}\n.fmc-transform-pill i { font-size: 10px; }\n.fmc-transform-direct {\n  background: linear-gradient(135deg, var(--mj-bg-page), var(--mj-bg-surface-hover));\n  border-color: var(--mj-color-neutral-300); color: var(--mj-text-muted);\n}\n.fmc-transform-direct:hover {\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border-color: var(--mj-color-indigo-200); color: var(--mj-color-indigo-700);\n}\n.fmc-step-count {\n  background: var(--mj-color-indigo-700); color: var(--mj-bg-surface); font-size: 9px;\n  padding: 0 4px; border-radius: 8px; font-weight: 700;\n}\n\n/* Destination column */\n.fmc-dest {\n  flex: 1; min-width: 0;\n}\n.fmc-select {\n  width: 100%; padding: 6px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  transition: border-color 0.15s;\n}\n.fmc-select:focus { border-color: var(--mj-color-indigo-500); outline: none; box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.12); }\n\n/* Shared input style */\n.fmc-input {\n  width: 100%; padding: 5px 8px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  transition: border-color 0.15s;\n}\n.fmc-input:focus { border-color: var(--mj-color-indigo-500); outline: none; box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.12); }\n.fmc-input.mono { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 12px; }\n\n/* Flags (key, required) */\n.fmc-flags {\n  display: flex; gap: 6px; flex-shrink: 0;\n}\n.fmc-flag {\n  display: flex; align-items: center; gap: 3px;\n  font-size: 11px; color: var(--mj-text-disabled); cursor: pointer;\n  padding: 2px 4px; border-radius: 4px;\n  transition: color 0.15s;\n}\n.fmc-flag:hover { color: var(--mj-color-indigo-500); }\n.fmc-flag input[type=\"checkbox\"] {\n  width: 13px; height: 13px; cursor: pointer;\n  accent-color: var(--mj-color-indigo-500);\n}\n.fmc-flag i { font-size: 10px; }\n.fmc-req-star { font-size: 14px; font-weight: 700; color: inherit; }\n\n/* Remove button */\n.fmc-remove {\n  flex-shrink: 0;\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 13px; padding: 4px;\n  border-radius: 4px; transition: all 0.15s;\n}\n.fmc-remove:hover { color: var(--mj-status-error); background: var(--mj-status-error-bg); }\n\n/* ===== Transform Pipeline Editor ===== */\n.fmc-transform-editor {\n  border-top: 1px solid var(--mj-bg-surface-hover);\n  background: linear-gradient(180deg, var(--mj-color-indigo-50) 0%, var(--mj-bg-page) 100%);\n  padding: 12px 14px;\n}\n.fmc-te-header {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 10px;\n}\n.fmc-te-title {\n  font-size: 11px; font-weight: 700; color: var(--mj-color-indigo-500);\n  text-transform: uppercase; letter-spacing: 0.5px;\n}\n.fmc-te-title i { margin-right: 4px; }\n.fmc-te-add {\n  font-size: 11px; font-weight: 600; color: var(--mj-color-indigo-500);\n  background: none; border: 1px solid var(--mj-color-indigo-200);\n  border-radius: 6px; padding: 3px 10px;\n  cursor: pointer; transition: all 0.15s;\n}\n.fmc-te-add:hover { background: var(--mj-color-indigo-50); }\n.fmc-te-add i { margin-right: 3px; font-size: 10px; }\n\n/* Individual transform step */\n.fmc-te-step {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 10px 12px;\n  margin-bottom: 8px;\n  transition: box-shadow 0.15s;\n}\n.fmc-te-step:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.05); }\n.fmc-te-step:last-child { margin-bottom: 0; }\n\n.fmc-te-step-header {\n  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;\n}\n.fmc-te-step-num {\n  width: 22px; height: 22px; border-radius: 50%;\n  background: linear-gradient(135deg, var(--mj-color-indigo-500), var(--mj-color-indigo-500));\n  color: var(--mj-bg-surface); font-size: 11px; font-weight: 700;\n  display: flex; align-items: center; justify-content: center;\n  flex-shrink: 0;\n}\n.fmc-te-type-select {\n  flex: 1; padding: 4px 8px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 12px; font-weight: 600;\n  color: var(--mj-text-primary); background: var(--mj-bg-page);\n}\n.fmc-te-type-select:focus { border-color: var(--mj-color-indigo-500); outline: none; }\n.fmc-te-error-select {\n  width: 100px; padding: 4px 6px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 11px; color: var(--mj-text-muted);\n  background: var(--mj-bg-page);\n}\n.fmc-te-error-select:focus { border-color: var(--mj-color-indigo-500); outline: none; }\n.fmc-te-remove-step {\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 12px; padding: 4px;\n  border-radius: 4px; transition: all 0.15s;\n}\n.fmc-te-remove-step:hover { color: var(--mj-status-error); background: var(--mj-status-error-bg); }\n\n/* Config area */\n.fmc-te-config {\n  padding-left: 30px;\n}\n.fmc-te-field {\n  margin-bottom: 8px;\n}\n.fmc-te-field:last-child { margin-bottom: 0; }\n.fmc-te-field label {\n  display: block; font-size: 11px; font-weight: 600;\n  color: var(--mj-text-muted); margin-bottom: 3px;\n}\n.fmc-te-field label code {\n  background: var(--mj-bg-surface-hover); padding: 0 3px; border-radius: 3px;\n  font-size: 10px; color: var(--mj-color-indigo-700);\n}\n.fmc-te-hint { font-weight: 400; color: var(--mj-text-disabled); }\n.fmc-te-row {\n  display: flex; gap: 10px; align-items: flex-end;\n}\n.fmc-te-sm { max-width: 140px; }\n.fmc-textarea {\n  resize: vertical; min-height: 40px;\n}\n\n/* Combine chips */\n.fmc-combine-chips {\n  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;\n}\n.fmc-chip {\n  font-size: 11px; padding: 3px 8px; border-radius: 14px;\n  border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface);\n  color: var(--mj-text-muted); cursor: pointer;\n  transition: all 0.15s; font-weight: 500;\n}\n.fmc-chip:hover { border-color: var(--mj-color-indigo-300); color: var(--mj-color-indigo-700); }\n.fmc-chip.selected {\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border-color: var(--mj-color-indigo-400); color: var(--mj-color-indigo-700); font-weight: 600;\n}\n\n/* Lookup table */\n.fmc-lookup-table {\n  display: flex; flex-direction: column; gap: 4px; margin-top: 4px;\n}\n.fmc-lookup-row {\n  display: flex; align-items: center; gap: 6px;\n}\n.fmc-lookup-row .fmc-input { flex: 1; }\n.fmc-lookup-arrow { color: var(--mj-color-indigo-200); font-size: 10px; flex-shrink: 0; }\n.fmc-lookup-del {\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 11px; padding: 2px;\n  transition: color 0.15s;\n}\n.fmc-lookup-del:hover { color: var(--mj-status-error); }\n.fmc-lookup-add {\n  font-size: 11px; color: var(--mj-color-indigo-500); background: none;\n  border: 1px dashed var(--mj-color-indigo-200); border-radius: 6px;\n  padding: 4px 10px; cursor: pointer;\n  transition: all 0.15s; margin-top: 2px;\n}\n.fmc-lookup-add:hover { background: var(--mj-color-indigo-50); }\n.fmc-lookup-add i { margin-right: 3px; font-size: 10px; }\n\n/* ===== Data Preview ===== */\n.data-preview-section { margin-top: 24px; border-top: 1px solid var(--mj-border-subtle); padding-top: 16px; }\n.preview-actions { display: flex; gap: 8px; margin-bottom: 12px; }\n\n.preview-panel {\n  background: var(--mj-bg-page); border: 1px solid var(--mj-border-default); border-radius: 8px;\n  padding: 12px; margin-bottom: 12px;\n}\n.preview-panel-header {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 8px;\n}\n.preview-panel-header h4 { font-size: 13px; font-weight: 600; margin: 0; }\n.preview-panel-header h4 i { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.preview-table-wrapper { overflow-x: auto; }\n.preview-table {\n  width: 100%; border-collapse: collapse; font-size: 12px;\n}\n.preview-table th {\n  text-align: left; padding: 5px 8px;\n  background: var(--mj-border-default); font-weight: 600; font-size: 10px;\n  text-transform: uppercase; color: var(--mj-text-muted);\n  border-bottom: 1px solid var(--mj-border-default); white-space: nowrap;\n}\n.preview-table td {\n  padding: 4px 8px; border-bottom: 1px solid var(--mj-border-subtle);\n  white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;\n}\n.preview-table tr:hover { background: var(--mj-status-info-bg); }\n\n/* ===== Right panel: run details ===== */\n.run-summary-card {\n  background: var(--mj-bg-page); border-radius: 8px; padding: 12px;\n}\n.run-summary-row {\n  display: flex; justify-content: space-between;\n  padding: 4px 0; font-size: 13px;\n}\n.run-summary-row .label { color: var(--mj-text-muted); font-weight: 500; }\n.run-status {\n  font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 600;\n}\n.status-green { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.status-amber { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n.status-red   { background: var(--mj-status-error-bg); color: var(--mj-color-error-600); }\n\n.entity-stat-card {\n  background: var(--mj-bg-page); border-radius: 6px; padding: 10px;\n  margin-bottom: 8px;\n}\n.entity-stat-name { font-size: 13px; font-weight: 600; margin-bottom: 6px; }\n.entity-stat-grid { display: flex; gap: 12px; }\n.mini-stat { text-align: center; }\n.mini-val { display: block; font-size: 16px; font-weight: 600; }\n.mini-val.has-errors { color: var(--mj-color-error-600); }\n.mini-label { font-size: 10px; color: var(--mj-text-disabled); }\n\n/* ===== Validation ===== */\n.validation-banner {\n  background: var(--mj-color-warning-50); border: 1px solid var(--mj-color-warning-200); border-radius: 8px;\n  padding: 10px 14px; margin-bottom: 14px;\n  display: flex; align-items: flex-start; gap: 10px;\n  font-size: 13px; color: var(--mj-color-warning-600);\n}\n.validation-banner > i { margin-top: 2px; }\n.validation-warnings { display: flex; flex-direction: column; gap: 2px; }\n\n.field-map-card.validation-error .fmc-source {\n  border-left: 3px solid var(--mj-color-warning-600);\n  padding-left: 8px;\n}\n\n/* ===== Responsive ===== */\n@media (max-width: 1100px) { .right-panel { display: none; } }\n@media (max-width: 800px) { .left-panel { width: 260px; } }\n"] }]
+        args: [{ standalone: false, selector: 'app-mapping-workspace', template: "<div class=\"mapping-workspace\">\n  <div class=\"workspace-header\">\n    <h2><i class=\"fa-solid fa-diagram-project\"></i> Mapping Workspace</h2>\n  </div>\n\n  @if (IsLoadingIntegrations) {\n    <mj-loading text=\"Loading integrations...\" size=\"medium\"></mj-loading>\n  } @else {\n    <div class=\"workspace-body\">\n      <!-- ============================================================ -->\n      <!-- LEFT PANEL: Integration selector + Entity map list -->\n      <!-- ============================================================ -->\n      <div class=\"left-panel\">\n        <div class=\"integration-selector\">\n          <label class=\"panel-label\">Integration</label>\n          <mj-dropdown\n            [Data]=\"Integrations\"\n            TextField=\"Name\"\n            ValueField=\"ID\"\n            [ValuePrimitive]=\"true\"\n            [(ngModel)]=\"SelectedIntegrationID\"\n            (ValueChange)=\"OnIntegrationChange($any($event))\"\n            [DefaultItem]=\"{ ID: '', Name: '-- Select --' }\">\n          </mj-dropdown>\n        </div>\n\n        @if (IsLoadingEntityMaps) {\n          <mj-loading text=\"Loading entity maps...\" size=\"small\"></mj-loading>\n        } @else if (SelectedIntegrationID) {\n          <!-- Entity Map Header -->\n          <div class=\"entity-map-header\">\n            <span class=\"panel-label\" style=\"margin: 0;\">Entity Maps</span>\n            <div class=\"header-actions\">\n              <button mjButton variant=\"flat\" size=\"sm\"\n                      (click)=\"OpenAddPanel()\" title=\"Add entity map\">\n                <i class=\"fa-solid fa-plus\"></i> Add Map\n              </button>\n            </div>\n          </div>\n\n          <!-- ==================== ADD MAP PANEL ==================== -->\n          @if (ShowAddPanel) {\n            <div class=\"add-map-panel\">\n              <div class=\"add-panel-top\">\n                <h5><i class=\"fa-solid fa-plus-circle\"></i> Add Entity Map</h5>\n                <button class=\"add-panel-close\" (click)=\"CloseAddPanel()\">\n                  <i class=\"fa-solid fa-times\"></i>\n                </button>\n              </div>\n\n              <!-- Source Object Dropdown -->\n              <div class=\"form-group\">\n                <label>Source Object</label>\n                @if (IsDiscoveringObjects) {\n                  <div class=\"source-loading\">\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i> Discovering objects...\n                  </div>\n                } @else if (DiscoverError) {\n                  <div class=\"discover-error-inline\">\n                    <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                    {{ DiscoverError }}\n                  </div>\n                } @else if (DiscoveredObjects.length === 0) {\n                  <div class=\"discover-error-inline\">\n                    No objects found in external system.\n                  </div>\n                } @else {\n                  <mj-dropdown\n                    [Data]=\"DiscoveredObjects\"\n                    TextField=\"Label\"\n                    ValueField=\"Name\"\n                    [ValuePrimitive]=\"true\"\n                    [(ngModel)]=\"SelectedSourceObjectName\"\n                    (ValueChange)=\"OnSourceObjectChange($any($event))\"\n                    [Filterable]=\"true\"\n                    [DefaultItem]=\"{ Name: '', Label: 'Select source object...' }\">\n                  </mj-dropdown>\n                }\n              </div>\n\n              <!-- Target Mode Toggle -->\n              <div class=\"target-mode-toggle\">\n                <button class=\"target-mode-btn\"\n                        [class.active]=\"TargetMode === 'existing'\"\n                        (click)=\"SetTargetMode('existing')\">\n                  <i class=\"fa-solid fa-database\"></i> Existing Entity\n                </button>\n                <button class=\"target-mode-btn\"\n                        [class.active]=\"TargetMode === 'new'\"\n                        (click)=\"SetTargetMode('new')\">\n                  <i class=\"fa-solid fa-wand-magic-sparkles\"></i> New Entity\n                </button>\n              </div>\n\n              <!-- Existing entity picker -->\n              @if (TargetMode === 'existing') {\n                <div class=\"form-group\">\n                  <label>Target MJ Entity</label>\n                  @if (IsLoadingEntities) {\n                    <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n                  } @else {\n                    <mj-dropdown\n                      [Data]=\"MJEntities\"\n                      TextField=\"Name\"\n                      ValueField=\"ID\"\n                      [ValuePrimitive]=\"true\"\n                      [(ngModel)]=\"SelectedEntityID\"\n                      [Filterable]=\"true\"\n                      [DefaultItem]=\"{ ID: null, Name: 'Select entity...' }\">\n                    </mj-dropdown>\n                  }\n                </div>\n              }\n\n              <!-- New entity form -->\n              @if (TargetMode === 'new') {\n                <div class=\"new-entity-form\">\n                  <div class=\"section-label\">Define New Entity</div>\n                  <div class=\"form-group\">\n                    <label>DB Schema</label>\n                    <mj-combobox\n                      [Data]=\"DBSchemas\"\n                      [(ngModel)]=\"NewEntitySchemaName\"\n                      (ValueChange)=\"OnSchemaNameChange()\"\n                      [AllowCustom]=\"true\"\n                      [Filterable]=\"true\"\n                      Placeholder=\"Select or type schema...\">\n                    </mj-combobox>\n                  </div>\n                  <div class=\"form-row\">\n                    <div class=\"form-group\">\n                      <label>Table Name</label>\n                      <input class=\"mj-input\" [(ngModel)]=\"NewEntityTableName\"\n                             [placeholder]=\"SuggestedTableName || 'Table name'\" />\n                      @if (SuggestedTableName && !NewEntityTableName) {\n                        <span class=\"auto-hint\">Suggested: {{ SuggestedTableName }}</span>\n                      }\n                    </div>\n                    <div class=\"form-group\">\n                      <label>Entity Name</label>\n                      <input class=\"mj-input\" [(ngModel)]=\"NewEntityName\"\n                             [placeholder]=\"SuggestedEntityName || 'Entity name'\" />\n                    </div>\n                  </div>\n\n                  <!-- DDL Preview -->\n                  @if (SelectedSourceObjectName && NewEntitySchemaName && NewEntityTableName) {\n                    <div class=\"ddl-preview-section\">\n                      <button mjButton variant=\"outline\" size=\"sm\"\n                              [disabled]=\"IsGeneratingDDL\"\n                              (click)=\"PreviewDDL()\">\n                        @if (IsGeneratingDDL) {\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i> Generating...\n                        } @else {\n                          <i class=\"fa-solid fa-database\"></i> Preview DDL\n                        }\n                      </button>\n                      @if (DDLPreviewError) {\n                        <div class=\"discover-error-inline\" style=\"margin-top: 8px;\">\n                          <i class=\"fa-solid fa-triangle-exclamation\"></i> {{ DDLPreviewError }}\n                        </div>\n                      }\n                      @if (DDLPreviewContent) {\n                        <pre class=\"ddl-preview-code\">{{ DDLPreviewContent }}</pre>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n\n              <!-- Sync direction -->\n              <div class=\"form-group\">\n                <label>Sync Direction</label>\n                <mj-dropdown\n                  [Data]=\"['Pull', 'Push', 'Bidirectional']\"\n                  [(ngModel)]=\"AddSyncDirection\">\n                </mj-dropdown>\n              </div>\n\n              <!-- Save / Cancel -->\n              <div class=\"add-form-actions\">\n                <button mjButton variant=\"primary\" size=\"sm\"\n                        [disabled]=\"!IsAddFormValid || IsSavingEntityMap\"\n                        (click)=\"SaveAddMap()\">\n                  @if (IsSavingEntityMap) {\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n                  } @else if (TargetMode === 'new') {\n                    <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Create Pending Map\n                  } @else {\n                    <i class=\"fa-solid fa-check\"></i> Add Map\n                  }\n                </button>\n                <button mjButton size=\"sm\" (click)=\"CloseAddPanel()\">\n                  Cancel\n                </button>\n              </div>\n            </div>\n          }\n\n          <!-- Search -->\n          @if (AllMaps.length > 0) {\n            <div class=\"search-box\">\n              <input class=\"mj-input\"\n                     [(ngModel)]=\"EntityMapSearchText\"\n                     placeholder=\"Search entity maps...\" />\n            </div>\n          }\n\n          <!-- Entity Map List -->\n          @if (AllMaps.length === 0 && !ShowAddPanel) {\n            <p class=\"empty-hint\">\n              No entity maps configured.\n              <a href=\"javascript:void(0)\" (click)=\"OpenAddPanel()\" style=\"color: var(--mj-brand-primary);\">Add one</a>\n            </p>\n          } @else if (FilteredMaps.length === 0 && AllMaps.length > 0) {\n            <p class=\"empty-hint\">No matches for \"{{ EntityMapSearchText }}\".</p>\n          } @else {\n            <div class=\"entity-map-list\">\n              @for (item of FilteredMaps; track item.ID) {\n                <div class=\"entity-map-item\"\n                     [class.selected]=\"IsSelectedMap(item.ID)\"\n                     [class.pending]=\"item.IsPending\"\n                     (click)=\"OnMapSelect(item)\">\n                  <div class=\"em-top-row\">\n                    <span class=\"em-name\">{{ item.SourceName }}</span>\n                    <span class=\"em-arrow\"><i class=\"fa-solid fa-arrow-right\"></i></span>\n                    <span class=\"em-entity\">{{ item.TargetName }}</span>\n                  </div>\n                  <div class=\"em-bottom-row\">\n                    <div class=\"em-badges\">\n                      <span class=\"badge badge-direction\">{{ item.SyncDirection }}</span>\n                      @if (item.IsPending) {\n                        <span class=\"badge badge-pending\">Pending</span>\n                      }\n                    </div>\n                    <div class=\"em-actions\">\n                      <button class=\"em-delete\" title=\"Delete\"\n                              (click)=\"OnDeleteMap(item, $event)\">\n                        <i class=\"fa-solid fa-trash-can\"></i>\n                      </button>\n                      @if (!item.IsPending && item.RealMap) {\n                        <mj-switch\n                          [(ngModel)]=\"item.RealMap.SyncEnabled\"\n                          (ngModelChange)=\"OnToggleEntityMap(item.RealMap)\">\n                        </mj-switch>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n\n      <!-- ============================================================ -->\n      <!-- CENTER PANEL: Field mapping / Pending entity / Placeholder -->\n      <!-- ============================================================ -->\n      <div class=\"center-panel\">\n        @if (!SelectedMapID) {\n          <!-- No selection placeholder -->\n          <div class=\"placeholder-message\">\n            <i class=\"fa-solid fa-hand-pointer\"></i>\n            <p>Select an entity map from the left panel to view and edit field mappings.</p>\n          </div>\n        } @else if (SelectedPendingMap) {\n          <!-- ==================== PENDING ENTITY VIEW ==================== -->\n          <div class=\"pending-entity-panel\">\n            <div class=\"pending-icon\"><i class=\"fa-solid fa-clock\"></i></div>\n            <h3>Pending Entity: {{ SelectedPendingMap.EntityName }}</h3>\n            <p>\n              This entity map is waiting for the target entity\n              <strong>{{ SelectedPendingMap.SchemaName }}.{{ SelectedPendingMap.TableName }}</strong>\n              to be created. Run the DDL migration and CodeGen to activate this mapping.\n            </p>\n\n            <!-- Progress stepper -->\n            <div class=\"pending-steps\">\n              <div class=\"step\">\n                <div class=\"step-circle done\"><i class=\"fa-solid fa-check\"></i></div>\n                <span class=\"step-label\">Map Created</span>\n              </div>\n              <div class=\"step-connector\" [class.done]=\"SelectedPendingMap.DDLContent\"></div>\n              <div class=\"step\">\n                <div class=\"step-circle\" [ngClass]=\"GetPendingStepStatus(SelectedPendingMap, 2)\">\n                  @if (SelectedPendingMap.DDLContent) {\n                    <i class=\"fa-solid fa-check\"></i>\n                  } @else {\n                    2\n                  }\n                </div>\n                <span class=\"step-label\">DDL Generated</span>\n              </div>\n              <div class=\"step-connector\"></div>\n              <div class=\"step\">\n                <div class=\"step-circle future\">3</div>\n                <span class=\"step-label\">Deploy & CodeGen</span>\n              </div>\n              <div class=\"step-connector\"></div>\n              <div class=\"step\">\n                <div class=\"step-circle future\">4</div>\n                <span class=\"step-label\">Ready to Sync</span>\n              </div>\n            </div>\n\n            <!-- DDL content -->\n            @if (SelectedPendingMap.DDLContent) {\n              <div class=\"ddl-preview-inline\">\n                <h4 style=\"font-size: 14px; margin-bottom: 8px;\">\n                  <i class=\"fa-solid fa-database\"></i> Generated DDL\n                </h4>\n                <pre class=\"ddl-code-block\">{{ SelectedPendingMap.DDLContent }}</pre>\n                <div class=\"ddl-actions\">\n                  <button mjButton variant=\"outline\" size=\"sm\"\n                          (click)=\"CopyDDLToClipboard(SelectedPendingMap.DDLContent)\">\n                    <i class=\"fa-solid fa-copy\"></i> Copy DDL\n                  </button>\n                </div>\n              </div>\n            }\n\n            <!-- Source fields list -->\n            @if (SelectedPendingMap.SourceFields.length > 0) {\n              <div class=\"pending-fields-section\">\n                <h4 style=\"font-size: 14px; margin: 16px 0 8px;\">\n                  <i class=\"fa-solid fa-list\"></i> Source Fields\n                  <span style=\"color: var(--mj-text-muted); font-weight: 400;\">({{ SelectedPendingMap.SourceFields.length }})</span>\n                </h4>\n                <div class=\"pending-fields-list\">\n                  @for (field of SelectedPendingMap.SourceFields; track field.Name) {\n                    <div class=\"pending-field-item\">\n                      <span class=\"pending-field-name\">{{ field.Name }}</span>\n                      <span class=\"pending-field-type\">{{ field.Type }}</span>\n                      @if (field.IsPrimaryKey) {\n                        <i class=\"fa-solid fa-key key-icon\" title=\"Key field\"></i>\n                      }\n                      @if (field.IsRequired) {\n                        <span class=\"pending-field-req\">*</span>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        } @else if (IsLoadingFieldMaps) {\n          <mj-loading text=\"Loading field maps...\" size=\"medium\"></mj-loading>\n        } @else {\n          <!-- ==================== FIELD MAPPING EDITOR ==================== -->\n\n          <!-- Auto-map banner -->\n          @if (ShowAutoMapBanner) {\n            <div class=\"auto-map-banner\">\n              <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n              <div class=\"banner-text\">\n                <p><strong>{{ AutoMapCount }} field{{ AutoMapCount !== 1 ? 's' : '' }} auto-mapped</strong> by matching source and destination field names.</p>\n              </div>\n              <button mjButton variant=\"flat\" size=\"sm\" (click)=\"DismissAutoMapBanner()\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            </div>\n          }\n\n          <!-- Validation warnings -->\n          @if (ActiveEditableFields.length > 0 && !MappingValidation.IsValid) {\n            <div class=\"validation-banner\">\n              <i class=\"fa-solid fa-triangle-exclamation\"></i>\n              <div class=\"validation-warnings\">\n                @for (warning of MappingValidation.Warnings; track warning) {\n                  <span>{{ warning }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"field-mapping-header\">\n            <h3 class=\"panel-title\">\n              Field Mappings\n              <span class=\"field-count\">({{ ActiveEditableFields.length }})</span>\n            </h3>\n            <div class=\"field-mapping-actions\">\n              <button mjButton variant=\"outline\" size=\"sm\"\n                      [disabled]=\"IsLoadingSourceFields\"\n                      (click)=\"RerunAutoMap()\" title=\"Auto-match source and destination fields by name\">\n                <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Auto-Map\n              </button>\n              <button mjButton variant=\"outline\" size=\"sm\"\n                      (click)=\"AddFieldMapping()\">\n                <i class=\"fa-solid fa-plus\"></i> Add Field\n              </button>\n              <button mjButton variant=\"primary\" size=\"sm\"\n                      [disabled]=\"!HasDirtyFields || IsSavingFields\"\n                      (click)=\"SaveFieldMappings()\">\n                @if (IsSavingFields) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n                } @else {\n                  <i class=\"fa-solid fa-floppy-disk\"></i> Save\n                }\n              </button>\n            </div>\n          </div>\n\n          @if (ActiveEditableFields.length === 0) {\n            <p class=\"empty-hint\">\n              No field mappings yet.\n              <a href=\"javascript:void(0)\" (click)=\"AddFieldMapping()\" style=\"color: var(--mj-brand-primary);\">Add one</a>\n            </p>\n          } @else {\n            <div class=\"field-map-cards\">\n              @for (field of ActiveEditableFields; track field; let i = $index) {\n                <div class=\"field-map-card\" [class.validation-error]=\"field.IsRequired && !field.DestinationFieldName\"\n                     [class.has-transform]=\"field.TransformPipeline.length > 0\">\n\n                  <!-- Main mapping row -->\n                  <div class=\"fmc-row\">\n                    <!-- Source column -->\n                    <div class=\"fmc-source\">\n                      @if (field.IsNew) {\n                        <input type=\"text\" class=\"fmc-input\" [(ngModel)]=\"field.SourceFieldName\"\n                               (ngModelChange)=\"OnFieldChanged(field)\" placeholder=\"Source field name\" />\n                      } @else {\n                        <div class=\"fmc-field-name\">{{ field.SourceFieldName }}</div>\n                        <div class=\"fmc-badges\">\n                          @if (field.SourceFieldType) {\n                            <span class=\"fmc-badge badge-type\">{{ field.SourceFieldType }}</span>\n                          }\n                          @if (field.IsSourcePK) {\n                            <span class=\"fmc-badge badge-pk\" title=\"Primary Key\"><i class=\"fa-solid fa-key\"></i> PK</span>\n                          }\n                          @if (field.IsSourceRequired) {\n                            <span class=\"fmc-badge badge-req\" title=\"Required\">REQ</span>\n                          }\n                          @if (field.IsSourceReadOnly) {\n                            <span class=\"fmc-badge badge-ro\" title=\"Read-Only\">RO</span>\n                          }\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Transform indicator -->\n                    <div class=\"fmc-transform-zone\">\n                      @if (field.TransformPipeline.length > 1) {\n                        <button class=\"fmc-transform-pill\" (click)=\"ToggleTransformEditor(field)\"\n                                [title]=\"field.TransformPipeline.length + ' transform step(s)'\">\n                          <i [class]=\"GetTransformIcon(field.TransformPipeline[0].Type)\"></i>\n                          <span>{{ GetTransformLabel(field.TransformPipeline[0].Type) }}</span>\n                          <span class=\"fmc-step-count\">+{{ field.TransformPipeline.length - 1 }}</span>\n                        </button>\n                      } @else {\n                        <button class=\"fmc-transform-pill fmc-transform-direct\" (click)=\"ToggleTransformEditor(field)\"\n                                title=\"Click to change transform type\">\n                          <i class=\"fa-solid fa-arrow-right\"></i>\n                          <span>{{ field.TransformPipeline.length > 0 ? GetTransformLabel(field.TransformPipeline[0].Type) : 'Direct' }}</span>\n                        </button>\n                      }\n                    </div>\n\n                    <!-- Destination column -->\n                    <div class=\"fmc-dest\">\n                      @if (DestinationFields.length > 0) {\n                        <select class=\"fmc-select\" [(ngModel)]=\"field.DestinationFieldName\"\n                                (ngModelChange)=\"OnFieldChanged(field)\">\n                          <option value=\"\">-- Select destination --</option>\n                          @for (df of DestinationFields; track df.ID) {\n                            <option [value]=\"df.Name\">{{ df.Name }}</option>\n                          }\n                        </select>\n                      } @else {\n                        <input type=\"text\" class=\"fmc-input\" [(ngModel)]=\"field.DestinationFieldName\"\n                               (ngModelChange)=\"OnFieldChanged(field)\" placeholder=\"Destination field\" />\n                      }\n                    </div>\n\n                    <!-- Sync flags -->\n                    <div class=\"fmc-flags\">\n                      <label class=\"fmc-flag\" title=\"Key field for matching\">\n                        <input type=\"checkbox\" [(ngModel)]=\"field.IsKeyField\"\n                               (ngModelChange)=\"OnFieldChanged(field)\" />\n                        <i class=\"fa-solid fa-key\"></i>\n                      </label>\n                      <label class=\"fmc-flag\" title=\"Required field\">\n                        <input type=\"checkbox\" [(ngModel)]=\"field.IsRequired\"\n                               (ngModelChange)=\"OnFieldChanged(field)\" />\n                        <span class=\"fmc-req-star\">*</span>\n                      </label>\n                    </div>\n\n                    <!-- Remove button -->\n                    <button class=\"fmc-remove\" title=\"Remove mapping\" (click)=\"RemoveFieldMapping(i)\">\n                      <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                  </div>\n\n                  <!-- Transform pipeline editor (expandable) -->\n                  @if (field.ShowTransformEditor && field.TransformPipeline.length > 0) {\n                    <div class=\"fmc-transform-editor\">\n                      <div class=\"fmc-te-header\">\n                        <span class=\"fmc-te-title\"><i class=\"fa-solid fa-wand-magic-sparkles\"></i> Transform Pipeline</span>\n                        <button class=\"fmc-te-add\" (click)=\"AddTransformStep(field)\" title=\"Add another step\">\n                          <i class=\"fa-solid fa-plus\"></i> Add Step\n                        </button>\n                      </div>\n                      @for (step of field.TransformPipeline; track $index; let si = $index) {\n                        <div class=\"fmc-te-step\">\n                          <div class=\"fmc-te-step-header\">\n                            <span class=\"fmc-te-step-num\">{{ si + 1 }}</span>\n                            <select class=\"fmc-te-type-select\" [ngModel]=\"step.Type\"\n                                    (ngModelChange)=\"OnTransformTypeChange(field, step, $event)\">\n                              @for (tt of TransformTypes; track tt.Value) {\n                                <option [value]=\"tt.Value\">{{ tt.Label }}</option>\n                              }\n                            </select>\n                            <select class=\"fmc-te-error-select\" [(ngModel)]=\"step.OnError\"\n                                    (ngModelChange)=\"OnTransformConfigChange(field)\" title=\"On error\">\n                              <option value=\"Fail\">Fail</option>\n                              <option value=\"Skip\">Skip row</option>\n                              <option value=\"Null\">Set null</option>\n                            </select>\n                            <button class=\"fmc-te-remove-step\" (click)=\"RemoveTransformStep(field, si)\" title=\"Remove step\">\n                              <i class=\"fa-solid fa-trash-can\"></i>\n                            </button>\n                          </div>\n\n                          <!-- Config editors per type -->\n                          <div class=\"fmc-te-config\">\n                            @switch (step.Type) {\n                              @case ('direct') {\n                                <div class=\"fmc-te-field\">\n                                  <label>Default value (when source is null)</label>\n                                  <input type=\"text\" class=\"fmc-input\" [ngModel]=\"step.Config['DefaultValue'] ?? ''\"\n                                         (ngModelChange)=\"step.Config['DefaultValue'] = $event; OnTransformConfigChange(field)\"\n                                         placeholder=\"Leave empty for no default\" />\n                                </div>\n                              }\n                              @case ('regex') {\n                                <div class=\"fmc-te-row\">\n                                  <div class=\"fmc-te-field\">\n                                    <label>Pattern</label>\n                                    <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['Pattern'] ?? ''\"\n                                           (ngModelChange)=\"step.Config['Pattern'] = $event; OnTransformConfigChange(field)\"\n                                           placeholder=\"e.g. (\\d{3})-(\\d{4})\" />\n                                  </div>\n                                  <div class=\"fmc-te-field\">\n                                    <label>Replacement</label>\n                                    <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['Replacement'] ?? ''\"\n                                           (ngModelChange)=\"step.Config['Replacement'] = $event; OnTransformConfigChange(field)\"\n                                           placeholder=\"e.g. $1$2\" />\n                                  </div>\n                                  <div class=\"fmc-te-field fmc-te-sm\">\n                                    <label>Flags</label>\n                                    <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['Flags'] ?? 'g'\"\n                                           (ngModelChange)=\"step.Config['Flags'] = $event; OnTransformConfigChange(field)\"\n                                           placeholder=\"gi\" />\n                                  </div>\n                                </div>\n                              }\n                              @case ('split') {\n                                <div class=\"fmc-te-row\">\n                                  <div class=\"fmc-te-field\">\n                                    <label>Delimiter</label>\n                                    <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['Delimiter'] ?? ','\"\n                                           (ngModelChange)=\"step.Config['Delimiter'] = $event; OnTransformConfigChange(field)\"\n                                           placeholder=\",\" />\n                                  </div>\n                                  <div class=\"fmc-te-field fmc-te-sm\">\n                                    <label>Part index (0-based)</label>\n                                    <input type=\"number\" class=\"fmc-input\" [ngModel]=\"step.Config['Index'] ?? 0\"\n                                           (ngModelChange)=\"step.Config['Index'] = +$event; OnTransformConfigChange(field)\"\n                                           min=\"0\" />\n                                  </div>\n                                </div>\n                              }\n                              @case ('combine') {\n                                <div class=\"fmc-te-field\">\n                                  <label>Source fields to combine</label>\n                                  <div class=\"fmc-combine-chips\">\n                                    @for (sf of GetAvailableSourceFields(); track sf) {\n                                      <button class=\"fmc-chip\" [class.selected]=\"IsCombineFieldSelected(step.Config, sf)\"\n                                              (click)=\"ToggleCombineField(step.Config, sf); OnTransformConfigChange(field)\">\n                                        {{ sf }}\n                                      </button>\n                                    }\n                                  </div>\n                                </div>\n                                <div class=\"fmc-te-field fmc-te-sm\">\n                                  <label>Separator</label>\n                                  <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['Separator'] ?? ' '\"\n                                         (ngModelChange)=\"step.Config['Separator'] = $event; OnTransformConfigChange(field)\"\n                                         placeholder=\" \" />\n                                </div>\n                              }\n                              @case ('lookup') {\n                                <div class=\"fmc-te-field\">\n                                  <label>Value mapping</label>\n                                  <div class=\"fmc-lookup-table\">\n                                    @for (entry of GetLookupEntries(step.Config); track $index) {\n                                      <div class=\"fmc-lookup-row\">\n                                        <input type=\"text\" class=\"fmc-input\" [value]=\"entry.key\" placeholder=\"Source value\"\n                                               (change)=\"UpdateLookupEntry(step.Config, entry.key, $any($event.target).value, entry.value); OnTransformConfigChange(field)\" />\n                                        <i class=\"fa-solid fa-arrow-right fmc-lookup-arrow\"></i>\n                                        <input type=\"text\" class=\"fmc-input\" [value]=\"entry.value\" placeholder=\"Mapped value\"\n                                               (change)=\"UpdateLookupEntry(step.Config, entry.key, entry.key, $any($event.target).value); OnTransformConfigChange(field)\" />\n                                        <button class=\"fmc-lookup-del\" (click)=\"RemoveLookupEntry(step.Config, entry.key); OnTransformConfigChange(field)\">\n                                          <i class=\"fa-solid fa-times\"></i>\n                                        </button>\n                                      </div>\n                                    }\n                                    <button class=\"fmc-lookup-add\" (click)=\"AddLookupEntry(step.Config); OnTransformConfigChange(field)\">\n                                      <i class=\"fa-solid fa-plus\"></i> Add mapping\n                                    </button>\n                                  </div>\n                                </div>\n                                <div class=\"fmc-te-field fmc-te-sm\">\n                                  <label>Default (when no match)</label>\n                                  <input type=\"text\" class=\"fmc-input\" [ngModel]=\"step.Config['Default'] ?? ''\"\n                                         (ngModelChange)=\"step.Config['Default'] = $event; OnTransformConfigChange(field)\"\n                                         placeholder=\"null\" />\n                                </div>\n                              }\n                              @case ('format') {\n                                <div class=\"fmc-te-row\">\n                                  <div class=\"fmc-te-field fmc-te-sm\">\n                                    <label>Format type</label>\n                                    <select class=\"fmc-select\" [ngModel]=\"step.Config['FormatType'] ?? 'date'\"\n                                            (ngModelChange)=\"step.Config['FormatType'] = $event; OnTransformConfigChange(field)\">\n                                      <option value=\"date\">Date</option>\n                                      <option value=\"number\">Number</option>\n                                      <option value=\"string\">String</option>\n                                    </select>\n                                  </div>\n                                  <div class=\"fmc-te-field\">\n                                    <label>Format string</label>\n                                    <input type=\"text\" class=\"fmc-input mono\" [ngModel]=\"step.Config['FormatString'] ?? 'ISO'\"\n                                           (ngModelChange)=\"step.Config['FormatString'] = $event; OnTransformConfigChange(field)\"\n                                           placeholder=\"ISO or decimal places\" />\n                                  </div>\n                                </div>\n                              }\n                              @case ('coerce') {\n                                <div class=\"fmc-te-field fmc-te-sm\">\n                                  <label>Target type</label>\n                                  <select class=\"fmc-select\" [ngModel]=\"step.Config['TargetType'] ?? 'string'\"\n                                          (ngModelChange)=\"step.Config['TargetType'] = $event; OnTransformConfigChange(field)\">\n                                    <option value=\"string\">String</option>\n                                    <option value=\"number\">Number</option>\n                                    <option value=\"boolean\">Boolean</option>\n                                    <option value=\"date\">Date</option>\n                                  </select>\n                                </div>\n                              }\n                              @case ('substring') {\n                                <div class=\"fmc-te-row\">\n                                  <div class=\"fmc-te-field fmc-te-sm\">\n                                    <label>Start index</label>\n                                    <input type=\"number\" class=\"fmc-input\" [ngModel]=\"step.Config['Start'] ?? 0\"\n                                           (ngModelChange)=\"step.Config['Start'] = +$event; OnTransformConfigChange(field)\"\n                                           min=\"0\" />\n                                  </div>\n                                  <div class=\"fmc-te-field fmc-te-sm\">\n                                    <label>Length (blank = to end)</label>\n                                    <input type=\"number\" class=\"fmc-input\" [ngModel]=\"step.Config['Length'] ?? ''\"\n                                           (ngModelChange)=\"step.Config['Length'] = $event ? +$event : undefined; OnTransformConfigChange(field)\"\n                                           min=\"1\" />\n                                  </div>\n                                </div>\n                              }\n                              @case ('custom') {\n                                <div class=\"fmc-te-field\">\n                                  <label>JavaScript expression <span class=\"fmc-te-hint\">(use <code>value</code> and <code>fields</code>)</span></label>\n                                  <textarea class=\"fmc-input mono fmc-textarea\" [ngModel]=\"step.Config['Expression'] ?? 'value'\"\n                                            (ngModelChange)=\"step.Config['Expression'] = $event; OnTransformConfigChange(field)\"\n                                            placeholder=\"value.toUpperCase()\" rows=\"2\"></textarea>\n                                </div>\n                              }\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Data Preview Section -->\n          <div class=\"data-preview-section\">\n            <div class=\"preview-actions\">\n              <button mjButton variant=\"outline\" size=\"sm\"\n                      [disabled]=\"IsLoadingSourcePreview\"\n                      (click)=\"LoadSourcePreview()\">\n                <i class=\"fa-solid fa-cloud-arrow-down\"></i> Preview Source\n              </button>\n              <button mjButton variant=\"outline\" size=\"sm\"\n                      [disabled]=\"IsLoadingDestPreview\"\n                      (click)=\"LoadDestPreview()\">\n                <i class=\"fa-solid fa-database\"></i> Preview Destination\n              </button>\n            </div>\n\n            @if (ShowSourcePreview) {\n              <div class=\"preview-panel\">\n                <div class=\"preview-panel-header\">\n                  <h4><i class=\"fa-solid fa-cloud\"></i> Source Data Preview</h4>\n                  <button class=\"add-panel-close\" (click)=\"CloseSourcePreview()\">\n                    <i class=\"fa-solid fa-times\"></i>\n                  </button>\n                </div>\n                @if (IsLoadingSourcePreview) {\n                  <mj-loading text=\"Loading source data...\" size=\"small\"></mj-loading>\n                } @else if (SourcePreviewData.length === 0) {\n                  <p class=\"empty-hint\">No source data available.</p>\n                } @else {\n                  <div class=\"preview-table-wrapper\">\n                    <table class=\"preview-table\">\n                      <thead>\n                        <tr>\n                          @for (col of GetPreviewColumns(SourcePreviewData); track col) {\n                            <th>{{ col }}</th>\n                          }\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (row of SourcePreviewData; track $index) {\n                          <tr>\n                            @for (col of GetPreviewColumns(SourcePreviewData); track col) {\n                              <td>{{ FormatPreviewValue(row[col]) }}</td>\n                            }\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            }\n\n            @if (ShowDestPreview) {\n              <div class=\"preview-panel\">\n                <div class=\"preview-panel-header\">\n                  <h4><i class=\"fa-solid fa-database\"></i> Destination Data Preview</h4>\n                  <button class=\"add-panel-close\" (click)=\"CloseDestPreview()\">\n                    <i class=\"fa-solid fa-times\"></i>\n                  </button>\n                </div>\n                @if (IsLoadingDestPreview) {\n                  <mj-loading text=\"Loading destination data...\" size=\"small\"></mj-loading>\n                } @else if (DestPreviewData.length === 0) {\n                  <p class=\"empty-hint\">No destination data available.</p>\n                } @else {\n                  <div class=\"preview-table-wrapper\">\n                    <table class=\"preview-table\">\n                      <thead>\n                        <tr>\n                          @for (col of GetPreviewColumns(DestPreviewData); track col) {\n                            <th>{{ col }}</th>\n                          }\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (row of DestPreviewData; track $index) {\n                          <tr>\n                            @for (col of GetPreviewColumns(DestPreviewData); track col) {\n                              <td>{{ FormatPreviewValue(row[col]) }}</td>\n                            }\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- ============================================================ -->\n      <!-- RIGHT PANEL: Last run details -->\n      <!-- ============================================================ -->\n      <div class=\"right-panel\">\n        <h4 class=\"panel-label\">Last Run Details</h4>\n        @if (!SelectedIntegrationID) {\n          <p class=\"empty-hint\">Select an integration to see run details.</p>\n        } @else if (IsLoadingRunDetails) {\n          <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n        } @else if (!LatestRun) {\n          <p class=\"empty-hint\">No runs found.</p>\n        } @else {\n          <div class=\"run-summary-card\">\n            <div class=\"run-summary-row\">\n              <span class=\"label\">Status</span>\n              <span class=\"run-status\" [class]=\"'status-' + RunStatusColor\">\n                {{ LatestRun.Status }}\n              </span>\n            </div>\n            <div class=\"run-summary-row\">\n              <span class=\"label\">Started</span>\n              <span>{{ FormatDate(LatestRun.StartedAt) }}</span>\n            </div>\n            <div class=\"run-summary-row\">\n              <span class=\"label\">Total Records</span>\n              <span>{{ LatestRun.TotalRecords | number }}</span>\n            </div>\n            <div class=\"run-summary-row\">\n              <span class=\"label\">Run By</span>\n              <span>{{ LatestRun.RunByUser }}</span>\n            </div>\n          </div>\n\n          @if (RunEntityDetails.length > 0) {\n            <h4 class=\"panel-label\" style=\"margin-top: 16px;\">Per-Entity Stats</h4>\n            @for (detail of RunEntityDetails; track detail.EntityID) {\n              <div class=\"entity-stat-card\">\n                <div class=\"entity-stat-name\">{{ detail.Entity }}</div>\n                <div class=\"entity-stat-grid\">\n                  <div class=\"mini-stat\">\n                    <span class=\"mini-val\">{{ detail.RecordsCreated }}</span>\n                    <span class=\"mini-label\">Created</span>\n                  </div>\n                  <div class=\"mini-stat\">\n                    <span class=\"mini-val\">{{ detail.RecordsUpdated }}</span>\n                    <span class=\"mini-label\">Updated</span>\n                  </div>\n                  <div class=\"mini-stat\">\n                    <span class=\"mini-val\" [class.has-errors]=\"detail.RecordsErrored > 0\">\n                      {{ detail.RecordsErrored }}\n                    </span>\n                    <span class=\"mini-label\">Errors</span>\n                  </div>\n                </div>\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".mapping-workspace { padding: 24px; height: 100%; display: flex; flex-direction: column; }\n.workspace-header {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 16px;\n}\n.workspace-header h2 {\n  margin: 0; font-size: 20px; font-weight: 600;\n}\n.workspace-header h2 i { margin-right: 8px; color: var(--mj-color-indigo-500); }\n\n/* ===== Three-panel layout ===== */\n.workspace-body {\n  display: flex; flex: 1; gap: 1px; background: var(--mj-border-default);\n  border-radius: 10px; overflow: hidden; min-height: 500px;\n}\n\n.left-panel { width: 320px; min-width: 280px; background: var(--mj-bg-surface); padding: 16px; overflow-y: auto; flex-shrink: 0; }\n.center-panel { flex: 1; background: var(--mj-bg-surface); padding: 20px; overflow-y: auto; }\n.right-panel { width: 280px; min-width: 240px; background: var(--mj-bg-surface); padding: 16px; overflow-y: auto; flex-shrink: 0; }\n\n/* ===== Shared ===== */\n.panel-label {\n  font-size: 11px; font-weight: 700; color: var(--mj-text-disabled);\n  text-transform: uppercase; letter-spacing: 0.6px;\n  margin: 0 0 6px 0; display: block;\n}\n.panel-title { margin: 0 0 12px 0; font-size: 16px; font-weight: 600; }\n.panel-title .field-count { color: var(--mj-text-disabled); font-weight: 400; font-size: 13px; }\n.empty-hint { color: var(--mj-text-disabled); font-size: 13px; font-style: italic; }\n.search-box { margin-bottom: 12px; }\n\n/* ===== Integration selector ===== */\n.integration-selector { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--mj-border-subtle); }\n\n/* ===== Entity Map Header ===== */\n.entity-map-header {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 10px;\n}\n.header-actions { display: flex; gap: 4px; }\n\n/* ===== Add Map Panel ===== */\n.add-map-panel {\n  background: var(--mj-bg-page); border: 1px solid var(--mj-border-default); border-radius: 10px;\n  padding: 16px; margin-bottom: 14px;\n}\n.add-panel-top {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 14px;\n}\n.add-panel-top h5 { margin: 0; font-size: 14px; font-weight: 600; }\n.add-panel-close {\n  background: none; border: none; cursor: pointer; color: var(--mj-text-disabled); font-size: 14px;\n}\n.add-panel-close:hover { color: var(--mj-text-primary); }\n\n.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }\n.form-group label { font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.form-row { display: flex; gap: 10px; }\n.form-row .form-group { flex: 1; }\n\n.source-loading {\n  display: flex; align-items: center; gap: 8px;\n  font-size: 12px; color: var(--mj-text-disabled); padding: 6px 0;\n}\n.source-loading i { color: var(--mj-color-indigo-500); }\n\n.discover-error-inline {\n  font-size: 12px; color: var(--mj-color-error-600); padding: 6px 0;\n}\n.discover-error-inline i { margin-right: 4px; }\n\n/* Target mode toggle */\n.target-mode-toggle {\n  display: flex; border: 1px solid var(--mj-border-default); border-radius: 6px;\n  overflow: hidden; margin-bottom: 12px;\n}\n.target-mode-btn {\n  flex: 1; padding: 8px 12px; font-size: 12px; font-weight: 600;\n  text-align: center; cursor: pointer; background: var(--mj-bg-surface); border: none;\n  color: var(--mj-text-muted); transition: all 0.15s;\n}\n.target-mode-btn:first-child { border-right: 1px solid var(--mj-border-default); }\n.target-mode-btn.active { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n.target-mode-btn:not(.active):hover { background: var(--mj-status-info-bg); color: var(--mj-color-indigo-500); }\n.target-mode-btn i { margin-right: 4px; }\n\n/* New entity form */\n.new-entity-form {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 8px;\n  padding: 14px; margin-bottom: 12px;\n}\n.new-entity-form .section-label {\n  font-size: 11px; font-weight: 700; color: var(--mj-color-indigo-500);\n  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;\n}\n.auto-hint { font-size: 10px; color: var(--mj-text-disabled); font-style: italic; }\n\n/* DDL preview in add panel */\n.ddl-preview-section { margin-top: 8px; }\n.ddl-preview-code {\n  background: var(--mj-text-primary); color: var(--mj-color-neutral-300); padding: 10px;\n  border-radius: 4px; font-size: 11px; line-height: 1.5;\n  max-height: 200px; overflow: auto; white-space: pre-wrap;\n  word-break: break-word; margin-top: 8px;\n}\n\n.add-form-actions { display: flex; gap: 6px; padding-top: 4px; }\n\n/* ===== Entity Map List ===== */\n.entity-map-list { display: flex; flex-direction: column; gap: 4px; }\n.entity-map-item {\n  padding: 8px 10px; border-radius: 6px;\n  cursor: pointer; border: 1px solid var(--mj-border-subtle); transition: all 0.15s;\n}\n.entity-map-item:hover { background: var(--mj-bg-page); }\n.entity-map-item.selected { background: var(--mj-status-info-bg); border-color: var(--mj-color-indigo-500); }\n.entity-map-item.pending { border-left: 3px solid var(--mj-status-warning); }\n\n.em-top-row {\n  display: flex; align-items: center; gap: 4px;\n  font-size: 13px; margin-bottom: 4px;\n}\n.em-name { font-weight: 600; }\n.em-arrow { color: var(--mj-text-disabled); font-size: 11px; }\n.em-entity { color: var(--mj-text-muted); }\n\n.em-bottom-row {\n  display: flex; align-items: center; justify-content: space-between;\n  font-size: 11px; color: var(--mj-text-disabled);\n}\n.em-badges { display: flex; gap: 4px; align-items: center; }\n.badge {\n  font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600;\n}\n.badge-direction { background: var(--mj-bg-surface-hover); color: var(--mj-text-muted); }\n.badge-pending { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.em-actions { display: flex; align-items: center; gap: 4px; }\n.em-delete {\n  opacity: 0; transition: opacity 0.15s;\n  cursor: pointer; color: var(--mj-color-error-600); background: none; border: none;\n  padding: 2px 4px; font-size: 12px;\n}\n.entity-map-item:hover .em-delete { opacity: 1; }\n\n/* ===== Center Panel: Placeholder ===== */\n.placeholder-message {\n  display: flex; flex-direction: column; align-items: center;\n  justify-content: center; height: 300px; color: var(--mj-text-disabled);\n}\n.placeholder-message i { font-size: 36px; margin-bottom: 12px; }\n.placeholder-message p { text-align: center; }\n\n/* ===== Pending Entity Panel ===== */\n.pending-entity-panel {\n  background: var(--mj-status-warning-bg); border: 1px solid var(--mj-color-warning-200); border-radius: 10px;\n  padding: 24px; text-align: center;\n}\n.pending-icon { font-size: 40px; color: var(--mj-status-warning); margin-bottom: 12px; }\n.pending-entity-panel h3 { font-size: 16px; margin-bottom: 8px; }\n.pending-entity-panel p { font-size: 13px; color: var(--mj-text-disabled); margin-bottom: 16px; line-height: 1.5; }\n\n/* Stepper */\n.pending-steps {\n  display: flex; gap: 0; margin: 20px 0; justify-content: center; align-items: center;\n}\n.step {\n  display: flex; flex-direction: column; align-items: center; gap: 6px;\n  padding: 0 16px;\n}\n.step-circle {\n  width: 36px; height: 36px; border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 14px; font-weight: 700;\n}\n.step-circle.done { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.step-circle.current { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n.step-circle.future { background: var(--mj-bg-surface-hover); color: var(--mj-text-disabled); }\n.step-label { font-size: 10px; font-weight: 600; color: var(--mj-text-disabled); text-transform: uppercase; white-space: nowrap; }\n.step-connector { width: 32px; height: 2px; background: var(--mj-border-default); align-self: center; margin-bottom: 18px; }\n.step-connector.done { background: var(--mj-color-success-700); }\n\n/* DDL in pending view */\n.ddl-preview-inline { margin-top: 16px; text-align: left; }\n.ddl-code-block {\n  background: var(--mj-text-primary); color: var(--mj-color-neutral-300); padding: 12px;\n  border-radius: 6px; font-size: 12px; line-height: 1.5;\n  max-height: 250px; overflow: auto; white-space: pre-wrap;\n}\n.ddl-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: center; }\n\n/* Pending fields list */\n.pending-fields-section { text-align: left; }\n.pending-fields-list {\n  display: flex; flex-direction: column; gap: 2px;\n  max-height: 200px; overflow-y: auto;\n}\n.pending-field-item {\n  display: flex; align-items: center; gap: 8px;\n  padding: 4px 8px; font-size: 13px; border-radius: 4px;\n}\n.pending-field-item:hover { background: var(--mj-status-warning-bg); }\n.pending-field-name { font-weight: 600; }\n.pending-field-type { font-size: 11px; color: var(--mj-text-disabled); background: var(--mj-bg-surface-hover); padding: 1px 6px; border-radius: 3px; }\n.pending-field-req { color: var(--mj-color-error-600); font-weight: 700; }\n\n/* ===== Auto-map banner ===== */\n.auto-map-banner {\n  background: var(--mj-status-info-bg); border: 1px solid var(--mj-color-info-100); border-radius: 8px;\n  padding: 12px 16px; margin-bottom: 16px;\n  display: flex; align-items: center; gap: 12px;\n}\n.auto-map-banner > i { color: var(--mj-color-indigo-500); font-size: 18px; }\n.auto-map-banner .banner-text { flex: 1; }\n.auto-map-banner .banner-text p { font-size: 13px; color: var(--mj-text-muted); margin: 0; }\n.auto-map-banner .banner-text strong { color: var(--mj-text-primary); }\n\n/* ===== Field Mapping Editor ===== */\n.field-mapping-header {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 16px;\n}\n.field-mapping-actions { display: flex; gap: 6px; }\n\n/* ===== Field Map Cards (New world-class design) ===== */\n.field-map-cards {\n  display: flex; flex-direction: column; gap: 6px;\n}\n\n.field-map-card {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  background: var(--mj-bg-surface);\n  transition: all 0.2s ease;\n  overflow: hidden;\n}\n.field-map-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: 0 2px 8px rgba(74, 108, 247, 0.06);\n}\n.field-map-card.has-transform {\n  border-left: 3px solid var(--mj-color-indigo-500);\n}\n.field-map-card.validation-error {\n  border-color: var(--mj-color-warning-200);\n  background: var(--mj-status-warning-bg);\n}\n\n/* Main mapping row */\n.fmc-row {\n  display: flex; align-items: center; gap: 10px;\n  padding: 10px 14px;\n}\n\n/* Source column */\n.fmc-source {\n  flex: 1; min-width: 0;\n}\n.fmc-field-name {\n  font-size: 13px; font-weight: 600; color: var(--mj-text-primary);\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.fmc-badges {\n  display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap;\n}\n.fmc-badge {\n  font-size: 9px; font-weight: 700; padding: 1px 5px;\n  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px;\n  white-space: nowrap; line-height: 1.5;\n}\n.badge-type {\n  background: var(--mj-bg-surface-hover); color: var(--mj-text-muted);\n}\n.badge-pk {\n  background: linear-gradient(135deg, var(--mj-color-warning-100), var(--mj-color-warning-200));\n  color: var(--mj-color-warning-800);\n}\n.badge-pk i { font-size: 8px; margin-right: 2px; }\n.badge-req {\n  background: linear-gradient(135deg, var(--mj-color-error-100), var(--mj-color-error-200));\n  color: var(--mj-color-error-800);\n}\n.badge-ro {\n  background: var(--mj-color-purple-50); color: var(--mj-color-purple-700);\n}\n\n/* Transform zone (center arrow / pill) */\n.fmc-transform-zone {\n  flex-shrink: 0;\n  display: flex; align-items: center; justify-content: center;\n  width: 100px;\n}\n.fmc-arrow-btn {\n  width: 32px; height: 32px;\n  border-radius: 50%; border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page); color: var(--mj-text-disabled);\n  cursor: pointer; font-size: 12px;\n  display: flex; align-items: center; justify-content: center;\n  transition: all 0.2s;\n}\n.fmc-arrow-btn:hover {\n  background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); border-color: var(--mj-color-indigo-500);\n  transform: scale(1.1);\n}\n.fmc-transform-pill {\n  display: flex; align-items: center; gap: 4px;\n  padding: 4px 10px; border-radius: 16px;\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border: 1px solid var(--mj-color-indigo-200); color: var(--mj-color-indigo-700);\n  font-size: 11px; font-weight: 600;\n  cursor: pointer; transition: all 0.2s;\n  white-space: nowrap;\n}\n.fmc-transform-pill:hover {\n  background: linear-gradient(135deg, var(--mj-color-indigo-100), var(--mj-color-indigo-200));\n  transform: scale(1.02);\n}\n.fmc-transform-pill i { font-size: 10px; }\n.fmc-transform-direct {\n  background: linear-gradient(135deg, var(--mj-bg-page), var(--mj-bg-surface-hover));\n  border-color: var(--mj-color-neutral-300); color: var(--mj-text-muted);\n}\n.fmc-transform-direct:hover {\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border-color: var(--mj-color-indigo-200); color: var(--mj-color-indigo-700);\n}\n.fmc-step-count {\n  background: var(--mj-color-indigo-700); color: var(--mj-bg-surface); font-size: 9px;\n  padding: 0 4px; border-radius: 8px; font-weight: 700;\n}\n\n/* Destination column */\n.fmc-dest {\n  flex: 1; min-width: 0;\n}\n.fmc-select {\n  width: 100%; padding: 6px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  transition: border-color 0.15s;\n}\n.fmc-select:focus { border-color: var(--mj-color-indigo-500); outline: none; box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.12); }\n\n/* Shared input style */\n.fmc-input {\n  width: 100%; padding: 5px 8px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  transition: border-color 0.15s;\n}\n.fmc-input:focus { border-color: var(--mj-color-indigo-500); outline: none; box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.12); }\n.fmc-input.mono { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 12px; }\n\n/* Flags (key, required) */\n.fmc-flags {\n  display: flex; gap: 6px; flex-shrink: 0;\n}\n.fmc-flag {\n  display: flex; align-items: center; gap: 3px;\n  font-size: 11px; color: var(--mj-text-disabled); cursor: pointer;\n  padding: 2px 4px; border-radius: 4px;\n  transition: color 0.15s;\n}\n.fmc-flag:hover { color: var(--mj-color-indigo-500); }\n.fmc-flag input[type=\"checkbox\"] {\n  width: 13px; height: 13px; cursor: pointer;\n  accent-color: var(--mj-color-indigo-500);\n}\n.fmc-flag i { font-size: 10px; }\n.fmc-req-star { font-size: 14px; font-weight: 700; color: inherit; }\n\n/* Remove button */\n.fmc-remove {\n  flex-shrink: 0;\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 13px; padding: 4px;\n  border-radius: 4px; transition: all 0.15s;\n}\n.fmc-remove:hover { color: var(--mj-status-error); background: var(--mj-status-error-bg); }\n\n/* ===== Transform Pipeline Editor ===== */\n.fmc-transform-editor {\n  border-top: 1px solid var(--mj-bg-surface-hover);\n  background: linear-gradient(180deg, var(--mj-color-indigo-50) 0%, var(--mj-bg-page) 100%);\n  padding: 12px 14px;\n}\n.fmc-te-header {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 10px;\n}\n.fmc-te-title {\n  font-size: 11px; font-weight: 700; color: var(--mj-color-indigo-500);\n  text-transform: uppercase; letter-spacing: 0.5px;\n}\n.fmc-te-title i { margin-right: 4px; }\n.fmc-te-add {\n  font-size: 11px; font-weight: 600; color: var(--mj-color-indigo-500);\n  background: none; border: 1px solid var(--mj-color-indigo-200);\n  border-radius: 6px; padding: 3px 10px;\n  cursor: pointer; transition: all 0.15s;\n}\n.fmc-te-add:hover { background: var(--mj-color-indigo-50); }\n.fmc-te-add i { margin-right: 3px; font-size: 10px; }\n\n/* Individual transform step */\n.fmc-te-step {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 10px 12px;\n  margin-bottom: 8px;\n  transition: box-shadow 0.15s;\n}\n.fmc-te-step:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.05); }\n.fmc-te-step:last-child { margin-bottom: 0; }\n\n.fmc-te-step-header {\n  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;\n}\n.fmc-te-step-num {\n  width: 22px; height: 22px; border-radius: 50%;\n  background: linear-gradient(135deg, var(--mj-color-indigo-500), var(--mj-color-indigo-500));\n  color: var(--mj-bg-surface); font-size: 11px; font-weight: 700;\n  display: flex; align-items: center; justify-content: center;\n  flex-shrink: 0;\n}\n.fmc-te-type-select {\n  flex: 1; padding: 4px 8px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 12px; font-weight: 600;\n  color: var(--mj-text-primary); background: var(--mj-bg-page);\n}\n.fmc-te-type-select:focus { border-color: var(--mj-color-indigo-500); outline: none; }\n.fmc-te-error-select {\n  width: 100px; padding: 4px 6px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 11px; color: var(--mj-text-muted);\n  background: var(--mj-bg-page);\n}\n.fmc-te-error-select:focus { border-color: var(--mj-color-indigo-500); outline: none; }\n.fmc-te-remove-step {\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 12px; padding: 4px;\n  border-radius: 4px; transition: all 0.15s;\n}\n.fmc-te-remove-step:hover { color: var(--mj-status-error); background: var(--mj-status-error-bg); }\n\n/* Config area */\n.fmc-te-config {\n  padding-left: 30px;\n}\n.fmc-te-field {\n  margin-bottom: 8px;\n}\n.fmc-te-field:last-child { margin-bottom: 0; }\n.fmc-te-field label {\n  display: block; font-size: 11px; font-weight: 600;\n  color: var(--mj-text-muted); margin-bottom: 3px;\n}\n.fmc-te-field label code {\n  background: var(--mj-bg-surface-hover); padding: 0 3px; border-radius: 3px;\n  font-size: 10px; color: var(--mj-color-indigo-700);\n}\n.fmc-te-hint { font-weight: 400; color: var(--mj-text-disabled); }\n.fmc-te-row {\n  display: flex; gap: 10px; align-items: flex-end;\n}\n.fmc-te-sm { max-width: 140px; }\n.fmc-textarea {\n  resize: vertical; min-height: 40px;\n}\n\n/* Combine chips */\n.fmc-combine-chips {\n  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;\n}\n.fmc-chip {\n  font-size: 11px; padding: 3px 8px; border-radius: 14px;\n  border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface);\n  color: var(--mj-text-muted); cursor: pointer;\n  transition: all 0.15s; font-weight: 500;\n}\n.fmc-chip:hover { border-color: var(--mj-color-indigo-300); color: var(--mj-color-indigo-700); }\n.fmc-chip.selected {\n  background: linear-gradient(135deg, var(--mj-color-indigo-50), var(--mj-color-indigo-100));\n  border-color: var(--mj-color-indigo-400); color: var(--mj-color-indigo-700); font-weight: 600;\n}\n\n/* Lookup table */\n.fmc-lookup-table {\n  display: flex; flex-direction: column; gap: 4px; margin-top: 4px;\n}\n.fmc-lookup-row {\n  display: flex; align-items: center; gap: 6px;\n}\n.fmc-lookup-row .fmc-input { flex: 1; }\n.fmc-lookup-arrow { color: var(--mj-color-indigo-200); font-size: 10px; flex-shrink: 0; }\n.fmc-lookup-del {\n  background: none; border: none; cursor: pointer;\n  color: var(--mj-color-neutral-300); font-size: 11px; padding: 2px;\n  transition: color 0.15s;\n}\n.fmc-lookup-del:hover { color: var(--mj-status-error); }\n.fmc-lookup-add {\n  font-size: 11px; color: var(--mj-color-indigo-500); background: none;\n  border: 1px dashed var(--mj-color-indigo-200); border-radius: 6px;\n  padding: 4px 10px; cursor: pointer;\n  transition: all 0.15s; margin-top: 2px;\n}\n.fmc-lookup-add:hover { background: var(--mj-color-indigo-50); }\n.fmc-lookup-add i { margin-right: 3px; font-size: 10px; }\n\n/* ===== Data Preview ===== */\n.data-preview-section { margin-top: 24px; border-top: 1px solid var(--mj-border-subtle); padding-top: 16px; }\n.preview-actions { display: flex; gap: 8px; margin-bottom: 12px; }\n\n.preview-panel {\n  background: var(--mj-bg-page); border: 1px solid var(--mj-border-default); border-radius: 8px;\n  padding: 12px; margin-bottom: 12px;\n}\n.preview-panel-header {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 8px;\n}\n.preview-panel-header h4 { font-size: 13px; font-weight: 600; margin: 0; }\n.preview-panel-header h4 i { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.preview-table-wrapper { overflow-x: auto; }\n.preview-table {\n  width: 100%; border-collapse: collapse; font-size: 12px;\n}\n.preview-table th {\n  text-align: left; padding: 5px 8px;\n  background: var(--mj-border-default); font-weight: 600; font-size: 10px;\n  text-transform: uppercase; color: var(--mj-text-muted);\n  border-bottom: 1px solid var(--mj-border-default); white-space: nowrap;\n}\n.preview-table td {\n  padding: 4px 8px; border-bottom: 1px solid var(--mj-border-subtle);\n  white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;\n}\n.preview-table tr:hover { background: var(--mj-status-info-bg); }\n\n/* ===== Right panel: run details ===== */\n.run-summary-card {\n  background: var(--mj-bg-page); border-radius: 8px; padding: 12px;\n}\n.run-summary-row {\n  display: flex; justify-content: space-between;\n  padding: 4px 0; font-size: 13px;\n}\n.run-summary-row .label { color: var(--mj-text-muted); font-weight: 500; }\n.run-status {\n  font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 600;\n}\n.status-green { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.status-amber { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n.status-red   { background: var(--mj-status-error-bg); color: var(--mj-color-error-600); }\n\n.entity-stat-card {\n  background: var(--mj-bg-page); border-radius: 6px; padding: 10px;\n  margin-bottom: 8px;\n}\n.entity-stat-name { font-size: 13px; font-weight: 600; margin-bottom: 6px; }\n.entity-stat-grid { display: flex; gap: 12px; }\n.mini-stat { text-align: center; }\n.mini-val { display: block; font-size: 16px; font-weight: 600; }\n.mini-val.has-errors { color: var(--mj-color-error-600); }\n.mini-label { font-size: 10px; color: var(--mj-text-disabled); }\n\n/* ===== Validation ===== */\n.validation-banner {\n  background: var(--mj-color-warning-50); border: 1px solid var(--mj-color-warning-200); border-radius: 8px;\n  padding: 10px 14px; margin-bottom: 14px;\n  display: flex; align-items: flex-start; gap: 10px;\n  font-size: 13px; color: var(--mj-color-warning-600);\n}\n.validation-banner > i { margin-top: 2px; }\n.validation-warnings { display: flex; flex-direction: column; gap: 2px; }\n\n.field-map-card.validation-error .fmc-source {\n  border-left: 3px solid var(--mj-color-warning-600);\n  padding-left: 8px;\n}\n\n/* ===== Responsive ===== */\n@media (max-width: 1100px) { .right-panel { display: none; } }\n@media (max-width: 800px) { .left-panel { width: 260px; } }\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MappingWorkspaceComponent, { className: "MappingWorkspaceComponent", filePath: "src/Integration/components/mapping-workspace/mapping-workspace.component.ts", lineNumber: 118 }); })();
 export function LoadMappingWorkspace() {