@memberjunction/ng-dashboards 5.11.0 → 5.13.0

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

@@ -1517,11 +1517,11 @@ export class VisualFieldEditorComponent {
             i0.ɵɵclassProp("has-transform-panel", ctx.SelectedConnectionIdx !== null);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.EditorLoading ? 46 : 47);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.ve-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n  animation: _ngcontent-%COMP%_slideIn 250ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from { opacity: 0; transform: translateX(30px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n\n\n\n\n\n.ve-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  gap: 16px;\n}\n\n.ve-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.ve-back-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  flex-shrink: 0;\n  transition: all 150ms ease;\n}\n\n.ve-back-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 600;\n  min-width: 0;\n}\n\n.ve-source-label[_ngcontent-%COMP%] {\n  color: var(--mj-color-indigo-500);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-direction-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 13px; flex-shrink: 0; }\n\n.ve-dest-label[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-600);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.ve-stat[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.ve-stat[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 700;\n}\n\n.ve-stat-sep[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 14px;\n  background: var(--mj-border-default);\n}\n\n.ve-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.ve-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 14px;\n  border-radius: 7px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border: none;\n  white-space: nowrap;\n}\n\n.ve-btn-ghost[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n.ve-btn-ghost[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-primary); }\n\n.ve-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n}\n\n.ve-btn-primary[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-600); }\n.ve-btn-primary[_ngcontent-%COMP%]:disabled { opacity: 0.5; cursor: default; }\n\n.ve-btn-danger[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-color-error-600);\n  border: 1px solid var(--mj-color-error-200);\n}\n\n.ve-btn-danger[_ngcontent-%COMP%]:hover { background: var(--mj-color-error-100); }\n\n.ve-save-success[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-color-success-600);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  animation: _ngcontent-%COMP%_fadeIn 300ms ease;\n}\n\n\n\n.ve-sync-toggle[_ngcontent-%COMP%] { flex-shrink: 0; margin-left: 8px; }\n.ve-sync-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n\n\n.sync-toggle[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%] {\n  width: 34px;\n  height: 18px;\n  background: var(--mj-color-neutral-300);\n  border-radius: 9px;\n  position: relative;\n  transition: background 200ms ease;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  background: var(--mj-bg-surface);\n  border-radius: 50%;\n  transition: transform 200ms ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .sync-toggle-track[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-500);\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .sync-toggle-track[_ngcontent-%COMP%]::after {\n  transform: translateX(16px);\n}\n\n\n\n.ve-action-sep[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 20px;\n  background: var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n\n\n.ve-btn-ghost.active[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  border-color: var(--mj-color-indigo-200);\n}\n\n\n\n\n\n\n.ve-preview-strip[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1px;\n  background: var(--mj-border-default);\n  border-bottom: 1px solid var(--mj-border-default);\n  max-height: 220px;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.ve-preview-panel[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.ve-preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.ve-preview-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-color-indigo-500); }\n.ve-preview-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.ve-preview-close[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.ve-preview-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n.ve-preview-loading[_ngcontent-%COMP%], \n.ve-preview-empty[_ngcontent-%COMP%] {\n  padding: 20px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.ve-preview-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.ve-preview-table-wrap[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n}\n\n.ve-preview-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 11px;\n}\n\n.ve-preview-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  font-size: 10px;\n  padding: 5px 10px;\n  text-align: left;\n  white-space: nowrap;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-preview-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 4px 10px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ve-preview-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-50);\n}\n\n\n\n\n\n\n.ve-connect-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 20px;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-700);\n  font-size: 13px;\n  border-bottom: 1px solid var(--mj-color-indigo-100);\n  flex-shrink: 0;\n}\n\n.ve-connect-banner[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] { font-weight: 700; }\n\n.ve-connect-cancel[_ngcontent-%COMP%] {\n  margin-left: auto;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-color-indigo-100);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-color-indigo-700);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-connect-cancel[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-100); }\n\n\n\n\n\n\n.ve-body[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n}\n\n.ve-loading[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  gap: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n.ve-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 24px; color: var(--mj-color-indigo-500); }\n\n\n\n.ve-sections-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n\n\n.ve-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-section[_ngcontent-%COMP%]:not(.collapsed) {\n  flex: 1;\n  min-height: 0;\n}\n\n.ve-section.collapsed[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.ve-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  cursor: pointer;\n  user-select: none;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n\n.ve-section-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.ve-section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  width: 12px;\n  flex-shrink: 0;\n  transition: transform 200ms ease;\n}\n\n.ve-section-title[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  color: var(--mj-text-muted);\n}\n\n.ve-section-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  padding: 1px 8px;\n  border-radius: 4px;\n  margin-left: auto;\n}\n\n.ve-section-body[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  animation: _ngcontent-%COMP%_fadeIn 200ms ease;\n}\n\n\n\n.ve-canvas-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n\n\n\n\n\n.ve-col-headers[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-col-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.ve-col-header.source[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n.ve-col-header.dest[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-color-success-600); }\n.ve-col-header-spacer[_ngcontent-%COMP%] { \n }\n\n.ve-col-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-disabled);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n\n\n\n\n\n.ve-col-searches[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  padding: 6px 0;\n}\n\n.ve-col-search[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 12px;\n}\n\n.ve-col-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-col-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.ve-col-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer[_ngcontent-%COMP%] { \n }\n\n\n\n\n\n\n.ve-canvas-scroll[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.ve-canvas-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  position: relative;\n}\n\n\n\n\n\n\n.ve-field-col[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.ve-field-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 14px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background 150ms ease, opacity 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n  box-sizing: border-box;\n}\n\n.ve-field-item.mapped[_ngcontent-%COMP%] { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  background: var(--mj-bg-page);\n}\n\n.ve-field-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-indigo-50);\n  opacity: 1;\n}\n\n.ve-field-item.connecting[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-100);\n  opacity: 1;\n  box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-success-100);\n  box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--mj-color-neutral-700);\n  font-weight: 500;\n}\n\n.ve-field-type[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.ve-fbadge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 3px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n}\n\n.ve-fbadge.pk[_ngcontent-%COMP%] { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty[_ngcontent-%COMP%] {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n\n\n\n\n\n.ve-svg[_ngcontent-%COMP%] {\n  display: block;\n}\n\n.ve-conn-line[_ngcontent-%COMP%] {\n  fill: none;\n  stroke-width: 2;\n  cursor: pointer;\n  transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n\n\n.ve-conn-line.conn-direct[_ngcontent-%COMP%] { stroke: #6366f1; stroke-dasharray: none; }\n.ve-conn-line.conn-regex[_ngcontent-%COMP%] { stroke: #8b5cf6; stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split[_ngcontent-%COMP%] { stroke: #f59e0b; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine[_ngcontent-%COMP%] { stroke: #10b981; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup[_ngcontent-%COMP%] { stroke: #0ea5e9; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format[_ngcontent-%COMP%] { stroke: #ec4899; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce[_ngcontent-%COMP%] { stroke: #f97316; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring[_ngcontent-%COMP%] { stroke: #14b8a6; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom[_ngcontent-%COMP%] { stroke: #a855f7; stroke-dasharray: 2 3; }\n\n.ve-conn-line[_ngcontent-%COMP%]:hover { stroke-width: 3.5; }\n.ve-conn-line.selected[_ngcontent-%COMP%] { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n\n\n.ve-badge-fo[_ngcontent-%COMP%] { overflow: visible; }\n\n.ve-conn-badge[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct[_ngcontent-%COMP%] { background: #eef2ff; color: #6366f1; border: 2px solid #6366f1; }\n.ve-conn-badge.badge-regex[_ngcontent-%COMP%] { background: #f5f3ff; color: #8b5cf6; border: 2px solid #8b5cf6; }\n.ve-conn-badge.badge-split[_ngcontent-%COMP%] { background: #fffbeb; color: #f59e0b; border: 2px solid #f59e0b; }\n.ve-conn-badge.badge-combine[_ngcontent-%COMP%] { background: #ecfdf5; color: #10b981; border: 2px solid #10b981; }\n.ve-conn-badge.badge-lookup[_ngcontent-%COMP%] { background: #f0f9ff; color: #0ea5e9; border: 2px solid #0ea5e9; }\n.ve-conn-badge.badge-format[_ngcontent-%COMP%] { background: #fdf2f8; color: #ec4899; border: 2px solid #ec4899; }\n.ve-conn-badge.badge-coerce[_ngcontent-%COMP%] { background: #fff7ed; color: #f97316; border: 2px solid #f97316; }\n.ve-conn-badge.badge-substring[_ngcontent-%COMP%] { background: #f0fdfa; color: #14b8a6; border: 2px solid #14b8a6; }\n.ve-conn-badge.badge-custom[_ngcontent-%COMP%] { background: #faf5ff; color: #a855f7; border: 2px solid #a855f7; }\n\n.ve-conn-badge[_ngcontent-%COMP%]:hover { transform: scale(1.2); }\n.ve-conn-badge.selected[_ngcontent-%COMP%] { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n\n\n\n\n\n.ve-transform-panel[_ngcontent-%COMP%] {\n  width: 320px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  animation: _ngcontent-%COMP%_slideInRight 200ms ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { opacity: 0; transform: translateX(20px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.ve-tp-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.ve-tp-close[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 150ms ease;\n}\n\n.ve-tp-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n\n\n.ve-tp-mapping-info[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.ve-tp-field[_ngcontent-%COMP%] {\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 12px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 110px;\n}\n\n.ve-tp-field.source[_ngcontent-%COMP%] { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n\n\n.ve-tp-toggles[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.ve-tp-toggle-box[_ngcontent-%COMP%] {\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-color-neutral-300);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  color: var(--mj-bg-surface);\n  transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-500);\n  border-color: var(--mj-color-indigo-500);\n}\n\n\n\n.ve-tp-section[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 8px;\n}\n\n.ve-tp-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n\n\n.ve-tp-direction-btns[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 6px 8px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:last-child { border-right: none; }\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%] { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n\n\n.ve-tp-add-step[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-tp-add-step[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n.ve-tp-step-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 5px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  transition: all 150ms ease;\n  flex-shrink: 0;\n}\n\n.ve-tp-remove-step[_ngcontent-%COMP%]:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config[_ngcontent-%COMP%] {\n  padding: 8px 10px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  width: 80px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n  height: 24px;\n  padding: 0 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 11px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-no-steps[_ngcontent-%COMP%] {\n  padding: 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  font-style: italic;\n}\n\n\n\n.ve-tp-footer[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  margin-top: auto;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-color-neutral-300);\n  border-radius: 3px;\n}\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n.ve-info-body[_ngcontent-%COMP%] {\n  padding: 16px;\n  overflow-y: auto;\n}\n\n.ve-info-loading[_ngcontent-%COMP%] {\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  padding: 20px;\n}\n\n.ve-info-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-indigo-500);\n  margin-right: 6px;\n}\n\n.ve-info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 12px;\n  margin-bottom: 16px;\n}\n\n.ve-info-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n}\n\n.ve-info-card-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-500);\n}\n\n.ve-info-card-icon.source[_ngcontent-%COMP%] {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.sync[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-success[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-error[_ngcontent-%COMP%] {\n  background: var(--mj-color-error-100);\n  color: var(--mj-color-error-600);\n}\n\n.ve-info-card-icon.info-status-running[_ngcontent-%COMP%] {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.info-status-pending[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-600);\n}\n\n.ve-info-card-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.ve-info-card-value[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ve-info-card-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n.ve-info-details[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.ve-info-detail-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 14px;\n  font-size: 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-info-detail-row[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.ve-info-detail-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.ve-info-detail-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}"] });
+        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.ve-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n  animation: _ngcontent-%COMP%_slideIn 250ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from { opacity: 0; transform: translateX(30px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n\n\n\n\n\n.ve-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  gap: 16px;\n}\n\n.ve-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.ve-back-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  flex-shrink: 0;\n  transition: all 150ms ease;\n}\n\n.ve-back-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 600;\n  min-width: 0;\n}\n\n.ve-source-label[_ngcontent-%COMP%] {\n  color: var(--mj-color-indigo-500);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-direction-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 13px; flex-shrink: 0; }\n\n.ve-dest-label[_ngcontent-%COMP%] {\n  color: var(--mj-color-success-600);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.ve-stat[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.ve-stat[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 700;\n}\n\n.ve-stat-sep[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 14px;\n  background: var(--mj-border-default);\n}\n\n.ve-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.ve-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 14px;\n  border-radius: 7px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border: none;\n  white-space: nowrap;\n}\n\n.ve-btn-ghost[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n.ve-btn-ghost[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-primary); }\n\n.ve-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n}\n\n.ve-btn-primary[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-600); }\n.ve-btn-primary[_ngcontent-%COMP%]:disabled { opacity: 0.5; cursor: default; }\n\n.ve-btn-danger[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-color-error-600);\n  border: 1px solid var(--mj-color-error-200);\n}\n\n.ve-btn-danger[_ngcontent-%COMP%]:hover { background: var(--mj-color-error-100); }\n\n.ve-save-success[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-color-success-600);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  animation: _ngcontent-%COMP%_fadeIn 300ms ease;\n}\n\n\n\n.ve-sync-toggle[_ngcontent-%COMP%] { flex-shrink: 0; margin-left: 8px; }\n.ve-sync-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n\n\n.sync-toggle[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%] {\n  width: 34px;\n  height: 18px;\n  background: var(--mj-color-neutral-300);\n  border-radius: 9px;\n  position: relative;\n  transition: background 200ms ease;\n}\n\n.sync-toggle-track[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  background: var(--mj-bg-surface);\n  border-radius: 50%;\n  transition: transform 200ms ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .sync-toggle-track[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-500);\n}\n\n.sync-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .sync-toggle-track[_ngcontent-%COMP%]::after {\n  transform: translateX(16px);\n}\n\n\n\n.ve-action-sep[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 20px;\n  background: var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n\n\n.ve-btn-ghost.active[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  border-color: var(--mj-color-indigo-200);\n}\n\n\n\n\n\n\n.ve-preview-strip[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1px;\n  background: var(--mj-border-default);\n  border-bottom: 1px solid var(--mj-border-default);\n  max-height: 220px;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.ve-preview-panel[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.ve-preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.ve-preview-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-color-indigo-500); }\n.ve-preview-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.ve-preview-close[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.ve-preview-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n.ve-preview-loading[_ngcontent-%COMP%], \n.ve-preview-empty[_ngcontent-%COMP%] {\n  padding: 20px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.ve-preview-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.ve-preview-table-wrap[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n}\n\n.ve-preview-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 11px;\n}\n\n.ve-preview-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  font-size: 10px;\n  padding: 5px 10px;\n  text-align: left;\n  white-space: nowrap;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-preview-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 4px 10px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ve-preview-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-50);\n}\n\n\n\n\n\n\n.ve-connect-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 20px;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-700);\n  font-size: 13px;\n  border-bottom: 1px solid var(--mj-color-indigo-100);\n  flex-shrink: 0;\n}\n\n.ve-connect-banner[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] { font-weight: 700; }\n\n.ve-connect-cancel[_ngcontent-%COMP%] {\n  margin-left: auto;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-color-indigo-100);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-color-indigo-700);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-connect-cancel[_ngcontent-%COMP%]:hover { background: var(--mj-color-indigo-100); }\n\n\n\n\n\n\n.ve-body[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n}\n\n.ve-loading[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  gap: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n.ve-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 24px; color: var(--mj-color-indigo-500); }\n\n\n\n.ve-sections-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n\n\n.ve-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-section[_ngcontent-%COMP%]:not(.collapsed) {\n  flex: 1;\n  min-height: 0;\n}\n\n.ve-section.collapsed[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.ve-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  cursor: pointer;\n  user-select: none;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n\n.ve-section-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.ve-section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  width: 12px;\n  flex-shrink: 0;\n  transition: transform 200ms ease;\n}\n\n.ve-section-title[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  color: var(--mj-text-muted);\n}\n\n.ve-section-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  padding: 1px 8px;\n  border-radius: 4px;\n  margin-left: auto;\n}\n\n.ve-section-body[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  animation: _ngcontent-%COMP%_fadeIn 200ms ease;\n}\n\n\n\n.ve-canvas-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n\n\n\n\n\n.ve-col-headers[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-col-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.ve-col-header.source[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n.ve-col-header.dest[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-color-success-600); }\n.ve-col-header-spacer[_ngcontent-%COMP%] { \n }\n\n.ve-col-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-disabled);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n\n\n\n\n\n.ve-col-searches[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  padding: 6px 0;\n}\n\n.ve-col-search[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 12px;\n}\n\n.ve-col-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-col-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.ve-col-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer[_ngcontent-%COMP%] { \n }\n\n\n\n\n\n\n.ve-canvas-scroll[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.ve-canvas-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  position: relative;\n}\n\n\n\n\n\n\n.ve-field-col[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.ve-field-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 14px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background 150ms ease, opacity 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n  box-sizing: border-box;\n}\n\n.ve-field-item.mapped[_ngcontent-%COMP%] { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  background: var(--mj-bg-page);\n}\n\n.ve-field-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-indigo-50);\n  opacity: 1;\n}\n\n.ve-field-item.connecting[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-100);\n  opacity: 1;\n  box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target[_ngcontent-%COMP%]:hover {\n  background: var(--mj-color-success-100);\n  box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.ve-field-type[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.ve-fbadge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 3px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n}\n\n.ve-fbadge.pk[_ngcontent-%COMP%] { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty[_ngcontent-%COMP%] {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n\n\n\n\n\n.ve-svg[_ngcontent-%COMP%] {\n  display: block;\n}\n\n.ve-conn-line[_ngcontent-%COMP%] {\n  fill: none;\n  stroke-width: 2;\n  cursor: pointer;\n  transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n\n\n.ve-conn-line.conn-direct[_ngcontent-%COMP%] { stroke: var(--mj-brand-primary); stroke-dasharray: none; }\n.ve-conn-line.conn-regex[_ngcontent-%COMP%] { stroke: var(--ve-color-regex, #8b5cf6); stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split[_ngcontent-%COMP%] { stroke: var(--mj-status-warning); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine[_ngcontent-%COMP%] { stroke: var(--mj-status-success); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup[_ngcontent-%COMP%] { stroke: var(--ve-color-lookup, #0ea5e9); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format[_ngcontent-%COMP%] { stroke: var(--ve-color-format, #ec4899); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce[_ngcontent-%COMP%] { stroke: var(--ve-color-coerce, #f97316); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring[_ngcontent-%COMP%] { stroke: var(--ve-color-substring, #14b8a6); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom[_ngcontent-%COMP%] { stroke: var(--ve-color-custom, #a855f7); stroke-dasharray: 2 3; }\n\n.ve-conn-line[_ngcontent-%COMP%]:hover { stroke-width: 3.5; }\n.ve-conn-line.selected[_ngcontent-%COMP%] { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n\n\n.ve-badge-fo[_ngcontent-%COMP%] { overflow: visible; }\n\n.ve-conn-badge[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct[_ngcontent-%COMP%] { background: var(--mj-brand-primary-subtle); color: var(--mj-brand-primary); border: 2px solid var(--mj-brand-primary); }\n.ve-conn-badge.badge-regex[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-regex, #8b5cf6) 10%, var(--mj-bg-surface)); color: var(--ve-color-regex, #8b5cf6); border: 2px solid var(--ve-color-regex, #8b5cf6); }\n.ve-conn-badge.badge-split[_ngcontent-%COMP%] { background: var(--mj-status-warning-subtle); color: var(--mj-status-warning); border: 2px solid var(--mj-status-warning); }\n.ve-conn-badge.badge-combine[_ngcontent-%COMP%] { background: var(--mj-status-success-subtle); color: var(--mj-status-success); border: 2px solid var(--mj-status-success); }\n.ve-conn-badge.badge-lookup[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-lookup, #0ea5e9) 10%, var(--mj-bg-surface)); color: var(--ve-color-lookup, #0ea5e9); border: 2px solid var(--ve-color-lookup, #0ea5e9); }\n.ve-conn-badge.badge-format[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-format, #ec4899) 10%, var(--mj-bg-surface)); color: var(--ve-color-format, #ec4899); border: 2px solid var(--ve-color-format, #ec4899); }\n.ve-conn-badge.badge-coerce[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-coerce, #f97316) 10%, var(--mj-bg-surface)); color: var(--ve-color-coerce, #f97316); border: 2px solid var(--ve-color-coerce, #f97316); }\n.ve-conn-badge.badge-substring[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-substring, #14b8a6) 10%, var(--mj-bg-surface)); color: var(--ve-color-substring, #14b8a6); border: 2px solid var(--ve-color-substring, #14b8a6); }\n.ve-conn-badge.badge-custom[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--ve-color-custom, #a855f7) 10%, var(--mj-bg-surface)); color: var(--ve-color-custom, #a855f7); border: 2px solid var(--ve-color-custom, #a855f7); }\n\n.ve-conn-badge[_ngcontent-%COMP%]:hover { transform: scale(1.2); }\n.ve-conn-badge.selected[_ngcontent-%COMP%] { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n\n\n\n\n\n.ve-transform-panel[_ngcontent-%COMP%] {\n  width: 320px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  animation: _ngcontent-%COMP%_slideInRight 200ms ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { opacity: 0; transform: translateX(20px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.ve-tp-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.ve-tp-close[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 150ms ease;\n}\n\n.ve-tp-close[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n\n\n.ve-tp-mapping-info[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.ve-tp-field[_ngcontent-%COMP%] {\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 12px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 110px;\n}\n\n.ve-tp-field.source[_ngcontent-%COMP%] { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow[_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n\n\n.ve-tp-toggles[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.ve-tp-toggle-box[_ngcontent-%COMP%] {\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-color-neutral-300);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  color: var(--mj-bg-surface);\n  transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active[_ngcontent-%COMP%] {\n  background: var(--mj-color-indigo-500);\n  border-color: var(--mj-color-indigo-500);\n}\n\n\n\n.ve-tp-section[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 8px;\n}\n\n.ve-tp-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n\n\n.ve-tp-direction-btns[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 6px 8px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:last-child { border-right: none; }\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%] { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n\n\n.ve-tp-add-step[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-tp-add-step[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n.ve-tp-step-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-type-select[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 5px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  transition: all 150ms ease;\n  flex-shrink: 0;\n}\n\n.ve-tp-remove-step[_ngcontent-%COMP%]:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config[_ngcontent-%COMP%] {\n  padding: 8px 10px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  width: 80px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-tp-step-onerror[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n  height: 24px;\n  padding: 0 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-no-steps[_ngcontent-%COMP%] {\n  padding: 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  font-style: italic;\n}\n\n\n\n.ve-tp-footer[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  margin-top: auto;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-color-neutral-300);\n  border-radius: 3px;\n}\n\n.ve-canvas-scroll[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.ve-transform-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n.ve-info-body[_ngcontent-%COMP%] {\n  padding: 16px;\n  overflow-y: auto;\n}\n\n.ve-info-loading[_ngcontent-%COMP%] {\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  padding: 20px;\n}\n\n.ve-info-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-color-indigo-500);\n  margin-right: 6px;\n}\n\n.ve-info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 12px;\n  margin-bottom: 16px;\n}\n\n.ve-info-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n}\n\n.ve-info-card-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-500);\n}\n\n.ve-info-card-icon.source[_ngcontent-%COMP%] {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.sync[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-success[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-error[_ngcontent-%COMP%] {\n  background: var(--mj-color-error-100);\n  color: var(--mj-color-error-600);\n}\n\n.ve-info-card-icon.info-status-running[_ngcontent-%COMP%] {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.info-status-pending[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-600);\n}\n\n.ve-info-card-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.ve-info-card-value[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ve-info-card-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n.ve-info-details[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.ve-info-detail-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 14px;\n  font-size: 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-info-detail-row[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.ve-info-detail-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.ve-info-detail-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VisualFieldEditorComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-visual-field-editor', template: "<div class=\"ve-container\">\n\n  <!-- Header -->\n  <div class=\"ve-header\">\n    <div class=\"ve-header-left\">\n      <button class=\"ve-back-btn\" (click)=\"OnClose()\" title=\"Back to entity maps\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n      </button>\n      <div class=\"ve-header-title\">\n        <span class=\"ve-source-label\">{{ EntityMap?.ExternalObjectLabel ?? EntityMap?.ExternalObjectName }}</span>\n        <span class=\"ve-direction-arrow\">\n          <i class=\"fa-solid fa-arrow-right-arrow-left\"></i>\n        </span>\n        <span class=\"ve-dest-label\">{{ EntityMap?.Entity }}</span>\n      </div>\n      <!-- SyncEnabled toggle in editor header -->\n      @if (EntityMap) {\n        <label class=\"sync-toggle ve-sync-toggle\"\n               [title]=\"EntityMap.SyncEnabled ? 'Sync enabled' : 'Sync disabled'\">\n          <input type=\"checkbox\"\n                 [checked]=\"EntityMap.SyncEnabled\"\n                 (change)=\"OnToggleEditorSyncEnabled($event)\" />\n          <span class=\"sync-toggle-track\"></span>\n        </label>\n        <span class=\"ve-sync-label\">{{ EntityMap.SyncEnabled ? 'Sync On' : 'Sync Off' }}</span>\n      }\n    </div>\n    <div class=\"ve-header-stats\">\n      <span class=\"ve-stat\">\n        <strong>{{ EditorMappedCount }}</strong> mapped\n      </span>\n      <span class=\"ve-stat-sep\"></span>\n      <span class=\"ve-stat\">\n        <strong>{{ EditorKeyFieldCount }}</strong> key\n      </span>\n      <span class=\"ve-stat-sep\"></span>\n      <span class=\"ve-stat\">\n        <strong>{{ EditorRequiredCount }}</strong> required\n      </span>\n    </div>\n    <div class=\"ve-header-actions\">\n      <!-- Data preview buttons -->\n      <button class=\"ve-btn ve-btn-ghost\"\n              (click)=\"ToggleSourcePreview()\"\n              [class.active]=\"ShowSourcePreview\"\n              title=\"Preview source data\">\n        <i class=\"fa-solid fa-cloud\"></i> Source Data\n      </button>\n      <button class=\"ve-btn ve-btn-ghost\"\n              (click)=\"ToggleDestPreview()\"\n              [class.active]=\"ShowDestPreview\"\n              title=\"Preview MJ data\">\n        <i class=\"fa-solid fa-database\"></i> MJ Data\n      </button>\n      <div class=\"ve-action-sep\"></div>\n      <button class=\"ve-btn ve-btn-ghost\" (click)=\"AutoMapEditorFields()\" title=\"Auto-map fields by name\">\n        <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Auto-Map\n      </button>\n      <button class=\"ve-btn ve-btn-primary\"\n              [disabled]=\"!HasEditorChanges || EditorSaving\"\n              (click)=\"SaveVisualEditor()\">\n        @if (EditorSaving) {\n          <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n        } @else {\n          <i class=\"fa-solid fa-check\"></i> Save\n        }\n      </button>\n      @if (EditorSaveSuccess && !HasEditorChanges) {\n        <span class=\"ve-save-success\">\n          <i class=\"fa-solid fa-circle-check\"></i> Saved\n        </span>\n      }\n    </div>\n  </div>\n\n  <!-- Data preview panels (collapsible) -->\n  @if (ShowSourcePreview || ShowDestPreview) {\n    <div class=\"ve-preview-strip\">\n      @if (ShowSourcePreview) {\n        <div class=\"ve-preview-panel\">\n          <div class=\"ve-preview-header\">\n            <i class=\"fa-solid fa-cloud\"></i>\n            <span>Source Preview: {{ EntityMap?.ExternalObjectLabel ?? EntityMap?.ExternalObjectName }}</span>\n            <button class=\"ve-preview-close\" (click)=\"ShowSourcePreview = false\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n          @if (PreviewSourceLoading) {\n            <div class=\"ve-preview-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n            </div>\n          } @else if (PreviewSourceRows.length === 0) {\n            <div class=\"ve-preview-empty\">No source data available</div>\n          } @else {\n            <div class=\"ve-preview-table-wrap\">\n              <table class=\"ve-preview-table\">\n                <thead>\n                  <tr>\n                    @for (col of PreviewSourceColumns; track col) {\n                      <th>{{ col }}</th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of PreviewSourceRows; track $index) {\n                    <tr>\n                      @for (col of PreviewSourceColumns; track col) {\n                        <td [title]=\"row[col]?.toString() ?? ''\">{{ row[col] ?? '' }}</td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n        </div>\n      }\n      @if (ShowDestPreview) {\n        <div class=\"ve-preview-panel\">\n          <div class=\"ve-preview-header\">\n            <i class=\"fa-solid fa-database\"></i>\n            <span>Dest Preview: {{ EntityMap?.Entity }}</span>\n            <button class=\"ve-preview-close\" (click)=\"ShowDestPreview = false\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n          @if (PreviewDestLoading) {\n            <div class=\"ve-preview-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n            </div>\n          } @else if (PreviewDestRows.length === 0) {\n            <div class=\"ve-preview-empty\">No destination data available</div>\n          } @else {\n            <div class=\"ve-preview-table-wrap\">\n              <table class=\"ve-preview-table\">\n                <thead>\n                  <tr>\n                    @for (col of PreviewDestColumns; track col) {\n                      <th>{{ col }}</th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of PreviewDestRows; track $index) {\n                    <tr>\n                      @for (col of PreviewDestColumns; track col) {\n                        <td [title]=\"row[col]?.toString() ?? ''\">{{ row[col] ?? '' }}</td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Connect mode banner -->\n  @if (ConnectingFromSource) {\n    <div class=\"ve-connect-banner\">\n      <i class=\"fa-solid fa-link\"></i>\n      Click a destination field to map from\n      <strong>{{ ConnectingFromSource }}</strong>\n      <button class=\"ve-connect-cancel\" (click)=\"CancelConnect()\">Cancel</button>\n    </div>\n  }\n\n  <!-- Main content: sections + transform panel -->\n  <div class=\"ve-body\" [class.has-transform-panel]=\"SelectedConnectionIdx !== null\">\n\n    <!-- Loading state -->\n    @if (EditorLoading) {\n      <div class=\"ve-loading\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>Loading field mappings...</span>\n      </div>\n    } @else {\n\n      <!-- Left content area (sections stacked vertically) -->\n      <div class=\"ve-sections-wrapper\">\n\n        <!-- ============================================================= -->\n        <!-- FIELD MAPPINGS SECTION (collapsible)                          -->\n        <!-- ============================================================= -->\n        <div class=\"ve-section\" [class.collapsed]=\"!FieldMapsExpanded\">\n          <div class=\"ve-section-header\" (click)=\"ToggleFieldMaps()\">\n            <i class=\"fa-solid\"\n               [class.fa-chevron-down]=\"FieldMapsExpanded\"\n               [class.fa-chevron-right]=\"!FieldMapsExpanded\"></i>\n            <span class=\"ve-section-title\">Field Mappings</span>\n            <span class=\"ve-section-badge\">{{ EditorMappedCount }} mapped</span>\n          </div>\n\n          @if (FieldMapsExpanded) {\n            <div class=\"ve-section-body\">\n              <!-- Canvas area (scrollable) -->\n              <div class=\"ve-canvas-wrapper\">\n\n                <!-- Column headers -->\n                <div class=\"ve-col-headers\">\n                  <div class=\"ve-col-header source\">\n                    <i class=\"fa-solid fa-cloud\"></i>\n                    Source Fields\n                    <span class=\"ve-col-count\">{{ EditorSourceFields.length }}</span>\n                  </div>\n                  <div class=\"ve-col-header-spacer\"></div>\n                  <div class=\"ve-col-header dest\">\n                    <i class=\"fa-solid fa-database\"></i>\n                    MJ Entity Fields\n                    <span class=\"ve-col-count\">{{ EditorDestFields.length }}</span>\n                  </div>\n                </div>\n\n                <!-- Search bars -->\n                <div class=\"ve-col-searches\">\n                  <div class=\"ve-col-search\">\n                    <i class=\"fa-solid fa-search\"></i>\n                    <input type=\"text\"\n                           placeholder=\"Filter source fields...\"\n                           [value]=\"EditorSearchSource\"\n                           (input)=\"EditorSearchSource = $any($event.target).value\" />\n                  </div>\n                  <div class=\"ve-col-search-spacer\"></div>\n                  <div class=\"ve-col-search\">\n                    <i class=\"fa-solid fa-search\"></i>\n                    <input type=\"text\"\n                           placeholder=\"Filter destination fields...\"\n                           [value]=\"EditorSearchDest\"\n                           (input)=\"EditorSearchDest = $any($event.target).value\" />\n                  </div>\n                </div>\n\n                <!-- Canvas grid (source + SVG + dest) -->\n                <div class=\"ve-canvas-scroll\" (click)=\"DeselectConnection()\">\n                  <div class=\"ve-canvas-grid\" [style.min-height.px]=\"EditorCanvasHeight\">\n\n                    <!-- Source column -->\n                    <div class=\"ve-field-col source\">\n                      @for (sf of FilteredEditorSourceFields; track sf.Name) {\n                        <div class=\"ve-field-item\"\n                             [class.mapped]=\"IsSourceFieldMapped(sf.Name)\"\n                             [class.unmapped]=\"!IsSourceFieldMapped(sf.Name)\"\n                             [class.connecting]=\"ConnectingFromSource === sf.Name\"\n                             [style.height.px]=\"FIELD_HEIGHT\"\n                             (click)=\"OnEditorSourceClick(sf.Name); $event.stopPropagation()\">\n                          <span class=\"ve-field-name\" [title]=\"sf.Name\">{{ sf.Label || sf.Name }}</span>\n                          <span class=\"ve-field-type\">{{ sf.Type }}</span>\n                          <span class=\"ve-field-badges\">\n                            @if (sf.IsPrimaryKey) {\n                              <span class=\"ve-fbadge pk\" title=\"Primary Key\">PK</span>\n                            }\n                            @if (sf.IsRequired) {\n                              <span class=\"ve-fbadge req\" title=\"Required\">*</span>\n                            }\n                          </span>\n                        </div>\n                      }\n                      @if (FilteredEditorSourceFields.length === 0) {\n                        <div class=\"ve-field-empty\">No source fields found</div>\n                      }\n                    </div>\n\n                    <!-- SVG connection lines -->\n                    <svg class=\"ve-svg\"\n                         [attr.width]=\"SVG_WIDTH\"\n                         [attr.height]=\"EditorCanvasHeight\"\n                         [attr.viewBox]=\"'0 0 ' + SVG_WIDTH + ' ' + EditorCanvasHeight\"\n                         (click)=\"$event.stopPropagation()\">\n                      @for (conn of VisibleConnections; track conn.SourceFieldName + '-' + conn.DestFieldName; let i = $index) {\n                        <!-- Connection line -->\n                        <path [attr.d]=\"GetConnectionPath(conn)\"\n                              class=\"ve-conn-line\"\n                              [class]=\"'ve-conn-line ' + GetConnectionLineClass(conn)\"\n                              [class.selected]=\"SelectedConnectionIdx === i\"\n                              (click)=\"SelectConnection(i, $event)\" />\n                        <!-- Transform badge at midpoint -->\n                        <foreignObject\n                          [attr.x]=\"SVG_WIDTH / 2 - 14\"\n                          [attr.y]=\"GetConnectionMidY(conn) - 14\"\n                          width=\"28\" height=\"28\"\n                          class=\"ve-badge-fo\">\n                          <div xmlns=\"http://www.w3.org/1999/xhtml\"\n                               class=\"ve-conn-badge\"\n                               [class]=\"'ve-conn-badge ' + GetConnectionBadgeClass(conn)\"\n                               [class.selected]=\"SelectedConnectionIdx === i\"\n                               (click)=\"SelectConnection(i, $event)\">\n                            <i [class]=\"GetConnectionDirectionIcon(conn)\"></i>\n                          </div>\n                        </foreignObject>\n                      }\n                    </svg>\n\n                    <!-- Dest column -->\n                    <div class=\"ve-field-col dest\">\n                      @for (df of FilteredEditorDestFields; track df.Name) {\n                        <div class=\"ve-field-item\"\n                             [class.mapped]=\"IsDestFieldMapped(df.Name)\"\n                             [class.unmapped]=\"!IsDestFieldMapped(df.Name)\"\n                             [class.connect-target]=\"ConnectingFromSource !== null\"\n                             [style.height.px]=\"FIELD_HEIGHT\"\n                             (click)=\"OnEditorDestClick(df.Name); $event.stopPropagation()\">\n                          <span class=\"ve-field-name\" [title]=\"df.Name\">{{ df.Name }}</span>\n                          <span class=\"ve-field-type\">{{ df.Type }}</span>\n                          <span class=\"ve-field-badges\">\n                            @if (df.IsRequired) {\n                              <span class=\"ve-fbadge req\" title=\"Required\">*</span>\n                            }\n                          </span>\n                        </div>\n                      }\n                      @if (FilteredEditorDestFields.length === 0) {\n                        <div class=\"ve-field-empty\">No destination fields found</div>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n\n        <!-- ============================================================= -->\n        <!-- INFO PANEL SECTION (collapsible)                              -->\n        <!-- ============================================================= -->\n        <div class=\"ve-section\" [class.collapsed]=\"!InfoPanelExpanded\">\n          <div class=\"ve-section-header\" (click)=\"ToggleInfoPanel()\">\n            <i class=\"fa-solid\"\n               [class.fa-chevron-down]=\"InfoPanelExpanded\"\n               [class.fa-chevron-right]=\"!InfoPanelExpanded\"></i>\n            <span class=\"ve-section-title\">Sync Info</span>\n          </div>\n\n          @if (InfoPanelExpanded) {\n            <div class=\"ve-section-body ve-info-body\">\n              @if (InfoPanelLoading) {\n                <div class=\"ve-info-loading\">\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading stats...\n                </div>\n              } @else {\n                <div class=\"ve-info-grid\">\n                  <!-- Destination record count -->\n                  <div class=\"ve-info-card\">\n                    <div class=\"ve-info-card-icon\">\n                      <i class=\"fa-solid fa-database\"></i>\n                    </div>\n                    <div class=\"ve-info-card-content\">\n                      <span class=\"ve-info-card-value\">{{ InfoDestRecordCount ?? '-' }}</span>\n                      <span class=\"ve-info-card-label\">MJ Records</span>\n                    </div>\n                  </div>\n                  <!-- Source fields count -->\n                  <div class=\"ve-info-card\">\n                    <div class=\"ve-info-card-icon source\">\n                      <i class=\"fa-solid fa-cloud\"></i>\n                    </div>\n                    <div class=\"ve-info-card-content\">\n                      <span class=\"ve-info-card-value\">{{ EditorSourceFields.length }}</span>\n                      <span class=\"ve-info-card-label\">Source Fields</span>\n                    </div>\n                  </div>\n                  <!-- Last sync -->\n                  <div class=\"ve-info-card\">\n                    <div class=\"ve-info-card-icon sync\">\n                      <i class=\"fa-solid fa-arrows-rotate\"></i>\n                    </div>\n                    <div class=\"ve-info-card-content\">\n                      <span class=\"ve-info-card-value\">{{ FormatSyncDate(InfoLastSync?.StartedAt ?? null) }}</span>\n                      <span class=\"ve-info-card-label\">Last Sync</span>\n                    </div>\n                  </div>\n                  <!-- Sync status -->\n                  @if (InfoLastSync) {\n                    <div class=\"ve-info-card\">\n                      <div class=\"ve-info-card-icon\" [ngClass]=\"SyncStatusClass(InfoLastSync.Status)\">\n                        <i class=\"fa-solid\"\n                           [class.fa-circle-check]=\"InfoLastSync.Status === 'Success'\"\n                           [class.fa-circle-xmark]=\"InfoLastSync.Status === 'Failed'\"\n                           [class.fa-spinner]=\"InfoLastSync.Status === 'In Progress'\"\n                           [class.fa-clock]=\"InfoLastSync.Status === 'Pending'\"></i>\n                      </div>\n                      <div class=\"ve-info-card-content\">\n                        <span class=\"ve-info-card-value\">{{ InfoLastSync.Status }}</span>\n                        <span class=\"ve-info-card-label\">{{ InfoLastSync.TotalRecords }} records processed</span>\n                      </div>\n                    </div>\n                  }\n                </div>\n\n                <!-- Configuration details -->\n                <div class=\"ve-info-details\">\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Sync Direction</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.SyncDirection }}</span>\n                  </div>\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Conflict Resolution</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.ConflictResolution }}</span>\n                  </div>\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Delete Behavior</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.DeleteBehavior }}</span>\n                  </div>\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Priority</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.Priority }}</span>\n                  </div>\n                  @if (EntityMap?.MatchStrategy) {\n                    <div class=\"ve-info-detail-row\">\n                      <span class=\"ve-info-detail-label\">Match Strategy</span>\n                      <span class=\"ve-info-detail-value\">Configured</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Transform editor panel (right side, appears when connection selected) -->\n      @if (SelectedConnection; as conn) {\n        <div class=\"ve-transform-panel\" (click)=\"$event.stopPropagation()\">\n          <div class=\"ve-tp-header\">\n            <span class=\"ve-tp-title\">Mapping Details</span>\n            <button class=\"ve-tp-close\" (click)=\"DeselectConnection()\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n\n          <!-- Source -> Dest -->\n          <div class=\"ve-tp-mapping-info\">\n            <div class=\"ve-tp-field-pair\">\n              <span class=\"ve-tp-field source\">{{ conn.SourceFieldName }}</span>\n              <i class=\"fa-solid ve-tp-arrow\"\n                 [class.fa-arrow-right]=\"conn.Direction === 'SourceToDest'\"\n                 [class.fa-arrow-left]=\"conn.Direction === 'DestToSource'\"\n                 [class.fa-right-left]=\"conn.Direction === 'Both'\"></i>\n              <span class=\"ve-tp-field dest\">{{ conn.DestFieldName }}</span>\n            </div>\n          </div>\n\n          <!-- Toggles -->\n          <div class=\"ve-tp-toggles\">\n            <label class=\"ve-tp-toggle\" (click)=\"ToggleConnectionKey()\">\n              <span class=\"ve-tp-toggle-box\" [class.active]=\"conn.IsKeyField\">\n                @if (conn.IsKeyField) { <i class=\"fa-solid fa-check\"></i> }\n              </span>\n              <span>Key Field</span>\n            </label>\n            <label class=\"ve-tp-toggle\" (click)=\"ToggleConnectionRequired()\">\n              <span class=\"ve-tp-toggle-box\" [class.active]=\"conn.IsRequired\">\n                @if (conn.IsRequired) { <i class=\"fa-solid fa-check\"></i> }\n              </span>\n              <span>Required</span>\n            </label>\n          </div>\n\n          <!-- Direction -->\n          <div class=\"ve-tp-section\">\n            <label class=\"ve-tp-section-label\">Direction</label>\n            <div class=\"ve-tp-direction-btns\">\n              <button [class.active]=\"conn.Direction === 'SourceToDest'\"\n                      (click)=\"OnConnectionDirectionChange('SourceToDest')\">\n                Source &rarr; Dest\n              </button>\n              <button [class.active]=\"conn.Direction === 'DestToSource'\"\n                      (click)=\"OnConnectionDirectionChange('DestToSource')\">\n                Dest &rarr; Source\n              </button>\n              <button [class.active]=\"conn.Direction === 'Both'\"\n                      (click)=\"OnConnectionDirectionChange('Both')\">\n                Both\n              </button>\n            </div>\n          </div>\n\n          <!-- Transform pipeline -->\n          <div class=\"ve-tp-section\">\n            <div class=\"ve-tp-section-header\">\n              <label class=\"ve-tp-section-label\">Transform Pipeline</label>\n              <button class=\"ve-tp-add-step\" (click)=\"AddTransformStep()\">\n                <i class=\"fa-solid fa-plus\"></i> Add Step\n              </button>\n            </div>\n\n            @for (step of conn.TransformSteps; track $index; let si = $index) {\n              <div class=\"ve-tp-step\">\n                <div class=\"ve-tp-step-header\">\n                  <span class=\"ve-tp-step-num\">{{ si + 1 }}</span>\n                  <select class=\"ve-tp-type-select\"\n                          [value]=\"step.Type\"\n                          (change)=\"OnConnectionTransformChange(si, $any($event.target).value)\">\n                    @for (tt of TRANSFORM_TYPES; track tt.Value) {\n                      <option [value]=\"tt.Value\" [selected]=\"tt.Value === step.Type\">{{ tt.Label }}</option>\n                    }\n                  </select>\n                  <button class=\"ve-tp-remove-step\" (click)=\"RemoveTransformStep(si)\" title=\"Remove step\">\n                    <i class=\"fa-solid fa-trash-can\"></i>\n                  </button>\n                </div>\n\n                <!-- Config fields based on transform type -->\n                @if (step.Type !== 'direct') {\n                  <div class=\"ve-tp-step-config\">\n                    @for (key of GetConfigKeys(step); track key) {\n                      <div class=\"ve-tp-config-row\">\n                        <label>{{ key }}</label>\n                        <input type=\"text\"\n                               [value]=\"GetConfigValue(step, key)\"\n                               (input)=\"OnTransformConfigChange(conn, si, key, $any($event.target).value)\"\n                               placeholder=\"{{ key }}\" />\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- On error -->\n                <div class=\"ve-tp-step-onerror\">\n                  <label>On Error:</label>\n                  <select [value]=\"step.OnError\"\n                          (change)=\"step.OnError = $any($event.target).value; conn.IsDirty = true\">\n                    <option value=\"Fail\">Fail</option>\n                    <option value=\"Skip\">Skip</option>\n                    <option value=\"Null\">Null</option>\n                  </select>\n                </div>\n              </div>\n            }\n\n            @if (conn.TransformSteps.length === 0) {\n              <div class=\"ve-tp-no-steps\">\n                No transform steps. Data passes through as-is.\n              </div>\n            }\n          </div>\n\n          <!-- Delete mapping button -->\n          <div class=\"ve-tp-footer\">\n            <button class=\"ve-btn ve-btn-danger\" (click)=\"RemoveSelectedConnection()\">\n              <i class=\"fa-solid fa-trash-can\"></i> Remove Mapping\n            </button>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: ["/* ==========================================================================\n   Visual Field Editor Component CSS\n   Copied from pipelines.component.css (visual editor section)\n   ========================================================================== */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.ve-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n  animation: slideIn 250ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from { opacity: 0; transform: translateX(30px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* ---------------------------------------------------------------------------\n   VE Header\n   --------------------------------------------------------------------------- */\n\n.ve-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  gap: 16px;\n}\n\n.ve-header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.ve-back-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  flex-shrink: 0;\n  transition: all 150ms ease;\n}\n\n.ve-back-btn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-header-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 600;\n  min-width: 0;\n}\n\n.ve-source-label {\n  color: var(--mj-color-indigo-500);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-direction-arrow { color: var(--mj-text-disabled); font-size: 13px; flex-shrink: 0; }\n\n.ve-dest-label {\n  color: var(--mj-color-success-600);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-header-stats {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.ve-stat {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.ve-stat strong {\n  color: var(--mj-text-primary);\n  font-weight: 700;\n}\n\n.ve-stat-sep {\n  width: 1px;\n  height: 14px;\n  background: var(--mj-border-default);\n}\n\n.ve-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.ve-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 14px;\n  border-radius: 7px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border: none;\n  white-space: nowrap;\n}\n\n.ve-btn-ghost {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n.ve-btn-ghost:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-primary); }\n\n.ve-btn-primary {\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n}\n\n.ve-btn-primary:hover { background: var(--mj-color-indigo-600); }\n.ve-btn-primary:disabled { opacity: 0.5; cursor: default; }\n\n.ve-btn-danger {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-color-error-600);\n  border: 1px solid var(--mj-color-error-200);\n}\n\n.ve-btn-danger:hover { background: var(--mj-color-error-100); }\n\n.ve-save-success {\n  font-size: 12px;\n  color: var(--mj-color-success-600);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  animation: fadeIn 300ms ease;\n}\n\n/* Sync toggle in editor header */\n.ve-sync-toggle { flex-shrink: 0; margin-left: 8px; }\n.ve-sync-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n/* Sync toggle styling */\n.sync-toggle {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.sync-toggle input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n\n.sync-toggle-track {\n  width: 34px;\n  height: 18px;\n  background: var(--mj-color-neutral-300);\n  border-radius: 9px;\n  position: relative;\n  transition: background 200ms ease;\n}\n\n.sync-toggle-track::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  background: var(--mj-bg-surface);\n  border-radius: 50%;\n  transition: transform 200ms ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n\n.sync-toggle input:checked + .sync-toggle-track {\n  background: var(--mj-color-success-500);\n}\n\n.sync-toggle input:checked + .sync-toggle-track::after {\n  transform: translateX(16px);\n}\n\n/* Action separator */\n.ve-action-sep {\n  width: 1px;\n  height: 20px;\n  background: var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n/* Active state for preview toggle buttons */\n.ve-btn-ghost.active {\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  border-color: var(--mj-color-indigo-200);\n}\n\n/* ---------------------------------------------------------------------------\n   Data Preview Strip\n   --------------------------------------------------------------------------- */\n\n.ve-preview-strip {\n  display: flex;\n  gap: 1px;\n  background: var(--mj-border-default);\n  border-bottom: 1px solid var(--mj-border-default);\n  max-height: 220px;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.ve-preview-panel {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.ve-preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.ve-preview-header i { font-size: 11px; color: var(--mj-color-indigo-500); }\n.ve-preview-header span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.ve-preview-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.ve-preview-close:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n.ve-preview-loading,\n.ve-preview-empty {\n  padding: 20px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.ve-preview-loading i { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.ve-preview-table-wrap {\n  flex: 1;\n  overflow: auto;\n}\n\n.ve-preview-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 11px;\n}\n\n.ve-preview-table th {\n  position: sticky;\n  top: 0;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  font-size: 10px;\n  padding: 5px 10px;\n  text-align: left;\n  white-space: nowrap;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-preview-table td {\n  padding: 4px 10px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ve-preview-table tbody tr:hover td {\n  background: var(--mj-color-indigo-50);\n}\n\n/* ---------------------------------------------------------------------------\n   Connect mode banner\n   --------------------------------------------------------------------------- */\n\n.ve-connect-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 20px;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-700);\n  font-size: 13px;\n  border-bottom: 1px solid var(--mj-color-indigo-100);\n  flex-shrink: 0;\n}\n\n.ve-connect-banner strong { font-weight: 700; }\n\n.ve-connect-cancel {\n  margin-left: auto;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-color-indigo-100);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-color-indigo-700);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-connect-cancel:hover { background: var(--mj-color-indigo-100); }\n\n/* ---------------------------------------------------------------------------\n   VE Body\n   --------------------------------------------------------------------------- */\n\n.ve-body {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n}\n\n.ve-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  gap: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n.ve-loading i { font-size: 24px; color: var(--mj-color-indigo-500); }\n\n/* Sections wrapper (replaces ve-canvas-wrapper as the main left area) */\n.ve-sections-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n/* Collapsible section */\n.ve-section {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-section:not(.collapsed) {\n  flex: 1;\n  min-height: 0;\n}\n\n.ve-section.collapsed {\n  flex-shrink: 0;\n}\n\n.ve-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  cursor: pointer;\n  user-select: none;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n\n.ve-section-header:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.ve-section-header i {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  width: 12px;\n  flex-shrink: 0;\n  transition: transform 200ms ease;\n}\n\n.ve-section-title {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  color: var(--mj-text-muted);\n}\n\n.ve-section-badge {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  padding: 1px 8px;\n  border-radius: 4px;\n  margin-left: auto;\n}\n\n.ve-section-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  animation: fadeIn 200ms ease;\n}\n\n/* Canvas wrapper (takes available space, pushes transform panel right) */\n.ve-canvas-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n/* ---------------------------------------------------------------------------\n   Column headers\n   --------------------------------------------------------------------------- */\n\n.ve-col-headers {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-col-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.ve-col-header.source i { color: var(--mj-color-indigo-500); }\n.ve-col-header.dest i { color: var(--mj-color-success-600); }\n.ve-col-header-spacer { /* SVG gap */ }\n\n.ve-col-count {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-disabled);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n/* ---------------------------------------------------------------------------\n   Column search bars\n   --------------------------------------------------------------------------- */\n\n.ve-col-searches {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  padding: 6px 0;\n}\n\n.ve-col-search {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 12px;\n}\n\n.ve-col-search i {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-col-search input {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.ve-col-search input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search input::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer { /* SVG gap */ }\n\n/* ---------------------------------------------------------------------------\n   Canvas scroll + grid\n   --------------------------------------------------------------------------- */\n\n.ve-canvas-scroll {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.ve-canvas-grid {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  position: relative;\n}\n\n/* ---------------------------------------------------------------------------\n   Field columns\n   --------------------------------------------------------------------------- */\n\n.ve-field-col {\n  display: flex;\n  flex-direction: column;\n}\n\n.ve-field-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 14px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background 150ms ease, opacity 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n  box-sizing: border-box;\n}\n\n.ve-field-item.mapped { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped {\n  opacity: 0.5;\n  background: var(--mj-bg-page);\n}\n\n.ve-field-item:hover {\n  background: var(--mj-color-indigo-50);\n  opacity: 1;\n}\n\n.ve-field-item.connecting {\n  background: var(--mj-color-indigo-100);\n  opacity: 1;\n  box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target:hover {\n  background: var(--mj-color-success-100);\n  box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--mj-color-neutral-700);\n  font-weight: 500;\n}\n\n.ve-field-type {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges {\n  display: flex;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.ve-fbadge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 3px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n}\n\n.ve-fbadge.pk { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n/* ---------------------------------------------------------------------------\n   SVG connections\n   --------------------------------------------------------------------------- */\n\n.ve-svg {\n  display: block;\n}\n\n.ve-conn-line {\n  fill: none;\n  stroke-width: 2;\n  cursor: pointer;\n  transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n/* Transform-based line styles */\n.ve-conn-line.conn-direct { stroke: #6366f1; stroke-dasharray: none; }\n.ve-conn-line.conn-regex { stroke: #8b5cf6; stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split { stroke: #f59e0b; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine { stroke: #10b981; stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup { stroke: #0ea5e9; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format { stroke: #ec4899; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce { stroke: #f97316; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring { stroke: #14b8a6; stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom { stroke: #a855f7; stroke-dasharray: 2 3; }\n\n.ve-conn-line:hover { stroke-width: 3.5; }\n.ve-conn-line.selected { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n/* Connection badge at midpoint */\n.ve-badge-fo { overflow: visible; }\n\n.ve-conn-badge {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct { background: #eef2ff; color: #6366f1; border: 2px solid #6366f1; }\n.ve-conn-badge.badge-regex { background: #f5f3ff; color: #8b5cf6; border: 2px solid #8b5cf6; }\n.ve-conn-badge.badge-split { background: #fffbeb; color: #f59e0b; border: 2px solid #f59e0b; }\n.ve-conn-badge.badge-combine { background: #ecfdf5; color: #10b981; border: 2px solid #10b981; }\n.ve-conn-badge.badge-lookup { background: #f0f9ff; color: #0ea5e9; border: 2px solid #0ea5e9; }\n.ve-conn-badge.badge-format { background: #fdf2f8; color: #ec4899; border: 2px solid #ec4899; }\n.ve-conn-badge.badge-coerce { background: #fff7ed; color: #f97316; border: 2px solid #f97316; }\n.ve-conn-badge.badge-substring { background: #f0fdfa; color: #14b8a6; border: 2px solid #14b8a6; }\n.ve-conn-badge.badge-custom { background: #faf5ff; color: #a855f7; border: 2px solid #a855f7; }\n\n.ve-conn-badge:hover { transform: scale(1.2); }\n.ve-conn-badge.selected { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n/* ---------------------------------------------------------------------------\n   Transform Panel (right side)\n   --------------------------------------------------------------------------- */\n\n.ve-transform-panel {\n  width: 320px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  animation: slideInRight 200ms ease;\n}\n\n@keyframes slideInRight {\n  from { opacity: 0; transform: translateX(20px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.ve-tp-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.ve-tp-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 150ms ease;\n}\n\n.ve-tp-close:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n/* Mapping info */\n.ve-tp-mapping-info {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.ve-tp-field {\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 12px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 110px;\n}\n\n.ve-tp-field.source { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n/* Toggles */\n.ve-tp-toggles {\n  display: flex;\n  gap: 16px;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.ve-tp-toggle-box {\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-color-neutral-300);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  color: var(--mj-bg-surface);\n  transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active {\n  background: var(--mj-color-indigo-500);\n  border-color: var(--mj-color-indigo-500);\n}\n\n/* Sections */\n.ve-tp-section {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label {\n  display: block;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 8px;\n}\n\n.ve-tp-section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* Direction buttons */\n.ve-tp-direction-btns {\n  display: flex;\n  gap: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.ve-tp-direction-btns button {\n  flex: 1;\n  padding: 6px 8px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns button:last-child { border-right: none; }\n.ve-tp-direction-btns button:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns button.active { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n/* Transform steps */\n.ve-tp-add-step {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-tp-add-step:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step {\n  margin-top: 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n.ve-tp-step-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.ve-tp-type-select {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-type-select:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 5px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  transition: all 150ms ease;\n  flex-shrink: 0;\n}\n\n.ve-tp-remove-step:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config {\n  padding: 8px 10px;\n}\n\n.ve-tp-config-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.ve-tp-config-row:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row label {\n  width: 80px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.ve-tp-config-row input {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-page);\n  outline: none;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror label {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-tp-step-onerror select {\n  height: 24px;\n  padding: 0 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 11px;\n  color: var(--mj-color-neutral-700);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-no-steps {\n  padding: 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  font-style: italic;\n}\n\n/* Footer */\n.ve-tp-footer {\n  padding: 14px 16px;\n  margin-top: auto;\n  flex-shrink: 0;\n}\n\n/* ---------------------------------------------------------------------------\n   Scrollbar styling\n   --------------------------------------------------------------------------- */\n\n.ve-canvas-scroll::-webkit-scrollbar,\n.ve-transform-panel::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n.ve-canvas-scroll::-webkit-scrollbar-track,\n.ve-transform-panel::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.ve-canvas-scroll::-webkit-scrollbar-thumb,\n.ve-transform-panel::-webkit-scrollbar-thumb {\n  background: var(--mj-color-neutral-300);\n  border-radius: 3px;\n}\n\n.ve-canvas-scroll::-webkit-scrollbar-thumb:hover,\n.ve-transform-panel::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* ---------------------------------------------------------------------------\n   Info Panel\n   --------------------------------------------------------------------------- */\n\n.ve-info-body {\n  padding: 16px;\n  overflow-y: auto;\n}\n\n.ve-info-loading {\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  padding: 20px;\n}\n\n.ve-info-loading i {\n  color: var(--mj-color-indigo-500);\n  margin-right: 6px;\n}\n\n.ve-info-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 12px;\n  margin-bottom: 16px;\n}\n\n.ve-info-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n}\n\n.ve-info-card-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-500);\n}\n\n.ve-info-card-icon.source {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.sync {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-success {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-error {\n  background: var(--mj-color-error-100);\n  color: var(--mj-color-error-600);\n}\n\n.ve-info-card-icon.info-status-running {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.info-status-pending {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-600);\n}\n\n.ve-info-card-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.ve-info-card-value {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ve-info-card-label {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n.ve-info-details {\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.ve-info-detail-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 14px;\n  font-size: 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-info-detail-row:last-child {\n  border-bottom: none;\n}\n\n.ve-info-detail-label {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.ve-info-detail-value {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-visual-field-editor', template: "<div class=\"ve-container\">\n\n  <!-- Header -->\n  <div class=\"ve-header\">\n    <div class=\"ve-header-left\">\n      <button class=\"ve-back-btn\" (click)=\"OnClose()\" title=\"Back to entity maps\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n      </button>\n      <div class=\"ve-header-title\">\n        <span class=\"ve-source-label\">{{ EntityMap?.ExternalObjectLabel ?? EntityMap?.ExternalObjectName }}</span>\n        <span class=\"ve-direction-arrow\">\n          <i class=\"fa-solid fa-arrow-right-arrow-left\"></i>\n        </span>\n        <span class=\"ve-dest-label\">{{ EntityMap?.Entity }}</span>\n      </div>\n      <!-- SyncEnabled toggle in editor header -->\n      @if (EntityMap) {\n        <label class=\"sync-toggle ve-sync-toggle\"\n               [title]=\"EntityMap.SyncEnabled ? 'Sync enabled' : 'Sync disabled'\">\n          <input type=\"checkbox\"\n                 [checked]=\"EntityMap.SyncEnabled\"\n                 (change)=\"OnToggleEditorSyncEnabled($event)\" />\n          <span class=\"sync-toggle-track\"></span>\n        </label>\n        <span class=\"ve-sync-label\">{{ EntityMap.SyncEnabled ? 'Sync On' : 'Sync Off' }}</span>\n      }\n    </div>\n    <div class=\"ve-header-stats\">\n      <span class=\"ve-stat\">\n        <strong>{{ EditorMappedCount }}</strong> mapped\n      </span>\n      <span class=\"ve-stat-sep\"></span>\n      <span class=\"ve-stat\">\n        <strong>{{ EditorKeyFieldCount }}</strong> key\n      </span>\n      <span class=\"ve-stat-sep\"></span>\n      <span class=\"ve-stat\">\n        <strong>{{ EditorRequiredCount }}</strong> required\n      </span>\n    </div>\n    <div class=\"ve-header-actions\">\n      <!-- Data preview buttons -->\n      <button class=\"ve-btn ve-btn-ghost\"\n              (click)=\"ToggleSourcePreview()\"\n              [class.active]=\"ShowSourcePreview\"\n              title=\"Preview source data\">\n        <i class=\"fa-solid fa-cloud\"></i> Source Data\n      </button>\n      <button class=\"ve-btn ve-btn-ghost\"\n              (click)=\"ToggleDestPreview()\"\n              [class.active]=\"ShowDestPreview\"\n              title=\"Preview MJ data\">\n        <i class=\"fa-solid fa-database\"></i> MJ Data\n      </button>\n      <div class=\"ve-action-sep\"></div>\n      <button class=\"ve-btn ve-btn-ghost\" (click)=\"AutoMapEditorFields()\" title=\"Auto-map fields by name\">\n        <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Auto-Map\n      </button>\n      <button class=\"ve-btn ve-btn-primary\"\n              [disabled]=\"!HasEditorChanges || EditorSaving\"\n              (click)=\"SaveVisualEditor()\">\n        @if (EditorSaving) {\n          <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n        } @else {\n          <i class=\"fa-solid fa-check\"></i> Save\n        }\n      </button>\n      @if (EditorSaveSuccess && !HasEditorChanges) {\n        <span class=\"ve-save-success\">\n          <i class=\"fa-solid fa-circle-check\"></i> Saved\n        </span>\n      }\n    </div>\n  </div>\n\n  <!-- Data preview panels (collapsible) -->\n  @if (ShowSourcePreview || ShowDestPreview) {\n    <div class=\"ve-preview-strip\">\n      @if (ShowSourcePreview) {\n        <div class=\"ve-preview-panel\">\n          <div class=\"ve-preview-header\">\n            <i class=\"fa-solid fa-cloud\"></i>\n            <span>Source Preview: {{ EntityMap?.ExternalObjectLabel ?? EntityMap?.ExternalObjectName }}</span>\n            <button class=\"ve-preview-close\" (click)=\"ShowSourcePreview = false\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n          @if (PreviewSourceLoading) {\n            <div class=\"ve-preview-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n            </div>\n          } @else if (PreviewSourceRows.length === 0) {\n            <div class=\"ve-preview-empty\">No source data available</div>\n          } @else {\n            <div class=\"ve-preview-table-wrap\">\n              <table class=\"ve-preview-table\">\n                <thead>\n                  <tr>\n                    @for (col of PreviewSourceColumns; track col) {\n                      <th>{{ col }}</th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of PreviewSourceRows; track $index) {\n                    <tr>\n                      @for (col of PreviewSourceColumns; track col) {\n                        <td [title]=\"row[col]?.toString() ?? ''\">{{ row[col] ?? '' }}</td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n        </div>\n      }\n      @if (ShowDestPreview) {\n        <div class=\"ve-preview-panel\">\n          <div class=\"ve-preview-header\">\n            <i class=\"fa-solid fa-database\"></i>\n            <span>Dest Preview: {{ EntityMap?.Entity }}</span>\n            <button class=\"ve-preview-close\" (click)=\"ShowDestPreview = false\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n          @if (PreviewDestLoading) {\n            <div class=\"ve-preview-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n            </div>\n          } @else if (PreviewDestRows.length === 0) {\n            <div class=\"ve-preview-empty\">No destination data available</div>\n          } @else {\n            <div class=\"ve-preview-table-wrap\">\n              <table class=\"ve-preview-table\">\n                <thead>\n                  <tr>\n                    @for (col of PreviewDestColumns; track col) {\n                      <th>{{ col }}</th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of PreviewDestRows; track $index) {\n                    <tr>\n                      @for (col of PreviewDestColumns; track col) {\n                        <td [title]=\"row[col]?.toString() ?? ''\">{{ row[col] ?? '' }}</td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Connect mode banner -->\n  @if (ConnectingFromSource) {\n    <div class=\"ve-connect-banner\">\n      <i class=\"fa-solid fa-link\"></i>\n      Click a destination field to map from\n      <strong>{{ ConnectingFromSource }}</strong>\n      <button class=\"ve-connect-cancel\" (click)=\"CancelConnect()\">Cancel</button>\n    </div>\n  }\n\n  <!-- Main content: sections + transform panel -->\n  <div class=\"ve-body\" [class.has-transform-panel]=\"SelectedConnectionIdx !== null\">\n\n    <!-- Loading state -->\n    @if (EditorLoading) {\n      <div class=\"ve-loading\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        <span>Loading field mappings...</span>\n      </div>\n    } @else {\n\n      <!-- Left content area (sections stacked vertically) -->\n      <div class=\"ve-sections-wrapper\">\n\n        <!-- ============================================================= -->\n        <!-- FIELD MAPPINGS SECTION (collapsible)                          -->\n        <!-- ============================================================= -->\n        <div class=\"ve-section\" [class.collapsed]=\"!FieldMapsExpanded\">\n          <div class=\"ve-section-header\" (click)=\"ToggleFieldMaps()\">\n            <i class=\"fa-solid\"\n               [class.fa-chevron-down]=\"FieldMapsExpanded\"\n               [class.fa-chevron-right]=\"!FieldMapsExpanded\"></i>\n            <span class=\"ve-section-title\">Field Mappings</span>\n            <span class=\"ve-section-badge\">{{ EditorMappedCount }} mapped</span>\n          </div>\n\n          @if (FieldMapsExpanded) {\n            <div class=\"ve-section-body\">\n              <!-- Canvas area (scrollable) -->\n              <div class=\"ve-canvas-wrapper\">\n\n                <!-- Column headers -->\n                <div class=\"ve-col-headers\">\n                  <div class=\"ve-col-header source\">\n                    <i class=\"fa-solid fa-cloud\"></i>\n                    Source Fields\n                    <span class=\"ve-col-count\">{{ EditorSourceFields.length }}</span>\n                  </div>\n                  <div class=\"ve-col-header-spacer\"></div>\n                  <div class=\"ve-col-header dest\">\n                    <i class=\"fa-solid fa-database\"></i>\n                    MJ Entity Fields\n                    <span class=\"ve-col-count\">{{ EditorDestFields.length }}</span>\n                  </div>\n                </div>\n\n                <!-- Search bars -->\n                <div class=\"ve-col-searches\">\n                  <div class=\"ve-col-search\">\n                    <i class=\"fa-solid fa-search\"></i>\n                    <input type=\"text\"\n                           placeholder=\"Filter source fields...\"\n                           [value]=\"EditorSearchSource\"\n                           (input)=\"EditorSearchSource = $any($event.target).value\" />\n                  </div>\n                  <div class=\"ve-col-search-spacer\"></div>\n                  <div class=\"ve-col-search\">\n                    <i class=\"fa-solid fa-search\"></i>\n                    <input type=\"text\"\n                           placeholder=\"Filter destination fields...\"\n                           [value]=\"EditorSearchDest\"\n                           (input)=\"EditorSearchDest = $any($event.target).value\" />\n                  </div>\n                </div>\n\n                <!-- Canvas grid (source + SVG + dest) -->\n                <div class=\"ve-canvas-scroll\" (click)=\"DeselectConnection()\">\n                  <div class=\"ve-canvas-grid\" [style.min-height.px]=\"EditorCanvasHeight\">\n\n                    <!-- Source column -->\n                    <div class=\"ve-field-col source\">\n                      @for (sf of FilteredEditorSourceFields; track sf.Name) {\n                        <div class=\"ve-field-item\"\n                             [class.mapped]=\"IsSourceFieldMapped(sf.Name)\"\n                             [class.unmapped]=\"!IsSourceFieldMapped(sf.Name)\"\n                             [class.connecting]=\"ConnectingFromSource === sf.Name\"\n                             [style.height.px]=\"FIELD_HEIGHT\"\n                             (click)=\"OnEditorSourceClick(sf.Name); $event.stopPropagation()\">\n                          <span class=\"ve-field-name\" [title]=\"sf.Name\">{{ sf.Label || sf.Name }}</span>\n                          <span class=\"ve-field-type\">{{ sf.Type }}</span>\n                          <span class=\"ve-field-badges\">\n                            @if (sf.IsPrimaryKey) {\n                              <span class=\"ve-fbadge pk\" title=\"Primary Key\">PK</span>\n                            }\n                            @if (sf.IsRequired) {\n                              <span class=\"ve-fbadge req\" title=\"Required\">*</span>\n                            }\n                          </span>\n                        </div>\n                      }\n                      @if (FilteredEditorSourceFields.length === 0) {\n                        <div class=\"ve-field-empty\">No source fields found</div>\n                      }\n                    </div>\n\n                    <!-- SVG connection lines -->\n                    <svg class=\"ve-svg\"\n                         [attr.width]=\"SVG_WIDTH\"\n                         [attr.height]=\"EditorCanvasHeight\"\n                         [attr.viewBox]=\"'0 0 ' + SVG_WIDTH + ' ' + EditorCanvasHeight\"\n                         (click)=\"$event.stopPropagation()\">\n                      @for (conn of VisibleConnections; track conn.SourceFieldName + '-' + conn.DestFieldName; let i = $index) {\n                        <!-- Connection line -->\n                        <path [attr.d]=\"GetConnectionPath(conn)\"\n                              class=\"ve-conn-line\"\n                              [class]=\"'ve-conn-line ' + GetConnectionLineClass(conn)\"\n                              [class.selected]=\"SelectedConnectionIdx === i\"\n                              (click)=\"SelectConnection(i, $event)\" />\n                        <!-- Transform badge at midpoint -->\n                        <foreignObject\n                          [attr.x]=\"SVG_WIDTH / 2 - 14\"\n                          [attr.y]=\"GetConnectionMidY(conn) - 14\"\n                          width=\"28\" height=\"28\"\n                          class=\"ve-badge-fo\">\n                          <div xmlns=\"http://www.w3.org/1999/xhtml\"\n                               class=\"ve-conn-badge\"\n                               [class]=\"'ve-conn-badge ' + GetConnectionBadgeClass(conn)\"\n                               [class.selected]=\"SelectedConnectionIdx === i\"\n                               (click)=\"SelectConnection(i, $event)\">\n                            <i [class]=\"GetConnectionDirectionIcon(conn)\"></i>\n                          </div>\n                        </foreignObject>\n                      }\n                    </svg>\n\n                    <!-- Dest column -->\n                    <div class=\"ve-field-col dest\">\n                      @for (df of FilteredEditorDestFields; track df.Name) {\n                        <div class=\"ve-field-item\"\n                             [class.mapped]=\"IsDestFieldMapped(df.Name)\"\n                             [class.unmapped]=\"!IsDestFieldMapped(df.Name)\"\n                             [class.connect-target]=\"ConnectingFromSource !== null\"\n                             [style.height.px]=\"FIELD_HEIGHT\"\n                             (click)=\"OnEditorDestClick(df.Name); $event.stopPropagation()\">\n                          <span class=\"ve-field-name\" [title]=\"df.Name\">{{ df.Name }}</span>\n                          <span class=\"ve-field-type\">{{ df.Type }}</span>\n                          <span class=\"ve-field-badges\">\n                            @if (df.IsRequired) {\n                              <span class=\"ve-fbadge req\" title=\"Required\">*</span>\n                            }\n                          </span>\n                        </div>\n                      }\n                      @if (FilteredEditorDestFields.length === 0) {\n                        <div class=\"ve-field-empty\">No destination fields found</div>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n\n        <!-- ============================================================= -->\n        <!-- INFO PANEL SECTION (collapsible)                              -->\n        <!-- ============================================================= -->\n        <div class=\"ve-section\" [class.collapsed]=\"!InfoPanelExpanded\">\n          <div class=\"ve-section-header\" (click)=\"ToggleInfoPanel()\">\n            <i class=\"fa-solid\"\n               [class.fa-chevron-down]=\"InfoPanelExpanded\"\n               [class.fa-chevron-right]=\"!InfoPanelExpanded\"></i>\n            <span class=\"ve-section-title\">Sync Info</span>\n          </div>\n\n          @if (InfoPanelExpanded) {\n            <div class=\"ve-section-body ve-info-body\">\n              @if (InfoPanelLoading) {\n                <div class=\"ve-info-loading\">\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading stats...\n                </div>\n              } @else {\n                <div class=\"ve-info-grid\">\n                  <!-- Destination record count -->\n                  <div class=\"ve-info-card\">\n                    <div class=\"ve-info-card-icon\">\n                      <i class=\"fa-solid fa-database\"></i>\n                    </div>\n                    <div class=\"ve-info-card-content\">\n                      <span class=\"ve-info-card-value\">{{ InfoDestRecordCount ?? '-' }}</span>\n                      <span class=\"ve-info-card-label\">MJ Records</span>\n                    </div>\n                  </div>\n                  <!-- Source fields count -->\n                  <div class=\"ve-info-card\">\n                    <div class=\"ve-info-card-icon source\">\n                      <i class=\"fa-solid fa-cloud\"></i>\n                    </div>\n                    <div class=\"ve-info-card-content\">\n                      <span class=\"ve-info-card-value\">{{ EditorSourceFields.length }}</span>\n                      <span class=\"ve-info-card-label\">Source Fields</span>\n                    </div>\n                  </div>\n                  <!-- Last sync -->\n                  <div class=\"ve-info-card\">\n                    <div class=\"ve-info-card-icon sync\">\n                      <i class=\"fa-solid fa-arrows-rotate\"></i>\n                    </div>\n                    <div class=\"ve-info-card-content\">\n                      <span class=\"ve-info-card-value\">{{ FormatSyncDate(InfoLastSync?.StartedAt ?? null) }}</span>\n                      <span class=\"ve-info-card-label\">Last Sync</span>\n                    </div>\n                  </div>\n                  <!-- Sync status -->\n                  @if (InfoLastSync) {\n                    <div class=\"ve-info-card\">\n                      <div class=\"ve-info-card-icon\" [ngClass]=\"SyncStatusClass(InfoLastSync.Status)\">\n                        <i class=\"fa-solid\"\n                           [class.fa-circle-check]=\"InfoLastSync.Status === 'Success'\"\n                           [class.fa-circle-xmark]=\"InfoLastSync.Status === 'Failed'\"\n                           [class.fa-spinner]=\"InfoLastSync.Status === 'In Progress'\"\n                           [class.fa-clock]=\"InfoLastSync.Status === 'Pending'\"></i>\n                      </div>\n                      <div class=\"ve-info-card-content\">\n                        <span class=\"ve-info-card-value\">{{ InfoLastSync.Status }}</span>\n                        <span class=\"ve-info-card-label\">{{ InfoLastSync.TotalRecords }} records processed</span>\n                      </div>\n                    </div>\n                  }\n                </div>\n\n                <!-- Configuration details -->\n                <div class=\"ve-info-details\">\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Sync Direction</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.SyncDirection }}</span>\n                  </div>\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Conflict Resolution</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.ConflictResolution }}</span>\n                  </div>\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Delete Behavior</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.DeleteBehavior }}</span>\n                  </div>\n                  <div class=\"ve-info-detail-row\">\n                    <span class=\"ve-info-detail-label\">Priority</span>\n                    <span class=\"ve-info-detail-value\">{{ EntityMap?.Priority }}</span>\n                  </div>\n                  @if (EntityMap?.MatchStrategy) {\n                    <div class=\"ve-info-detail-row\">\n                      <span class=\"ve-info-detail-label\">Match Strategy</span>\n                      <span class=\"ve-info-detail-value\">Configured</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Transform editor panel (right side, appears when connection selected) -->\n      @if (SelectedConnection; as conn) {\n        <div class=\"ve-transform-panel\" (click)=\"$event.stopPropagation()\">\n          <div class=\"ve-tp-header\">\n            <span class=\"ve-tp-title\">Mapping Details</span>\n            <button class=\"ve-tp-close\" (click)=\"DeselectConnection()\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n\n          <!-- Source -> Dest -->\n          <div class=\"ve-tp-mapping-info\">\n            <div class=\"ve-tp-field-pair\">\n              <span class=\"ve-tp-field source\">{{ conn.SourceFieldName }}</span>\n              <i class=\"fa-solid ve-tp-arrow\"\n                 [class.fa-arrow-right]=\"conn.Direction === 'SourceToDest'\"\n                 [class.fa-arrow-left]=\"conn.Direction === 'DestToSource'\"\n                 [class.fa-right-left]=\"conn.Direction === 'Both'\"></i>\n              <span class=\"ve-tp-field dest\">{{ conn.DestFieldName }}</span>\n            </div>\n          </div>\n\n          <!-- Toggles -->\n          <div class=\"ve-tp-toggles\">\n            <label class=\"ve-tp-toggle\" (click)=\"ToggleConnectionKey()\">\n              <span class=\"ve-tp-toggle-box\" [class.active]=\"conn.IsKeyField\">\n                @if (conn.IsKeyField) { <i class=\"fa-solid fa-check\"></i> }\n              </span>\n              <span>Key Field</span>\n            </label>\n            <label class=\"ve-tp-toggle\" (click)=\"ToggleConnectionRequired()\">\n              <span class=\"ve-tp-toggle-box\" [class.active]=\"conn.IsRequired\">\n                @if (conn.IsRequired) { <i class=\"fa-solid fa-check\"></i> }\n              </span>\n              <span>Required</span>\n            </label>\n          </div>\n\n          <!-- Direction -->\n          <div class=\"ve-tp-section\">\n            <label class=\"ve-tp-section-label\">Direction</label>\n            <div class=\"ve-tp-direction-btns\">\n              <button [class.active]=\"conn.Direction === 'SourceToDest'\"\n                      (click)=\"OnConnectionDirectionChange('SourceToDest')\">\n                Source &rarr; Dest\n              </button>\n              <button [class.active]=\"conn.Direction === 'DestToSource'\"\n                      (click)=\"OnConnectionDirectionChange('DestToSource')\">\n                Dest &rarr; Source\n              </button>\n              <button [class.active]=\"conn.Direction === 'Both'\"\n                      (click)=\"OnConnectionDirectionChange('Both')\">\n                Both\n              </button>\n            </div>\n          </div>\n\n          <!-- Transform pipeline -->\n          <div class=\"ve-tp-section\">\n            <div class=\"ve-tp-section-header\">\n              <label class=\"ve-tp-section-label\">Transform Pipeline</label>\n              <button class=\"ve-tp-add-step\" (click)=\"AddTransformStep()\">\n                <i class=\"fa-solid fa-plus\"></i> Add Step\n              </button>\n            </div>\n\n            @for (step of conn.TransformSteps; track $index; let si = $index) {\n              <div class=\"ve-tp-step\">\n                <div class=\"ve-tp-step-header\">\n                  <span class=\"ve-tp-step-num\">{{ si + 1 }}</span>\n                  <select class=\"ve-tp-type-select\"\n                          [value]=\"step.Type\"\n                          (change)=\"OnConnectionTransformChange(si, $any($event.target).value)\">\n                    @for (tt of TRANSFORM_TYPES; track tt.Value) {\n                      <option [value]=\"tt.Value\" [selected]=\"tt.Value === step.Type\">{{ tt.Label }}</option>\n                    }\n                  </select>\n                  <button class=\"ve-tp-remove-step\" (click)=\"RemoveTransformStep(si)\" title=\"Remove step\">\n                    <i class=\"fa-solid fa-trash-can\"></i>\n                  </button>\n                </div>\n\n                <!-- Config fields based on transform type -->\n                @if (step.Type !== 'direct') {\n                  <div class=\"ve-tp-step-config\">\n                    @for (key of GetConfigKeys(step); track key) {\n                      <div class=\"ve-tp-config-row\">\n                        <label>{{ key }}</label>\n                        <input type=\"text\"\n                               [value]=\"GetConfigValue(step, key)\"\n                               (input)=\"OnTransformConfigChange(conn, si, key, $any($event.target).value)\"\n                               placeholder=\"{{ key }}\" />\n                      </div>\n                    }\n                  </div>\n                }\n\n                <!-- On error -->\n                <div class=\"ve-tp-step-onerror\">\n                  <label>On Error:</label>\n                  <select [value]=\"step.OnError\"\n                          (change)=\"step.OnError = $any($event.target).value; conn.IsDirty = true\">\n                    <option value=\"Fail\">Fail</option>\n                    <option value=\"Skip\">Skip</option>\n                    <option value=\"Null\">Null</option>\n                  </select>\n                </div>\n              </div>\n            }\n\n            @if (conn.TransformSteps.length === 0) {\n              <div class=\"ve-tp-no-steps\">\n                No transform steps. Data passes through as-is.\n              </div>\n            }\n          </div>\n\n          <!-- Delete mapping button -->\n          <div class=\"ve-tp-footer\">\n            <button class=\"ve-btn ve-btn-danger\" (click)=\"RemoveSelectedConnection()\">\n              <i class=\"fa-solid fa-trash-can\"></i> Remove Mapping\n            </button>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: ["/* ==========================================================================\n   Visual Field Editor Component CSS\n   Copied from pipelines.component.css (visual editor section)\n   ========================================================================== */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.ve-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n  animation: slideIn 250ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from { opacity: 0; transform: translateX(30px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* ---------------------------------------------------------------------------\n   VE Header\n   --------------------------------------------------------------------------- */\n\n.ve-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  gap: 16px;\n}\n\n.ve-header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.ve-back-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  flex-shrink: 0;\n  transition: all 150ms ease;\n}\n\n.ve-back-btn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-header-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 600;\n  min-width: 0;\n}\n\n.ve-source-label {\n  color: var(--mj-color-indigo-500);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-direction-arrow { color: var(--mj-text-disabled); font-size: 13px; flex-shrink: 0; }\n\n.ve-dest-label {\n  color: var(--mj-color-success-600);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.ve-header-stats {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.ve-stat {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.ve-stat strong {\n  color: var(--mj-text-primary);\n  font-weight: 700;\n}\n\n.ve-stat-sep {\n  width: 1px;\n  height: 14px;\n  background: var(--mj-border-default);\n}\n\n.ve-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.ve-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 14px;\n  border-radius: 7px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border: none;\n  white-space: nowrap;\n}\n\n.ve-btn-ghost {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n.ve-btn-ghost:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-primary); }\n\n.ve-btn-primary {\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n}\n\n.ve-btn-primary:hover { background: var(--mj-color-indigo-600); }\n.ve-btn-primary:disabled { opacity: 0.5; cursor: default; }\n\n.ve-btn-danger {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-color-error-600);\n  border: 1px solid var(--mj-color-error-200);\n}\n\n.ve-btn-danger:hover { background: var(--mj-color-error-100); }\n\n.ve-save-success {\n  font-size: 12px;\n  color: var(--mj-color-success-600);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  animation: fadeIn 300ms ease;\n}\n\n/* Sync toggle in editor header */\n.ve-sync-toggle { flex-shrink: 0; margin-left: 8px; }\n.ve-sync-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n/* Sync toggle styling */\n.sync-toggle {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.sync-toggle input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n\n.sync-toggle-track {\n  width: 34px;\n  height: 18px;\n  background: var(--mj-color-neutral-300);\n  border-radius: 9px;\n  position: relative;\n  transition: background 200ms ease;\n}\n\n.sync-toggle-track::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  background: var(--mj-bg-surface);\n  border-radius: 50%;\n  transition: transform 200ms ease;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n\n.sync-toggle input:checked + .sync-toggle-track {\n  background: var(--mj-color-success-500);\n}\n\n.sync-toggle input:checked + .sync-toggle-track::after {\n  transform: translateX(16px);\n}\n\n/* Action separator */\n.ve-action-sep {\n  width: 1px;\n  height: 20px;\n  background: var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n/* Active state for preview toggle buttons */\n.ve-btn-ghost.active {\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  border-color: var(--mj-color-indigo-200);\n}\n\n/* ---------------------------------------------------------------------------\n   Data Preview Strip\n   --------------------------------------------------------------------------- */\n\n.ve-preview-strip {\n  display: flex;\n  gap: 1px;\n  background: var(--mj-border-default);\n  border-bottom: 1px solid var(--mj-border-default);\n  max-height: 220px;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.ve-preview-panel {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.ve-preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n}\n\n.ve-preview-header i { font-size: 11px; color: var(--mj-color-indigo-500); }\n.ve-preview-header span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.ve-preview-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  flex-shrink: 0;\n}\n\n.ve-preview-close:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n.ve-preview-loading,\n.ve-preview-empty {\n  padding: 20px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.ve-preview-loading i { margin-right: 6px; color: var(--mj-color-indigo-500); }\n\n.ve-preview-table-wrap {\n  flex: 1;\n  overflow: auto;\n}\n\n.ve-preview-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 11px;\n}\n\n.ve-preview-table th {\n  position: sticky;\n  top: 0;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  font-size: 10px;\n  padding: 5px 10px;\n  text-align: left;\n  white-space: nowrap;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-preview-table td {\n  padding: 4px 10px;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  max-width: 180px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ve-preview-table tbody tr:hover td {\n  background: var(--mj-color-indigo-50);\n}\n\n/* ---------------------------------------------------------------------------\n   Connect mode banner\n   --------------------------------------------------------------------------- */\n\n.ve-connect-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 20px;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-700);\n  font-size: 13px;\n  border-bottom: 1px solid var(--mj-color-indigo-100);\n  flex-shrink: 0;\n}\n\n.ve-connect-banner strong { font-weight: 700; }\n\n.ve-connect-cancel {\n  margin-left: auto;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-color-indigo-100);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-color-indigo-700);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-connect-cancel:hover { background: var(--mj-color-indigo-100); }\n\n/* ---------------------------------------------------------------------------\n   VE Body\n   --------------------------------------------------------------------------- */\n\n.ve-body {\n  flex: 1;\n  display: flex;\n  overflow: hidden;\n}\n\n.ve-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  gap: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n}\n\n.ve-loading i { font-size: 24px; color: var(--mj-color-indigo-500); }\n\n/* Sections wrapper (replaces ve-canvas-wrapper as the main left area) */\n.ve-sections-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n/* Collapsible section */\n.ve-section {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ve-section:not(.collapsed) {\n  flex: 1;\n  min-height: 0;\n}\n\n.ve-section.collapsed {\n  flex-shrink: 0;\n}\n\n.ve-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  cursor: pointer;\n  user-select: none;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n\n.ve-section-header:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.ve-section-header i {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  width: 12px;\n  flex-shrink: 0;\n  transition: transform 200ms ease;\n}\n\n.ve-section-title {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  color: var(--mj-text-muted);\n}\n\n.ve-section-badge {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-600);\n  padding: 1px 8px;\n  border-radius: 4px;\n  margin-left: auto;\n}\n\n.ve-section-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  animation: fadeIn 200ms ease;\n}\n\n/* Canvas wrapper (takes available space, pushes transform panel right) */\n.ve-canvas-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n/* ---------------------------------------------------------------------------\n   Column headers\n   --------------------------------------------------------------------------- */\n\n.ve-col-headers {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-col-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.ve-col-header.source i { color: var(--mj-color-indigo-500); }\n.ve-col-header.dest i { color: var(--mj-color-success-600); }\n.ve-col-header-spacer { /* SVG gap */ }\n\n.ve-col-count {\n  font-size: 10px;\n  font-weight: 600;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-disabled);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n/* ---------------------------------------------------------------------------\n   Column search bars\n   --------------------------------------------------------------------------- */\n\n.ve-col-searches {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  padding: 6px 0;\n}\n\n.ve-col-search {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 12px;\n}\n\n.ve-col-search i {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-col-search input {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  transition: border-color 150ms ease;\n}\n\n.ve-col-search input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n.ve-col-search input::placeholder { color: var(--mj-color-neutral-300); }\n.ve-col-search-spacer { /* SVG gap */ }\n\n/* ---------------------------------------------------------------------------\n   Canvas scroll + grid\n   --------------------------------------------------------------------------- */\n\n.ve-canvas-scroll {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.ve-canvas-grid {\n  display: grid;\n  grid-template-columns: 1fr 200px 1fr;\n  position: relative;\n}\n\n/* ---------------------------------------------------------------------------\n   Field columns\n   --------------------------------------------------------------------------- */\n\n.ve-field-col {\n  display: flex;\n  flex-direction: column;\n}\n\n.ve-field-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 14px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background 150ms ease, opacity 150ms ease;\n  border-bottom: 1px solid var(--mj-bg-page);\n  box-sizing: border-box;\n}\n\n.ve-field-item.mapped { background: var(--mj-bg-surface); }\n\n.ve-field-item.unmapped {\n  opacity: 0.5;\n  background: var(--mj-bg-page);\n}\n\n.ve-field-item:hover {\n  background: var(--mj-color-indigo-50);\n  opacity: 1;\n}\n\n.ve-field-item.connecting {\n  background: var(--mj-color-indigo-100);\n  opacity: 1;\n  box-shadow: inset 0 0 0 2px var(--mj-color-indigo-500);\n}\n\n.ve-field-item.connect-target:hover {\n  background: var(--mj-color-success-100);\n  box-shadow: inset 0 0 0 2px var(--mj-color-success-600);\n}\n\n.ve-field-name {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n}\n\n.ve-field-type {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-field-badges {\n  display: flex;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.ve-fbadge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 3px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n}\n\n.ve-fbadge.pk { background: var(--mj-color-warning-100); color: var(--mj-color-warning-700); }\n.ve-fbadge.req { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-field-empty {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n}\n\n/* ---------------------------------------------------------------------------\n   SVG connections\n   --------------------------------------------------------------------------- */\n\n.ve-svg {\n  display: block;\n}\n\n.ve-conn-line {\n  fill: none;\n  stroke-width: 2;\n  cursor: pointer;\n  transition: stroke 200ms ease, stroke-width 200ms ease;\n}\n\n/* Transform-based line styles \u2014 categorical data-viz colors */\n.ve-conn-line.conn-direct { stroke: var(--mj-brand-primary); stroke-dasharray: none; }\n.ve-conn-line.conn-regex { stroke: var(--ve-color-regex, #8b5cf6); stroke-dasharray: 6 3; }\n.ve-conn-line.conn-split { stroke: var(--mj-status-warning); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-combine { stroke: var(--mj-status-success); stroke-dasharray: 8 4; }\n.ve-conn-line.conn-lookup { stroke: var(--ve-color-lookup, #0ea5e9); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-format { stroke: var(--ve-color-format, #ec4899); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-coerce { stroke: var(--ve-color-coerce, #f97316); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-substring { stroke: var(--ve-color-substring, #14b8a6); stroke-dasharray: 4 4; }\n.ve-conn-line.conn-custom { stroke: var(--ve-color-custom, #a855f7); stroke-dasharray: 2 3; }\n\n.ve-conn-line:hover { stroke-width: 3.5; }\n.ve-conn-line.selected { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4)); }\n\n/* Connection badge at midpoint */\n.ve-badge-fo { overflow: visible; }\n\n.ve-conn-badge {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n\n.ve-conn-badge.badge-direct { background: var(--mj-brand-primary-subtle); color: var(--mj-brand-primary); border: 2px solid var(--mj-brand-primary); }\n.ve-conn-badge.badge-regex { background: color-mix(in srgb, var(--ve-color-regex, #8b5cf6) 10%, var(--mj-bg-surface)); color: var(--ve-color-regex, #8b5cf6); border: 2px solid var(--ve-color-regex, #8b5cf6); }\n.ve-conn-badge.badge-split { background: var(--mj-status-warning-subtle); color: var(--mj-status-warning); border: 2px solid var(--mj-status-warning); }\n.ve-conn-badge.badge-combine { background: var(--mj-status-success-subtle); color: var(--mj-status-success); border: 2px solid var(--mj-status-success); }\n.ve-conn-badge.badge-lookup { background: color-mix(in srgb, var(--ve-color-lookup, #0ea5e9) 10%, var(--mj-bg-surface)); color: var(--ve-color-lookup, #0ea5e9); border: 2px solid var(--ve-color-lookup, #0ea5e9); }\n.ve-conn-badge.badge-format { background: color-mix(in srgb, var(--ve-color-format, #ec4899) 10%, var(--mj-bg-surface)); color: var(--ve-color-format, #ec4899); border: 2px solid var(--ve-color-format, #ec4899); }\n.ve-conn-badge.badge-coerce { background: color-mix(in srgb, var(--ve-color-coerce, #f97316) 10%, var(--mj-bg-surface)); color: var(--ve-color-coerce, #f97316); border: 2px solid var(--ve-color-coerce, #f97316); }\n.ve-conn-badge.badge-substring { background: color-mix(in srgb, var(--ve-color-substring, #14b8a6) 10%, var(--mj-bg-surface)); color: var(--ve-color-substring, #14b8a6); border: 2px solid var(--ve-color-substring, #14b8a6); }\n.ve-conn-badge.badge-custom { background: color-mix(in srgb, var(--ve-color-custom, #a855f7) 10%, var(--mj-bg-surface)); color: var(--ve-color-custom, #a855f7); border: 2px solid var(--ve-color-custom, #a855f7); }\n\n.ve-conn-badge:hover { transform: scale(1.2); }\n.ve-conn-badge.selected { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }\n\n/* ---------------------------------------------------------------------------\n   Transform Panel (right side)\n   --------------------------------------------------------------------------- */\n\n.ve-transform-panel {\n  width: 320px;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  animation: slideInRight 200ms ease;\n}\n\n@keyframes slideInRight {\n  from { opacity: 0; transform: translateX(20px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.ve-tp-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.ve-tp-title {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.ve-tp-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 150ms ease;\n}\n\n.ve-tp-close:hover { background: var(--mj-bg-surface-active); color: var(--mj-text-secondary); }\n\n/* Mapping info */\n.ve-tp-mapping-info {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-field-pair {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.ve-tp-field {\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-weight: 600;\n  font-size: 12px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 110px;\n}\n\n.ve-tp-field.source { background: var(--mj-color-indigo-50); color: var(--mj-color-indigo-700); }\n.ve-tp-field.dest { background: var(--mj-status-success-bg); color: var(--mj-color-success-700); }\n.ve-tp-arrow { color: var(--mj-text-disabled); font-size: 11px; flex-shrink: 0; }\n\n/* Toggles */\n.ve-tp-toggles {\n  display: flex;\n  gap: 16px;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-toggle {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.ve-tp-toggle-box {\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--mj-color-neutral-300);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  color: var(--mj-bg-surface);\n  transition: all 150ms ease;\n}\n\n.ve-tp-toggle-box.active {\n  background: var(--mj-color-indigo-500);\n  border-color: var(--mj-color-indigo-500);\n}\n\n/* Sections */\n.ve-tp-section {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-section-label {\n  display: block;\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 8px;\n}\n\n.ve-tp-section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* Direction buttons */\n.ve-tp-direction-btns {\n  display: flex;\n  gap: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.ve-tp-direction-btns button {\n  flex: 1;\n  padding: 6px 8px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.ve-tp-direction-btns button:last-child { border-right: none; }\n.ve-tp-direction-btns button:hover { background: var(--mj-bg-surface-hover); }\n.ve-tp-direction-btns button.active { background: var(--mj-color-indigo-500); color: var(--mj-bg-surface); }\n\n/* Transform steps */\n.ve-tp-add-step {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ve-tp-add-step:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.ve-tp-step {\n  margin-top: 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n.ve-tp-step-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-tp-step-num {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--mj-color-indigo-500);\n  color: var(--mj-bg-surface);\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.ve-tp-type-select {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-type-select:focus { border-color: var(--mj-color-indigo-500); }\n\n.ve-tp-remove-step {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  border-radius: 5px;\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: 11px;\n  transition: all 150ms ease;\n  flex-shrink: 0;\n}\n\n.ve-tp-remove-step:hover { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n\n.ve-tp-step-config {\n  padding: 8px 10px;\n}\n\n.ve-tp-config-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.ve-tp-config-row:last-child { margin-bottom: 0; }\n\n.ve-tp-config-row label {\n  width: 80px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.ve-tp-config-row input {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-page);\n  outline: none;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.ve-tp-config-row input:focus { border-color: var(--mj-color-indigo-500); background: var(--mj-bg-surface); }\n\n.ve-tp-step-onerror {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-page);\n}\n\n.ve-tp-step-onerror label {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n.ve-tp-step-onerror select {\n  height: 24px;\n  padding: 0 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface);\n  outline: none;\n  cursor: pointer;\n}\n\n.ve-tp-no-steps {\n  padding: 16px;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n  font-style: italic;\n}\n\n/* Footer */\n.ve-tp-footer {\n  padding: 14px 16px;\n  margin-top: auto;\n  flex-shrink: 0;\n}\n\n/* ---------------------------------------------------------------------------\n   Scrollbar styling\n   --------------------------------------------------------------------------- */\n\n.ve-canvas-scroll::-webkit-scrollbar,\n.ve-transform-panel::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n.ve-canvas-scroll::-webkit-scrollbar-track,\n.ve-transform-panel::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.ve-canvas-scroll::-webkit-scrollbar-thumb,\n.ve-transform-panel::-webkit-scrollbar-thumb {\n  background: var(--mj-color-neutral-300);\n  border-radius: 3px;\n}\n\n.ve-canvas-scroll::-webkit-scrollbar-thumb:hover,\n.ve-transform-panel::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* ---------------------------------------------------------------------------\n   Info Panel\n   --------------------------------------------------------------------------- */\n\n.ve-info-body {\n  padding: 16px;\n  overflow-y: auto;\n}\n\n.ve-info-loading {\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  padding: 20px;\n}\n\n.ve-info-loading i {\n  color: var(--mj-color-indigo-500);\n  margin-right: 6px;\n}\n\n.ve-info-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 12px;\n  margin-bottom: 16px;\n}\n\n.ve-info-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n}\n\n.ve-info-card-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n  background: var(--mj-color-indigo-50);\n  color: var(--mj-color-indigo-500);\n}\n\n.ve-info-card-icon.source {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.sync {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-success {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-600);\n}\n\n.ve-info-card-icon.info-status-error {\n  background: var(--mj-color-error-100);\n  color: var(--mj-color-error-600);\n}\n\n.ve-info-card-icon.info-status-running {\n  background: var(--mj-color-info-100);\n  color: var(--mj-brand-primary);\n}\n\n.ve-info-card-icon.info-status-pending {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-600);\n}\n\n.ve-info-card-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.ve-info-card-value {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ve-info-card-label {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n.ve-info-details {\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.ve-info-detail-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 14px;\n  font-size: 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.ve-info-detail-row:last-child {\n  border-bottom: none;\n}\n\n.ve-info-detail-label {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.ve-info-detail-value {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n"] }]
     }], null, { EntityMap: [{
             type: Input
         }], CompanyIntegrationID: [{

package/dist/Integration/components/widgets/integration-card.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"integration-card.component.d.ts","sourceRoot":"","sources":["../../../../src/Integration/components/widgets/integration-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;;AAE7E,qBAqMa,wBAAwB;IAC1B,OAAO,EAAG,kBAAkB,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAS;IAC1B,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC5C,WAAW,uBAA8B;IACzC,YAAY,uBAA8B;IAEpD,IAAI,eAAe,IAAI,MAAM,CAE5B;IAED,IAAI,WAAW,IAAI,MAAM,CAMxB;IAED,IAAI,iBAAiB,IAAI,OAAO,CAG/B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAQ9B;IAED,IAAI,eAAe,IAAI,MAAM,CAG5B;IAED,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;IAIvC,aAAa,IAAI,IAAI;IAIrB,cAAc,IAAI,IAAI;yCA/CX,wBAAwB;2CAAxB,wBAAwB;CAkDpC"}
+{"version":3,"file":"integration-card.component.d.ts","sourceRoot":"","sources":["../../../../src/Integration/components/widgets/integration-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAA0B,MAAM,yCAAyC,CAAC;;AAErG,qBAqMa,wBAAwB;IAC1B,OAAO,EAAG,kBAAkB,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAS;IAC1B,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC5C,WAAW,uBAA8B;IACzC,YAAY,uBAA8B;IAEpD,IAAI,eAAe,IAAI,MAAM,CAQ5B;IAED,IAAI,WAAW,IAAI,MAAM,CAMxB;IAED,IAAI,iBAAiB,IAAI,OAAO,CAG/B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAQ9B;IAED,IAAI,eAAe,IAAI,MAAM,CAG5B;IAED,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;IAIvC,aAAa,IAAI,IAAI;IAIrB,cAAc,IAAI,IAAI;yCArDX,wBAAwB;2CAAxB,wBAAwB;CAwDpC"}

package/dist/Integration/components/widgets/integration-card.component.js

@@ -1,4 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ResolveIntegrationIcon } from '../../services/integration-data.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-buttons";
 import * as i2 from "@angular/common";
@@ -64,7 +65,10 @@ export class IntegrationCardComponent {
     RunNowClick = new EventEmitter();
     ExpandToggle = new EventEmitter();
     get SourceIconClass() {
-        return this.Summary.SourceType?.IconClass ?? 'fa-solid fa-plug';
+        if (this.Summary.SourceType?.IconClass) {
+            return this.Summary.SourceType.IconClass;
+        }
+        return ResolveIntegrationIcon(this.Summary.Integration.Integration ?? this.Summary.Integration.Name, this.Summary.Icon);
     }
     get StatusLabel() {
         const color = this.Summary.StatusColor;

package/dist/Integration/components/widgets/integration-card.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-card.component.js","sourceRoot":"","sources":["../../../../src/Integration/components/widgets/integration-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;;;;;;IAiC3D,AADF,+BAAsB,eACK;IAAA,8BAAc;IAAA,iBAAO;IAC9C,gCAAyB;IAAA,YAA6C;;IACxE,AADwE,iBAAO,EACzE;IAEJ,AADF,+BAAsB,eACK;IAAA,wBAAQ;IAAA,iBAAO;IACxC,gCAAyB;IAAA,aAAuB;IAClD,AADkD,iBAAO,EACnD;;;IALqB,eAA6C;IAA7C,iFAA6C;IAI7C,eAAuB;IAAvB,8CAAuB;;;IAKhD,AADF,+BAAsB,eACK;IAAA,sBAAM;IAAA,iBAAO;IAEpC,AADF,gCAAqC,eACT;IAAA,YAAyB;IAEvD,AADE,AADqD,iBAAO,EACrD,EACH;;;IAFwB,eAAyB;IAAzB,gDAAyB;;;IAYnD,0BAMM;;;;IALD,yEAAmD;IAGnD,AADA,AADA,4DAAgD,4CACF,4EAC6B;IAC3E,2EAAuD;;;IARhE,AADF,+BAA2B,eACK;IAAA,4BAAY;IAAA,iBAAO;IACjD,+BAAuB;IACrB,2GAQC;IAEL,AADE,iBAAM,EACF;;;IAVF,eAQC;IARD,wCAQC;;AAyIb,MAAM,OAAO,wBAAwB;IAC1B,OAAO,CAAsB;IAC7B,QAAQ,GAAY,KAAK,CAAC;IAC1B,YAAY,GAA4B,IAAI,CAAC;IAC5C,WAAW,GAAG,IAAI,YAAY,EAAU,CAAC;IACzC,YAAY,GAAG,IAAI,YAAY,EAAU,CAAC;IAEpD,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,SAAS,IAAI,kBAAkB,CAAC;IAClE,CAAC;IAED,IAAI,WAAW;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;QACvC,IAAI,KAAK,KAAK,OAAO;YAAE,OAAO,SAAS,CAAC;QACxC,IAAI,KAAK,KAAK,OAAO;YAAE,OAAO,SAAS,CAAC;QACxC,IAAI,KAAK,KAAK,KAAK;YAAE,OAAO,QAAQ,CAAC;QACrC,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,KAAK,aAAa;eAClD,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,KAAK,SAAS,CAAC;IACpD,CAAC;IAED,IAAI,iBAAiB;QACnB,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,IAAI,EAAE,IAAI,IAAI;YAAE,OAAO,IAAI,CAAC;QAC5B,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;QAC3C,IAAI,YAAY,GAAG,EAAE;YAAE,OAAO,GAAG,YAAY,GAAG,CAAC;QACjD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC,CAAC;QAC9C,MAAM,OAAO,GAAG,YAAY,GAAG,EAAE,CAAC;QAClC,OAAO,GAAG,OAAO,KAAK,OAAO,GAAG,CAAC;IACnC,CAAC;IAED,IAAI,eAAe;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;QAC7E,OAAO,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IAED,cAAc,CAAC,OAAe;QAC5B,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED,aAAa;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACrD,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACtD,CAAC;kHAjDU,wBAAwB;6DAAxB,wBAAwB;YA/L7B,AADF,AADF,8BAA+E,aACpD,aACE;YACvB,oBAAiC;YACnC,iBAAM;YAEJ,AADF,8BAA6B,YACJ;YAAA,YAA8B;YAAA,iBAAK;YAC1D,+BAAgC;YAAA,YAA2C;YAC7E,AAD6E,iBAAO,EAC9E;YACN,8BAAyB;YACvB,2BACiD;YACjD,gCAAoE;YAClE,aACF;YAEJ,AADE,AADE,iBAAO,EACH,EACF;YAIF,AADF,AADF,+BAAuB,eACC,gBACK;YAAA,yBAAQ;YAAA,iBAAO;YACxC,iCAAyB;YAAA,aAA0B;YACrD,AADqD,iBAAO,EACtD;YACN,mFAAyB;YAUzB,6FAA+B;YAQjC,iBAAM;YAGN,6FAAqC;YAkBnC,AADF,gCAAyB,kBAEsD;YAArE,sGAAS,mBAAe,IAAC;YAC/B,yBAAgC;YAAC,0BACnC;YAAA,iBAAS;YACT,mCAA+D;YAA3B,sGAAS,oBAAgB,IAAC;YAC5D,yBAA6F;YAC7F,0BACF;YAEJ,AADE,AADE,iBAAS,EACL,EACF;;YAvEwB,6DAAgD;YAGrE,eAAyB;YAAzB,kCAAyB;YAGL,eAA8B;YAA9B,kDAA8B;YACrB,eAA2C;YAA3C,wGAA2C;YAG5C,eAA4C;YAA5C,qDAA4C;YACrE,gDAAmC;YACf,cAAyC;YAAzC,kDAAyC;YACjE,cACF;YADE,gDACF;YAOyB,eAA0B;YAA1B,8CAA0B;YAErD,cASC;YATD,iDASC;YACD,cAOC;YAPD,uDAOC;YAIH,cAeC;YAfD,6DAeC;YAGqB,eAAe;YACD,AADE,AAAhB,6BAAe,yBAAyB,+CACgB;YAGxD,eAAe;YAAf,6BAAe;YACb,cAAmC;YAAC,AAApC,gDAAmC,+BAAiC;;;iFA8HrF,wBAAwB;cArMpC,SAAS;6BACI,KAAK,YACP,sBAAsB,YACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyET;;kBA0HA,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,MAAM;;kBACN,MAAM;;kFALI,wBAAwB","sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { IRunViewProvider } from '@memberjunction/core';\nimport { IntegrationSummary } from '../../services/integration-data.service';\n\n@Component({\n  standalone: false,\n  selector: 'app-integration-card',\n  template: `\n    <div class=\"integration-card\" [class.inactive]=\"!Summary.Integration.IsActive\">\n      <div class=\"card-header\">\n        <div class=\"source-icon\">\n          <i [class]=\"SourceIconClass\"></i>\n        </div>\n        <div class=\"card-title-area\">\n          <h3 class=\"card-title\">{{ Summary.Integration.Name }}</h3>\n          <span class=\"source-type-label\">{{ Summary.SourceType?.Name ?? 'Unknown' }}</span>\n        </div>\n        <div class=\"status-area\">\n          <span class=\"status-indicator\" [class]=\"'indicator-' + Summary.StatusColor\"\n                [class.pulsing]=\"IsActivelySyncing\"></span>\n          <span class=\"status-chip\" [class]=\"'status-' + Summary.StatusColor\">\n            {{ StatusLabel }}\n          </span>\n        </div>\n      </div>\n\n      <div class=\"card-body\">\n        <div class=\"stat-row\">\n          <span class=\"stat-label\">Last Run</span>\n          <span class=\"stat-value\">{{ Summary.RelativeTime }}</span>\n        </div>\n        @if (Summary.LatestRun) {\n          <div class=\"stat-row\">\n            <span class=\"stat-label\">Records Synced</span>\n            <span class=\"stat-value\">{{ Summary.LatestRun.TotalRecords | number }}</span>\n          </div>\n          <div class=\"stat-row\">\n            <span class=\"stat-label\">Duration</span>\n            <span class=\"stat-value\">{{ FormattedDuration }}</span>\n          </div>\n        }\n        @if (Summary.TotalErrors > 0) {\n          <div class=\"stat-row\">\n            <span class=\"stat-label\">Errors</span>\n            <span class=\"stat-value error-value\">\n              <span class=\"error-badge\">{{ Summary.TotalErrors }}</span>\n            </span>\n          </div>\n        }\n      </div>\n\n      <!-- Sparkline: records synced for last 5 runs -->\n      @if (Summary.RecentRuns.length > 1) {\n        <div class=\"sparkline-row\">\n          <span class=\"sparkline-label\">Recent syncs</span>\n          <div class=\"sparkline\">\n            @for (run of Summary.RecentRuns; track run.ID) {\n              <div class=\"spark-bar\"\n                   [style.height.%]=\"SparkBarHeight(run.TotalRecords)\"\n                   [class.spark-success]=\"run.Status === 'Success'\"\n                   [class.spark-failed]=\"run.Status === 'Failed'\"\n                   [class.spark-pending]=\"run.Status !== 'Success' && run.Status !== 'Failed'\"\n                   [title]=\"run.TotalRecords + ' records - ' + run.Status\">\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <div class=\"card-footer\">\n        <button kendoButton [look]=\"'flat'\" [themeColor]=\"'primary'\"\n                (click)=\"OnRunNowClick()\" [disabled]=\"!Summary.Integration.IsActive\">\n          <i class=\"fa-solid fa-play\"></i> Run Now\n        </button>\n        <button kendoButton [look]=\"'flat'\" (click)=\"OnExpandToggle()\">\n          <i class=\"fa-solid\" [class.fa-chevron-down]=\"!Expanded\" [class.fa-chevron-up]=\"Expanded\"></i>\n          History\n        </button>\n      </div>\n    </div>\n  `,\n  styles: [`\n    .integration-card {\n      background: var(--card-bg, #fff);\n      border: 1px solid var(--border-color, #e0e0e0);\n      border-radius: 8px;\n      padding: 16px;\n      transition: box-shadow 0.2s;\n    }\n    .integration-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }\n    .integration-card.inactive { opacity: 0.6; }\n\n    .card-header {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      margin-bottom: 12px;\n    }\n    .source-icon {\n      width: 40px; height: 40px;\n      border-radius: 8px;\n      background: var(--icon-bg, #f0f4ff);\n      display: flex; align-items: center; justify-content: center;\n      font-size: 18px; color: var(--primary-color, #4a6cf7);\n    }\n    .card-title-area { flex: 1; min-width: 0; }\n    .card-title {\n      margin: 0; font-size: 14px; font-weight: 600;\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .source-type-label { font-size: 12px; color: #888; }\n\n    .status-area {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      flex-shrink: 0;\n    }\n\n    .status-indicator {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      display: inline-block;\n    }\n    .indicator-green { background: #1b7a3d; }\n    .indicator-amber { background: #b5850a; }\n    .indicator-red { background: #c62828; }\n    .indicator-gray { background: #999; }\n\n    .status-indicator.pulsing {\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n    @keyframes pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.5; transform: scale(1.3); }\n    }\n\n    .status-chip {\n      font-size: 11px; font-weight: 600; padding: 3px 8px;\n      border-radius: 12px; text-transform: uppercase; white-space: nowrap;\n    }\n    .status-green { background: #e6f9ed; color: #1b7a3d; }\n    .status-amber { background: #fff7e0; color: #b5850a; }\n    .status-red   { background: #fde8e8; color: #c62828; }\n    .status-gray  { background: #f0f0f0; color: #757575; }\n\n    .card-body { margin-bottom: 12px; }\n    .stat-row {\n      display: flex; justify-content: space-between;\n      padding: 4px 0; font-size: 13px;\n    }\n    .stat-label { color: #666; }\n    .stat-value { font-weight: 500; }\n    .error-value { color: #c62828; }\n    .error-badge {\n      background: #fde8e8;\n      color: #c62828;\n      padding: 1px 8px;\n      border-radius: 10px;\n      font-size: 12px;\n      font-weight: 700;\n    }\n\n    /* Sparkline */\n    .sparkline-row {\n      display: flex;\n      align-items: flex-end;\n      gap: 8px;\n      padding: 8px 0;\n      border-top: 1px solid #f0f0f0;\n      margin-bottom: 4px;\n    }\n    .sparkline-label {\n      font-size: 11px;\n      color: #999;\n      white-space: nowrap;\n    }\n    .sparkline {\n      display: flex;\n      align-items: flex-end;\n      gap: 3px;\n      height: 24px;\n      flex: 1;\n    }\n    .spark-bar {\n      flex: 1;\n      min-height: 2px;\n      border-radius: 2px 2px 0 0;\n      transition: height 0.3s ease;\n    }\n    .spark-success { background: #4a6cf7; }\n    .spark-failed { background: #c62828; }\n    .spark-pending { background: #b5850a; }\n\n    .card-footer {\n      display: flex; justify-content: space-between;\n      border-top: 1px solid #eee; padding-top: 8px;\n    }\n  `]\n})\nexport class IntegrationCardComponent {\n  @Input() Summary!: IntegrationSummary;\n  @Input() Expanded: boolean = false;\n  @Input() ViewProvider: IRunViewProvider | null = null;\n  @Output() RunNowClick = new EventEmitter<string>();\n  @Output() ExpandToggle = new EventEmitter<string>();\n\n  get SourceIconClass(): string {\n    return this.Summary.SourceType?.IconClass ?? 'fa-solid fa-plug';\n  }\n\n  get StatusLabel(): string {\n    const color = this.Summary.StatusColor;\n    if (color === 'green') return 'Healthy';\n    if (color === 'amber') return 'Warning';\n    if (color === 'red') return 'Failed';\n    return 'Inactive';\n  }\n\n  get IsActivelySyncing(): boolean {\n    return this.Summary.LatestRun?.Status === 'In Progress'\n      || this.Summary.LatestRun?.Status === 'Pending';\n  }\n\n  get FormattedDuration(): string {\n    const ms = this.Summary.DurationMs;\n    if (ms == null) return '--';\n    const totalSeconds = Math.floor(ms / 1000);\n    if (totalSeconds < 60) return `${totalSeconds}s`;\n    const minutes = Math.floor(totalSeconds / 60);\n    const seconds = totalSeconds % 60;\n    return `${minutes}m ${seconds}s`;\n  }\n\n  get MaxSparkRecords(): number {\n    const maxVal = Math.max(...this.Summary.RecentRuns.map(r => r.TotalRecords));\n    return maxVal > 0 ? maxVal : 1;\n  }\n\n  SparkBarHeight(records: number): number {\n    return Math.max((records / this.MaxSparkRecords) * 100, 8);\n  }\n\n  OnRunNowClick(): void {\n    this.RunNowClick.emit(this.Summary.Integration.ID);\n  }\n\n  OnExpandToggle(): void {\n    this.ExpandToggle.emit(this.Summary.Integration.ID);\n  }\n}\n"]}
+{"version":3,"file":"integration-card.component.js","sourceRoot":"","sources":["../../../../src/Integration/components/widgets/integration-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAEvE,OAAO,EAAsB,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;;;;;;IA+BzF,AADF,+BAAsB,eACK;IAAA,8BAAc;IAAA,iBAAO;IAC9C,gCAAyB;IAAA,YAA6C;;IACxE,AADwE,iBAAO,EACzE;IAEJ,AADF,+BAAsB,eACK;IAAA,wBAAQ;IAAA,iBAAO;IACxC,gCAAyB;IAAA,aAAuB;IAClD,AADkD,iBAAO,EACnD;;;IALqB,eAA6C;IAA7C,iFAA6C;IAI7C,eAAuB;IAAvB,8CAAuB;;;IAKhD,AADF,+BAAsB,eACK;IAAA,sBAAM;IAAA,iBAAO;IAEpC,AADF,gCAAqC,eACT;IAAA,YAAyB;IAEvD,AADE,AADqD,iBAAO,EACrD,EACH;;;IAFwB,eAAyB;IAAzB,gDAAyB;;;IAYnD,0BAMM;;;;IALD,yEAAmD;IAGnD,AADA,AADA,4DAAgD,4CACF,4EAC6B;IAC3E,2EAAuD;;;IARhE,AADF,+BAA2B,eACK;IAAA,4BAAY;IAAA,iBAAO;IACjD,+BAAuB;IACrB,2GAQC;IAEL,AADE,iBAAM,EACF;;;IAVF,eAQC;IARD,wCAQC;;AAyIb,MAAM,OAAO,wBAAwB;IAC1B,OAAO,CAAsB;IAC7B,QAAQ,GAAY,KAAK,CAAC;IAC1B,YAAY,GAA4B,IAAI,CAAC;IAC5C,WAAW,GAAG,IAAI,YAAY,EAAU,CAAC;IACzC,YAAY,GAAG,IAAI,YAAY,EAAU,CAAC;IAEpD,IAAI,eAAe;QACjB,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,SAAS,EAAE,CAAC;YACvC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC;QAC3C,CAAC;QACD,OAAO,sBAAsB,CAC3B,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,EACrE,IAAI,CAAC,OAAO,CAAC,IAAI,CAClB,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;QACvC,IAAI,KAAK,KAAK,OAAO;YAAE,OAAO,SAAS,CAAC;QACxC,IAAI,KAAK,KAAK,OAAO;YAAE,OAAO,SAAS,CAAC;QACxC,IAAI,KAAK,KAAK,KAAK;YAAE,OAAO,QAAQ,CAAC;QACrC,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,KAAK,aAAa;eAClD,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,KAAK,SAAS,CAAC;IACpD,CAAC;IAED,IAAI,iBAAiB;QACnB,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,IAAI,EAAE,IAAI,IAAI;YAAE,OAAO,IAAI,CAAC;QAC5B,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;QAC3C,IAAI,YAAY,GAAG,EAAE;YAAE,OAAO,GAAG,YAAY,GAAG,CAAC;QACjD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC,CAAC;QAC9C,MAAM,OAAO,GAAG,YAAY,GAAG,EAAE,CAAC;QAClC,OAAO,GAAG,OAAO,KAAK,OAAO,GAAG,CAAC;IACnC,CAAC;IAED,IAAI,eAAe;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;QAC7E,OAAO,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IAED,cAAc,CAAC,OAAe;QAC5B,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED,aAAa;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACrD,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACtD,CAAC;kHAvDU,wBAAwB;6DAAxB,wBAAwB;YA/L7B,AADF,AADF,8BAA+E,aACpD,aACE;YACvB,oBAAiC;YACnC,iBAAM;YAEJ,AADF,8BAA6B,YACJ;YAAA,YAA8B;YAAA,iBAAK;YAC1D,+BAAgC;YAAA,YAA2C;YAC7E,AAD6E,iBAAO,EAC9E;YACN,8BAAyB;YACvB,2BACiD;YACjD,gCAAoE;YAClE,aACF;YAEJ,AADE,AADE,iBAAO,EACH,EACF;YAIF,AADF,AADF,+BAAuB,eACC,gBACK;YAAA,yBAAQ;YAAA,iBAAO;YACxC,iCAAyB;YAAA,aAA0B;YACrD,AADqD,iBAAO,EACtD;YACN,mFAAyB;YAUzB,6FAA+B;YAQjC,iBAAM;YAGN,6FAAqC;YAkBnC,AADF,gCAAyB,kBAEsD;YAArE,sGAAS,mBAAe,IAAC;YAC/B,yBAAgC;YAAC,0BACnC;YAAA,iBAAS;YACT,mCAA+D;YAA3B,sGAAS,oBAAgB,IAAC;YAC5D,yBAA6F;YAC7F,0BACF;YAEJ,AADE,AADE,iBAAS,EACL,EACF;;YAvEwB,6DAAgD;YAGrE,eAAyB;YAAzB,kCAAyB;YAGL,eAA8B;YAA9B,kDAA8B;YACrB,eAA2C;YAA3C,wGAA2C;YAG5C,eAA4C;YAA5C,qDAA4C;YACrE,gDAAmC;YACf,cAAyC;YAAzC,kDAAyC;YACjE,cACF;YADE,gDACF;YAOyB,eAA0B;YAA1B,8CAA0B;YAErD,cASC;YATD,iDASC;YACD,cAOC;YAPD,uDAOC;YAIH,cAeC;YAfD,6DAeC;YAGqB,eAAe;YACD,AADE,AAAhB,6BAAe,yBAAyB,+CACgB;YAGxD,eAAe;YAAf,6BAAe;YACb,cAAmC;YAAC,AAApC,gDAAmC,+BAAiC;;;iFA8HrF,wBAAwB;cArMpC,SAAS;6BACI,KAAK,YACP,sBAAsB,YACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyET;;kBA0HA,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,MAAM;;kBACN,MAAM;;kFALI,wBAAwB","sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { IRunViewProvider } from '@memberjunction/core';\nimport { IntegrationSummary, ResolveIntegrationIcon } from '../../services/integration-data.service';\n\n@Component({\n  standalone: false,\n  selector: 'app-integration-card',\n  template: `\n    <div class=\"integration-card\" [class.inactive]=\"!Summary.Integration.IsActive\">\n      <div class=\"card-header\">\n        <div class=\"source-icon\">\n          <i [class]=\"SourceIconClass\"></i>\n        </div>\n        <div class=\"card-title-area\">\n          <h3 class=\"card-title\">{{ Summary.Integration.Name }}</h3>\n          <span class=\"source-type-label\">{{ Summary.SourceType?.Name ?? 'Unknown' }}</span>\n        </div>\n        <div class=\"status-area\">\n          <span class=\"status-indicator\" [class]=\"'indicator-' + Summary.StatusColor\"\n                [class.pulsing]=\"IsActivelySyncing\"></span>\n          <span class=\"status-chip\" [class]=\"'status-' + Summary.StatusColor\">\n            {{ StatusLabel }}\n          </span>\n        </div>\n      </div>\n\n      <div class=\"card-body\">\n        <div class=\"stat-row\">\n          <span class=\"stat-label\">Last Run</span>\n          <span class=\"stat-value\">{{ Summary.RelativeTime }}</span>\n        </div>\n        @if (Summary.LatestRun) {\n          <div class=\"stat-row\">\n            <span class=\"stat-label\">Records Synced</span>\n            <span class=\"stat-value\">{{ Summary.LatestRun.TotalRecords | number }}</span>\n          </div>\n          <div class=\"stat-row\">\n            <span class=\"stat-label\">Duration</span>\n            <span class=\"stat-value\">{{ FormattedDuration }}</span>\n          </div>\n        }\n        @if (Summary.TotalErrors > 0) {\n          <div class=\"stat-row\">\n            <span class=\"stat-label\">Errors</span>\n            <span class=\"stat-value error-value\">\n              <span class=\"error-badge\">{{ Summary.TotalErrors }}</span>\n            </span>\n          </div>\n        }\n      </div>\n\n      <!-- Sparkline: records synced for last 5 runs -->\n      @if (Summary.RecentRuns.length > 1) {\n        <div class=\"sparkline-row\">\n          <span class=\"sparkline-label\">Recent syncs</span>\n          <div class=\"sparkline\">\n            @for (run of Summary.RecentRuns; track run.ID) {\n              <div class=\"spark-bar\"\n                   [style.height.%]=\"SparkBarHeight(run.TotalRecords)\"\n                   [class.spark-success]=\"run.Status === 'Success'\"\n                   [class.spark-failed]=\"run.Status === 'Failed'\"\n                   [class.spark-pending]=\"run.Status !== 'Success' && run.Status !== 'Failed'\"\n                   [title]=\"run.TotalRecords + ' records - ' + run.Status\">\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <div class=\"card-footer\">\n        <button kendoButton [look]=\"'flat'\" [themeColor]=\"'primary'\"\n                (click)=\"OnRunNowClick()\" [disabled]=\"!Summary.Integration.IsActive\">\n          <i class=\"fa-solid fa-play\"></i> Run Now\n        </button>\n        <button kendoButton [look]=\"'flat'\" (click)=\"OnExpandToggle()\">\n          <i class=\"fa-solid\" [class.fa-chevron-down]=\"!Expanded\" [class.fa-chevron-up]=\"Expanded\"></i>\n          History\n        </button>\n      </div>\n    </div>\n  `,\n  styles: [`\n    .integration-card {\n      background: var(--card-bg, #fff);\n      border: 1px solid var(--border-color, #e0e0e0);\n      border-radius: 8px;\n      padding: 16px;\n      transition: box-shadow 0.2s;\n    }\n    .integration-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }\n    .integration-card.inactive { opacity: 0.6; }\n\n    .card-header {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      margin-bottom: 12px;\n    }\n    .source-icon {\n      width: 40px; height: 40px;\n      border-radius: 8px;\n      background: var(--icon-bg, #f0f4ff);\n      display: flex; align-items: center; justify-content: center;\n      font-size: 18px; color: var(--primary-color, #4a6cf7);\n    }\n    .card-title-area { flex: 1; min-width: 0; }\n    .card-title {\n      margin: 0; font-size: 14px; font-weight: 600;\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .source-type-label { font-size: 12px; color: #888; }\n\n    .status-area {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      flex-shrink: 0;\n    }\n\n    .status-indicator {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      display: inline-block;\n    }\n    .indicator-green { background: #1b7a3d; }\n    .indicator-amber { background: #b5850a; }\n    .indicator-red { background: #c62828; }\n    .indicator-gray { background: #999; }\n\n    .status-indicator.pulsing {\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n    @keyframes pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.5; transform: scale(1.3); }\n    }\n\n    .status-chip {\n      font-size: 11px; font-weight: 600; padding: 3px 8px;\n      border-radius: 12px; text-transform: uppercase; white-space: nowrap;\n    }\n    .status-green { background: #e6f9ed; color: #1b7a3d; }\n    .status-amber { background: #fff7e0; color: #b5850a; }\n    .status-red   { background: #fde8e8; color: #c62828; }\n    .status-gray  { background: #f0f0f0; color: #757575; }\n\n    .card-body { margin-bottom: 12px; }\n    .stat-row {\n      display: flex; justify-content: space-between;\n      padding: 4px 0; font-size: 13px;\n    }\n    .stat-label { color: #666; }\n    .stat-value { font-weight: 500; }\n    .error-value { color: #c62828; }\n    .error-badge {\n      background: #fde8e8;\n      color: #c62828;\n      padding: 1px 8px;\n      border-radius: 10px;\n      font-size: 12px;\n      font-weight: 700;\n    }\n\n    /* Sparkline */\n    .sparkline-row {\n      display: flex;\n      align-items: flex-end;\n      gap: 8px;\n      padding: 8px 0;\n      border-top: 1px solid #f0f0f0;\n      margin-bottom: 4px;\n    }\n    .sparkline-label {\n      font-size: 11px;\n      color: #999;\n      white-space: nowrap;\n    }\n    .sparkline {\n      display: flex;\n      align-items: flex-end;\n      gap: 3px;\n      height: 24px;\n      flex: 1;\n    }\n    .spark-bar {\n      flex: 1;\n      min-height: 2px;\n      border-radius: 2px 2px 0 0;\n      transition: height 0.3s ease;\n    }\n    .spark-success { background: #4a6cf7; }\n    .spark-failed { background: #c62828; }\n    .spark-pending { background: #b5850a; }\n\n    .card-footer {\n      display: flex; justify-content: space-between;\n      border-top: 1px solid #eee; padding-top: 8px;\n    }\n  `]\n})\nexport class IntegrationCardComponent {\n  @Input() Summary!: IntegrationSummary;\n  @Input() Expanded: boolean = false;\n  @Input() ViewProvider: IRunViewProvider | null = null;\n  @Output() RunNowClick = new EventEmitter<string>();\n  @Output() ExpandToggle = new EventEmitter<string>();\n\n  get SourceIconClass(): string {\n    if (this.Summary.SourceType?.IconClass) {\n      return this.Summary.SourceType.IconClass;\n    }\n    return ResolveIntegrationIcon(\n      this.Summary.Integration.Integration ?? this.Summary.Integration.Name,\n      this.Summary.Icon\n    );\n  }\n\n  get StatusLabel(): string {\n    const color = this.Summary.StatusColor;\n    if (color === 'green') return 'Healthy';\n    if (color === 'amber') return 'Warning';\n    if (color === 'red') return 'Failed';\n    return 'Inactive';\n  }\n\n  get IsActivelySyncing(): boolean {\n    return this.Summary.LatestRun?.Status === 'In Progress'\n      || this.Summary.LatestRun?.Status === 'Pending';\n  }\n\n  get FormattedDuration(): string {\n    const ms = this.Summary.DurationMs;\n    if (ms == null) return '--';\n    const totalSeconds = Math.floor(ms / 1000);\n    if (totalSeconds < 60) return `${totalSeconds}s`;\n    const minutes = Math.floor(totalSeconds / 60);\n    const seconds = totalSeconds % 60;\n    return `${minutes}m ${seconds}s`;\n  }\n\n  get MaxSparkRecords(): number {\n    const maxVal = Math.max(...this.Summary.RecentRuns.map(r => r.TotalRecords));\n    return maxVal > 0 ? maxVal : 1;\n  }\n\n  SparkBarHeight(records: number): number {\n    return Math.max((records / this.MaxSparkRecords) * 100, 8);\n  }\n\n  OnRunNowClick(): void {\n    this.RunNowClick.emit(this.Summary.Integration.ID);\n  }\n\n  OnExpandToggle(): void {\n    this.ExpandToggle.emit(this.Summary.Integration.ID);\n  }\n}\n"]}

package/dist/Integration/components/widgets/run-history-panel.component.js

@@ -283,7 +283,7 @@ export class RunHistoryPanelComponent {
             i0.ɵɵconditionalCreate(0, RunHistoryPanelComponent_Conditional_0_Template, 2, 0, "div", 0)(1, RunHistoryPanelComponent_Conditional_1_Template, 4, 0, "div", 1)(2, RunHistoryPanelComponent_Conditional_2_Template, 18, 0, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.IsLoading ? 0 : ctx.Runs.length === 0 ? 1 : 2);
-        } }, dependencies: [i1.LoadingComponent, i2.DecimalPipe], styles: [".history-loading[_ngcontent-%COMP%], .history-empty[_ngcontent-%COMP%] {\n      padding: 24px; text-align: center; color: #888;\n    }\n    .history-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 24px; margin-bottom: 8px; display: block; }\n\n    .history-panel[_ngcontent-%COMP%] { margin-top: 8px; }\n\n    .history-table[_ngcontent-%COMP%] {\n      width: 100%; border-collapse: collapse; font-size: 13px;\n    }\n    .history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n      text-align: left; padding: 6px 8px;\n      border-bottom: 2px solid #eee; color: #666; font-weight: 600;\n    }\n    .run-row[_ngcontent-%COMP%] { cursor: pointer; }\n    .run-row[_ngcontent-%COMP%]:hover { background: #f8f9fa; }\n    .run-row.selected[_ngcontent-%COMP%] { background: #f0f4ff; }\n    .run-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }\n\n    \n\n    .run-status-chip[_ngcontent-%COMP%] {\n      font-size: 11px; font-weight: 600; padding: 3px 8px;\n      border-radius: 10px; display: inline-flex; align-items: center; gap: 4px;\n      white-space: nowrap;\n    }\n    .chip-green[_ngcontent-%COMP%] { background: #e6f9ed; color: #1b7a3d; }\n    .chip-amber[_ngcontent-%COMP%] { background: #fff7e0; color: #b5850a; }\n    .chip-red[_ngcontent-%COMP%]   { background: #fde8e8; color: #c62828; }\n\n    .duration-cell[_ngcontent-%COMP%] {\n      font-variant-numeric: tabular-nums;\n      color: #555;\n    }\n\n    .detail-arrow[_ngcontent-%COMP%] { transition: transform 0.2s; font-size: 11px; color: #999; }\n    .detail-arrow.rotated[_ngcontent-%COMP%] { transform: rotate(90deg); }\n\n    .detail-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] { padding: 0; }\n    .detail-panel[_ngcontent-%COMP%] {\n      padding: 12px 16px; background: #fafbfc;\n      border-left: 3px solid var(--primary-color, #4a6cf7);\n    }\n    .detail-panel[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] { margin: 0 0 8px 0; font-size: 13px; }\n\n    .detail-table[_ngcontent-%COMP%] {\n      width: 100%; border-collapse: collapse; font-size: 12px;\n    }\n    .detail-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n      text-align: left; padding: 4px 6px; color: #888; font-weight: 500;\n    }\n    .detail-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] { padding: 4px 6px; }\n    .error-count[_ngcontent-%COMP%] { color: #c62828; font-weight: 600; }\n\n    \n\n    .error-details-section[_ngcontent-%COMP%] {\n      margin-top: 12px;\n      border-top: 1px solid #eee;\n      padding-top: 8px;\n    }\n    .error-toggle[_ngcontent-%COMP%] {\n      background: none; border: none; cursor: pointer;\n      font-size: 12px; font-weight: 600; color: #c62828;\n      display: flex; align-items: center; gap: 6px;\n      padding: 4px 0;\n    }\n    .error-toggle[_ngcontent-%COMP%]:hover { text-decoration: underline; }\n    .toggle-icon[_ngcontent-%COMP%] {\n      transition: transform 0.2s; font-size: 10px;\n    }\n    .toggle-icon.rotated[_ngcontent-%COMP%] { transform: rotate(180deg); }\n    .error-log[_ngcontent-%COMP%] {\n      margin: 8px 0 0 0; padding: 10px;\n      background: #fff0f0; border: 1px solid #fdd;\n      border-radius: 4px; font-size: 11px;\n      white-space: pre-wrap; word-break: break-word;\n      max-height: 200px; overflow-y: auto;\n      color: #7a1111;\n    }"] });
+        } }, dependencies: [i1.LoadingComponent, i2.DecimalPipe], styles: [".history-loading[_ngcontent-%COMP%], .history-empty[_ngcontent-%COMP%] {\n      padding: 24px; text-align: center; color: var(--mj-text-muted);\n    }\n    .history-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 24px; margin-bottom: 8px; display: block; }\n\n    .history-panel[_ngcontent-%COMP%] { margin-top: 8px; }\n\n    .history-table[_ngcontent-%COMP%] {\n      width: 100%; border-collapse: collapse; font-size: 13px;\n    }\n    .history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n      text-align: left; padding: 6px 8px;\n      border-bottom: 2px solid var(--mj-border-default); color: var(--mj-text-secondary); font-weight: 600;\n    }\n    .run-row[_ngcontent-%COMP%] { cursor: pointer; }\n    .run-row[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-sunken); }\n    .run-row.selected[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n    .run-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] { padding: 6px 8px; border-bottom: 1px solid var(--mj-border-default); }\n\n    \n\n    .run-status-chip[_ngcontent-%COMP%] {\n      font-size: 11px; font-weight: 600; padding: 3px 8px;\n      border-radius: 10px; display: inline-flex; align-items: center; gap: 4px;\n      white-space: nowrap;\n    }\n    .chip-green[_ngcontent-%COMP%] { background: #e6f9ed; color: #1b7a3d; }\n    .chip-amber[_ngcontent-%COMP%] { background: #fff7e0; color: #b5850a; }\n    .chip-red[_ngcontent-%COMP%]   { background: #fde8e8; color: #c62828; }\n\n    .duration-cell[_ngcontent-%COMP%] {\n      font-variant-numeric: tabular-nums;\n      color: var(--mj-text-secondary);\n    }\n\n    .detail-arrow[_ngcontent-%COMP%] { transition: transform 0.2s; font-size: 11px; color: var(--mj-text-muted); }\n    .detail-arrow.rotated[_ngcontent-%COMP%] { transform: rotate(90deg); }\n\n    .detail-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] { padding: 0; }\n    .detail-panel[_ngcontent-%COMP%] {\n      padding: 12px 16px; background: var(--mj-bg-surface-sunken);\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n    .detail-panel[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] { margin: 0 0 8px 0; font-size: 13px; }\n\n    .detail-table[_ngcontent-%COMP%] {\n      width: 100%; border-collapse: collapse; font-size: 12px;\n    }\n    .detail-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n      text-align: left; padding: 4px 6px; color: var(--mj-text-muted); font-weight: 500;\n    }\n    .detail-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] { padding: 4px 6px; }\n    .error-count[_ngcontent-%COMP%] { color: #c62828; font-weight: 600; }\n\n    \n\n    .error-details-section[_ngcontent-%COMP%] {\n      margin-top: 12px;\n      border-top: 1px solid var(--mj-border-default);\n      padding-top: 8px;\n    }\n    .error-toggle[_ngcontent-%COMP%] {\n      background: none; border: none; cursor: pointer;\n      font-size: 12px; font-weight: 600; color: #c62828;\n      display: flex; align-items: center; gap: 6px;\n      padding: 4px 0;\n    }\n    .error-toggle[_ngcontent-%COMP%]:hover { text-decoration: underline; }\n    .toggle-icon[_ngcontent-%COMP%] {\n      transition: transform 0.2s; font-size: 10px;\n    }\n    .toggle-icon.rotated[_ngcontent-%COMP%] { transform: rotate(180deg); }\n    .error-log[_ngcontent-%COMP%] {\n      margin: 8px 0 0 0; padding: 10px;\n      background: #fff0f0; border: 1px solid #fdd;\n      border-radius: 4px; font-size: 11px;\n      white-space: pre-wrap; word-break: break-word;\n      max-height: 200px; overflow-y: auto;\n      color: #7a1111;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RunHistoryPanelComponent, [{
         type: Component,
@@ -389,7 +389,7 @@ export class RunHistoryPanelComponent {
         </table>
       </div>
     }
-  `, styles: ["\n    .history-loading, .history-empty {\n      padding: 24px; text-align: center; color: #888;\n    }\n    .history-empty i { font-size: 24px; margin-bottom: 8px; display: block; }\n\n    .history-panel { margin-top: 8px; }\n\n    .history-table {\n      width: 100%; border-collapse: collapse; font-size: 13px;\n    }\n    .history-table th {\n      text-align: left; padding: 6px 8px;\n      border-bottom: 2px solid #eee; color: #666; font-weight: 600;\n    }\n    .run-row { cursor: pointer; }\n    .run-row:hover { background: #f8f9fa; }\n    .run-row.selected { background: #f0f4ff; }\n    .run-row td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }\n\n    /* Status Chips with icon */\n    .run-status-chip {\n      font-size: 11px; font-weight: 600; padding: 3px 8px;\n      border-radius: 10px; display: inline-flex; align-items: center; gap: 4px;\n      white-space: nowrap;\n    }\n    .chip-green { background: #e6f9ed; color: #1b7a3d; }\n    .chip-amber { background: #fff7e0; color: #b5850a; }\n    .chip-red   { background: #fde8e8; color: #c62828; }\n\n    .duration-cell {\n      font-variant-numeric: tabular-nums;\n      color: #555;\n    }\n\n    .detail-arrow { transition: transform 0.2s; font-size: 11px; color: #999; }\n    .detail-arrow.rotated { transform: rotate(90deg); }\n\n    .detail-row td { padding: 0; }\n    .detail-panel {\n      padding: 12px 16px; background: #fafbfc;\n      border-left: 3px solid var(--primary-color, #4a6cf7);\n    }\n    .detail-panel h4 { margin: 0 0 8px 0; font-size: 13px; }\n\n    .detail-table {\n      width: 100%; border-collapse: collapse; font-size: 12px;\n    }\n    .detail-table th {\n      text-align: left; padding: 4px 6px; color: #888; font-weight: 500;\n    }\n    .detail-table td { padding: 4px 6px; }\n    .error-count { color: #c62828; font-weight: 600; }\n\n    /* Error Details */\n    .error-details-section {\n      margin-top: 12px;\n      border-top: 1px solid #eee;\n      padding-top: 8px;\n    }\n    .error-toggle {\n      background: none; border: none; cursor: pointer;\n      font-size: 12px; font-weight: 600; color: #c62828;\n      display: flex; align-items: center; gap: 6px;\n      padding: 4px 0;\n    }\n    .error-toggle:hover { text-decoration: underline; }\n    .toggle-icon {\n      transition: transform 0.2s; font-size: 10px;\n    }\n    .toggle-icon.rotated { transform: rotate(180deg); }\n    .error-log {\n      margin: 8px 0 0 0; padding: 10px;\n      background: #fff0f0; border: 1px solid #fdd;\n      border-radius: 4px; font-size: 11px;\n      white-space: pre-wrap; word-break: break-word;\n      max-height: 200px; overflow-y: auto;\n      color: #7a1111;\n    }\n  "] }]
+  `, styles: ["\n    .history-loading, .history-empty {\n      padding: 24px; text-align: center; color: var(--mj-text-muted);\n    }\n    .history-empty i { font-size: 24px; margin-bottom: 8px; display: block; }\n\n    .history-panel { margin-top: 8px; }\n\n    .history-table {\n      width: 100%; border-collapse: collapse; font-size: 13px;\n    }\n    .history-table th {\n      text-align: left; padding: 6px 8px;\n      border-bottom: 2px solid var(--mj-border-default); color: var(--mj-text-secondary); font-weight: 600;\n    }\n    .run-row { cursor: pointer; }\n    .run-row:hover { background: var(--mj-bg-surface-sunken); }\n    .run-row.selected { background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n    .run-row td { padding: 6px 8px; border-bottom: 1px solid var(--mj-border-default); }\n\n    /* Status Chips with icon */\n    .run-status-chip {\n      font-size: 11px; font-weight: 600; padding: 3px 8px;\n      border-radius: 10px; display: inline-flex; align-items: center; gap: 4px;\n      white-space: nowrap;\n    }\n    .chip-green { background: #e6f9ed; color: #1b7a3d; }\n    .chip-amber { background: #fff7e0; color: #b5850a; }\n    .chip-red   { background: #fde8e8; color: #c62828; }\n\n    .duration-cell {\n      font-variant-numeric: tabular-nums;\n      color: var(--mj-text-secondary);\n    }\n\n    .detail-arrow { transition: transform 0.2s; font-size: 11px; color: var(--mj-text-muted); }\n    .detail-arrow.rotated { transform: rotate(90deg); }\n\n    .detail-row td { padding: 0; }\n    .detail-panel {\n      padding: 12px 16px; background: var(--mj-bg-surface-sunken);\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n    .detail-panel h4 { margin: 0 0 8px 0; font-size: 13px; }\n\n    .detail-table {\n      width: 100%; border-collapse: collapse; font-size: 12px;\n    }\n    .detail-table th {\n      text-align: left; padding: 4px 6px; color: var(--mj-text-muted); font-weight: 500;\n    }\n    .detail-table td { padding: 4px 6px; }\n    .error-count { color: #c62828; font-weight: 600; }\n\n    /* Error Details */\n    .error-details-section {\n      margin-top: 12px;\n      border-top: 1px solid var(--mj-border-default);\n      padding-top: 8px;\n    }\n    .error-toggle {\n      background: none; border: none; cursor: pointer;\n      font-size: 12px; font-weight: 600; color: #c62828;\n      display: flex; align-items: center; gap: 6px;\n      padding: 4px 0;\n    }\n    .error-toggle:hover { text-decoration: underline; }\n    .toggle-icon {\n      transition: transform 0.2s; font-size: 10px;\n    }\n    .toggle-icon.rotated { transform: rotate(180deg); }\n    .error-log {\n      margin: 8px 0 0 0; padding: 10px;\n      background: #fff0f0; border: 1px solid #fdd;\n      border-radius: 4px; font-size: 11px;\n      white-space: pre-wrap; word-break: break-word;\n      max-height: 200px; overflow-y: auto;\n      color: #7a1111;\n    }\n  "] }]
     }], null, { CompanyIntegrationID: [{
             type: Input
         }], ViewProvider: [{