@expeed/ngx-data-mapper 1.0.0 → 1.1.0

package/fesm2022/expeed-ngx-data-mapper.mjs

@@ -4,29 +4,120 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2$1 from '@angular/material/button';
+import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i8 from '@angular/material/tooltip';
+import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i5$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i8 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i9 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i6 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i7 from '@angular/material/slide-toggle';
+import * as i7$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i9 from '@angular/material/divider';
+import * as i9$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i6$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
-import * as i7$1 from '@angular/material/menu';
+import * as i7$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import { DragDropModule } from '@angular/cdk/drag-drop';
+
+/**
+ * Standard JSON Schema (draft-07) TypeScript interfaces
+ */
+/**
+ * Convert JSON Schema to flat field list for UI rendering
+ */
+function schemaToFields(schema, parentPath = '') {
+    const fields = [];
+    if (schema.type === 'object' && schema.properties) {
+        for (const [name, propSchema] of Object.entries(schema.properties)) {
+            const path = parentPath ? `${parentPath}.${name}` : name;
+            const field = {
+                name,
+                path,
+                schema: propSchema,
+                expanded: false,
+            };
+            if (propSchema.type === 'object' && propSchema.properties) {
+                field.children = schemaToFields(propSchema, path);
+            }
+            else if (propSchema.type === 'array' && propSchema.items) {
+                field.children = schemaToFields(propSchema.items, `${path}[]`);
+            }
+            fields.push(field);
+        }
+    }
+    return fields;
+}
+/**
+ * Get the simple type for display purposes
+ */
+function getSchemaType(schema) {
+    if (Array.isArray(schema.type)) {
+        return schema.type.filter(t => t !== 'null').join(' | ');
+    }
+    if (schema.type === 'integer') {
+        return 'number';
+    }
+    if (schema.format === 'date' || schema.format === 'date-time') {
+        return 'date';
+    }
+    return schema.type || 'any';
+}
+/**
+ * Create an empty JSON Schema for a new schema definition
+ */
+function createEmptySchema(title = 'New Schema') {
+    return {
+        $schema: 'http://json-schema.org/draft-07/schema#',
+        title,
+        type: 'object',
+        properties: {},
+        required: [],
+    };
+}
+/**
+ * Add a property to a schema
+ */
+function addProperty(schema, name, type, options) {
+    const newSchema = { ...schema };
+    newSchema.properties = { ...newSchema.properties };
+    const propSchema = { type };
+    if (options?.description) {
+        propSchema.description = options.description;
+    }
+    if (type === 'object') {
+        propSchema.properties = {};
+    }
+    else if (type === 'array') {
+        propSchema.items = { type: 'string' };
+    }
+    newSchema.properties[name] = propSchema;
+    if (options?.required) {
+        newSchema.required = [...(newSchema.required || []), name];
+    }
+    return newSchema;
+}
+/**
+ * Remove a property from a schema
+ */
+function removeProperty(schema, name) {
+    const newSchema = { ...schema };
+    newSchema.properties = { ...newSchema.properties };
+    delete newSchema.properties[name];
+    newSchema.required = (newSchema.required || []).filter(r => r !== name);
+    return newSchema;
+}
 
 class MappingService {
     mappings = signal([], ...(ngDevMode ? [{ debugName: "mappings" }] : []));
@@ -97,9 +188,9 @@ class MappingService {
                     ...existingMapping.sourceFields,
                     ...sourceFields.filter((sf) => !existingMapping.sourceFields.some((esf) => esf.id === sf.id)),
                 ],
-                transformation: existingMapping.sourceFields.length + sourceFields.length > 1
-                    ? { type: 'concat', separator: ' ', ...transformation }
-                    : transformation || { type: 'direct' },
+                transformations: existingMapping.sourceFields.length + sourceFields.length > 1
+                    ? [{ type: 'concat', separator: ' ', ...transformation }]
+                    : transformation ? [transformation] : [{ type: 'direct' }],
             };
             this.mappings.update((mappings) => mappings.map((m) => (m.id === existingMapping.id ? updatedMapping : m)));
             return updatedMapping;
@@ -108,7 +199,7 @@ class MappingService {
             id: this.generateId(),
             sourceFields,
             targetField,
-            transformation: transformation || { type: 'direct' },
+            transformations: transformation ? [transformation] : [{ type: 'direct' }],
             isArrayMapping: false, // Only true for array-to-array connections
             arrayMappingId, // Links to parent array mapping if within array context
             isArrayToObjectMapping: false,
@@ -150,7 +241,7 @@ class MappingService {
             id: arrayMapping.id,
             sourceFields: [sourceArray],
             targetField: targetArray,
-            transformation: { type: 'direct' },
+            transformations: [{ type: 'direct' }],
             isArrayMapping: true,
         };
         this.mappings.update((mappings) => [...mappings, fieldMapping]);
@@ -177,7 +268,7 @@ class MappingService {
             id: arrayToObjectMapping.id,
             sourceFields: [sourceArray],
             targetField: targetObject,
-            transformation: { type: 'direct' },
+            transformations: [{ type: 'direct' }],
             isArrayToObjectMapping: true,
         };
         this.mappings.update((mappings) => [...mappings, fieldMapping]);
@@ -241,8 +332,8 @@ class MappingService {
     updateMapping(mappingId, updates) {
         this.mappings.update((mappings) => mappings.map((m) => (m.id === mappingId ? { ...m, ...updates } : m)));
     }
-    updateTransformation(mappingId, transformation) {
-        this.mappings.update((mappings) => mappings.map((m) => m.id === mappingId ? { ...m, transformation } : m));
+    updateTransformations(mappingId, transformations) {
+        this.mappings.update((mappings) => mappings.map((m) => m.id === mappingId ? { ...m, transformations } : m));
     }
     removeMapping(mappingId) {
         this.mappings.update((mappings) => mappings.filter((m) => m.id !== mappingId));
@@ -262,9 +353,9 @@ class MappingService {
                 ? {
                     ...m,
                     sourceFields: m.sourceFields.filter((sf) => sf.id !== sourceFieldId),
-                    transformation: m.sourceFields.length - 1 === 1
-                        ? { type: 'direct' }
-                        : m.transformation,
+                    transformations: m.sourceFields.length - 1 === 1
+                        ? [{ type: 'direct' }]
+                        : m.transformations,
                 }
                 : m));
         }
@@ -320,8 +411,11 @@ class MappingService {
             default: return 'string';
         }
     }
-    exportMappings() {
+    exportMappings(name, description) {
         const exportData = {
+            version: '1.0',
+            name: name || 'Mapping Configuration',
+            description: description || '',
             mappings: this.mappings(),
             arrayMappings: this.arrayMappings(),
             arrayToObjectMappings: this.arrayToObjectMappings(),
@@ -329,6 +423,20 @@ class MappingService {
         };
         return JSON.stringify(exportData, null, 2);
     }
+    /**
+     * Export mappings as a MappingDocument object (not stringified)
+     */
+    exportMappingsAsObject(name, description) {
+        return {
+            version: '1.0',
+            name: name || 'Mapping Configuration',
+            description: description || '',
+            mappings: this.mappings(),
+            arrayMappings: this.arrayMappings(),
+            arrayToObjectMappings: this.arrayToObjectMappings(),
+            defaultValues: this.defaultValues(),
+        };
+    }
     importMappings(json) {
         try {
             const data = JSON.parse(json);
@@ -377,6 +485,10 @@ class TransformationService {
                 return String(values[0] ?? '').toUpperCase();
             case 'lowercase':
                 return String(values[0] ?? '').toLowerCase();
+            case 'trim':
+                return String(values[0] ?? '').trim();
+            case 'mask':
+                return this.applyMask(String(values[0] ?? ''), config.pattern ?? '');
             case 'dateFormat':
                 return this.formatDate(values[0], config.inputFormat, config.outputFormat);
             case 'extractYear':
@@ -395,12 +507,83 @@ class TransformationService {
                 return this.formatNumber(values[0], config.decimalPlaces, config.prefix, config.suffix);
             case 'template':
                 return this.applyTemplate(config.template ?? '', sourceFields, sourceValues);
-            case 'custom':
-                return this.applyCustomExpression(config.expression ?? '', sourceFields, sourceValues);
             default:
                 return String(values[0] ?? '');
         }
     }
+    /**
+     * Apply a transformation to a single value (for chained transformations)
+     */
+    applyTransformationToValue(value, config) {
+        const str = String(value ?? '');
+        switch (config.type) {
+            case 'direct':
+                return str;
+            case 'concat':
+                // For single value, just return it (concat needs multiple values)
+                return str;
+            case 'substring':
+                return str.substring(config.startIndex ?? 0, config.endIndex ?? str.length);
+            case 'replace':
+                return str.replace(new RegExp(config.searchValue ?? '', 'g'), config.replaceValue ?? '');
+            case 'uppercase':
+                return str.toUpperCase();
+            case 'lowercase':
+                return str.toLowerCase();
+            case 'trim':
+                return str.trim();
+            case 'mask':
+                return this.applyMask(str, config.pattern ?? '');
+            case 'dateFormat':
+                return this.formatDate(value, config.inputFormat, config.outputFormat);
+            case 'extractYear':
+                return this.extractDatePart(value, 'year');
+            case 'extractMonth':
+                return this.extractDatePart(value, 'month');
+            case 'extractDay':
+                return this.extractDatePart(value, 'day');
+            case 'extractHour':
+                return this.extractDatePart(value, 'hour');
+            case 'extractMinute':
+                return this.extractDatePart(value, 'minute');
+            case 'extractSecond':
+                return this.extractDatePart(value, 'second');
+            case 'numberFormat':
+                return this.formatNumber(value, config.decimalPlaces, config.prefix, config.suffix);
+            case 'template':
+                // For single value, replace {0} with the value
+                return (config.template ?? '').replace(/\{0\}/g, str);
+            default:
+                return str;
+        }
+    }
+    /**
+     * Apply multiple transformations in sequence, respecting conditions
+     */
+    applyTransformations(sourceValues, sourceFields, transformations) {
+        if (transformations.length === 0) {
+            return '';
+        }
+        // Get initial value for first transformation
+        const initialValues = sourceFields.map((f) => this.getValueByPath(sourceValues, f.path));
+        const initialValue = initialValues.length === 1 ? initialValues[0] : initialValues.join(' ');
+        // Apply first transformation using source fields (check condition first)
+        let result;
+        if (this.isConditionMet(initialValue, transformations[0])) {
+            result = this.applyTransformation(sourceValues, sourceFields, transformations[0]);
+        }
+        else {
+            result = String(initialValue ?? '');
+        }
+        // Apply subsequent transformations to the result
+        for (let i = 1; i < transformations.length; i++) {
+            if (this.isConditionMet(result, transformations[i])) {
+                result = this.applyTransformationToValue(result, transformations[i]);
+            }
+            // If condition not met, result passes through unchanged
+        }
+        return result;
+    }
     getValueByPath(obj, path) {
         return path.split('.').reduce((acc, part) => {
             if (acc && typeof acc === 'object') {
@@ -411,10 +594,10 @@ class TransformationService {
     }
     applyTemplate(template, sourceFields, sourceValues) {
         let result = template;
-        sourceFields.forEach((field) => {
+        // Replace positional placeholders {0}, {1}, etc.
+        sourceFields.forEach((field, index) => {
             const value = this.getValueByPath(sourceValues, field.path);
-            result = result.replace(new RegExp(`\\{${field.name}\\}`, 'g'), String(value ?? ''));
-            result = result.replace(new RegExp(`\\{${field.path}\\}`, 'g'), String(value ?? ''));
+            result = result.replace(new RegExp(`\\{${index}\\}`, 'g'), String(value ?? ''));
         });
         return result;
     }
@@ -478,21 +661,24 @@ class TransformationService {
             : num.toString();
         return `${prefix ?? ''}${formatted}${suffix ?? ''}`;
     }
-    applyCustomExpression(expression, sourceFields, sourceValues) {
-        try {
-            // Create a safe context with field values
-            const context = {};
-            sourceFields.forEach((field) => {
-                context[field.name] = this.getValueByPath(sourceValues, field.path);
-            });
-            // Very basic expression evaluation - in production use a proper parser
-            const fn = new Function(...Object.keys(context), `return ${expression}`);
-            return String(fn(...Object.values(context)));
-        }
-        catch (e) {
-            console.error('Custom expression error:', e);
-            return '[Error]';
+    applyMask(input, pattern) {
+        if (!pattern)
+            return input;
+        let result = '';
+        let inputIndex = 0;
+        for (let i = 0; i < pattern.length; i++) {
+            const patternChar = pattern.charAt(i);
+            if (patternChar === '#') {
+                if (inputIndex < input.length) {
+                    result += input.charAt(inputIndex);
+                    inputIndex++;
+                }
+            }
+            else {
+                result += patternChar;
+            }
         }
+        return result;
     }
     getTransformationLabel(type) {
         const labels = {
@@ -502,6 +688,8 @@ class TransformationService {
             replace: 'Find & Replace',
             uppercase: 'Uppercase',
             lowercase: 'Lowercase',
+            trim: 'Trim',
+            mask: 'Mask',
             dateFormat: 'Date Format',
             extractYear: 'Extract Year',
             extractMonth: 'Extract Month',
@@ -511,7 +699,6 @@ class TransformationService {
             extractSecond: 'Extract Second',
             numberFormat: 'Number Format',
             template: 'Template',
-            custom: 'Custom Expression',
         };
         return labels[type];
     }
@@ -523,6 +710,8 @@ class TransformationService {
             { type: 'replace', label: 'Find & Replace', category: 'String' },
             { type: 'uppercase', label: 'Uppercase', category: 'String' },
             { type: 'lowercase', label: 'Lowercase', category: 'String' },
+            { type: 'trim', label: 'Trim', category: 'String' },
+            { type: 'mask', label: 'Mask', category: 'String' },
             { type: 'template', label: 'Template', category: 'String' },
             { type: 'dateFormat', label: 'Format Date', category: 'Date' },
             { type: 'extractYear', label: 'Extract Year', category: 'Date' },
@@ -532,9 +721,77 @@ class TransformationService {
             { type: 'extractMinute', label: 'Extract Minute', category: 'Date' },
             { type: 'extractSecond', label: 'Extract Second', category: 'Date' },
             { type: 'numberFormat', label: 'Number Format', category: 'Number' },
-            { type: 'custom', label: 'Custom Expression', category: 'Advanced' },
         ];
     }
+    // Condition evaluation methods
+    evaluateCondition(value, condition) {
+        return this.evaluateGroup(value, condition);
+    }
+    evaluateGroup(value, group) {
+        if (group.children.length === 0) {
+            return true; // Empty group is always true
+        }
+        if (group.logic === 'and') {
+            return group.children.every(child => this.evaluateItem(value, child));
+        }
+        else {
+            return group.children.some(child => this.evaluateItem(value, child));
+        }
+    }
+    evaluateItem(value, item) {
+        if (item.type === 'group') {
+            return this.evaluateGroup(value, item);
+        }
+        else {
+            return this.evaluateConditionItem(value, item);
+        }
+    }
+    evaluateConditionItem(value, condition) {
+        const strValue = String(value ?? '');
+        const numValue = Number(value);
+        const condValue = condition.value;
+        switch (condition.operator) {
+            case 'equals':
+                return strValue === String(condValue);
+            case 'notEquals':
+                return strValue !== String(condValue);
+            case 'contains':
+                return strValue.includes(String(condValue));
+            case 'notContains':
+                return !strValue.includes(String(condValue));
+            case 'startsWith':
+                return strValue.startsWith(String(condValue));
+            case 'endsWith':
+                return strValue.endsWith(String(condValue));
+            case 'isEmpty':
+                return strValue === '' || value === null || value === undefined;
+            case 'isNotEmpty':
+                return strValue !== '' && value !== null && value !== undefined;
+            case 'greaterThan':
+                return !isNaN(numValue) && numValue > Number(condValue);
+            case 'lessThan':
+                return !isNaN(numValue) && numValue < Number(condValue);
+            case 'greaterThanOrEqual':
+                return !isNaN(numValue) && numValue >= Number(condValue);
+            case 'lessThanOrEqual':
+                return !isNaN(numValue) && numValue <= Number(condValue);
+            case 'isTrue':
+                return value === true || strValue.toLowerCase() === 'true';
+            case 'isFalse':
+                return value === false || strValue.toLowerCase() === 'false';
+            default:
+                return true;
+        }
+    }
+    /**
+     * Check if a transformation's condition is met
+     */
+    isConditionMet(value, config) {
+        if (!config.condition?.enabled || !config.condition.root) {
+            return true; // No condition means always apply
+        }
+        return this.evaluateCondition(value, config.condition.root);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TransformationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TransformationService, providedIn: 'root' });
 }
@@ -761,7 +1018,7 @@ class SchemaParserService {
         return field;
     }
     mapType(schema) {
-        const type = schema.type;
+        const type = Array.isArray(schema.type) ? schema.type[0] : schema.type;
         const format = schema.format;
         // Check format first for date types
         if (format === 'date' || format === 'date-time' || format === 'time') {
@@ -987,7 +1244,7 @@ class SchemaTreeComponent {
         return field.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SchemaTreeComponent, isStandalone: true, selector: "schema-tree", inputs: { schema: "schema", side: "side", mappings: "mappings", defaultValues: "defaultValues" }, outputs: { fieldDragStart: "fieldDragStart", fieldDragEnd: "fieldDragEnd", fieldDrop: "fieldDrop", fieldPositionsChanged: "fieldPositionsChanged", fieldDefaultValueClick: "fieldDefaultValueClick" }, viewQueries: [{ propertyName: "schemaFieldsContainer", first: true, predicate: ["schemaFields"], descendants: true }, { propertyName: "fieldItems", predicate: ["fieldItem"], descendants: true }], ngImport: i0, template: "<div class=\"schema-tree\" [class.source]=\"side === 'source'\" [class.target]=\"side === 'target'\">\n  <div class=\"schema-header\">\n    <span class=\"schema-title\">{{ schema.name }}</span>\n    <span class=\"schema-badge\">{{ side === 'source' ? 'Source' : 'Target' }}</span>\n  </div>\n\n  <div class=\"schema-fields\" #schemaFields>\n    <ng-container *ngTemplateOutlet=\"fieldList; context: { fields: schema.fields, level: 0 }\"></ng-container>\n  </div>\n</div>\n\n<ng-template #fieldList let-fields=\"fields\" let-level=\"level\">\n  @for (field of fields; track trackByFieldId($index, field)) {\n    <div\n      #fieldItem\n      class=\"field-item\"\n      [class.mapped]=\"isFieldMapped(field)\"\n      [class.has-default]=\"hasDefaultValue(field)\"\n      [class.has-children]=\"field.children && field.children.length > 0\"\n      [class.expanded]=\"field.expanded\"\n      [class.is-array]=\"field.type === 'array'\"\n      [class.draggable]=\"side === 'source' && ((!field.children || field.children.length === 0) || field.type === 'array')\"\n      [class.droppable]=\"side === 'target' && ((!field.children || field.children.length === 0) || field.type === 'array' || field.type === 'object')\"\n      [class.clickable]=\"side === 'target' && (!isFieldMapped(field) || hasDefaultValue(field)) && field.type !== 'object' && field.type !== 'array'\"\n      [style.padding-left.px]=\"16 + level * 20\"\n      [attr.data-field-id]=\"field.id\"\n      (mousedown)=\"onDragStart($event, field)\"\n      (mouseup)=\"onDrop($event, field)\"\n      (click)=\"onFieldClick($event, field)\"\n    >\n      <!-- Expand/Collapse button for nested objects -->\n      @if (field.children && field.children.length > 0) {\n        <button class=\"expand-btn\" (click)=\"toggleExpand(field, $event)\">\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <!-- Field type icon -->\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      <!-- Field name with array indicator -->\n      <span class=\"field-name\">{{ field.name }}@if (field.type === 'array') {<span class=\"array-indicator\">[]</span>}</span>\n\n      <!-- Mapping indicator -->\n      @if (isFieldMapped(field)) {\n        <span class=\"mapping-indicator\" [matTooltip]=\"getFieldMappingCount(field) + ' mapping(s)'\">\n          <mat-icon>{{ field.type === 'array' ? 'loop' : 'link' }}</mat-icon>\n          @if (getFieldMappingCount(field) > 1) {\n            <span class=\"mapping-count\">{{ getFieldMappingCount(field) }}</span>\n          }\n        </span>\n      }\n\n      <!-- Default value indicator -->\n      @if (hasDefaultValue(field)) {\n        <span class=\"default-indicator\" [matTooltip]=\"'Default: ' + getDefaultValueDisplay(field)\">\n          <mat-icon>edit</mat-icon>\n          <span class=\"default-value\">{{ getDefaultValueDisplay(field) }}</span>\n        </span>\n      }\n\n      <!-- Connection point - show for leaf nodes, arrays, and objects (on target for array-to-object) -->\n      @if ((!field.children || field.children.length === 0) || field.type === 'array' || (side === 'target' && field.type === 'object')) {\n        <div class=\"connection-point\" [class.source]=\"side === 'source'\" [class.target]=\"side === 'target'\" [class.array-point]=\"field.type === 'array'\" [class.object-point]=\"field.type === 'object'\">\n          <span class=\"point-dot\"></span>\n        </div>\n      }\n    </div>\n\n    <!-- Nested children -->\n    @if (field.children && field.children.length > 0 && field.expanded) {\n      <div class=\"nested-fields\">\n        <ng-container *ngTemplateOutlet=\"fieldList; context: { fields: field.children, level: level + 1 }\"></ng-container>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.schema-tree{background:var(--surface-card, #ffffff);border-radius:12px;box-shadow:0 2px 8px #00000014;overflow:hidden;height:100%;min-height:0;display:flex;flex-direction:column;flex:1}.schema-tree.source .schema-header{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.schema-tree.source .connection-point{right:8px}.schema-tree.target .schema-header{background:linear-gradient(135deg,#10b981,#059669)}.schema-tree.target .connection-point{left:8px}.schema-header{padding:16px 20px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.schema-title{font-size:16px;font-weight:600;letter-spacing:.3px}.schema-badge{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#fff3;padding:4px 10px;border-radius:20px}.schema-fields{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;min-height:0}.field-item{display:flex;align-items:center;padding:10px 16px;gap:8px;cursor:default;transition:background-color .15s ease;position:relative;-webkit-user-select:none;user-select:none}.field-item:hover{background-color:var(--surface-hover, #f8fafc)}.field-item.mapped{background-color:var(--surface-mapped, #f0fdf4)}.field-item.mapped:hover{background-color:#dcfce7}.field-item.draggable{cursor:grab}.field-item.draggable:active{cursor:grabbing}.field-item.draggable:hover .connection-point .point-dot{transform:scale(1.3);background:#6366f1}.field-item.droppable{cursor:pointer}.field-item.droppable:hover .connection-point .point-dot{transform:scale(1.3);background:#10b981}.expand-btn{background:none;border:none;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#94a3b8;border-radius:4px;transition:all .15s ease}.expand-btn:hover{background-color:#e2e8f0;color:#475569}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:24px;height:24px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:1;font-size:14px;color:#1e293b;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-item.is-array{background-color:#fffbeb}.field-item.is-array:hover,.field-item.is-array.mapped{background-color:#fef3c7}.field-item.is-array .type-icon{color:#f59e0b}.connection-point.array-point .point-dot{background:#f59e0b;box-shadow:0 0 0 3px #f59e0b4d}.connection-point.object-point .point-dot{background:#8b5cf6;box-shadow:0 0 0 3px #8b5cf64d}.mapping-indicator{display:flex;align-items:center;gap:2px;color:#10b981}.mapping-indicator mat-icon{font-size:16px;width:16px;height:16px}.mapping-indicator .mapping-count{font-size:11px;font-weight:600;background:#10b981;color:#fff;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center}.connection-point{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;align-items:center;justify-content:center}.connection-point.source{right:8px}.connection-point.target{left:8px}.point-dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1;transition:all .2s ease;box-shadow:0 0 0 3px #cbd5e14d}.mapped .point-dot{background:#10b981;box-shadow:0 0 0 3px #10b9814d}.nested-fields{border-left:2px solid #e2e8f0;margin-left:28px}.field-item.has-default{background-color:#eff6ff}.field-item.has-default:hover{background-color:#dbeafe}.field-item.clickable{cursor:pointer}.field-item.clickable:hover:not(.has-default){background-color:#f1f5f9}.field-item.clickable:hover:not(.has-default):after{content:\"Click to set default\";position:absolute;right:32px;font-size:11px;color:#64748b;font-style:italic}.field-item.clickable.has-default:hover:after{content:\"Click to edit\";position:absolute;right:32px;font-size:11px;color:#3b82f6;font-style:italic}.default-indicator{display:flex;align-items:center;gap:4px;color:#3b82f6;font-size:12px;background:#dbeafe;padding:2px 8px;border-radius:4px;max-width:100px;overflow:hidden}.default-indicator mat-icon{font-size:14px;width:14px;height:14px}.default-indicator .default-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SchemaTreeComponent, isStandalone: true, selector: "schema-tree", inputs: { schema: "schema", side: "side", mappings: "mappings", defaultValues: "defaultValues" }, outputs: { fieldDragStart: "fieldDragStart", fieldDragEnd: "fieldDragEnd", fieldDrop: "fieldDrop", fieldPositionsChanged: "fieldPositionsChanged", fieldDefaultValueClick: "fieldDefaultValueClick" }, viewQueries: [{ propertyName: "schemaFieldsContainer", first: true, predicate: ["schemaFields"], descendants: true }, { propertyName: "fieldItems", predicate: ["fieldItem"], descendants: true }], ngImport: i0, template: "<div class=\"schema-tree\" [class.source]=\"side === 'source'\" [class.target]=\"side === 'target'\">\n  <div class=\"schema-header\">\n    <span class=\"schema-title\">{{ schema.name }}</span>\n    <span class=\"schema-badge\">{{ side === 'source' ? 'Source' : 'Target' }}</span>\n  </div>\n\n  <div class=\"schema-fields\" #schemaFields>\n    <ng-container *ngTemplateOutlet=\"fieldList; context: { fields: schema.fields, level: 0 }\"></ng-container>\n  </div>\n</div>\n\n<ng-template #fieldList let-fields=\"fields\" let-level=\"level\">\n  @for (field of fields; track trackByFieldId($index, field)) {\n    <div\n      #fieldItem\n      class=\"field-item\"\n      [class.mapped]=\"isFieldMapped(field)\"\n      [class.has-default]=\"hasDefaultValue(field)\"\n      [class.has-children]=\"field.children && field.children.length > 0\"\n      [class.expanded]=\"field.expanded\"\n      [class.is-array]=\"field.type === 'array'\"\n      [class.draggable]=\"side === 'source' && ((!field.children || field.children.length === 0) || field.type === 'array')\"\n      [class.droppable]=\"side === 'target' && ((!field.children || field.children.length === 0) || field.type === 'array' || field.type === 'object')\"\n      [class.clickable]=\"side === 'target' && (!isFieldMapped(field) || hasDefaultValue(field)) && field.type !== 'object' && field.type !== 'array'\"\n      [style.padding-left.px]=\"16 + level * 20\"\n      [attr.data-field-id]=\"field.id\"\n      (mousedown)=\"onDragStart($event, field)\"\n      (mouseup)=\"onDrop($event, field)\"\n      (click)=\"onFieldClick($event, field)\"\n    >\n      <!-- Expand/Collapse button for nested objects -->\n      @if (field.children && field.children.length > 0) {\n        <button class=\"expand-btn\" (click)=\"toggleExpand(field, $event)\">\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <!-- Field type icon -->\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      <!-- Field name with array indicator -->\n      <span class=\"field-name\">{{ field.name }}@if (field.type === 'array') {<span class=\"array-indicator\">[]</span>}</span>\n\n      <!-- Mapping indicator -->\n      @if (isFieldMapped(field)) {\n        <span class=\"mapping-indicator\" [matTooltip]=\"getFieldMappingCount(field) + ' mapping(s)'\">\n          <mat-icon>{{ field.type === 'array' ? 'loop' : 'link' }}</mat-icon>\n          @if (getFieldMappingCount(field) > 1) {\n            <span class=\"mapping-count\">{{ getFieldMappingCount(field) }}</span>\n          }\n        </span>\n      }\n\n      <!-- Default value indicator -->\n      @if (hasDefaultValue(field)) {\n        <span class=\"default-indicator\" [matTooltip]=\"'Default: ' + getDefaultValueDisplay(field)\">\n          <mat-icon>edit</mat-icon>\n          <span class=\"default-value\">{{ getDefaultValueDisplay(field) }}</span>\n        </span>\n      }\n\n      <!-- Connection point - show for leaf nodes, arrays, and objects (on target for array-to-object) -->\n      @if ((!field.children || field.children.length === 0) || field.type === 'array' || (side === 'target' && field.type === 'object')) {\n        <div class=\"connection-point\" [class.source]=\"side === 'source'\" [class.target]=\"side === 'target'\" [class.array-point]=\"field.type === 'array'\" [class.object-point]=\"field.type === 'object'\">\n          <span class=\"point-dot\"></span>\n        </div>\n      }\n    </div>\n\n    <!-- Nested children -->\n    @if (field.children && field.children.length > 0 && field.expanded) {\n      <div class=\"nested-fields\">\n        <ng-container *ngTemplateOutlet=\"fieldList; context: { fields: field.children, level: level + 1 }\"></ng-container>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.schema-tree{background:var(--surface-card, #ffffff);border-radius:12px;box-shadow:0 2px 8px #00000014;overflow:hidden;height:100%;min-height:0;display:flex;flex-direction:column;flex:1}.schema-tree.source .schema-header{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.schema-tree.source .connection-point{right:8px}.schema-tree.target .schema-header{background:linear-gradient(135deg,#10b981,#059669)}.schema-tree.target .connection-point{left:8px}.schema-header{padding:16px 20px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.schema-title{font-size:16px;font-weight:600;letter-spacing:.3px}.schema-badge{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#fff3;padding:4px 10px;border-radius:20px}.schema-fields{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;min-height:0}.field-item{display:flex;align-items:center;padding:10px 16px;gap:8px;cursor:default;transition:background-color .15s ease;position:relative;-webkit-user-select:none;user-select:none}.field-item:hover{background-color:var(--surface-hover, #f8fafc)}.field-item.mapped{background-color:var(--surface-mapped, #f0fdf4)}.field-item.mapped:hover{background-color:#dcfce7}.field-item.draggable{cursor:grab}.field-item.draggable:active{cursor:grabbing}.field-item.draggable:hover .connection-point .point-dot{transform:scale(1.3);background:#6366f1}.field-item.droppable{cursor:pointer}.field-item.droppable:hover .connection-point .point-dot{transform:scale(1.3);background:#10b981}.expand-btn{background:none;border:none;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#94a3b8;border-radius:4px;transition:all .15s ease}.expand-btn:hover{background-color:#e2e8f0;color:#475569}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:24px;height:24px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:1;font-size:14px;color:#1e293b;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-item.is-array{background-color:#fffbeb}.field-item.is-array:hover,.field-item.is-array.mapped{background-color:#fef3c7}.field-item.is-array .type-icon{color:#f59e0b}.connection-point.array-point .point-dot{background:#f59e0b;box-shadow:0 0 0 3px #f59e0b4d}.connection-point.object-point .point-dot{background:#8b5cf6;box-shadow:0 0 0 3px #8b5cf64d}.mapping-indicator{display:flex;align-items:center;gap:2px;color:#10b981}.mapping-indicator mat-icon{font-size:16px;width:16px;height:16px}.mapping-indicator .mapping-count{font-size:11px;font-weight:600;background:#10b981;color:#fff;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center}.connection-point{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;align-items:center;justify-content:center}.connection-point.source{right:8px}.connection-point.target{left:8px}.point-dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1;transition:all .2s ease;box-shadow:0 0 0 3px #cbd5e14d}.mapped .point-dot{background:#10b981;box-shadow:0 0 0 3px #10b9814d}.nested-fields{border-left:2px solid #e2e8f0;margin-left:28px}.field-item.has-default{background-color:#eff6ff}.field-item.has-default:hover{background-color:#dbeafe}.field-item.clickable{cursor:pointer}.field-item.clickable:hover:not(.has-default){background-color:#f1f5f9}.field-item.clickable:hover:not(.has-default):after{content:\"Click to set default\";position:absolute;right:32px;font-size:11px;color:#64748b;font-style:italic}.field-item.clickable.has-default:hover:after{content:\"Click to edit\";position:absolute;right:32px;font-size:11px;color:#3b82f6;font-style:italic}.default-indicator{display:flex;align-items:center;gap:4px;color:#3b82f6;font-size:12px;background:#dbeafe;padding:2px 8px;border-radius:4px;max-width:100px;overflow:hidden}.default-indicator mat-icon{font-size:14px;width:14px;height:14px}.default-indicator .default-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaTreeComponent, decorators: [{
             type: Component,
@@ -1018,6 +1275,215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['fieldItem']
             }] } });
 
+class ConditionBuilderComponent {
+    // Available fields for conditions (optional - if not provided, uses 'value' as the only field)
+    fields = [];
+    // The condition group to edit
+    condition = null;
+    // Whether to show a compact/inline version
+    compact = false;
+    // Emits when condition changes
+    conditionChange = new EventEmitter();
+    rootGroup;
+    // Default field for transformation conditions (the input value)
+    defaultField = { path: 'value', name: 'Input value', type: 'string' };
+    // Operators by type
+    stringOperators = [
+        { value: 'equals', label: 'equals', needsValue: true },
+        { value: 'notEquals', label: 'not equals', needsValue: true },
+        { value: 'contains', label: 'contains', needsValue: true },
+        { value: 'notContains', label: 'not contain', needsValue: true },
+        { value: 'startsWith', label: 'starts with', needsValue: true },
+        { value: 'endsWith', label: 'ends with', needsValue: true },
+        { value: 'isEmpty', label: 'is empty', needsValue: false },
+        { value: 'isNotEmpty', label: 'is not empty', needsValue: false },
+    ];
+    numberOperators = [
+        { value: 'equals', label: 'equals', needsValue: true },
+        { value: 'notEquals', label: 'not equals', needsValue: true },
+        { value: 'greaterThan', label: '>', needsValue: true },
+        { value: 'lessThan', label: '<', needsValue: true },
+        { value: 'greaterThanOrEqual', label: '>=', needsValue: true },
+        { value: 'lessThanOrEqual', label: '<=', needsValue: true },
+    ];
+    booleanOperators = [
+        { value: 'isTrue', label: 'is true', needsValue: false },
+        { value: 'isFalse', label: 'is false', needsValue: false },
+    ];
+    ngOnInit() {
+        if (this.condition) {
+            this.rootGroup = this.cloneGroup(this.condition);
+        }
+        else {
+            this.rootGroup = this.createEmptyGroup();
+        }
+    }
+    get availableFields() {
+        return this.fields.length > 0 ? this.fields : [this.defaultField];
+    }
+    get showFieldSelector() {
+        return this.fields.length > 1;
+    }
+    createEmptyGroup() {
+        return {
+            id: this.generateId(),
+            type: 'group',
+            logic: 'and',
+            children: [],
+        };
+    }
+    generateId() {
+        return `cond-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    cloneGroup(group) {
+        return {
+            ...group,
+            children: group.children.map((child) => child.type === 'group' ? this.cloneGroup(child) : { ...child }),
+        };
+    }
+    getOperatorsForField(fieldPath) {
+        const field = this.availableFields.find((f) => f.path === fieldPath);
+        if (!field)
+            return this.stringOperators;
+        switch (field.type) {
+            case 'number':
+                return this.numberOperators;
+            case 'boolean':
+                return this.booleanOperators;
+            default:
+                return this.stringOperators;
+        }
+    }
+    operatorNeedsValue(operator) {
+        const allOperators = [...this.stringOperators, ...this.numberOperators, ...this.booleanOperators];
+        const op = allOperators.find((o) => o.value === operator);
+        return op?.needsValue ?? true;
+    }
+    isCondition(item) {
+        return item.type === 'condition';
+    }
+    isGroup(item) {
+        return item.type === 'group';
+    }
+    addCondition(group) {
+        const firstField = this.availableFields[0];
+        const newCondition = {
+            id: this.generateId(),
+            type: 'condition',
+            field: firstField.path,
+            fieldName: firstField.name,
+            operator: 'isNotEmpty',
+            value: '',
+            valueType: firstField.type,
+        };
+        group.children = [...group.children, newCondition];
+        this.emitChange();
+    }
+    addGroup(parentGroup) {
+        const newGroup = {
+            id: this.generateId(),
+            type: 'group',
+            logic: parentGroup.logic === 'and' ? 'or' : 'and',
+            children: [],
+        };
+        parentGroup.children = [...parentGroup.children, newGroup];
+        this.emitChange();
+    }
+    removeItem(parentGroup, itemId) {
+        parentGroup.children = parentGroup.children.filter((c) => c.id !== itemId);
+        this.emitChange();
+    }
+    onFieldChange(condition, fieldPath) {
+        const field = this.availableFields.find((f) => f.path === fieldPath);
+        if (field) {
+            condition.field = fieldPath;
+            condition.fieldName = field.name;
+            condition.valueType = field.type;
+            const operators = this.getOperatorsForField(fieldPath);
+            condition.operator = operators[0].value;
+            condition.value = '';
+        }
+        this.emitChange();
+    }
+    onOperatorChange(condition, operator) {
+        condition.operator = operator;
+        if (!this.operatorNeedsValue(operator)) {
+            condition.value = '';
+        }
+        this.emitChange();
+    }
+    onValueChange(condition, value) {
+        if (condition.valueType === 'number') {
+            condition.value = parseFloat(value) || 0;
+        }
+        else {
+            condition.value = value;
+        }
+        this.emitChange();
+    }
+    onLogicChange(group, logic) {
+        group.logic = logic;
+        this.emitChange();
+    }
+    emitChange() {
+        this.rootGroup = this.cloneGroup(this.rootGroup);
+        this.conditionChange.emit(this.rootGroup);
+    }
+    getConditionSummary() {
+        return this.summarizeGroup(this.rootGroup);
+    }
+    summarizeGroup(group) {
+        if (group.children.length === 0)
+            return '';
+        const parts = group.children.map(child => {
+            if (child.type === 'condition') {
+                return this.summarizeCondition(child);
+            }
+            else {
+                return `(${this.summarizeGroup(child)})`;
+            }
+        });
+        return parts.join(` ${group.logic.toUpperCase()} `);
+    }
+    summarizeCondition(cond) {
+        const opLabel = this.getOperatorLabel(cond.operator);
+        if (this.operatorNeedsValue(cond.operator)) {
+            return `${opLabel} "${cond.value}"`;
+        }
+        return opLabel;
+    }
+    getOperatorLabel(operator) {
+        const allOperators = [...this.stringOperators, ...this.numberOperators, ...this.booleanOperators];
+        const op = allOperators.find((o) => o.value === operator);
+        return op?.label || operator;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConditionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ConditionBuilderComponent, isStandalone: true, selector: "condition-builder", inputs: { fields: "fields", condition: "condition", compact: "compact" }, outputs: { conditionChange: "conditionChange" }, ngImport: i0, template: "<div class=\"condition-builder\" [class.compact]=\"compact\">\r\n  <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: rootGroup, isRoot: true }\"></ng-container>\r\n</div>\r\n\r\n<!-- Recursive group template -->\r\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\" let-parentGroup=\"parentGroup\">\r\n  <div class=\"filter-group\" [class.root-group]=\"isRoot\" [class.nested-group]=\"!isRoot\">\r\n    <!-- Group header with logic toggle (only show if multiple children or nested) -->\r\n    @if (group.children.length > 1 || !isRoot) {\r\n      <div class=\"group-header\">\r\n        <div class=\"logic-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"logic-btn\"\r\n            [class.active]=\"group.logic === 'and'\"\r\n            (click)=\"onLogicChange(group, 'and')\"\r\n          >\r\n            AND\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"logic-btn\"\r\n            [class.active]=\"group.logic === 'or'\"\r\n            (click)=\"onLogicChange(group, 'or')\"\r\n          >\r\n            OR\r\n          </button>\r\n        </div>\r\n        @if (!isRoot) {\r\n          <button mat-icon-button class=\"remove-group-btn\" matTooltip=\"Remove group\" (click)=\"removeItem(parentGroup, group.id)\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Group children -->\r\n    <div class=\"group-children\">\r\n      @for (item of group.children; track item.id; let i = $index) {\r\n        <!-- Logic connector between items -->\r\n        @if (i > 0) {\r\n          <div class=\"logic-connector\">\r\n            <span class=\"logic-badge\" [class.and]=\"group.logic === 'and'\" [class.or]=\"group.logic === 'or'\">\r\n              {{ group.logic | uppercase }}\r\n            </span>\r\n          </div>\r\n        }\r\n\r\n        @if (isCondition(item)) {\r\n          <!-- Condition row -->\r\n          <div class=\"condition-row\">\r\n            <!-- Field selector (only if multiple fields) -->\r\n            @if (showFieldSelector) {\r\n              <mat-form-field appearance=\"outline\" class=\"field-select\">\r\n                <mat-select [value]=\"item.field\" (selectionChange)=\"onFieldChange(item, $event.value)\">\r\n                  @for (field of availableFields; track field.path) {\r\n                    <mat-option [value]=\"field.path\">{{ field.name }}</mat-option>\r\n                  }\r\n                </mat-select>\r\n              </mat-form-field>\r\n            }\r\n\r\n            <!-- Operator selector -->\r\n            <mat-form-field appearance=\"outline\" class=\"operator-select\">\r\n              <mat-select [value]=\"item.operator\" (selectionChange)=\"onOperatorChange(item, $event.value)\">\r\n                @for (op of getOperatorsForField(item.field); track op.value) {\r\n                  <mat-option [value]=\"op.value\">{{ op.label }}</mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <!-- Value input (only if operator needs value) -->\r\n            @if (operatorNeedsValue(item.operator)) {\r\n              @if (item.valueType === 'boolean') {\r\n                <mat-slide-toggle\r\n                  [checked]=\"item.value === true\"\r\n                  (change)=\"onValueChange(item, $event.checked)\"\r\n                  class=\"bool-toggle\"\r\n                >\r\n                </mat-slide-toggle>\r\n              } @else if (item.valueType === 'number') {\r\n                <mat-form-field appearance=\"outline\" class=\"value-input\">\r\n                  <input\r\n                    matInput\r\n                    type=\"number\"\r\n                    [value]=\"item.value\"\r\n                    (input)=\"onValueChange(item, $any($event.target).value)\"\r\n                    placeholder=\"value\"\r\n                  />\r\n                </mat-form-field>\r\n              } @else {\r\n                <mat-form-field appearance=\"outline\" class=\"value-input\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [value]=\"item.value\"\r\n                    (input)=\"onValueChange(item, $any($event.target).value)\"\r\n                    placeholder=\"value\"\r\n                  />\r\n                </mat-form-field>\r\n              }\r\n            }\r\n\r\n            <!-- Remove condition button -->\r\n            <button mat-icon-button class=\"remove-btn\" matTooltip=\"Remove\" (click)=\"removeItem(group, item.id)\">\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          </div>\r\n        } @else if (isGroup(item)) {\r\n          <!-- Nested group -->\r\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: item, isRoot: false, parentGroup: group }\"></ng-container>\r\n        }\r\n      }\r\n\r\n      <!-- Empty state -->\r\n      @if (group.children.length === 0) {\r\n        <div class=\"empty-group\">\r\n          <span>No conditions defined</span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Group actions -->\r\n    <div class=\"group-actions\">\r\n      <button type=\"button\" class=\"add-btn\" (click)=\"addCondition(group)\">\r\n        <mat-icon>add</mat-icon>\r\n        @if (!compact) {\r\n          <span>Add condition</span>\r\n        }\r\n      </button>\r\n      @if (!compact && group.children.length > 0) {\r\n        <button type=\"button\" class=\"add-btn add-group-btn\" (click)=\"addGroup(group)\">\r\n          <mat-icon>folder_open</mat-icon>\r\n          <span>Add group</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".condition-builder.compact .filter-group{padding:8px}.condition-builder.compact .condition-row{gap:6px}.condition-builder.compact .operator-select{min-width:100px}.condition-builder.compact .value-input{min-width:80px}.condition-builder.compact .add-btn{padding:4px 8px;font-size:12px}.filter-group{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px}.filter-group.nested-group{margin-top:8px;background:#f1f5f9;border-color:#cbd5e1}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.logic-toggle{display:flex;gap:4px}.logic-btn{padding:4px 12px;border:1px solid #cbd5e1;background:#fff;border-radius:4px;font-size:11px;font-weight:600;color:#64748b;cursor:pointer;transition:all .15s ease}.logic-btn:hover{border-color:#94a3b8}.logic-btn.active{background:#6366f1;border-color:#6366f1;color:#fff}.group-children{display:flex;flex-direction:column;gap:8px}.logic-connector{display:flex;align-items:center;justify-content:center;padding:4px 0}.logic-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px}.logic-badge.and{background:#dbeafe;color:#1d4ed8}.logic-badge.or{background:#fef3c7;color:#b45309}.condition-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.field-select{min-width:120px}.operator-select{min-width:130px}.value-input{min-width:100px;flex:1}.bool-toggle{margin:0 8px}.remove-btn,.remove-group-btn{width:28px;height:28px;line-height:28px;flex-shrink:0}.remove-btn mat-icon,.remove-group-btn mat-icon{font-size:18px;width:18px;height:18px;color:#94a3b8}.remove-btn:hover mat-icon,.remove-group-btn:hover mat-icon{color:#ef4444}.empty-group{display:flex;align-items:center;justify-content:center;padding:12px;color:#94a3b8;font-size:13px;font-style:italic}.group-actions{display:flex;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed #e2e8f0}.add-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;background:#fff;border:1px dashed #cbd5e1;border-radius:6px;font-size:13px;color:#64748b;cursor:pointer;transition:all .15s ease}.add-btn mat-icon{font-size:16px;width:16px;height:16px}.add-btn:hover{border-color:#6366f1;color:#6366f1;background:#f5f3ff}.add-btn.add-group-btn{border-style:solid}::ng-deep .condition-builder .mat-mdc-form-field{font-size:13px}::ng-deep .condition-builder .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .condition-builder .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 6px}::ng-deep .condition-builder .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConditionBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'condition-builder', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatRadioModule,
+                        MatSlideToggleModule,
+                        MatTooltipModule,
+                    ], template: "<div class=\"condition-builder\" [class.compact]=\"compact\">\r\n  <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: rootGroup, isRoot: true }\"></ng-container>\r\n</div>\r\n\r\n<!-- Recursive group template -->\r\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\" let-parentGroup=\"parentGroup\">\r\n  <div class=\"filter-group\" [class.root-group]=\"isRoot\" [class.nested-group]=\"!isRoot\">\r\n    <!-- Group header with logic toggle (only show if multiple children or nested) -->\r\n    @if (group.children.length > 1 || !isRoot) {\r\n      <div class=\"group-header\">\r\n        <div class=\"logic-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"logic-btn\"\r\n            [class.active]=\"group.logic === 'and'\"\r\n            (click)=\"onLogicChange(group, 'and')\"\r\n          >\r\n            AND\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"logic-btn\"\r\n            [class.active]=\"group.logic === 'or'\"\r\n            (click)=\"onLogicChange(group, 'or')\"\r\n          >\r\n            OR\r\n          </button>\r\n        </div>\r\n        @if (!isRoot) {\r\n          <button mat-icon-button class=\"remove-group-btn\" matTooltip=\"Remove group\" (click)=\"removeItem(parentGroup, group.id)\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Group children -->\r\n    <div class=\"group-children\">\r\n      @for (item of group.children; track item.id; let i = $index) {\r\n        <!-- Logic connector between items -->\r\n        @if (i > 0) {\r\n          <div class=\"logic-connector\">\r\n            <span class=\"logic-badge\" [class.and]=\"group.logic === 'and'\" [class.or]=\"group.logic === 'or'\">\r\n              {{ group.logic | uppercase }}\r\n            </span>\r\n          </div>\r\n        }\r\n\r\n        @if (isCondition(item)) {\r\n          <!-- Condition row -->\r\n          <div class=\"condition-row\">\r\n            <!-- Field selector (only if multiple fields) -->\r\n            @if (showFieldSelector) {\r\n              <mat-form-field appearance=\"outline\" class=\"field-select\">\r\n                <mat-select [value]=\"item.field\" (selectionChange)=\"onFieldChange(item, $event.value)\">\r\n                  @for (field of availableFields; track field.path) {\r\n                    <mat-option [value]=\"field.path\">{{ field.name }}</mat-option>\r\n                  }\r\n                </mat-select>\r\n              </mat-form-field>\r\n            }\r\n\r\n            <!-- Operator selector -->\r\n            <mat-form-field appearance=\"outline\" class=\"operator-select\">\r\n              <mat-select [value]=\"item.operator\" (selectionChange)=\"onOperatorChange(item, $event.value)\">\r\n                @for (op of getOperatorsForField(item.field); track op.value) {\r\n                  <mat-option [value]=\"op.value\">{{ op.label }}</mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <!-- Value input (only if operator needs value) -->\r\n            @if (operatorNeedsValue(item.operator)) {\r\n              @if (item.valueType === 'boolean') {\r\n                <mat-slide-toggle\r\n                  [checked]=\"item.value === true\"\r\n                  (change)=\"onValueChange(item, $event.checked)\"\r\n                  class=\"bool-toggle\"\r\n                >\r\n                </mat-slide-toggle>\r\n              } @else if (item.valueType === 'number') {\r\n                <mat-form-field appearance=\"outline\" class=\"value-input\">\r\n                  <input\r\n                    matInput\r\n                    type=\"number\"\r\n                    [value]=\"item.value\"\r\n                    (input)=\"onValueChange(item, $any($event.target).value)\"\r\n                    placeholder=\"value\"\r\n                  />\r\n                </mat-form-field>\r\n              } @else {\r\n                <mat-form-field appearance=\"outline\" class=\"value-input\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [value]=\"item.value\"\r\n                    (input)=\"onValueChange(item, $any($event.target).value)\"\r\n                    placeholder=\"value\"\r\n                  />\r\n                </mat-form-field>\r\n              }\r\n            }\r\n\r\n            <!-- Remove condition button -->\r\n            <button mat-icon-button class=\"remove-btn\" matTooltip=\"Remove\" (click)=\"removeItem(group, item.id)\">\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          </div>\r\n        } @else if (isGroup(item)) {\r\n          <!-- Nested group -->\r\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: item, isRoot: false, parentGroup: group }\"></ng-container>\r\n        }\r\n      }\r\n\r\n      <!-- Empty state -->\r\n      @if (group.children.length === 0) {\r\n        <div class=\"empty-group\">\r\n          <span>No conditions defined</span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Group actions -->\r\n    <div class=\"group-actions\">\r\n      <button type=\"button\" class=\"add-btn\" (click)=\"addCondition(group)\">\r\n        <mat-icon>add</mat-icon>\r\n        @if (!compact) {\r\n          <span>Add condition</span>\r\n        }\r\n      </button>\r\n      @if (!compact && group.children.length > 0) {\r\n        <button type=\"button\" class=\"add-btn add-group-btn\" (click)=\"addGroup(group)\">\r\n          <mat-icon>folder_open</mat-icon>\r\n          <span>Add group</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".condition-builder.compact .filter-group{padding:8px}.condition-builder.compact .condition-row{gap:6px}.condition-builder.compact .operator-select{min-width:100px}.condition-builder.compact .value-input{min-width:80px}.condition-builder.compact .add-btn{padding:4px 8px;font-size:12px}.filter-group{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px}.filter-group.nested-group{margin-top:8px;background:#f1f5f9;border-color:#cbd5e1}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.logic-toggle{display:flex;gap:4px}.logic-btn{padding:4px 12px;border:1px solid #cbd5e1;background:#fff;border-radius:4px;font-size:11px;font-weight:600;color:#64748b;cursor:pointer;transition:all .15s ease}.logic-btn:hover{border-color:#94a3b8}.logic-btn.active{background:#6366f1;border-color:#6366f1;color:#fff}.group-children{display:flex;flex-direction:column;gap:8px}.logic-connector{display:flex;align-items:center;justify-content:center;padding:4px 0}.logic-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px}.logic-badge.and{background:#dbeafe;color:#1d4ed8}.logic-badge.or{background:#fef3c7;color:#b45309}.condition-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.field-select{min-width:120px}.operator-select{min-width:130px}.value-input{min-width:100px;flex:1}.bool-toggle{margin:0 8px}.remove-btn,.remove-group-btn{width:28px;height:28px;line-height:28px;flex-shrink:0}.remove-btn mat-icon,.remove-group-btn mat-icon{font-size:18px;width:18px;height:18px;color:#94a3b8}.remove-btn:hover mat-icon,.remove-group-btn:hover mat-icon{color:#ef4444}.empty-group{display:flex;align-items:center;justify-content:center;padding:12px;color:#94a3b8;font-size:13px;font-style:italic}.group-actions{display:flex;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed #e2e8f0}.add-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;background:#fff;border:1px dashed #cbd5e1;border-radius:6px;font-size:13px;color:#64748b;cursor:pointer;transition:all .15s ease}.add-btn mat-icon{font-size:16px;width:16px;height:16px}.add-btn:hover{border-color:#6366f1;color:#6366f1;background:#f5f3ff}.add-btn.add-group-btn{border-style:solid}::ng-deep .condition-builder .mat-mdc-form-field{font-size:13px}::ng-deep .condition-builder .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .condition-builder .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 6px}::ng-deep .condition-builder .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}\n"] }]
+        }], propDecorators: { fields: [{
+                type: Input
+            }], condition: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], conditionChange: [{
+                type: Output
+            }] } });
+
 class TransformationPopoverComponent {
     mapping;
     position = { x: 0, y: 0 };
@@ -1026,9 +1492,15 @@ class TransformationPopoverComponent {
     delete = new EventEmitter();
     close = new EventEmitter();
     transformationService = inject(TransformationService);
-    transformationType = 'direct';
-    config = { type: 'direct' };
-    preview = '';
+    // Array of transformation steps
+    steps = [];
+    // Preview results for each step
+    stepPreviews = [];
+    // Input values for each step (to show input → output)
+    stepInputs = [];
+    finalPreview = '';
+    // Track which step is expanded (-1 means none, used in single-step mode)
+    expandedStepIndex = -1;
     availableTransformations = this.transformationService.getAvailableTransformations();
     ngOnInit() {
         this.initFromMapping();
@@ -1040,54 +1512,156 @@ class TransformationPopoverComponent {
     }
     initFromMapping() {
         if (this.mapping) {
-            this.config = { ...this.mapping.transformation };
-            this.transformationType = this.config.type;
+            // Copy transformations array, with fallback for empty/undefined
+            if (this.mapping.transformations && this.mapping.transformations.length > 0) {
+                this.steps = this.mapping.transformations.map(t => ({ ...t }));
+            }
+            else {
+                // Fallback to a single direct transformation
+                this.steps = [{ type: 'direct' }];
+            }
             this.updatePreview();
         }
     }
-    onTypeChange() {
-        this.config = {
-            ...this.config,
-            type: this.transformationType,
-        };
+    // Check if we're in multi-step mode (more than one step)
+    get isMultiStep() {
+        return this.steps.length > 1;
+    }
+    onStepTypeChange(index) {
+        const step = this.steps[index];
         // Set defaults based on type
-        switch (this.transformationType) {
+        switch (step.type) {
             case 'concat':
-                this.config.separator = this.config.separator ?? ' ';
-                this.config.template = this.config.template ?? this.getDefaultTemplate();
+                step.separator = step.separator ?? ' ';
+                step.template = step.template ?? this.getDefaultTemplate();
                 break;
             case 'substring':
-                this.config.startIndex = this.config.startIndex ?? 0;
-                this.config.endIndex = this.config.endIndex ?? 10;
+                step.startIndex = step.startIndex ?? 0;
+                step.endIndex = step.endIndex ?? 10;
                 break;
             case 'replace':
-                this.config.searchValue = this.config.searchValue ?? '';
-                this.config.replaceValue = this.config.replaceValue ?? '';
+                step.searchValue = step.searchValue ?? '';
+                step.replaceValue = step.replaceValue ?? '';
                 break;
             case 'dateFormat':
-                this.config.outputFormat = this.config.outputFormat ?? 'YYYY-MM-DD';
+                step.outputFormat = step.outputFormat ?? 'YYYY-MM-DD';
                 break;
             case 'numberFormat':
-                this.config.decimalPlaces = this.config.decimalPlaces ?? 2;
+                step.decimalPlaces = step.decimalPlaces ?? 2;
+                break;
+            case 'mask':
+                step.pattern = step.pattern ?? '(###) ###-####';
                 break;
         }
         this.updatePreview();
     }
     getDefaultTemplate() {
-        return this.mapping.sourceFields.map((f) => `{${f.name}}`).join(' ');
+        return this.mapping.sourceFields.map((_, i) => `{${i}}`).join(' ');
+    }
+    addStep() {
+        this.steps.push({ type: 'direct' });
+        // Expand the newly added step
+        this.expandedStepIndex = this.steps.length - 1;
+        this.updatePreview();
+    }
+    removeStep(index) {
+        if (this.steps.length > 1) {
+            this.steps.splice(index, 1);
+            // Collapse after deletion
+            this.expandedStepIndex = -1;
+            this.updatePreview();
+        }
+    }
+    onStepDrop(event) {
+        if (event.previousIndex !== event.currentIndex) {
+            moveItemInArray(this.steps, event.previousIndex, event.currentIndex);
+            // Move expanded index with the step
+            if (this.expandedStepIndex === event.previousIndex) {
+                this.expandedStepIndex = event.currentIndex;
+            }
+            else if (this.expandedStepIndex > event.previousIndex &&
+                this.expandedStepIndex <= event.currentIndex) {
+                this.expandedStepIndex--;
+            }
+            else if (this.expandedStepIndex < event.previousIndex &&
+                this.expandedStepIndex >= event.currentIndex) {
+                this.expandedStepIndex++;
+            }
+            this.updatePreview();
+        }
+    }
+    toggleStep(index) {
+        if (this.expandedStepIndex === index) {
+            this.expandedStepIndex = -1; // Collapse
+        }
+        else {
+            this.expandedStepIndex = index; // Expand
+        }
+    }
+    isStepExpanded(index) {
+        return this.expandedStepIndex === index;
     }
     updatePreview() {
         if (!this.mapping || !this.sampleData) {
-            this.preview = '';
+            this.stepPreviews = [];
+            this.stepInputs = [];
+            this.finalPreview = '';
             return;
         }
-        this.preview = this.transformationService.applyTransformation(this.sampleData, this.mapping.sourceFields, this.config);
+        this.stepPreviews = [];
+        this.stepInputs = [];
+        let currentValue = null;
+        // Get initial input from source fields
+        const initialValues = this.mapping.sourceFields
+            .map(f => this.getValueByPath(this.sampleData, f.path))
+            .map(v => String(v ?? ''));
+        const initialInput = initialValues.join(', ');
+        // For the first step, use the source fields from sample data
+        for (let i = 0; i < this.steps.length; i++) {
+            const step = this.steps[i];
+            if (i === 0) {
+                // First step: input is from source fields
+                this.stepInputs.push(initialInput);
+                // Check condition before applying transformation
+                if (this.transformationService.isConditionMet(initialInput, step)) {
+                    currentValue = this.transformationService.applyTransformation(this.sampleData, this.mapping.sourceFields, step);
+                }
+                else {
+                    currentValue = initialInput; // Pass through if condition not met
+                }
+            }
+            else {
+                // Subsequent steps: input is previous output
+                this.stepInputs.push(this.stepPreviews[i - 1]);
+                // Check condition before applying transformation
+                if (this.transformationService.isConditionMet(currentValue, step)) {
+                    currentValue = this.transformationService.applyTransformationToValue(currentValue, step);
+                }
+                // If condition not met, currentValue passes through unchanged
+            }
+            this.stepPreviews.push(String(currentValue ?? ''));
+        }
+        this.finalPreview = this.stepPreviews[this.stepPreviews.length - 1] || '';
+    }
+    getValueByPath(obj, path) {
+        return path.split('.').reduce((acc, part) => {
+            if (acc && typeof acc === 'object') {
+                return acc[part];
+            }
+            return undefined;
+        }, obj);
     }
     onConfigChange() {
         this.updatePreview();
     }
     onSave() {
-        this.save.emit(this.config);
+        // Filter out 'direct' transformations if they're not the only one
+        const cleanedSteps = this.steps.length === 1
+            ? this.steps
+            : this.steps.filter(s => s.type !== 'direct');
+        // If all filtered out, keep at least one direct
+        const finalSteps = cleanedSteps.length > 0 ? cleanedSteps : [{ type: 'direct' }];
+        this.save.emit(finalSteps);
     }
     onDelete() {
         this.delete.emit();
@@ -1104,8 +1678,88 @@ class TransformationPopoverComponent {
             top: `${this.position.y}px`,
         };
     }
+    getStepTypeLabel(type) {
+        const t = this.availableTransformations.find(t => t.type === type);
+        return t?.label || type;
+    }
+    // Condition methods
+    hasCondition(step) {
+        return step.condition?.enabled === true;
+    }
+    toggleCondition(step, enabled) {
+        if (enabled) {
+            if (!step.condition) {
+                step.condition = {
+                    enabled: true,
+                    root: this.createEmptyConditionGroup(),
+                };
+            }
+            else {
+                step.condition.enabled = true;
+            }
+        }
+        else {
+            if (step.condition) {
+                step.condition.enabled = false;
+            }
+        }
+    }
+    onConditionChange(step, group) {
+        if (step.condition) {
+            step.condition.root = group;
+        }
+    }
+    createEmptyConditionGroup() {
+        return {
+            id: `cond-${Date.now()}`,
+            type: 'group',
+            logic: 'and',
+            children: [],
+        };
+    }
+    getConditionSummary(step) {
+        if (!step.condition?.enabled || !step.condition.root)
+            return '';
+        return this.summarizeConditionGroup(step.condition.root);
+    }
+    summarizeConditionGroup(group) {
+        if (group.children.length === 0)
+            return '';
+        const parts = group.children.map(child => {
+            if (child.type === 'condition') {
+                const opLabel = this.getOperatorLabel(child.operator);
+                if (['isEmpty', 'isNotEmpty', 'isTrue', 'isFalse'].includes(child.operator)) {
+                    return opLabel;
+                }
+                return `${opLabel} "${child.value}"`;
+            }
+            else {
+                return `(${this.summarizeConditionGroup(child)})`;
+            }
+        });
+        return parts.join(` ${group.logic.toUpperCase()} `);
+    }
+    getOperatorLabel(operator) {
+        const labels = {
+            equals: '=',
+            notEquals: '!=',
+            contains: 'contains',
+            notContains: 'not contain',
+            startsWith: 'starts with',
+            endsWith: 'ends with',
+            isEmpty: 'is empty',
+            isNotEmpty: 'is not empty',
+            greaterThan: '>',
+            lessThan: '<',
+            greaterThanOrEqual: '>=',
+            lessThanOrEqual: '<=',
+            isTrue: 'is true',
+            isFalse: 'is false',
+        };
+        return labels[operator] || operator;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TransformationPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TransformationPopoverComponent, isStandalone: true, selector: "transformation-popover", inputs: { mapping: "mapping", position: "position", sampleData: "sampleData" }, outputs: { save: "save", delete: "delete", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"transformation-popover\" [ngStyle]=\"getPopoverStyle()\">\n  <div class=\"popover-arrow\"></div>\n\n  <div class=\"popover-header\">\n    <span class=\"popover-title\">Transformation</span>\n    <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"popover-content\">\n    <!-- Source/Target Info -->\n    <div class=\"mapping-info\">\n      <div class=\"info-row\">\n        <span class=\"info-label\">Source:</span>\n        <span class=\"info-value\">{{ getSourceFieldNames() }}</span>\n      </div>\n      <div class=\"info-row\">\n        <span class=\"info-label\">Target:</span>\n        <span class=\"info-value\">{{ mapping.targetField.name }}</span>\n      </div>\n    </div>\n\n    <!-- Transformation Type -->\n    <mat-form-field appearance=\"outline\" class=\"full-width\">\n      <mat-label>Transformation Type</mat-label>\n      <mat-select [(ngModel)]=\"transformationType\" (selectionChange)=\"onTypeChange()\">\n        @for (t of availableTransformations; track t.type) {\n          <mat-option [value]=\"t.type\">{{ t.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <!-- Type-specific options -->\n    @switch (transformationType) {\n      @case ('concat') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Template</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"config.template\"\n              (ngModelChange)=\"onConfigChange()\"\n              placeholder=\"{field1} - {field2}\"\n            />\n            <mat-hint>Use curly braces around fieldName for values</mat-hint>\n          </mat-form-field>\n        </div>\n      }\n\n      @case ('substring') {\n        <div class=\"config-section config-row\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Start Index</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [(ngModel)]=\"config.startIndex\"\n              (ngModelChange)=\"onConfigChange()\"\n              min=\"0\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>End Index</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [(ngModel)]=\"config.endIndex\"\n              (ngModelChange)=\"onConfigChange()\"\n            />\n          </mat-form-field>\n        </div>\n      }\n\n      @case ('replace') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Search For</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"config.searchValue\"\n              (ngModelChange)=\"onConfigChange()\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Replace With</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"config.replaceValue\"\n              (ngModelChange)=\"onConfigChange()\"\n            />\n          </mat-form-field>\n        </div>\n      }\n\n      @case ('dateFormat') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Output Format</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"config.outputFormat\"\n              (ngModelChange)=\"onConfigChange()\"\n              placeholder=\"YYYY-MM-DD\"\n            />\n            <mat-hint>YYYY, MM, DD, HH, mm, ss</mat-hint>\n          </mat-form-field>\n        </div>\n      }\n\n      @case ('numberFormat') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Decimal Places</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [(ngModel)]=\"config.decimalPlaces\"\n              (ngModelChange)=\"onConfigChange()\"\n              min=\"0\"\n            />\n          </mat-form-field>\n          <div class=\"config-row\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Prefix</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"config.prefix\"\n                (ngModelChange)=\"onConfigChange()\"\n                placeholder=\"$\"\n              />\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Suffix</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"config.suffix\"\n                (ngModelChange)=\"onConfigChange()\"\n              />\n            </mat-form-field>\n          </div>\n        </div>\n      }\n\n      @case ('template') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Template Expression</mat-label>\n            <textarea\n              matInput\n              [(ngModel)]=\"config.template\"\n              (ngModelChange)=\"onConfigChange()\"\n              rows=\"3\"\n              placeholder=\"Hello {firstName}, your ID is {id}\"\n            ></textarea>\n          </mat-form-field>\n        </div>\n      }\n\n      @case ('custom') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>JavaScript Expression</mat-label>\n            <textarea\n              matInput\n              [(ngModel)]=\"config.expression\"\n              (ngModelChange)=\"onConfigChange()\"\n              rows=\"3\"\n              placeholder=\"fieldName.toUpperCase()\"\n            ></textarea>\n            <mat-hint>Use field names as variables</mat-hint>\n          </mat-form-field>\n        </div>\n      }\n    }\n\n    <!-- Preview Section -->\n    <div class=\"preview-section\">\n      <span class=\"preview-label\">Preview:</span>\n      <div class=\"preview-value\">{{ preview || '(empty)' }}</div>\n    </div>\n  </div>\n\n  <div class=\"popover-actions\">\n    <button mat-button color=\"warn\" (click)=\"onDelete()\" matTooltip=\"Remove this mapping\">\n      <mat-icon>delete</mat-icon>\n      Delete\n    </button>\n    <div class=\"action-spacer\"></div>\n    <button mat-button (click)=\"onClose()\">Cancel</button>\n    <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Apply</button>\n  </div>\n</div>\n\n<!-- Backdrop -->\n<div class=\"popover-backdrop\" (click)=\"onClose()\"></div>\n", styles: [".popover-backdrop{position:fixed;inset:0;background:#0000004d;z-index:999}.transformation-popover{position:fixed;z-index:1000;width:360px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;transform:translate(-50%,-50%);animation:popoverIn .2s ease-out}@keyframes popoverIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.popover-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#f8fafc;border-radius:12px 12px 0 0}.popover-title{font-size:16px;font-weight:600;color:#1e293b}.close-btn{width:32px;height:32px;line-height:32px}.close-btn mat-icon{font-size:20px;width:20px;height:20px}.popover-content{padding:20px;max-height:400px;overflow-y:auto}.mapping-info{background:#f1f5f9;border-radius:8px;padding:12px 16px;margin-bottom:16px}.info-row{display:flex;align-items:center;gap:8px}.info-row+.info-row{margin-top:8px}.info-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;width:60px}.info-value{font-size:14px;color:#1e293b;font-weight:500}.full-width{width:100%}.config-section{margin-top:12px}.config-row{display:flex;gap:12px}.config-row mat-form-field{flex:1}.preview-section{margin-top:16px;padding:12px 16px;background:linear-gradient(135deg,#eff6ff,#f0fdf4);border-radius:8px;border:1px solid #e0e7ff}.preview-label{font-size:11px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}.preview-value{font-size:14px;color:#1e293b;font-family:Monaco,Menlo,monospace;word-break:break-all;min-height:20px}.popover-actions{display:flex;align-items:center;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;border-radius:0 0 12px 12px}.action-spacer{flex:1}::ng-deep .transformation-popover .mat-mdc-form-field{font-size:14px}::ng-deep .transformation-popover .mat-mdc-text-field-wrapper{background:#fff}::ng-deep .transformation-popover .mat-mdc-form-field-subscript-wrapper{font-size:11px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TransformationPopoverComponent, isStandalone: true, selector: "transformation-popover", inputs: { mapping: "mapping", position: "position", sampleData: "sampleData" }, outputs: { save: "save", delete: "delete", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"transformation-popover\" [ngStyle]=\"getPopoverStyle()\">\r\n  <div class=\"popover-arrow\"></div>\r\n\r\n  <div class=\"popover-header\">\r\n    <span class=\"popover-title\">Transformation</span>\r\n    <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"popover-content\">\r\n    <!-- Source/Target Info -->\r\n    <div class=\"mapping-info\">\r\n      <div class=\"info-row\">\r\n        <span class=\"info-label\">Source:</span>\r\n        <span class=\"info-value\">{{ getSourceFieldNames() }}</span>\r\n      </div>\r\n      <div class=\"info-row\">\r\n        <span class=\"info-label\">Target:</span>\r\n        <span class=\"info-value\">{{ mapping.targetField.name }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Single Step Mode (default, clean UI) -->\r\n    @if (!isMultiStep) {\r\n      <ng-container *ngTemplateOutlet=\"stepConfig; context: { step: steps[0], index: 0, showHeader: false }\"></ng-container>\r\n\r\n      <!-- Preview Section -->\r\n      <div class=\"preview-section\">\r\n        <span class=\"preview-label\">Preview:</span>\r\n        <div class=\"preview-value\">{{ stepPreviews[0] || '(empty)' }}</div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Multi-Step Mode -->\r\n    @if (isMultiStep) {\r\n      <div class=\"steps-container\" cdkDropList (cdkDropListDropped)=\"onStepDrop($event)\">\r\n        @for (step of steps; track $index; let i = $index) {\r\n          <div class=\"step-card\" [class.expanded]=\"isStepExpanded(i)\" cdkDrag>\r\n            <!-- Collapsed View -->\r\n            @if (!isStepExpanded(i)) {\r\n              <div class=\"step-collapsed\" (click)=\"toggleStep(i)\">\r\n                <mat-icon class=\"drag-handle\" cdkDragHandle (click)=\"$event.stopPropagation()\">drag_indicator</mat-icon>\r\n                <div class=\"step-collapsed-header\">\r\n                  <div class=\"step-title-row\">\r\n                    <span class=\"step-number\">Step {{ i + 1 }}: {{ getStepTypeLabel(step.type) }}</span>\r\n                    @if (hasCondition(step)) {\r\n                      <span class=\"condition-badge\" matTooltip=\"{{ getConditionSummary(step) }}\">\r\n                        <mat-icon>filter_alt</mat-icon>\r\n                        if\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                  <div class=\"step-collapsed-actions\">\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"expand-btn\"\r\n                      (click)=\"toggleStep(i); $event.stopPropagation()\"\r\n                      matTooltip=\"Edit step\"\r\n                    >\r\n                      <mat-icon>edit</mat-icon>\r\n                    </button>\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"remove-step-btn\"\r\n                      (click)=\"removeStep(i); $event.stopPropagation()\"\r\n                      matTooltip=\"Remove step\"\r\n                    >\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n                <div class=\"step-collapsed-preview\">\r\n                  <span class=\"step-input\">\"{{ (stepInputs[i] || '') | slice:0:20 }}{{ (stepInputs[i] || '').length > 20 ? '...' : '' }}\"</span>\r\n                  <mat-icon class=\"arrow-icon\">arrow_forward</mat-icon>\r\n                  <span class=\"step-output\">\"{{ (stepPreviews[i] || '') | slice:0:20 }}{{ (stepPreviews[i] || '').length > 20 ? '...' : '' }}\"</span>\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n            <!-- Expanded View -->\r\n            @if (isStepExpanded(i)) {\r\n              <div class=\"step-expanded\">\r\n                <mat-icon class=\"drag-handle\" cdkDragHandle>drag_indicator</mat-icon>\r\n                <div class=\"step-header\">\r\n                  <span class=\"step-number\">Step {{ i + 1 }}</span>\r\n                  <div class=\"step-header-actions\">\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"collapse-btn\"\r\n                      (click)=\"toggleStep(i)\"\r\n                      matTooltip=\"Collapse\"\r\n                    >\r\n                      <mat-icon>expand_less</mat-icon>\r\n                    </button>\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"remove-step-btn\"\r\n                      (click)=\"removeStep(i)\"\r\n                      matTooltip=\"Remove step\"\r\n                    >\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"step-content\">\r\n                  <ng-container *ngTemplateOutlet=\"stepConfig; context: { step: step, index: i, showHeader: false }\"></ng-container>\r\n                </div>\r\n\r\n                <!-- Step Preview -->\r\n                <div class=\"step-preview\">\r\n                  <mat-icon class=\"preview-arrow\">arrow_downward</mat-icon>\r\n                  <span class=\"step-preview-value\">{{ stepPreviews[i] || '(empty)' }}</span>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Final Preview -->\r\n      <div class=\"preview-section final-preview\">\r\n        <span class=\"preview-label\">Final Result:</span>\r\n        <div class=\"preview-value\">{{ finalPreview || '(empty)' }}</div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Add Step Button - Always visible -->\r\n  <div class=\"add-step-section\">\r\n    <button mat-stroked-button class=\"add-step-btn\" (click)=\"addStep()\">\r\n      <mat-icon>add</mat-icon>\r\n      @if (isMultiStep) {\r\n        Add Step\r\n      } @else {\r\n        Add Transformation Step\r\n      }\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"popover-actions\">\r\n    <button mat-button color=\"warn\" (click)=\"onDelete()\" matTooltip=\"Remove this mapping\">\r\n      <mat-icon>delete</mat-icon>\r\n      Delete\r\n    </button>\r\n    <div class=\"action-spacer\"></div>\r\n    <button mat-button (click)=\"onClose()\">Cancel</button>\r\n    <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Apply</button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Backdrop -->\r\n<div class=\"popover-backdrop\" (click)=\"onClose()\"></div>\r\n\r\n<!-- Step Configuration Template -->\r\n<ng-template #stepConfig let-step=\"step\" let-index=\"index\" let-showHeader=\"showHeader\">\r\n  <!-- Transformation Type -->\r\n  <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n    <mat-label>Transformation Type</mat-label>\r\n    <mat-select [(ngModel)]=\"step.type\" (selectionChange)=\"onStepTypeChange(index)\">\r\n      @for (t of availableTransformations; track t.type) {\r\n        <mat-option [value]=\"t.type\">{{ t.label }}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <!-- Type-specific options -->\r\n  @switch (step.type) {\r\n    @case ('concat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Separator</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.separator\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\" \"\r\n          />\r\n          <mat-hint>Join values with this (default: space)</mat-hint>\r\n        </mat-form-field>\r\n        <div class=\"or-divider\">or use template for custom format</div>\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Template</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.template\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            [placeholder]=\"'{0} - {1}'\"\r\n          />\r\n          <mat-hint>Overrides separator if set</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('substring') {\r\n      <div class=\"config-section config-row\">\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Start Index</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.startIndex\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            min=\"0\"\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>End Index</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.endIndex\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('replace') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Search For</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.searchValue\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Replace With</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.replaceValue\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('dateFormat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Output Format</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.outputFormat\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\"YYYY-MM-DD\"\r\n          />\r\n          <mat-hint>YYYY, MM, DD, HH, mm, ss</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('numberFormat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Decimal Places</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.decimalPlaces\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            min=\"0\"\r\n          />\r\n        </mat-form-field>\r\n        <div class=\"config-row\">\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>Prefix</mat-label>\r\n            <input\r\n              matInput\r\n              [(ngModel)]=\"step.prefix\"\r\n              (ngModelChange)=\"onConfigChange()\"\r\n              placeholder=\"$\"\r\n            />\r\n          </mat-form-field>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>Suffix</mat-label>\r\n            <input\r\n              matInput\r\n              [(ngModel)]=\"step.suffix\"\r\n              (ngModelChange)=\"onConfigChange()\"\r\n            />\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @case ('mask') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Pattern</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.pattern\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\"(###) ###-####\"\r\n          />\r\n          <mat-hint># = character from input</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('template') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Template Expression</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"step.template\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            rows=\"3\"\r\n            [placeholder]=\"'Hello {0}, your ID is {1}'\"\r\n          ></textarea>\r\n          @if (index === 0) {\r\n            <mat-hint>Use {{ '{' }}0{{ '}' }}, {{ '{' }}1{{ '}' }}, etc. for source fields</mat-hint>\r\n          } @else {\r\n            <mat-hint>Use {{ '{' }}0{{ '}' }} for the value from previous step</mat-hint>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Condition Section -->\r\n  <div class=\"condition-section\">\r\n    <mat-checkbox\r\n      [checked]=\"hasCondition(step)\"\r\n      (change)=\"toggleCondition(step, $event.checked)\"\r\n      class=\"condition-checkbox\"\r\n    >\r\n      Apply conditionally\r\n    </mat-checkbox>\r\n\r\n    @if (hasCondition(step)) {\r\n      <div class=\"condition-content\">\r\n        <condition-builder\r\n          [condition]=\"step.condition?.root || null\"\r\n          [compact]=\"true\"\r\n          (conditionChange)=\"onConditionChange(step, $event)\"\r\n        ></condition-builder>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.popover-backdrop{position:fixed;inset:0;background:#0000004d;z-index:999}.transformation-popover{position:fixed;z-index:1000;width:420px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;transform:translate(-50%,-50%);animation:popoverIn .2s ease-out}@keyframes popoverIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.popover-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#f8fafc;border-radius:12px 12px 0 0}.popover-title{font-size:16px;font-weight:600;color:#1e293b}.close-btn{width:32px;height:32px;line-height:32px}.close-btn mat-icon{font-size:20px;width:20px;height:20px}.popover-content{padding:20px;max-height:500px;overflow-y:auto}.mapping-info{background:#f1f5f9;border-radius:8px;padding:12px 16px;margin-bottom:16px}.info-row{display:flex;align-items:center;gap:8px}.info-row+.info-row{margin-top:8px}.info-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;width:60px}.info-value{font-size:14px;color:#1e293b;font-weight:500}.full-width{width:100%}.config-section{margin-top:12px}.or-divider{text-align:center;font-size:11px;color:#94a3b8;margin:8px 0}.condition-section{margin-top:16px;padding-top:12px;border-top:1px dashed #e2e8f0}.condition-checkbox{font-size:13px;color:#64748b}.condition-content{margin-top:12px}.config-row{display:flex;gap:12px}.config-row mat-form-field{flex:1}.preview-section{margin-top:16px;padding:12px 16px;background:linear-gradient(135deg,#eff6ff,#f0fdf4);border-radius:8px;border:1px solid #e0e7ff}.preview-label{font-size:11px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}.preview-value{font-size:14px;color:#1e293b;font-family:Monaco,Menlo,monospace;word-break:break-all;min-height:20px}.steps-container{display:flex;flex-direction:column;gap:12px}.step-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;transition:all .2s ease}.step-card.expanded{border-color:#6366f1;border-width:2px;background:#fff}.step-collapsed{display:grid;grid-template-columns:auto 1fr;gap:0 12px;padding:12px;cursor:pointer;transition:background .15s ease}.step-collapsed:hover{background:#f1f5f9}.step-collapsed .drag-handle{grid-row:span 2;align-self:center}.step-collapsed-header{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.step-collapsed-header .step-title-row{display:flex;align-items:center;gap:8px;flex:1}.step-collapsed-header .step-number{flex-shrink:0}.condition-badge{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;background:#fef3c7;border:1px solid #f59e0b;border-radius:4px;font-size:10px;font-weight:600;color:#b45309;cursor:help}.condition-badge mat-icon{font-size:12px;width:12px;height:12px}.step-collapsed-actions{display:flex;align-items:center;gap:4px}.step-collapsed-preview{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;font-family:Monaco,Menlo,monospace}.step-input{color:#64748b;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arrow-icon{font-size:14px;width:14px;height:14px;color:#6366f1}.step-output{color:#059669;font-weight:500;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step-expanded{display:grid;grid-template-columns:auto 1fr;gap:0 12px;padding:12px}.step-expanded .drag-handle{grid-row:1;align-self:center}.step-expanded .step-header,.step-expanded .step-content,.step-expanded .step-preview{grid-column:2}.step-header{display:flex;align-items:center;margin-bottom:12px}.step-header .step-number{flex:1}.step-header-actions{display:flex;align-items:center;gap:4px}.step-number{font-size:12px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:.5px}.expand-btn,.collapse-btn{width:28px;height:28px;line-height:28px}.expand-btn mat-icon,.collapse-btn mat-icon{font-size:18px;width:18px;height:18px;color:#64748b}.expand-btn:hover mat-icon,.collapse-btn:hover mat-icon{color:#6366f1}.remove-step-btn{width:28px;height:28px;line-height:28px}.remove-step-btn mat-icon{font-size:18px;width:18px;height:18px;color:#94a3b8}.remove-step-btn:hover mat-icon{color:#ef4444}.step-preview{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;background:#f1f5f9;border-radius:6px}.preview-arrow{font-size:16px;width:16px;height:16px;color:#6366f1}.step-preview-value{font-size:13px;color:#475569;font-family:Monaco,Menlo,monospace;word-break:break-all;flex:1}.add-step-section{padding:12px 20px;border-top:1px solid #e2e8f0;background:#fafafa}.add-step-btn{width:100%;border-style:dashed;color:#64748b}.add-step-btn mat-icon{font-size:18px;width:18px;height:18px;margin-right:4px}.add-step-btn:hover{border-color:#6366f1;color:#6366f1;background:#f5f3ff}.final-preview{margin-top:16px;background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:2px solid #10b981;border-radius:8px;position:relative}.final-preview .preview-label{color:#059669;font-size:12px;font-weight:700}.final-preview .preview-value{color:#065f46;font-weight:600}.final-preview:before{content:\"\\2713\";position:absolute;right:12px;top:10px;color:#10b981;font-size:16px;font-weight:700}.popover-actions{display:flex;align-items:center;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;border-radius:0 0 12px 12px}.action-spacer{flex:1}::ng-deep .transformation-popover .mat-mdc-form-field{font-size:14px}::ng-deep .transformation-popover .mat-mdc-text-field-wrapper{background:#fff}::ng-deep .transformation-popover .mat-mdc-form-field-subscript-wrapper{font-size:11px}.drag-handle{cursor:grab;color:#94a3b8;font-size:20px;width:20px;height:20px;flex-shrink:0}.drag-handle:hover{color:#6366f1}.drag-handle:active{cursor:grabbing}.step-card.cdk-drag-preview{box-shadow:0 5px 20px #00000040;border-radius:8px;background:#fff}.step-card.cdk-drag-placeholder{opacity:.4;background:#e2e8f0;border:2px dashed #94a3b8}.step-card.cdk-drag-animating{transition:transform .2s ease}.steps-container.cdk-drop-list-dragging .step-card:not(.cdk-drag-placeholder){transition:transform .2s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ConditionBuilderComponent, selector: "condition-builder", inputs: ["fields", "condition", "compact"], outputs: ["conditionChange"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TransformationPopoverComponent, decorators: [{
             type: Component,
@@ -1118,7 +1772,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatInputModule,
                         MatFormFieldModule,
                         MatTooltipModule,
-                    ], template: "<div class=\"transformation-popover\" [ngStyle]=\"getPopoverStyle()\">\n  <div class=\"popover-arrow\"></div>\n\n  <div class=\"popover-header\">\n    <span class=\"popover-title\">Transformation</span>\n    <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"popover-content\">\n    <!-- Source/Target Info -->\n    <div class=\"mapping-info\">\n      <div class=\"info-row\">\n        <span class=\"info-label\">Source:</span>\n        <span class=\"info-value\">{{ getSourceFieldNames() }}</span>\n      </div>\n      <div class=\"info-row\">\n        <span class=\"info-label\">Target:</span>\n        <span class=\"info-value\">{{ mapping.targetField.name }}</span>\n      </div>\n    </div>\n\n    <!-- Transformation Type -->\n    <mat-form-field appearance=\"outline\" class=\"full-width\">\n      <mat-label>Transformation Type</mat-label>\n      <mat-select [(ngModel)]=\"transformationType\" (selectionChange)=\"onTypeChange()\">\n        @for (t of availableTransformations; track t.type) {\n          <mat-option [value]=\"t.type\">{{ t.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    <!-- Type-specific options -->\n    @switch (transformationType) {\n      @case ('concat') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Template</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"config.template\"\n              (ngModelChange)=\"onConfigChange()\"\n              placeholder=\"{field1} - {field2}\"\n            />\n            <mat-hint>Use curly braces around fieldName for values</mat-hint>\n          </mat-form-field>\n        </div>\n      }\n\n      @case ('substring') {\n        <div class=\"config-section config-row\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Start Index</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [(ngModel)]=\"config.startIndex\"\n              (ngModelChange)=\"onConfigChange()\"\n              min=\"0\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>End Index</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [(ngModel)]=\"config.endIndex\"\n              (ngModelChange)=\"onConfigChange()\"\n            />\n          </mat-form-field>\n        </div>\n      }\n\n      @case ('replace') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Search For</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"config.searchValue\"\n              (ngModelChange)=\"onConfigChange()\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Replace With</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"config.replaceValue\"\n              (ngModelChange)=\"onConfigChange()\"\n            />\n          </mat-form-field>\n        </div>\n      }\n\n      @case ('dateFormat') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Output Format</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"config.outputFormat\"\n              (ngModelChange)=\"onConfigChange()\"\n              placeholder=\"YYYY-MM-DD\"\n            />\n            <mat-hint>YYYY, MM, DD, HH, mm, ss</mat-hint>\n          </mat-form-field>\n        </div>\n      }\n\n      @case ('numberFormat') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Decimal Places</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              [(ngModel)]=\"config.decimalPlaces\"\n              (ngModelChange)=\"onConfigChange()\"\n              min=\"0\"\n            />\n          </mat-form-field>\n          <div class=\"config-row\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Prefix</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"config.prefix\"\n                (ngModelChange)=\"onConfigChange()\"\n                placeholder=\"$\"\n              />\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Suffix</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"config.suffix\"\n                (ngModelChange)=\"onConfigChange()\"\n              />\n            </mat-form-field>\n          </div>\n        </div>\n      }\n\n      @case ('template') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>Template Expression</mat-label>\n            <textarea\n              matInput\n              [(ngModel)]=\"config.template\"\n              (ngModelChange)=\"onConfigChange()\"\n              rows=\"3\"\n              placeholder=\"Hello {firstName}, your ID is {id}\"\n            ></textarea>\n          </mat-form-field>\n        </div>\n      }\n\n      @case ('custom') {\n        <div class=\"config-section\">\n          <mat-form-field appearance=\"outline\" class=\"full-width\">\n            <mat-label>JavaScript Expression</mat-label>\n            <textarea\n              matInput\n              [(ngModel)]=\"config.expression\"\n              (ngModelChange)=\"onConfigChange()\"\n              rows=\"3\"\n              placeholder=\"fieldName.toUpperCase()\"\n            ></textarea>\n            <mat-hint>Use field names as variables</mat-hint>\n          </mat-form-field>\n        </div>\n      }\n    }\n\n    <!-- Preview Section -->\n    <div class=\"preview-section\">\n      <span class=\"preview-label\">Preview:</span>\n      <div class=\"preview-value\">{{ preview || '(empty)' }}</div>\n    </div>\n  </div>\n\n  <div class=\"popover-actions\">\n    <button mat-button color=\"warn\" (click)=\"onDelete()\" matTooltip=\"Remove this mapping\">\n      <mat-icon>delete</mat-icon>\n      Delete\n    </button>\n    <div class=\"action-spacer\"></div>\n    <button mat-button (click)=\"onClose()\">Cancel</button>\n    <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Apply</button>\n  </div>\n</div>\n\n<!-- Backdrop -->\n<div class=\"popover-backdrop\" (click)=\"onClose()\"></div>\n", styles: [".popover-backdrop{position:fixed;inset:0;background:#0000004d;z-index:999}.transformation-popover{position:fixed;z-index:1000;width:360px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;transform:translate(-50%,-50%);animation:popoverIn .2s ease-out}@keyframes popoverIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.popover-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#f8fafc;border-radius:12px 12px 0 0}.popover-title{font-size:16px;font-weight:600;color:#1e293b}.close-btn{width:32px;height:32px;line-height:32px}.close-btn mat-icon{font-size:20px;width:20px;height:20px}.popover-content{padding:20px;max-height:400px;overflow-y:auto}.mapping-info{background:#f1f5f9;border-radius:8px;padding:12px 16px;margin-bottom:16px}.info-row{display:flex;align-items:center;gap:8px}.info-row+.info-row{margin-top:8px}.info-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;width:60px}.info-value{font-size:14px;color:#1e293b;font-weight:500}.full-width{width:100%}.config-section{margin-top:12px}.config-row{display:flex;gap:12px}.config-row mat-form-field{flex:1}.preview-section{margin-top:16px;padding:12px 16px;background:linear-gradient(135deg,#eff6ff,#f0fdf4);border-radius:8px;border:1px solid #e0e7ff}.preview-label{font-size:11px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}.preview-value{font-size:14px;color:#1e293b;font-family:Monaco,Menlo,monospace;word-break:break-all;min-height:20px}.popover-actions{display:flex;align-items:center;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;border-radius:0 0 12px 12px}.action-spacer{flex:1}::ng-deep .transformation-popover .mat-mdc-form-field{font-size:14px}::ng-deep .transformation-popover .mat-mdc-text-field-wrapper{background:#fff}::ng-deep .transformation-popover .mat-mdc-form-field-subscript-wrapper{font-size:11px}\n"] }]
+                        MatCheckboxModule,
+                        DragDropModule,
+                        ConditionBuilderComponent,
+                    ], template: "<div class=\"transformation-popover\" [ngStyle]=\"getPopoverStyle()\">\r\n  <div class=\"popover-arrow\"></div>\r\n\r\n  <div class=\"popover-header\">\r\n    <span class=\"popover-title\">Transformation</span>\r\n    <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"popover-content\">\r\n    <!-- Source/Target Info -->\r\n    <div class=\"mapping-info\">\r\n      <div class=\"info-row\">\r\n        <span class=\"info-label\">Source:</span>\r\n        <span class=\"info-value\">{{ getSourceFieldNames() }}</span>\r\n      </div>\r\n      <div class=\"info-row\">\r\n        <span class=\"info-label\">Target:</span>\r\n        <span class=\"info-value\">{{ mapping.targetField.name }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Single Step Mode (default, clean UI) -->\r\n    @if (!isMultiStep) {\r\n      <ng-container *ngTemplateOutlet=\"stepConfig; context: { step: steps[0], index: 0, showHeader: false }\"></ng-container>\r\n\r\n      <!-- Preview Section -->\r\n      <div class=\"preview-section\">\r\n        <span class=\"preview-label\">Preview:</span>\r\n        <div class=\"preview-value\">{{ stepPreviews[0] || '(empty)' }}</div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Multi-Step Mode -->\r\n    @if (isMultiStep) {\r\n      <div class=\"steps-container\" cdkDropList (cdkDropListDropped)=\"onStepDrop($event)\">\r\n        @for (step of steps; track $index; let i = $index) {\r\n          <div class=\"step-card\" [class.expanded]=\"isStepExpanded(i)\" cdkDrag>\r\n            <!-- Collapsed View -->\r\n            @if (!isStepExpanded(i)) {\r\n              <div class=\"step-collapsed\" (click)=\"toggleStep(i)\">\r\n                <mat-icon class=\"drag-handle\" cdkDragHandle (click)=\"$event.stopPropagation()\">drag_indicator</mat-icon>\r\n                <div class=\"step-collapsed-header\">\r\n                  <div class=\"step-title-row\">\r\n                    <span class=\"step-number\">Step {{ i + 1 }}: {{ getStepTypeLabel(step.type) }}</span>\r\n                    @if (hasCondition(step)) {\r\n                      <span class=\"condition-badge\" matTooltip=\"{{ getConditionSummary(step) }}\">\r\n                        <mat-icon>filter_alt</mat-icon>\r\n                        if\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                  <div class=\"step-collapsed-actions\">\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"expand-btn\"\r\n                      (click)=\"toggleStep(i); $event.stopPropagation()\"\r\n                      matTooltip=\"Edit step\"\r\n                    >\r\n                      <mat-icon>edit</mat-icon>\r\n                    </button>\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"remove-step-btn\"\r\n                      (click)=\"removeStep(i); $event.stopPropagation()\"\r\n                      matTooltip=\"Remove step\"\r\n                    >\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n                <div class=\"step-collapsed-preview\">\r\n                  <span class=\"step-input\">\"{{ (stepInputs[i] || '') | slice:0:20 }}{{ (stepInputs[i] || '').length > 20 ? '...' : '' }}\"</span>\r\n                  <mat-icon class=\"arrow-icon\">arrow_forward</mat-icon>\r\n                  <span class=\"step-output\">\"{{ (stepPreviews[i] || '') | slice:0:20 }}{{ (stepPreviews[i] || '').length > 20 ? '...' : '' }}\"</span>\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n            <!-- Expanded View -->\r\n            @if (isStepExpanded(i)) {\r\n              <div class=\"step-expanded\">\r\n                <mat-icon class=\"drag-handle\" cdkDragHandle>drag_indicator</mat-icon>\r\n                <div class=\"step-header\">\r\n                  <span class=\"step-number\">Step {{ i + 1 }}</span>\r\n                  <div class=\"step-header-actions\">\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"collapse-btn\"\r\n                      (click)=\"toggleStep(i)\"\r\n                      matTooltip=\"Collapse\"\r\n                    >\r\n                      <mat-icon>expand_less</mat-icon>\r\n                    </button>\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"remove-step-btn\"\r\n                      (click)=\"removeStep(i)\"\r\n                      matTooltip=\"Remove step\"\r\n                    >\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"step-content\">\r\n                  <ng-container *ngTemplateOutlet=\"stepConfig; context: { step: step, index: i, showHeader: false }\"></ng-container>\r\n                </div>\r\n\r\n                <!-- Step Preview -->\r\n                <div class=\"step-preview\">\r\n                  <mat-icon class=\"preview-arrow\">arrow_downward</mat-icon>\r\n                  <span class=\"step-preview-value\">{{ stepPreviews[i] || '(empty)' }}</span>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Final Preview -->\r\n      <div class=\"preview-section final-preview\">\r\n        <span class=\"preview-label\">Final Result:</span>\r\n        <div class=\"preview-value\">{{ finalPreview || '(empty)' }}</div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Add Step Button - Always visible -->\r\n  <div class=\"add-step-section\">\r\n    <button mat-stroked-button class=\"add-step-btn\" (click)=\"addStep()\">\r\n      <mat-icon>add</mat-icon>\r\n      @if (isMultiStep) {\r\n        Add Step\r\n      } @else {\r\n        Add Transformation Step\r\n      }\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"popover-actions\">\r\n    <button mat-button color=\"warn\" (click)=\"onDelete()\" matTooltip=\"Remove this mapping\">\r\n      <mat-icon>delete</mat-icon>\r\n      Delete\r\n    </button>\r\n    <div class=\"action-spacer\"></div>\r\n    <button mat-button (click)=\"onClose()\">Cancel</button>\r\n    <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Apply</button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Backdrop -->\r\n<div class=\"popover-backdrop\" (click)=\"onClose()\"></div>\r\n\r\n<!-- Step Configuration Template -->\r\n<ng-template #stepConfig let-step=\"step\" let-index=\"index\" let-showHeader=\"showHeader\">\r\n  <!-- Transformation Type -->\r\n  <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n    <mat-label>Transformation Type</mat-label>\r\n    <mat-select [(ngModel)]=\"step.type\" (selectionChange)=\"onStepTypeChange(index)\">\r\n      @for (t of availableTransformations; track t.type) {\r\n        <mat-option [value]=\"t.type\">{{ t.label }}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <!-- Type-specific options -->\r\n  @switch (step.type) {\r\n    @case ('concat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Separator</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.separator\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\" \"\r\n          />\r\n          <mat-hint>Join values with this (default: space)</mat-hint>\r\n        </mat-form-field>\r\n        <div class=\"or-divider\">or use template for custom format</div>\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Template</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.template\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            [placeholder]=\"'{0} - {1}'\"\r\n          />\r\n          <mat-hint>Overrides separator if set</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('substring') {\r\n      <div class=\"config-section config-row\">\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Start Index</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.startIndex\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            min=\"0\"\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>End Index</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.endIndex\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('replace') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Search For</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.searchValue\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Replace With</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.replaceValue\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('dateFormat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Output Format</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.outputFormat\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\"YYYY-MM-DD\"\r\n          />\r\n          <mat-hint>YYYY, MM, DD, HH, mm, ss</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('numberFormat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Decimal Places</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.decimalPlaces\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            min=\"0\"\r\n          />\r\n        </mat-form-field>\r\n        <div class=\"config-row\">\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>Prefix</mat-label>\r\n            <input\r\n              matInput\r\n              [(ngModel)]=\"step.prefix\"\r\n              (ngModelChange)=\"onConfigChange()\"\r\n              placeholder=\"$\"\r\n            />\r\n          </mat-form-field>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>Suffix</mat-label>\r\n            <input\r\n              matInput\r\n              [(ngModel)]=\"step.suffix\"\r\n              (ngModelChange)=\"onConfigChange()\"\r\n            />\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @case ('mask') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Pattern</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.pattern\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\"(###) ###-####\"\r\n          />\r\n          <mat-hint># = character from input</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('template') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Template Expression</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"step.template\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            rows=\"3\"\r\n            [placeholder]=\"'Hello {0}, your ID is {1}'\"\r\n          ></textarea>\r\n          @if (index === 0) {\r\n            <mat-hint>Use {{ '{' }}0{{ '}' }}, {{ '{' }}1{{ '}' }}, etc. for source fields</mat-hint>\r\n          } @else {\r\n            <mat-hint>Use {{ '{' }}0{{ '}' }} for the value from previous step</mat-hint>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Condition Section -->\r\n  <div class=\"condition-section\">\r\n    <mat-checkbox\r\n      [checked]=\"hasCondition(step)\"\r\n      (change)=\"toggleCondition(step, $event.checked)\"\r\n      class=\"condition-checkbox\"\r\n    >\r\n      Apply conditionally\r\n    </mat-checkbox>\r\n\r\n    @if (hasCondition(step)) {\r\n      <div class=\"condition-content\">\r\n        <condition-builder\r\n          [condition]=\"step.condition?.root || null\"\r\n          [compact]=\"true\"\r\n          (conditionChange)=\"onConditionChange(step, $event)\"\r\n        ></condition-builder>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.popover-backdrop{position:fixed;inset:0;background:#0000004d;z-index:999}.transformation-popover{position:fixed;z-index:1000;width:420px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;transform:translate(-50%,-50%);animation:popoverIn .2s ease-out}@keyframes popoverIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.popover-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#f8fafc;border-radius:12px 12px 0 0}.popover-title{font-size:16px;font-weight:600;color:#1e293b}.close-btn{width:32px;height:32px;line-height:32px}.close-btn mat-icon{font-size:20px;width:20px;height:20px}.popover-content{padding:20px;max-height:500px;overflow-y:auto}.mapping-info{background:#f1f5f9;border-radius:8px;padding:12px 16px;margin-bottom:16px}.info-row{display:flex;align-items:center;gap:8px}.info-row+.info-row{margin-top:8px}.info-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;width:60px}.info-value{font-size:14px;color:#1e293b;font-weight:500}.full-width{width:100%}.config-section{margin-top:12px}.or-divider{text-align:center;font-size:11px;color:#94a3b8;margin:8px 0}.condition-section{margin-top:16px;padding-top:12px;border-top:1px dashed #e2e8f0}.condition-checkbox{font-size:13px;color:#64748b}.condition-content{margin-top:12px}.config-row{display:flex;gap:12px}.config-row mat-form-field{flex:1}.preview-section{margin-top:16px;padding:12px 16px;background:linear-gradient(135deg,#eff6ff,#f0fdf4);border-radius:8px;border:1px solid #e0e7ff}.preview-label{font-size:11px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}.preview-value{font-size:14px;color:#1e293b;font-family:Monaco,Menlo,monospace;word-break:break-all;min-height:20px}.steps-container{display:flex;flex-direction:column;gap:12px}.step-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;transition:all .2s ease}.step-card.expanded{border-color:#6366f1;border-width:2px;background:#fff}.step-collapsed{display:grid;grid-template-columns:auto 1fr;gap:0 12px;padding:12px;cursor:pointer;transition:background .15s ease}.step-collapsed:hover{background:#f1f5f9}.step-collapsed .drag-handle{grid-row:span 2;align-self:center}.step-collapsed-header{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.step-collapsed-header .step-title-row{display:flex;align-items:center;gap:8px;flex:1}.step-collapsed-header .step-number{flex-shrink:0}.condition-badge{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;background:#fef3c7;border:1px solid #f59e0b;border-radius:4px;font-size:10px;font-weight:600;color:#b45309;cursor:help}.condition-badge mat-icon{font-size:12px;width:12px;height:12px}.step-collapsed-actions{display:flex;align-items:center;gap:4px}.step-collapsed-preview{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;font-family:Monaco,Menlo,monospace}.step-input{color:#64748b;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arrow-icon{font-size:14px;width:14px;height:14px;color:#6366f1}.step-output{color:#059669;font-weight:500;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step-expanded{display:grid;grid-template-columns:auto 1fr;gap:0 12px;padding:12px}.step-expanded .drag-handle{grid-row:1;align-self:center}.step-expanded .step-header,.step-expanded .step-content,.step-expanded .step-preview{grid-column:2}.step-header{display:flex;align-items:center;margin-bottom:12px}.step-header .step-number{flex:1}.step-header-actions{display:flex;align-items:center;gap:4px}.step-number{font-size:12px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:.5px}.expand-btn,.collapse-btn{width:28px;height:28px;line-height:28px}.expand-btn mat-icon,.collapse-btn mat-icon{font-size:18px;width:18px;height:18px;color:#64748b}.expand-btn:hover mat-icon,.collapse-btn:hover mat-icon{color:#6366f1}.remove-step-btn{width:28px;height:28px;line-height:28px}.remove-step-btn mat-icon{font-size:18px;width:18px;height:18px;color:#94a3b8}.remove-step-btn:hover mat-icon{color:#ef4444}.step-preview{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;background:#f1f5f9;border-radius:6px}.preview-arrow{font-size:16px;width:16px;height:16px;color:#6366f1}.step-preview-value{font-size:13px;color:#475569;font-family:Monaco,Menlo,monospace;word-break:break-all;flex:1}.add-step-section{padding:12px 20px;border-top:1px solid #e2e8f0;background:#fafafa}.add-step-btn{width:100%;border-style:dashed;color:#64748b}.add-step-btn mat-icon{font-size:18px;width:18px;height:18px;margin-right:4px}.add-step-btn:hover{border-color:#6366f1;color:#6366f1;background:#f5f3ff}.final-preview{margin-top:16px;background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:2px solid #10b981;border-radius:8px;position:relative}.final-preview .preview-label{color:#059669;font-size:12px;font-weight:700}.final-preview .preview-value{color:#065f46;font-weight:600}.final-preview:before{content:\"\\2713\";position:absolute;right:12px;top:10px;color:#10b981;font-size:16px;font-weight:700}.popover-actions{display:flex;align-items:center;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;border-radius:0 0 12px 12px}.action-spacer{flex:1}::ng-deep .transformation-popover .mat-mdc-form-field{font-size:14px}::ng-deep .transformation-popover .mat-mdc-text-field-wrapper{background:#fff}::ng-deep .transformation-popover .mat-mdc-form-field-subscript-wrapper{font-size:11px}.drag-handle{cursor:grab;color:#94a3b8;font-size:20px;width:20px;height:20px;flex-shrink:0}.drag-handle:hover{color:#6366f1}.drag-handle:active{cursor:grabbing}.step-card.cdk-drag-preview{box-shadow:0 5px 20px #00000040;border-radius:8px;background:#fff}.step-card.cdk-drag-placeholder{opacity:.4;background:#e2e8f0;border:2px dashed #94a3b8}.step-card.cdk-drag-animating{transition:transform .2s ease}.steps-container.cdk-drop-list-dragging .step-card:not(.cdk-drag-placeholder){transition:transform .2s ease}\n"] }]
         }], propDecorators: { mapping: [{
                 type: Input
             }], position: [{
@@ -1332,7 +1989,7 @@ class ArrayFilterModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrayFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ArrayFilterModalComponent, isStandalone: true, selector: "array-filter-modal", inputs: { arrayMapping: "arrayMapping" }, outputs: { save: "save", close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"filter-modal\">\n    <div class=\"modal-header\">\n      <div class=\"header-title\">\n        <mat-icon>filter_list</mat-icon>\n        <span>Array Filter</span>\n      </div>\n      <span class=\"array-path\">{{ arrayMapping.sourceArray.name }}[] &rarr; {{ arrayMapping.targetArray.name }}[]</span>\n      <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"modal-body\">\n      <!-- Filter mode selection -->\n      <div class=\"filter-mode\">\n        <mat-radio-group [value]=\"filterEnabled()\" (change)=\"filterEnabled.set($event.value)\">\n          <mat-radio-button [value]=\"false\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>select_all</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">No filter</span>\n                <span class=\"mode-desc\">Map all records from source to target</span>\n              </div>\n            </div>\n          </mat-radio-button>\n          <mat-radio-button [value]=\"true\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>filter_alt</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">Filter records</span>\n                <span class=\"mode-desc\">Only map records matching conditions</span>\n              </div>\n            </div>\n          </mat-radio-button>\n        </mat-radio-group>\n      </div>\n\n      <!-- Conditions builder (only when filter enabled) -->\n      @if (filterEnabled()) {\n        <mat-divider></mat-divider>\n\n        <div class=\"conditions-section\">\n          <!-- Root group -->\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: rootGroup(), isRoot: true }\"></ng-container>\n        </div>\n      }\n    </div>\n\n    <div class=\"modal-footer\">\n      <button mat-button (click)=\"onClose()\">Cancel</button>\n      <button mat-flat-button color=\"primary\" (click)=\"onSave()\">\n        Apply\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Recursive group template -->\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\" let-parentGroup=\"parentGroup\">\n  <div class=\"filter-group\" [class.root-group]=\"isRoot\" [class.nested-group]=\"!isRoot\">\n    <!-- Group header with logic toggle -->\n    <div class=\"group-header\">\n      <div class=\"logic-toggle\">\n        <span class=\"logic-label\">Match</span>\n        <mat-radio-group [value]=\"group.logic\" (change)=\"onLogicChange(group, $event.value)\">\n          <mat-radio-button value=\"and\">ALL (AND)</mat-radio-button>\n          <mat-radio-button value=\"or\">ANY (OR)</mat-radio-button>\n        </mat-radio-group>\n      </div>\n      @if (!isRoot) {\n        <button mat-icon-button class=\"remove-group-btn\" matTooltip=\"Remove group\" (click)=\"removeItem(parentGroup, group.id)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </div>\n\n    <!-- Group children -->\n    <div class=\"group-children\">\n      @for (item of group.children; track item.id; let i = $index) {\n        <!-- Logic connector between items -->\n        @if (i > 0) {\n          <div class=\"logic-connector\">\n            <span class=\"logic-badge\" [class.and]=\"group.logic === 'and'\" [class.or]=\"group.logic === 'or'\">\n              {{ group.logic | uppercase }}\n            </span>\n          </div>\n        }\n\n        @if (isCondition(item)) {\n          <!-- Condition row -->\n          <div class=\"condition-row\">\n            <div class=\"condition-inputs\">\n              <!-- Field selector -->\n              <mat-form-field appearance=\"outline\" class=\"field-select\">\n                <mat-label>Field</mat-label>\n                <mat-select [value]=\"item.field\" (selectionChange)=\"onFieldChange(item, $event.value)\">\n                  @for (field of availableFields(); track field.path) {\n                    <mat-option [value]=\"field.path\">\n                      {{ field.name }}\n                      <span class=\"field-type\">({{ field.type }})</span>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <!-- Operator selector -->\n              <mat-form-field appearance=\"outline\" class=\"operator-select\">\n                <mat-label>Operator</mat-label>\n                <mat-select [value]=\"item.operator\" (selectionChange)=\"onOperatorChange(item, $event.value)\">\n                  @for (op of getOperatorsForField(item.field); track op.value) {\n                    <mat-option [value]=\"op.value\">{{ op.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <!-- Value input (only if operator needs value) -->\n              @if (operatorNeedsValue(item.operator)) {\n                @if (item.valueType === 'boolean') {\n                  <mat-slide-toggle\n                    [checked]=\"item.value === true\"\n                    (change)=\"onValueChange(item, $event.checked)\"\n                    class=\"bool-toggle\"\n                  >\n                    {{ item.value ? 'true' : 'false' }}\n                  </mat-slide-toggle>\n                } @else if (item.valueType === 'number') {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input\n                      matInput\n                      type=\"number\"\n                      [value]=\"item.value\"\n                      (input)=\"onValueChange(item, $any($event.target).value)\"\n                    />\n                  </mat-form-field>\n                } @else {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input\n                      matInput\n                      type=\"text\"\n                      [value]=\"item.value\"\n                      (input)=\"onValueChange(item, $any($event.target).value)\"\n                    />\n                  </mat-form-field>\n                }\n              }\n\n              <!-- Remove condition button -->\n              <button mat-icon-button class=\"remove-btn\" matTooltip=\"Remove condition\" (click)=\"removeItem(group, item.id)\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        } @else if (isGroup(item)) {\n          <!-- Nested group -->\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: item, isRoot: false, parentGroup: group }\"></ng-container>\n        }\n      }\n\n      <!-- Empty state -->\n      @if (group.children.length === 0) {\n        <div class=\"empty-group\">\n          <mat-icon>info_outline</mat-icon>\n          <span>No conditions. Add a condition or group.</span>\n        </div>\n      }\n    </div>\n\n    <!-- Group actions -->\n    <div class=\"group-actions\">\n      <button mat-stroked-button class=\"add-condition-btn\" (click)=\"addCondition(group)\">\n        <mat-icon>add</mat-icon>\n        Add Condition\n      </button>\n      <button mat-stroked-button class=\"add-group-btn\" (click)=\"addGroup(group)\">\n        <mat-icon>folder_open</mat-icon>\n        Add Group\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#0000004d;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.filter-modal{position:relative;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;width:600px;max-width:100%;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;flex-shrink:0}.modal-header .header-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}.modal-header .array-path{flex:1;font-size:13px;opacity:.9;text-align:right;margin-right:8px}.modal-header .close-btn{color:#fff;opacity:.9}.modal-header .close-btn:hover{opacity:1}.modal-body{flex:1;overflow-y:auto;padding:20px;min-height:0}.filter-mode mat-radio-group{display:flex;flex-direction:column;gap:12px}.filter-mode .mode-option ::ng-deep .mdc-form-field{align-items:flex-start}.filter-mode .mode-option ::ng-deep .mdc-radio{margin-top:4px}.filter-mode .mode-content{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;transition:all .2s ease;cursor:pointer}.filter-mode .mode-content:hover{background:#f1f5f9;border-color:#cbd5e1}.filter-mode .mode-content mat-icon{color:#64748b;margin-top:2px}.filter-mode .mode-text{display:flex;flex-direction:column;gap:2px}.filter-mode .mode-label{font-size:14px;font-weight:500;color:#1e293b}.filter-mode .mode-desc{font-size:12px;color:#64748b}.filter-mode mat-radio-button.mat-mdc-radio-checked .mode-content{background:#fffbeb;border-color:#f59e0b}.filter-mode mat-radio-button.mat-mdc-radio-checked .mode-content mat-icon{color:#f59e0b}mat-divider{margin:20px 0}.conditions-section{display:flex;flex-direction:column;gap:16px}.filter-group{border-radius:8px}.filter-group.root-group{background:#f8fafc;border:1px solid #e2e8f0;padding:16px}.filter-group.nested-group{background:#fff;border:2px dashed #cbd5e1;padding:12px;margin-top:8px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e2e8f0}.logic-toggle{display:flex;align-items:center;gap:12px}.logic-toggle .logic-label{font-size:13px;font-weight:500;color:#475569}.logic-toggle mat-radio-group{display:flex;gap:12px}.logic-toggle mat-radio-button{font-size:12px}.logic-toggle mat-radio-button ::ng-deep .mdc-label{font-size:12px}.remove-group-btn{color:#94a3b8}.remove-group-btn:hover{color:#ef4444}.group-children{display:flex;flex-direction:column}.logic-connector{display:flex;align-items:center;justify-content:center;padding:8px 0}.logic-connector .logic-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:12px;letter-spacing:.5px}.logic-connector .logic-badge.and{background:#dbeafe;color:#1d4ed8}.logic-connector .logic-badge.or{background:#fef3c7;color:#b45309}.condition-row .condition-inputs{display:flex;align-items:flex-start;gap:8px;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px}.condition-row .condition-inputs .field-select{flex:1;min-width:120px}.condition-row .condition-inputs .operator-select{flex:1;min-width:130px}.condition-row .condition-inputs .value-input{flex:1;min-width:100px}.condition-row .condition-inputs .bool-toggle{padding-top:12px;min-width:80px}.condition-row .condition-inputs .remove-btn{color:#94a3b8;align-self:center}.condition-row .condition-inputs .remove-btn:hover{color:#ef4444}.condition-row .condition-inputs mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.nested-group .condition-row .condition-inputs{background:#f8fafc}.field-type{font-size:11px;color:#94a3b8;margin-left:4px}.empty-group{display:flex;align-items:center;gap:8px;padding:16px;background:#fef3c7;border-radius:8px;color:#92400e;font-size:13px}.empty-group mat-icon{font-size:20px;width:20px;height:20px}.group-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.add-condition-btn{color:#f59e0b;border-color:#f59e0b;font-size:12px}.add-condition-btn mat-icon{font-size:16px;width:16px;height:16px}.add-group-btn{color:#6366f1;border-color:#6366f1;font-size:12px}.add-group-btn mat-icon{font-size:16px;width:16px;height:16px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ArrayFilterModalComponent, isStandalone: true, selector: "array-filter-modal", inputs: { arrayMapping: "arrayMapping" }, outputs: { save: "save", close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"filter-modal\">\n    <div class=\"modal-header\">\n      <div class=\"header-title\">\n        <mat-icon>filter_list</mat-icon>\n        <span>Array Filter</span>\n      </div>\n      <span class=\"array-path\">{{ arrayMapping.sourceArray.name }}[] &rarr; {{ arrayMapping.targetArray.name }}[]</span>\n      <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"modal-body\">\n      <!-- Filter mode selection -->\n      <div class=\"filter-mode\">\n        <mat-radio-group [value]=\"filterEnabled()\" (change)=\"filterEnabled.set($event.value)\">\n          <mat-radio-button [value]=\"false\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>select_all</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">No filter</span>\n                <span class=\"mode-desc\">Map all records from source to target</span>\n              </div>\n            </div>\n          </mat-radio-button>\n          <mat-radio-button [value]=\"true\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>filter_alt</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">Filter records</span>\n                <span class=\"mode-desc\">Only map records matching conditions</span>\n              </div>\n            </div>\n          </mat-radio-button>\n        </mat-radio-group>\n      </div>\n\n      <!-- Conditions builder (only when filter enabled) -->\n      @if (filterEnabled()) {\n        <mat-divider></mat-divider>\n\n        <div class=\"conditions-section\">\n          <!-- Root group -->\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: rootGroup(), isRoot: true }\"></ng-container>\n        </div>\n      }\n    </div>\n\n    <div class=\"modal-footer\">\n      <button mat-button (click)=\"onClose()\">Cancel</button>\n      <button mat-flat-button color=\"primary\" (click)=\"onSave()\">\n        Apply\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Recursive group template -->\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\" let-parentGroup=\"parentGroup\">\n  <div class=\"filter-group\" [class.root-group]=\"isRoot\" [class.nested-group]=\"!isRoot\">\n    <!-- Group header with logic toggle -->\n    <div class=\"group-header\">\n      <div class=\"logic-toggle\">\n        <span class=\"logic-label\">Match</span>\n        <mat-radio-group [value]=\"group.logic\" (change)=\"onLogicChange(group, $event.value)\">\n          <mat-radio-button value=\"and\">ALL (AND)</mat-radio-button>\n          <mat-radio-button value=\"or\">ANY (OR)</mat-radio-button>\n        </mat-radio-group>\n      </div>\n      @if (!isRoot) {\n        <button mat-icon-button class=\"remove-group-btn\" matTooltip=\"Remove group\" (click)=\"removeItem(parentGroup, group.id)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </div>\n\n    <!-- Group children -->\n    <div class=\"group-children\">\n      @for (item of group.children; track item.id; let i = $index) {\n        <!-- Logic connector between items -->\n        @if (i > 0) {\n          <div class=\"logic-connector\">\n            <span class=\"logic-badge\" [class.and]=\"group.logic === 'and'\" [class.or]=\"group.logic === 'or'\">\n              {{ group.logic | uppercase }}\n            </span>\n          </div>\n        }\n\n        @if (isCondition(item)) {\n          <!-- Condition row -->\n          <div class=\"condition-row\">\n            <div class=\"condition-inputs\">\n              <!-- Field selector -->\n              <mat-form-field appearance=\"outline\" class=\"field-select\">\n                <mat-label>Field</mat-label>\n                <mat-select [value]=\"item.field\" (selectionChange)=\"onFieldChange(item, $event.value)\">\n                  @for (field of availableFields(); track field.path) {\n                    <mat-option [value]=\"field.path\">\n                      {{ field.name }}\n                      <span class=\"field-type\">({{ field.type }})</span>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <!-- Operator selector -->\n              <mat-form-field appearance=\"outline\" class=\"operator-select\">\n                <mat-label>Operator</mat-label>\n                <mat-select [value]=\"item.operator\" (selectionChange)=\"onOperatorChange(item, $event.value)\">\n                  @for (op of getOperatorsForField(item.field); track op.value) {\n                    <mat-option [value]=\"op.value\">{{ op.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <!-- Value input (only if operator needs value) -->\n              @if (operatorNeedsValue(item.operator)) {\n                @if (item.valueType === 'boolean') {\n                  <mat-slide-toggle\n                    [checked]=\"item.value === true\"\n                    (change)=\"onValueChange(item, $event.checked)\"\n                    class=\"bool-toggle\"\n                  >\n                    {{ item.value ? 'true' : 'false' }}\n                  </mat-slide-toggle>\n                } @else if (item.valueType === 'number') {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input\n                      matInput\n                      type=\"number\"\n                      [value]=\"item.value\"\n                      (input)=\"onValueChange(item, $any($event.target).value)\"\n                    />\n                  </mat-form-field>\n                } @else {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input\n                      matInput\n                      type=\"text\"\n                      [value]=\"item.value\"\n                      (input)=\"onValueChange(item, $any($event.target).value)\"\n                    />\n                  </mat-form-field>\n                }\n              }\n\n              <!-- Remove condition button -->\n              <button mat-icon-button class=\"remove-btn\" matTooltip=\"Remove condition\" (click)=\"removeItem(group, item.id)\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        } @else if (isGroup(item)) {\n          <!-- Nested group -->\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: item, isRoot: false, parentGroup: group }\"></ng-container>\n        }\n      }\n\n      <!-- Empty state -->\n      @if (group.children.length === 0) {\n        <div class=\"empty-group\">\n          <mat-icon>info_outline</mat-icon>\n          <span>No conditions. Add a condition or group.</span>\n        </div>\n      }\n    </div>\n\n    <!-- Group actions -->\n    <div class=\"group-actions\">\n      <button mat-stroked-button class=\"add-condition-btn\" (click)=\"addCondition(group)\">\n        <mat-icon>add</mat-icon>\n        Add Condition\n      </button>\n      <button mat-stroked-button class=\"add-group-btn\" (click)=\"addGroup(group)\">\n        <mat-icon>folder_open</mat-icon>\n        Add Group\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#0000004d;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.filter-modal{position:relative;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;width:600px;max-width:100%;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;flex-shrink:0}.modal-header .header-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}.modal-header .array-path{flex:1;font-size:13px;opacity:.9;text-align:right;margin-right:8px}.modal-header .close-btn{color:#fff;opacity:.9}.modal-header .close-btn:hover{opacity:1}.modal-body{flex:1;overflow-y:auto;padding:20px;min-height:0}.filter-mode mat-radio-group{display:flex;flex-direction:column;gap:12px}.filter-mode .mode-option ::ng-deep .mdc-form-field{align-items:flex-start}.filter-mode .mode-option ::ng-deep .mdc-radio{margin-top:4px}.filter-mode .mode-content{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;transition:all .2s ease;cursor:pointer}.filter-mode .mode-content:hover{background:#f1f5f9;border-color:#cbd5e1}.filter-mode .mode-content mat-icon{color:#64748b;margin-top:2px}.filter-mode .mode-text{display:flex;flex-direction:column;gap:2px}.filter-mode .mode-label{font-size:14px;font-weight:500;color:#1e293b}.filter-mode .mode-desc{font-size:12px;color:#64748b}.filter-mode mat-radio-button.mat-mdc-radio-checked .mode-content{background:#fffbeb;border-color:#f59e0b}.filter-mode mat-radio-button.mat-mdc-radio-checked .mode-content mat-icon{color:#f59e0b}mat-divider{margin:20px 0}.conditions-section{display:flex;flex-direction:column;gap:16px}.filter-group{border-radius:8px}.filter-group.root-group{background:#f8fafc;border:1px solid #e2e8f0;padding:16px}.filter-group.nested-group{background:#fff;border:2px dashed #cbd5e1;padding:12px;margin-top:8px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e2e8f0}.logic-toggle{display:flex;align-items:center;gap:12px}.logic-toggle .logic-label{font-size:13px;font-weight:500;color:#475569}.logic-toggle mat-radio-group{display:flex;gap:12px}.logic-toggle mat-radio-button{font-size:12px}.logic-toggle mat-radio-button ::ng-deep .mdc-label{font-size:12px}.remove-group-btn{color:#94a3b8}.remove-group-btn:hover{color:#ef4444}.group-children{display:flex;flex-direction:column}.logic-connector{display:flex;align-items:center;justify-content:center;padding:8px 0}.logic-connector .logic-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:12px;letter-spacing:.5px}.logic-connector .logic-badge.and{background:#dbeafe;color:#1d4ed8}.logic-connector .logic-badge.or{background:#fef3c7;color:#b45309}.condition-row .condition-inputs{display:flex;align-items:flex-start;gap:8px;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px}.condition-row .condition-inputs .field-select{flex:1;min-width:120px}.condition-row .condition-inputs .operator-select{flex:1;min-width:130px}.condition-row .condition-inputs .value-input{flex:1;min-width:100px}.condition-row .condition-inputs .bool-toggle{padding-top:12px;min-width:80px}.condition-row .condition-inputs .remove-btn{color:#94a3b8;align-self:center}.condition-row .condition-inputs .remove-btn:hover{color:#ef4444}.condition-row .condition-inputs mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.nested-group .condition-row .condition-inputs{background:#f8fafc}.field-type{font-size:11px;color:#94a3b8;margin-left:4px}.empty-group{display:flex;align-items:center;gap:8px;padding:16px;background:#fef3c7;border-radius:8px;color:#92400e;font-size:13px}.empty-group mat-icon{font-size:20px;width:20px;height:20px}.group-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.add-condition-btn{color:#f59e0b;border-color:#f59e0b;font-size:12px}.add-condition-btn mat-icon{font-size:16px;width:16px;height:16px}.add-group-btn{color:#6366f1;border-color:#6366f1;font-size:12px}.add-group-btn mat-icon{font-size:16px;width:16px;height:16px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrayFilterModalComponent, decorators: [{
             type: Component,
@@ -1536,7 +2193,7 @@ class ArraySelectorModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArraySelectorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ArraySelectorModalComponent, isStandalone: true, selector: "array-selector-modal", inputs: { mapping: "mapping" }, outputs: { save: "save", close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"selector-modal\">\n    <div class=\"modal-header\">\n      <div class=\"header-title\">\n        <mat-icon>swap_horiz</mat-icon>\n        <span>Array to Object</span>\n      </div>\n      <span class=\"mapping-path\">{{ mapping.sourceArray.name }}[] &rarr; {{ mapping.targetObject.name }}</span>\n      <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"modal-body\">\n      <p class=\"description\">\n        Select which item from the array should be mapped to the target object.\n      </p>\n\n      <!-- Selection mode -->\n      <div class=\"selection-mode\">\n        <mat-radio-group [value]=\"selectionMode()\" (change)=\"selectionMode.set($event.value)\">\n          <mat-radio-button value=\"first\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>first_page</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">First item</span>\n                <span class=\"mode-desc\">Use the first item in the array</span>\n              </div>\n            </div>\n          </mat-radio-button>\n\n          <mat-radio-button value=\"last\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>last_page</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">Last item</span>\n                <span class=\"mode-desc\">Use the last item in the array</span>\n              </div>\n            </div>\n          </mat-radio-button>\n\n          <mat-radio-button value=\"condition\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>filter_alt</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">First matching condition</span>\n                <span class=\"mode-desc\">Use the first item that matches the condition</span>\n              </div>\n            </div>\n          </mat-radio-button>\n        </mat-radio-group>\n      </div>\n\n      <!-- Condition builder (only when condition mode selected) -->\n      @if (selectionMode() === 'condition') {\n        <mat-divider></mat-divider>\n\n        <div class=\"conditions-section\">\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: conditionGroup(), isRoot: true }\"></ng-container>\n        </div>\n      }\n    </div>\n\n    <div class=\"modal-footer\">\n      <button mat-button (click)=\"onClose()\">Cancel</button>\n      <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Apply</button>\n    </div>\n  </div>\n</div>\n\n<!-- Recursive group template -->\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\" let-parentGroup=\"parentGroup\">\n  <div class=\"filter-group\" [class.root-group]=\"isRoot\" [class.nested-group]=\"!isRoot\">\n    <div class=\"group-header\">\n      <div class=\"logic-toggle\">\n        <span class=\"logic-label\">Match</span>\n        <mat-radio-group [value]=\"group.logic\" (change)=\"onLogicChange(group, $event.value)\">\n          <mat-radio-button value=\"and\">ALL (AND)</mat-radio-button>\n          <mat-radio-button value=\"or\">ANY (OR)</mat-radio-button>\n        </mat-radio-group>\n      </div>\n      @if (!isRoot) {\n        <button mat-icon-button class=\"remove-group-btn\" matTooltip=\"Remove group\" (click)=\"removeItem(parentGroup, group.id)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </div>\n\n    <div class=\"group-children\">\n      @for (item of group.children; track item.id; let i = $index) {\n        @if (i > 0) {\n          <div class=\"logic-connector\">\n            <span class=\"logic-badge\" [class.and]=\"group.logic === 'and'\" [class.or]=\"group.logic === 'or'\">\n              {{ group.logic | uppercase }}\n            </span>\n          </div>\n        }\n\n        @if (isCondition(item)) {\n          <div class=\"condition-row\">\n            <div class=\"condition-inputs\">\n              <mat-form-field appearance=\"outline\" class=\"field-select\">\n                <mat-label>Field</mat-label>\n                <mat-select [value]=\"item.field\" (selectionChange)=\"onFieldChange(item, $event.value)\">\n                  @for (field of availableFields(); track field.path) {\n                    <mat-option [value]=\"field.path\">\n                      {{ field.name }}\n                      <span class=\"field-type\">({{ field.type }})</span>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <mat-form-field appearance=\"outline\" class=\"operator-select\">\n                <mat-label>Operator</mat-label>\n                <mat-select [value]=\"item.operator\" (selectionChange)=\"onOperatorChange(item, $event.value)\">\n                  @for (op of getOperatorsForField(item.field); track op.value) {\n                    <mat-option [value]=\"op.value\">{{ op.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              @if (operatorNeedsValue(item.operator)) {\n                @if (item.valueType === 'boolean') {\n                  <mat-slide-toggle\n                    [checked]=\"item.value === true\"\n                    (change)=\"onValueChange(item, $event.checked)\"\n                    class=\"bool-toggle\"\n                  >\n                    {{ item.value ? 'true' : 'false' }}\n                  </mat-slide-toggle>\n                } @else if (item.valueType === 'number') {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input matInput type=\"number\" [value]=\"item.value\" (input)=\"onValueChange(item, $any($event.target).value)\" />\n                  </mat-form-field>\n                } @else {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input matInput type=\"text\" [value]=\"item.value\" (input)=\"onValueChange(item, $any($event.target).value)\" />\n                  </mat-form-field>\n                }\n              }\n\n              <button mat-icon-button class=\"remove-btn\" matTooltip=\"Remove condition\" (click)=\"removeItem(group, item.id)\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        } @else if (isGroup(item)) {\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: item, isRoot: false, parentGroup: group }\"></ng-container>\n        }\n      }\n\n      @if (group.children.length === 0) {\n        <div class=\"empty-group\">\n          <mat-icon>info_outline</mat-icon>\n          <span>No conditions. Add a condition to filter.</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"group-actions\">\n      <button mat-stroked-button class=\"add-condition-btn\" (click)=\"addCondition(group)\">\n        <mat-icon>add</mat-icon>\n        Add Condition\n      </button>\n      <button mat-stroked-button class=\"add-group-btn\" (click)=\"addGroup(group)\">\n        <mat-icon>folder_open</mat-icon>\n        Add Group\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#0000004d;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.selector-modal{position:relative;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;width:580px;max-width:100%;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;flex-shrink:0}.modal-header .header-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}.modal-header .mapping-path{flex:1;font-size:13px;opacity:.9;text-align:right;margin-right:8px}.modal-header .close-btn{color:#fff;opacity:.9}.modal-header .close-btn:hover{opacity:1}.modal-body{flex:1;overflow-y:auto;padding:20px;min-height:0}.description{font-size:14px;color:#64748b;margin:0 0 16px}.selection-mode mat-radio-group{display:flex;flex-direction:column;gap:12px}.selection-mode .mode-option ::ng-deep .mdc-form-field{align-items:flex-start}.selection-mode .mode-option ::ng-deep .mdc-radio{margin-top:4px}.selection-mode .mode-content{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;transition:all .2s ease;cursor:pointer}.selection-mode .mode-content:hover{background:#f1f5f9;border-color:#cbd5e1}.selection-mode .mode-content mat-icon{color:#64748b;margin-top:2px}.selection-mode .mode-text{display:flex;flex-direction:column;gap:2px}.selection-mode .mode-label{font-size:14px;font-weight:500;color:#1e293b}.selection-mode .mode-desc{font-size:12px;color:#64748b}.selection-mode mat-radio-button.mat-mdc-radio-checked .mode-content{background:#f5f3ff;border-color:#8b5cf6}.selection-mode mat-radio-button.mat-mdc-radio-checked .mode-content mat-icon{color:#8b5cf6}mat-divider{margin:20px 0}.conditions-section{display:flex;flex-direction:column;gap:16px}.filter-group{border-radius:8px}.filter-group.root-group{background:#f8fafc;border:1px solid #e2e8f0;padding:16px}.filter-group.nested-group{background:#fff;border:2px dashed #cbd5e1;padding:12px;margin-top:8px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e2e8f0}.logic-toggle{display:flex;align-items:center;gap:12px}.logic-toggle .logic-label{font-size:13px;font-weight:500;color:#475569}.logic-toggle mat-radio-group{display:flex;gap:12px}.logic-toggle mat-radio-button{font-size:12px}.logic-toggle mat-radio-button ::ng-deep .mdc-label{font-size:12px}.remove-group-btn{color:#94a3b8}.remove-group-btn:hover{color:#ef4444}.group-children{display:flex;flex-direction:column}.logic-connector{display:flex;align-items:center;justify-content:center;padding:8px 0}.logic-connector .logic-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:12px;letter-spacing:.5px}.logic-connector .logic-badge.and{background:#dbeafe;color:#1d4ed8}.logic-connector .logic-badge.or{background:#fef3c7;color:#b45309}.condition-row .condition-inputs{display:flex;align-items:flex-start;gap:8px;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px}.condition-row .condition-inputs .field-select{flex:1;min-width:120px}.condition-row .condition-inputs .operator-select{flex:1;min-width:130px}.condition-row .condition-inputs .value-input{flex:1;min-width:100px}.condition-row .condition-inputs .bool-toggle{padding-top:12px;min-width:80px}.condition-row .condition-inputs .remove-btn{color:#94a3b8;align-self:center}.condition-row .condition-inputs .remove-btn:hover{color:#ef4444}.condition-row .condition-inputs mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.nested-group .condition-row .condition-inputs{background:#f8fafc}.field-type{font-size:11px;color:#94a3b8;margin-left:4px}.empty-group{display:flex;align-items:center;gap:8px;padding:16px;background:#fef3c7;border-radius:8px;color:#92400e;font-size:13px}.empty-group mat-icon{font-size:20px;width:20px;height:20px}.group-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.add-condition-btn{color:#8b5cf6;border-color:#8b5cf6;font-size:12px}.add-condition-btn mat-icon{font-size:16px;width:16px;height:16px}.add-group-btn{color:#6366f1;border-color:#6366f1;font-size:12px}.add-group-btn mat-icon{font-size:16px;width:16px;height:16px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ArraySelectorModalComponent, isStandalone: true, selector: "array-selector-modal", inputs: { mapping: "mapping" }, outputs: { save: "save", close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"selector-modal\">\n    <div class=\"modal-header\">\n      <div class=\"header-title\">\n        <mat-icon>swap_horiz</mat-icon>\n        <span>Array to Object</span>\n      </div>\n      <span class=\"mapping-path\">{{ mapping.sourceArray.name }}[] &rarr; {{ mapping.targetObject.name }}</span>\n      <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"modal-body\">\n      <p class=\"description\">\n        Select which item from the array should be mapped to the target object.\n      </p>\n\n      <!-- Selection mode -->\n      <div class=\"selection-mode\">\n        <mat-radio-group [value]=\"selectionMode()\" (change)=\"selectionMode.set($event.value)\">\n          <mat-radio-button value=\"first\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>first_page</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">First item</span>\n                <span class=\"mode-desc\">Use the first item in the array</span>\n              </div>\n            </div>\n          </mat-radio-button>\n\n          <mat-radio-button value=\"last\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>last_page</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">Last item</span>\n                <span class=\"mode-desc\">Use the last item in the array</span>\n              </div>\n            </div>\n          </mat-radio-button>\n\n          <mat-radio-button value=\"condition\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>filter_alt</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">First matching condition</span>\n                <span class=\"mode-desc\">Use the first item that matches the condition</span>\n              </div>\n            </div>\n          </mat-radio-button>\n        </mat-radio-group>\n      </div>\n\n      <!-- Condition builder (only when condition mode selected) -->\n      @if (selectionMode() === 'condition') {\n        <mat-divider></mat-divider>\n\n        <div class=\"conditions-section\">\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: conditionGroup(), isRoot: true }\"></ng-container>\n        </div>\n      }\n    </div>\n\n    <div class=\"modal-footer\">\n      <button mat-button (click)=\"onClose()\">Cancel</button>\n      <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Apply</button>\n    </div>\n  </div>\n</div>\n\n<!-- Recursive group template -->\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\" let-parentGroup=\"parentGroup\">\n  <div class=\"filter-group\" [class.root-group]=\"isRoot\" [class.nested-group]=\"!isRoot\">\n    <div class=\"group-header\">\n      <div class=\"logic-toggle\">\n        <span class=\"logic-label\">Match</span>\n        <mat-radio-group [value]=\"group.logic\" (change)=\"onLogicChange(group, $event.value)\">\n          <mat-radio-button value=\"and\">ALL (AND)</mat-radio-button>\n          <mat-radio-button value=\"or\">ANY (OR)</mat-radio-button>\n        </mat-radio-group>\n      </div>\n      @if (!isRoot) {\n        <button mat-icon-button class=\"remove-group-btn\" matTooltip=\"Remove group\" (click)=\"removeItem(parentGroup, group.id)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </div>\n\n    <div class=\"group-children\">\n      @for (item of group.children; track item.id; let i = $index) {\n        @if (i > 0) {\n          <div class=\"logic-connector\">\n            <span class=\"logic-badge\" [class.and]=\"group.logic === 'and'\" [class.or]=\"group.logic === 'or'\">\n              {{ group.logic | uppercase }}\n            </span>\n          </div>\n        }\n\n        @if (isCondition(item)) {\n          <div class=\"condition-row\">\n            <div class=\"condition-inputs\">\n              <mat-form-field appearance=\"outline\" class=\"field-select\">\n                <mat-label>Field</mat-label>\n                <mat-select [value]=\"item.field\" (selectionChange)=\"onFieldChange(item, $event.value)\">\n                  @for (field of availableFields(); track field.path) {\n                    <mat-option [value]=\"field.path\">\n                      {{ field.name }}\n                      <span class=\"field-type\">({{ field.type }})</span>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <mat-form-field appearance=\"outline\" class=\"operator-select\">\n                <mat-label>Operator</mat-label>\n                <mat-select [value]=\"item.operator\" (selectionChange)=\"onOperatorChange(item, $event.value)\">\n                  @for (op of getOperatorsForField(item.field); track op.value) {\n                    <mat-option [value]=\"op.value\">{{ op.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              @if (operatorNeedsValue(item.operator)) {\n                @if (item.valueType === 'boolean') {\n                  <mat-slide-toggle\n                    [checked]=\"item.value === true\"\n                    (change)=\"onValueChange(item, $event.checked)\"\n                    class=\"bool-toggle\"\n                  >\n                    {{ item.value ? 'true' : 'false' }}\n                  </mat-slide-toggle>\n                } @else if (item.valueType === 'number') {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input matInput type=\"number\" [value]=\"item.value\" (input)=\"onValueChange(item, $any($event.target).value)\" />\n                  </mat-form-field>\n                } @else {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input matInput type=\"text\" [value]=\"item.value\" (input)=\"onValueChange(item, $any($event.target).value)\" />\n                  </mat-form-field>\n                }\n              }\n\n              <button mat-icon-button class=\"remove-btn\" matTooltip=\"Remove condition\" (click)=\"removeItem(group, item.id)\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        } @else if (isGroup(item)) {\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: item, isRoot: false, parentGroup: group }\"></ng-container>\n        }\n      }\n\n      @if (group.children.length === 0) {\n        <div class=\"empty-group\">\n          <mat-icon>info_outline</mat-icon>\n          <span>No conditions. Add a condition to filter.</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"group-actions\">\n      <button mat-stroked-button class=\"add-condition-btn\" (click)=\"addCondition(group)\">\n        <mat-icon>add</mat-icon>\n        Add Condition\n      </button>\n      <button mat-stroked-button class=\"add-group-btn\" (click)=\"addGroup(group)\">\n        <mat-icon>folder_open</mat-icon>\n        Add Group\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#0000004d;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.selector-modal{position:relative;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;width:580px;max-width:100%;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;flex-shrink:0}.modal-header .header-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}.modal-header .mapping-path{flex:1;font-size:13px;opacity:.9;text-align:right;margin-right:8px}.modal-header .close-btn{color:#fff;opacity:.9}.modal-header .close-btn:hover{opacity:1}.modal-body{flex:1;overflow-y:auto;padding:20px;min-height:0}.description{font-size:14px;color:#64748b;margin:0 0 16px}.selection-mode mat-radio-group{display:flex;flex-direction:column;gap:12px}.selection-mode .mode-option ::ng-deep .mdc-form-field{align-items:flex-start}.selection-mode .mode-option ::ng-deep .mdc-radio{margin-top:4px}.selection-mode .mode-content{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;transition:all .2s ease;cursor:pointer}.selection-mode .mode-content:hover{background:#f1f5f9;border-color:#cbd5e1}.selection-mode .mode-content mat-icon{color:#64748b;margin-top:2px}.selection-mode .mode-text{display:flex;flex-direction:column;gap:2px}.selection-mode .mode-label{font-size:14px;font-weight:500;color:#1e293b}.selection-mode .mode-desc{font-size:12px;color:#64748b}.selection-mode mat-radio-button.mat-mdc-radio-checked .mode-content{background:#f5f3ff;border-color:#8b5cf6}.selection-mode mat-radio-button.mat-mdc-radio-checked .mode-content mat-icon{color:#8b5cf6}mat-divider{margin:20px 0}.conditions-section{display:flex;flex-direction:column;gap:16px}.filter-group{border-radius:8px}.filter-group.root-group{background:#f8fafc;border:1px solid #e2e8f0;padding:16px}.filter-group.nested-group{background:#fff;border:2px dashed #cbd5e1;padding:12px;margin-top:8px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e2e8f0}.logic-toggle{display:flex;align-items:center;gap:12px}.logic-toggle .logic-label{font-size:13px;font-weight:500;color:#475569}.logic-toggle mat-radio-group{display:flex;gap:12px}.logic-toggle mat-radio-button{font-size:12px}.logic-toggle mat-radio-button ::ng-deep .mdc-label{font-size:12px}.remove-group-btn{color:#94a3b8}.remove-group-btn:hover{color:#ef4444}.group-children{display:flex;flex-direction:column}.logic-connector{display:flex;align-items:center;justify-content:center;padding:8px 0}.logic-connector .logic-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:12px;letter-spacing:.5px}.logic-connector .logic-badge.and{background:#dbeafe;color:#1d4ed8}.logic-connector .logic-badge.or{background:#fef3c7;color:#b45309}.condition-row .condition-inputs{display:flex;align-items:flex-start;gap:8px;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px}.condition-row .condition-inputs .field-select{flex:1;min-width:120px}.condition-row .condition-inputs .operator-select{flex:1;min-width:130px}.condition-row .condition-inputs .value-input{flex:1;min-width:100px}.condition-row .condition-inputs .bool-toggle{padding-top:12px;min-width:80px}.condition-row .condition-inputs .remove-btn{color:#94a3b8;align-self:center}.condition-row .condition-inputs .remove-btn:hover{color:#ef4444}.condition-row .condition-inputs mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.nested-group .condition-row .condition-inputs{background:#f8fafc}.field-type{font-size:11px;color:#94a3b8;margin-left:4px}.empty-group{display:flex;align-items:center;gap:8px;padding:16px;background:#fef3c7;border-radius:8px;color:#92400e;font-size:13px}.empty-group mat-icon{font-size:20px;width:20px;height:20px}.group-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.add-condition-btn{color:#8b5cf6;border-color:#8b5cf6;font-size:12px}.add-condition-btn mat-icon{font-size:16px;width:16px;height:16px}.add-group-btn{color:#6366f1;border-color:#6366f1;font-size:12px}.add-group-btn mat-icon{font-size:16px;width:16px;height:16px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArraySelectorModalComponent, decorators: [{
             type: Component,
@@ -1626,7 +2283,7 @@ class DefaultValuePopoverComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultValuePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DefaultValuePopoverComponent, isStandalone: true, selector: "default-value-popover", inputs: { field: "field", existingValue: "existingValue", position: "position" }, outputs: { save: "save", delete: "delete", close: "close" }, ngImport: i0, template: "<div class=\"popover-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"popover-container\">\n    <div class=\"popover-header\">\n      <div class=\"header-title\">\n        <mat-icon>edit</mat-icon>\n        <span>Default Value</span>\n      </div>\n      <button mat-icon-button (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"popover-content\">\n      <div class=\"field-info\">\n        <span class=\"field-name\">{{ field.name }}</span>\n        <span class=\"field-type\">{{ fieldType }}</span>\n      </div>\n\n      <!-- String input -->\n      @if (fieldType === 'string') {\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <mat-label>Default Value</mat-label>\n          <input matInput [(ngModel)]=\"stringValue\" placeholder=\"Enter default value\">\n        </mat-form-field>\n      }\n\n      <!-- Number input -->\n      @if (fieldType === 'number') {\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <mat-label>Default Value</mat-label>\n          <input matInput type=\"number\" [(ngModel)]=\"numberValue\" placeholder=\"Enter number\">\n        </mat-form-field>\n      }\n\n      <!-- Boolean input -->\n      @if (fieldType === 'boolean') {\n        <div class=\"boolean-input\">\n          <mat-slide-toggle [(ngModel)]=\"booleanValue\">\n            {{ booleanValue ? 'True' : 'False' }}\n          </mat-slide-toggle>\n        </div>\n      }\n\n      <!-- Date input -->\n      @if (fieldType === 'date') {\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <mat-label>Default Date</mat-label>\n          <input matInput [matDatepicker]=\"picker\" [(ngModel)]=\"dateValue\">\n          <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n          <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n      }\n    </div>\n\n    <div class=\"popover-actions\">\n      @if (existingValue) {\n        <button mat-button color=\"warn\" (click)=\"onDelete()\">\n          <mat-icon>delete</mat-icon>\n          Remove\n        </button>\n      }\n      <span class=\"spacer\"></span>\n      <button mat-button (click)=\"onClose()\">Cancel</button>\n      <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n</div>\n", styles: [".popover-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000004d;z-index:1000;display:flex;align-items:center;justify-content:center}.popover-container{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;min-width:320px;max-width:400px;overflow:hidden}.popover-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(135deg,#10b981,#059669);color:#fff}.popover-header .header-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}.popover-header .header-title mat-icon{font-size:20px;width:20px;height:20px}.popover-header button{color:#fff}.popover-content{padding:20px}.field-info{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:10px 12px;background:#f8fafc;border-radius:8px}.field-info .field-name{font-weight:600;color:#1e293b}.field-info .field-type{font-size:12px;color:#64748b;background:#e2e8f0;padding:2px 8px;border-radius:4px;text-transform:uppercase}.full-width{width:100%}.boolean-input{padding:12px 0}.popover-actions{display:flex;align-items:center;gap:8px;padding:16px 20px;background:#f8fafc;border-top:1px solid #e2e8f0}.popover-actions .spacer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DefaultValuePopoverComponent, isStandalone: true, selector: "default-value-popover", inputs: { field: "field", existingValue: "existingValue", position: "position" }, outputs: { save: "save", delete: "delete", close: "close" }, ngImport: i0, template: "<div class=\"popover-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"popover-container\">\n    <div class=\"popover-header\">\n      <div class=\"header-title\">\n        <mat-icon>edit</mat-icon>\n        <span>Default Value</span>\n      </div>\n      <button mat-icon-button (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"popover-content\">\n      <div class=\"field-info\">\n        <span class=\"field-name\">{{ field.name }}</span>\n        <span class=\"field-type\">{{ fieldType }}</span>\n      </div>\n\n      <!-- String input -->\n      @if (fieldType === 'string') {\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <mat-label>Default Value</mat-label>\n          <input matInput [(ngModel)]=\"stringValue\" placeholder=\"Enter default value\">\n        </mat-form-field>\n      }\n\n      <!-- Number input -->\n      @if (fieldType === 'number') {\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <mat-label>Default Value</mat-label>\n          <input matInput type=\"number\" [(ngModel)]=\"numberValue\" placeholder=\"Enter number\">\n        </mat-form-field>\n      }\n\n      <!-- Boolean input -->\n      @if (fieldType === 'boolean') {\n        <div class=\"boolean-input\">\n          <mat-slide-toggle [(ngModel)]=\"booleanValue\">\n            {{ booleanValue ? 'True' : 'False' }}\n          </mat-slide-toggle>\n        </div>\n      }\n\n      <!-- Date input -->\n      @if (fieldType === 'date') {\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <mat-label>Default Date</mat-label>\n          <input matInput [matDatepicker]=\"picker\" [(ngModel)]=\"dateValue\">\n          <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n          <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n      }\n    </div>\n\n    <div class=\"popover-actions\">\n      @if (existingValue) {\n        <button mat-button color=\"warn\" (click)=\"onDelete()\">\n          <mat-icon>delete</mat-icon>\n          Remove\n        </button>\n      }\n      <span class=\"spacer\"></span>\n      <button mat-button (click)=\"onClose()\">Cancel</button>\n      <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n</div>\n", styles: [".popover-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000004d;z-index:1000;display:flex;align-items:center;justify-content:center}.popover-container{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;min-width:320px;max-width:400px;overflow:hidden}.popover-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(135deg,#10b981,#059669);color:#fff}.popover-header .header-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}.popover-header .header-title mat-icon{font-size:20px;width:20px;height:20px}.popover-header button{color:#fff}.popover-content{padding:20px}.field-info{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:10px 12px;background:#f8fafc;border-radius:8px}.field-info .field-name{font-weight:600;color:#1e293b}.field-info .field-type{font-size:12px;color:#64748b;background:#e2e8f0;padding:2px 8px;border-radius:4px;text-transform:uppercase}.full-width{width:100%}.boolean-input{padding:12px 0}.popover-actions{display:flex;align-items:center;gap:8px;padding:16px 20px;background:#f8fafc;border-top:1px solid #e2e8f0}.popover-actions .spacer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultValuePopoverComponent, decorators: [{
             type: Component,
@@ -1657,8 +2314,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }] } });
 
 class DataMapperComponent {
-    sourceSchema;
-    targetSchema;
+    set sourceSchema(value) {
+        if (value) {
+            this._sourceSchemaInput.set(value);
+        }
+    }
+    set targetSchema(value) {
+        if (value) {
+            this._targetSchemaInput.set(value);
+        }
+    }
     sampleData = {};
     mappingsChange = new EventEmitter();
     svgContainer;
@@ -1666,6 +2331,23 @@ class DataMapperComponent {
     mappingService = inject(MappingService);
     svgConnectorService = inject(SvgConnectorService);
     transformationService = inject(TransformationService);
+    schemaParserService = inject(SchemaParserService);
+    // Internal signals for schema inputs
+    _sourceSchemaInput = signal(null, ...(ngDevMode ? [{ debugName: "_sourceSchemaInput" }] : []));
+    _targetSchemaInput = signal(null, ...(ngDevMode ? [{ debugName: "_targetSchemaInput" }] : []));
+    // Converted schemas for the tree component
+    sourceSchemaForTree = computed(() => {
+        const schema = this._sourceSchemaInput();
+        if (!schema)
+            return { name: '', fields: [] };
+        return this.schemaParserService.parseSchema(schema, schema.title || 'Source');
+    }, ...(ngDevMode ? [{ debugName: "sourceSchemaForTree" }] : []));
+    targetSchemaForTree = computed(() => {
+        const schema = this._targetSchemaInput();
+        if (!schema)
+            return { name: '', fields: [] };
+        return this.schemaParserService.parseSchema(schema, schema.title || 'Target');
+    }, ...(ngDevMode ? [{ debugName: "targetSchemaForTree" }] : []));
     // Field positions from both trees
     sourcePositions = new Map();
     targetPositions = new Map();
@@ -1854,10 +2536,10 @@ class DataMapperComponent {
     getExistingDefaultValue(fieldId) {
         return this.mappingService.getDefaultValue(fieldId);
     }
-    onPopoverSave(config) {
+    onPopoverSave(transformations) {
         const mappingId = this.selectedMappingId();
         if (mappingId) {
-            this.mappingService.updateTransformation(mappingId, config);
+            this.mappingService.updateTransformations(mappingId, transformations);
             this.mappingsChange.emit(this.mappingService.allMappings());
         }
         this.closePopover();
@@ -1922,7 +2604,7 @@ class DataMapperComponent {
                 paths,
                 midPoint,
                 targetPoint,
-                hasTransformation: mapping.transformation.type !== 'direct',
+                hasTransformation: mapping.transformations.length > 1 || mapping.transformations[0]?.type !== 'direct',
                 isSelected: mapping.id === selectedId,
                 isArrayMapping: mapping.isArrayMapping || false,
                 isArrayToObjectMapping: mapping.isArrayToObjectMapping || false,
@@ -1972,7 +2654,11 @@ class DataMapperComponent {
             template: 'code',
             custom: 'functions',
         };
-        return icons[mapping.transformation.type] || 'settings';
+        // For multiple transformations, show a pipeline icon
+        if (mapping.transformations.length > 1) {
+            return 'linear_scale';
+        }
+        return icons[mapping.transformations[0]?.type] || 'settings';
     }
     clearAllMappings() {
         this.mappingService.clearAllMappings();
@@ -1991,7 +2677,7 @@ class DataMapperComponent {
         return connection.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataMapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DataMapperComponent, isStandalone: true, selector: "data-mapper", inputs: { sourceSchema: "sourceSchema", targetSchema: "targetSchema", sampleData: "sampleData" }, outputs: { mappingsChange: "mappingsChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "svgContainer", first: true, predicate: ["svgContainer"], descendants: true }, { propertyName: "svgElement", first: true, predicate: ["svgElement"], descendants: true }], ngImport: i0, template: "<div class=\"data-mapper\">\n  <!-- Header Toolbar -->\n  <div class=\"mapper-toolbar\">\n    <div class=\"toolbar-title\">\n      <mat-icon>account_tree</mat-icon>\n      <span>Data Mapper</span>\n    </div>\n    <div class=\"toolbar-actions\">\n      <span class=\"mapping-count\">{{ mappings().length }} mapping(s)</span>\n      <button\n        mat-icon-button\n        matTooltip=\"Clear all mappings\"\n        (click)=\"clearAllMappings()\"\n        [disabled]=\"mappings().length === 0\"\n      >\n        <mat-icon>delete_sweep</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Mapper Area -->\n  <div class=\"mapper-container\" #svgContainer>\n    <!-- Source Schema Panel -->\n    <div class=\"schema-panel source-panel\">\n      <schema-tree\n        [schema]=\"sourceSchema\"\n        [side]=\"'source'\"\n        [mappings]=\"mappings()\"\n        (fieldDragStart)=\"onFieldDragStart($event)\"\n        (fieldPositionsChanged)=\"onSourcePositionsChanged($event)\"\n      ></schema-tree>\n    </div>\n\n    <!-- SVG Connection Layer -->\n    <svg class=\"connection-layer\" #svgElement>\n      <!-- Existing connections -->\n      @for (connection of connections(); track trackByConnectionId($index, connection)) {\n        <g class=\"connection-group\" [class.selected]=\"connection.isSelected\" [class.array-mapping]=\"connection.isArrayMapping\" [class.array-to-object-mapping]=\"connection.isArrayToObjectMapping\">\n          <!-- Connection paths -->\n          @for (path of connection.paths; track $index) {\n            <!-- Shadow path for glow effect -->\n            <path\n              [attr.d]=\"path\"\n              fill=\"none\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              stroke-width=\"6\"\n              stroke-opacity=\"0.2\"\n              stroke-linecap=\"round\"\n            />\n            <!-- Main connection path -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-path\"\n              [class.selected]=\"connection.isSelected\"\n              [class.array-path]=\"connection.isArrayMapping\"\n              [class.array-to-object-path]=\"connection.isArrayToObjectMapping\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              fill=\"none\"\n              stroke-width=\"2.5\"\n              stroke-linecap=\"round\"\n              [attr.stroke-dasharray]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? '8,4' : 'none'\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n            <!-- Invisible wider path for easier clicking -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-hitbox\"\n              fill=\"none\"\n              stroke=\"transparent\"\n              stroke-width=\"20\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n          }\n\n          <!-- Transformation node -->\n          <g\n            class=\"transformation-node\"\n            [class.has-transformation]=\"connection.hasTransformation\"\n            [class.is-array-mapping]=\"connection.isArrayMapping\"\n            [class.is-array-to-object-mapping]=\"connection.isArrayToObjectMapping\"\n            [attr.transform]=\"'translate(' + connection.midPoint.x + ',' + connection.midPoint.y + ')'\"\n            (click)=\"onTransformationNodeClick(connection, $event)\"\n          >\n            <circle r=\"14\" class=\"node-bg\" [attr.fill]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" />\n            <text\n              class=\"node-icon\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              font-family=\"Material Icons\"\n              font-size=\"16\"\n              [attr.fill]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? 'white' : ''\"\n            >\n              {{ getTransformationIcon(connection.mappingId) }}\n            </text>\n          </g>\n        </g>\n      }\n\n      <!-- Drag preview path -->\n      @if (dragPath()) {\n        <path\n          [attr.d]=\"dragPath()\"\n          class=\"drag-path\"\n          fill=\"none\"\n          stroke=\"#6366f1\"\n          stroke-width=\"2.5\"\n          stroke-dasharray=\"8,4\"\n          stroke-linecap=\"round\"\n        />\n      }\n    </svg>\n\n    <!-- Target Schema Panel -->\n    <div class=\"schema-panel target-panel\">\n      <schema-tree\n        [schema]=\"targetSchema\"\n        [side]=\"'target'\"\n        [mappings]=\"mappings()\"\n        [defaultValues]=\"defaultValues()\"\n        (fieldDrop)=\"onFieldDrop($event)\"\n        (fieldPositionsChanged)=\"onTargetPositionsChanged($event)\"\n        (fieldDefaultValueClick)=\"onDefaultValueClick($event)\"\n      ></schema-tree>\n    </div>\n  </div>\n\n  <!-- Instructions -->\n  @if (mappings().length === 0) {\n    <div class=\"empty-state\">\n      <mat-icon>drag_indicator</mat-icon>\n      <p>Drag fields from the source schema to the target schema to create mappings</p>\n    </div>\n  }\n</div>\n\n<!-- Transformation Popover -->\n@if (showPopover() && selectedMapping()) {\n  <transformation-popover\n    [mapping]=\"selectedMapping()!\"\n    [position]=\"popoverPosition()!\"\n    [sampleData]=\"sampleData\"\n    (save)=\"onPopoverSave($event)\"\n    (delete)=\"onPopoverDelete()\"\n    (close)=\"closePopover()\"\n  ></transformation-popover>\n}\n\n<!-- Array Filter Modal -->\n@if (showArrayFilterModal() && selectedArrayMapping()) {\n  <array-filter-modal\n    [arrayMapping]=\"selectedArrayMapping()!\"\n    (save)=\"onArrayFilterSave($event)\"\n    (close)=\"closeArrayFilterModal()\"\n  ></array-filter-modal>\n}\n\n<!-- Array Selector Modal (for array-to-object) -->\n@if (showArraySelectorModal() && selectedArrayToObjectMapping()) {\n  <array-selector-modal\n    [mapping]=\"selectedArrayToObjectMapping()!\"\n    (save)=\"onArraySelectorSave($event)\"\n    (close)=\"closeArraySelectorModal()\"\n  ></array-selector-modal>\n}\n\n<!-- Default Value Popover -->\n@if (showDefaultValuePopover() && selectedDefaultValueField()) {\n  <default-value-popover\n    [field]=\"selectedDefaultValueField()!\"\n    [existingValue]=\"getExistingDefaultValue(selectedDefaultValueField()!.id)\"\n    [position]=\"defaultValuePopoverPosition()!\"\n    (save)=\"onDefaultValueSave($event)\"\n    (delete)=\"onDefaultValueDelete()\"\n    (close)=\"closeDefaultValuePopover()\"\n  ></default-value-popover>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;--data-mapper-bg: #f8fafc;--data-mapper-border-radius: 16px;--data-mapper-shadow: 0 4px 20px rgba(0, 0, 0, .08);--data-mapper-border-color: #e2e8f0;--data-mapper-toolbar-bg: white;--data-mapper-toolbar-border: #e2e8f0;--data-mapper-panel-bg: white;--data-mapper-panel-header-bg: #f8fafc;--data-mapper-panel-width: 320px;--data-mapper-panel-border-radius: 12px;--data-mapper-text-primary: #1e293b;--data-mapper-text-secondary: #64748b;--data-mapper-text-muted: #94a3b8;--data-mapper-accent-primary: #6366f1;--data-mapper-accent-success: #22c55e;--data-mapper-accent-warning: #f59e0b;--data-mapper-accent-danger: #ef4444;--data-mapper-connector-color: #6366f1;--data-mapper-connector-width: 2px;--data-mapper-connector-hover-color: #4f46e5;--data-mapper-spacing-sm: 8px;--data-mapper-spacing-md: 16px;--data-mapper-spacing-lg: 24px;--data-mapper-font-size-sm: 12px;--data-mapper-font-size-md: 14px;--data-mapper-font-size-lg: 18px}.data-mapper{display:flex;flex-direction:column;height:100%;min-height:0;flex:1;background:var(--data-mapper-bg);border-radius:var(--data-mapper-border-radius);overflow:hidden;box-shadow:var(--data-mapper-shadow)}.mapper-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--data-mapper-spacing-md) var(--data-mapper-spacing-lg);background:var(--data-mapper-toolbar-bg);border-bottom:1px solid var(--data-mapper-border-color);flex-shrink:0}.toolbar-title{display:flex;align-items:center;gap:12px;font-size:var(--data-mapper-font-size-lg);font-weight:600;color:var(--data-mapper-text-primary)}.toolbar-title mat-icon{color:var(--data-mapper-accent-primary)}.toolbar-actions{display:flex;align-items:center;gap:var(--data-mapper-spacing-md)}.mapping-count{font-size:var(--data-mapper-font-size-sm);color:var(--data-mapper-text-secondary);background:#f1f5f9;padding:6px 12px;border-radius:20px}.mapper-container{flex:1;display:flex;position:relative;padding:24px;gap:0;overflow:hidden;min-height:0}.schema-panel{width:var(--data-mapper-panel-width);flex-shrink:0;z-index:2;height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.schema-panel.source-panel{margin-right:auto}.schema-panel.target-panel{margin-left:auto}.schema-panel schema-tree{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.connection-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.connection-group{pointer-events:auto;cursor:pointer}.connection-group:hover .connection-path{stroke-width:3;filter:drop-shadow(0 2px 4px rgba(99,102,241,.3))}.connection-group:hover .transformation-node .node-bg{transform:scale(1.1)}.connection-group.selected .connection-path{stroke-width:3;filter:drop-shadow(0 2px 8px rgba(139,92,246,.4))}.connection-path{transition:stroke-width .15s ease,filter .15s ease}.connection-hitbox{cursor:pointer}.transformation-node{cursor:pointer;pointer-events:auto}.transformation-node .node-bg{fill:#fff;stroke:#6366f1;stroke-width:2;transition:transform .15s ease,fill .15s ease}.transformation-node .node-icon{fill:#6366f1;pointer-events:none}.transformation-node.has-transformation .node-bg{fill:#6366f1}.transformation-node.has-transformation .node-icon{fill:#fff}.transformation-node:hover .node-bg{transform:scale(1.15);filter:drop-shadow(0 2px 6px rgba(99,102,241,.4))}.drag-path{pointer-events:none;animation:dashMove .5s linear infinite}@keyframes dashMove{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#94a3b8;pointer-events:none}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:14px;max-width:300px;line-height:1.6}@media(max-width:900px){.schema-panel{width:260px}.mapper-container{padding:16px}}@media(max-width:700px){.mapper-container{flex-direction:column;gap:24px}.schema-panel{width:100%;max-height:300px}.connection-layer{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SchemaTreeComponent, selector: "schema-tree", inputs: ["schema", "side", "mappings", "defaultValues"], outputs: ["fieldDragStart", "fieldDragEnd", "fieldDrop", "fieldPositionsChanged", "fieldDefaultValueClick"] }, { kind: "component", type: TransformationPopoverComponent, selector: "transformation-popover", inputs: ["mapping", "position", "sampleData"], outputs: ["save", "delete", "close"] }, { kind: "component", type: ArrayFilterModalComponent, selector: "array-filter-modal", inputs: ["arrayMapping"], outputs: ["save", "close"] }, { kind: "component", type: ArraySelectorModalComponent, selector: "array-selector-modal", inputs: ["mapping"], outputs: ["save", "close"] }, { kind: "component", type: DefaultValuePopoverComponent, selector: "default-value-popover", inputs: ["field", "existingValue", "position"], outputs: ["save", "delete", "close"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DataMapperComponent, isStandalone: true, selector: "data-mapper", inputs: { sourceSchema: "sourceSchema", targetSchema: "targetSchema", sampleData: "sampleData" }, outputs: { mappingsChange: "mappingsChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "svgContainer", first: true, predicate: ["svgContainer"], descendants: true }, { propertyName: "svgElement", first: true, predicate: ["svgElement"], descendants: true }], ngImport: i0, template: "<div class=\"data-mapper\">\n  <!-- Header Toolbar -->\n  <div class=\"mapper-toolbar\">\n    <div class=\"toolbar-title\">\n      <mat-icon>account_tree</mat-icon>\n      <span>Data Mapper</span>\n    </div>\n    <div class=\"toolbar-actions\">\n      <span class=\"mapping-count\">{{ mappings().length }} mapping(s)</span>\n      <button\n        mat-icon-button\n        matTooltip=\"Clear all mappings\"\n        (click)=\"clearAllMappings()\"\n        [disabled]=\"mappings().length === 0\"\n      >\n        <mat-icon>delete_sweep</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Mapper Area -->\n  <div class=\"mapper-container\" #svgContainer>\n    <!-- Source Schema Panel -->\n    <div class=\"schema-panel source-panel\">\n      <schema-tree\n        [schema]=\"sourceSchemaForTree()\"\n        [side]=\"'source'\"\n        [mappings]=\"mappings()\"\n        (fieldDragStart)=\"onFieldDragStart($event)\"\n        (fieldPositionsChanged)=\"onSourcePositionsChanged($event)\"\n      ></schema-tree>\n    </div>\n\n    <!-- SVG Connection Layer -->\n    <svg class=\"connection-layer\" #svgElement>\n      <!-- Existing connections -->\n      @for (connection of connections(); track trackByConnectionId($index, connection)) {\n        <g class=\"connection-group\" [class.selected]=\"connection.isSelected\" [class.array-mapping]=\"connection.isArrayMapping\" [class.array-to-object-mapping]=\"connection.isArrayToObjectMapping\">\n          <!-- Connection paths -->\n          @for (path of connection.paths; track $index) {\n            <!-- Shadow path for glow effect -->\n            <path\n              [attr.d]=\"path\"\n              fill=\"none\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              stroke-width=\"6\"\n              stroke-opacity=\"0.2\"\n              stroke-linecap=\"round\"\n            />\n            <!-- Main connection path -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-path\"\n              [class.selected]=\"connection.isSelected\"\n              [class.array-path]=\"connection.isArrayMapping\"\n              [class.array-to-object-path]=\"connection.isArrayToObjectMapping\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              fill=\"none\"\n              stroke-width=\"2.5\"\n              stroke-linecap=\"round\"\n              [attr.stroke-dasharray]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? '8,4' : 'none'\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n            <!-- Invisible wider path for easier clicking -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-hitbox\"\n              fill=\"none\"\n              stroke=\"transparent\"\n              stroke-width=\"20\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n          }\n\n          <!-- Transformation node -->\n          <g\n            class=\"transformation-node\"\n            [class.has-transformation]=\"connection.hasTransformation\"\n            [class.is-array-mapping]=\"connection.isArrayMapping\"\n            [class.is-array-to-object-mapping]=\"connection.isArrayToObjectMapping\"\n            [attr.transform]=\"'translate(' + connection.midPoint.x + ',' + connection.midPoint.y + ')'\"\n            (click)=\"onTransformationNodeClick(connection, $event)\"\n          >\n            <circle r=\"14\" class=\"node-bg\" [attr.fill]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" />\n            <text\n              class=\"node-icon\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              font-family=\"Material Icons\"\n              font-size=\"16\"\n              [attr.fill]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? 'white' : ''\"\n            >\n              {{ getTransformationIcon(connection.mappingId) }}\n            </text>\n          </g>\n        </g>\n      }\n\n      <!-- Drag preview path -->\n      @if (dragPath()) {\n        <path\n          [attr.d]=\"dragPath()\"\n          class=\"drag-path\"\n          fill=\"none\"\n          stroke=\"#6366f1\"\n          stroke-width=\"2.5\"\n          stroke-dasharray=\"8,4\"\n          stroke-linecap=\"round\"\n        />\n      }\n    </svg>\n\n    <!-- Target Schema Panel -->\n    <div class=\"schema-panel target-panel\">\n      <schema-tree\n        [schema]=\"targetSchemaForTree()\"\n        [side]=\"'target'\"\n        [mappings]=\"mappings()\"\n        [defaultValues]=\"defaultValues()\"\n        (fieldDrop)=\"onFieldDrop($event)\"\n        (fieldPositionsChanged)=\"onTargetPositionsChanged($event)\"\n        (fieldDefaultValueClick)=\"onDefaultValueClick($event)\"\n      ></schema-tree>\n    </div>\n  </div>\n\n  <!-- Instructions -->\n  @if (mappings().length === 0) {\n    <div class=\"empty-state\">\n      <mat-icon>drag_indicator</mat-icon>\n      <p>Drag fields from the source schema to the target schema to create mappings</p>\n    </div>\n  }\n</div>\n\n<!-- Transformation Popover -->\n@if (showPopover() && selectedMapping()) {\n  <transformation-popover\n    [mapping]=\"selectedMapping()!\"\n    [position]=\"popoverPosition()!\"\n    [sampleData]=\"sampleData\"\n    (save)=\"onPopoverSave($event)\"\n    (delete)=\"onPopoverDelete()\"\n    (close)=\"closePopover()\"\n  ></transformation-popover>\n}\n\n<!-- Array Filter Modal -->\n@if (showArrayFilterModal() && selectedArrayMapping()) {\n  <array-filter-modal\n    [arrayMapping]=\"selectedArrayMapping()!\"\n    (save)=\"onArrayFilterSave($event)\"\n    (close)=\"closeArrayFilterModal()\"\n  ></array-filter-modal>\n}\n\n<!-- Array Selector Modal (for array-to-object) -->\n@if (showArraySelectorModal() && selectedArrayToObjectMapping()) {\n  <array-selector-modal\n    [mapping]=\"selectedArrayToObjectMapping()!\"\n    (save)=\"onArraySelectorSave($event)\"\n    (close)=\"closeArraySelectorModal()\"\n  ></array-selector-modal>\n}\n\n<!-- Default Value Popover -->\n@if (showDefaultValuePopover() && selectedDefaultValueField()) {\n  <default-value-popover\n    [field]=\"selectedDefaultValueField()!\"\n    [existingValue]=\"getExistingDefaultValue(selectedDefaultValueField()!.id)\"\n    [position]=\"defaultValuePopoverPosition()!\"\n    (save)=\"onDefaultValueSave($event)\"\n    (delete)=\"onDefaultValueDelete()\"\n    (close)=\"closeDefaultValuePopover()\"\n  ></default-value-popover>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;--data-mapper-bg: #f8fafc;--data-mapper-border-radius: 16px;--data-mapper-shadow: 0 4px 20px rgba(0, 0, 0, .08);--data-mapper-border-color: #e2e8f0;--data-mapper-toolbar-bg: white;--data-mapper-toolbar-border: #e2e8f0;--data-mapper-panel-bg: white;--data-mapper-panel-header-bg: #f8fafc;--data-mapper-panel-width: 320px;--data-mapper-panel-border-radius: 12px;--data-mapper-text-primary: #1e293b;--data-mapper-text-secondary: #64748b;--data-mapper-text-muted: #94a3b8;--data-mapper-accent-primary: #6366f1;--data-mapper-accent-success: #22c55e;--data-mapper-accent-warning: #f59e0b;--data-mapper-accent-danger: #ef4444;--data-mapper-connector-color: #6366f1;--data-mapper-connector-width: 2px;--data-mapper-connector-hover-color: #4f46e5;--data-mapper-spacing-sm: 8px;--data-mapper-spacing-md: 16px;--data-mapper-spacing-lg: 24px;--data-mapper-font-size-sm: 12px;--data-mapper-font-size-md: 14px;--data-mapper-font-size-lg: 18px}.data-mapper{display:flex;flex-direction:column;height:100%;min-height:0;flex:1;background:var(--data-mapper-bg);border-radius:var(--data-mapper-border-radius);overflow:hidden;box-shadow:var(--data-mapper-shadow)}.mapper-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--data-mapper-spacing-md) var(--data-mapper-spacing-lg);background:var(--data-mapper-toolbar-bg);border-bottom:1px solid var(--data-mapper-border-color);flex-shrink:0}.toolbar-title{display:flex;align-items:center;gap:12px;font-size:var(--data-mapper-font-size-lg);font-weight:600;color:var(--data-mapper-text-primary)}.toolbar-title mat-icon{color:var(--data-mapper-accent-primary)}.toolbar-actions{display:flex;align-items:center;gap:var(--data-mapper-spacing-md)}.mapping-count{font-size:var(--data-mapper-font-size-sm);color:var(--data-mapper-text-secondary);background:#f1f5f9;padding:6px 12px;border-radius:20px}.mapper-container{flex:1;display:flex;position:relative;padding:24px;gap:0;overflow:hidden;min-height:0}.schema-panel{width:var(--data-mapper-panel-width);flex-shrink:0;z-index:2;height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.schema-panel.source-panel{margin-right:auto}.schema-panel.target-panel{margin-left:auto}.schema-panel schema-tree{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.connection-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.connection-group{pointer-events:auto;cursor:pointer}.connection-group:hover .connection-path{stroke-width:3;filter:drop-shadow(0 2px 4px rgba(99,102,241,.3))}.connection-group:hover .transformation-node .node-bg{transform:scale(1.1)}.connection-group.selected .connection-path{stroke-width:3;filter:drop-shadow(0 2px 8px rgba(139,92,246,.4))}.connection-path{transition:stroke-width .15s ease,filter .15s ease}.connection-hitbox{cursor:pointer}.transformation-node{cursor:pointer;pointer-events:auto}.transformation-node .node-bg{fill:#fff;stroke:#6366f1;stroke-width:2;transition:transform .15s ease,fill .15s ease}.transformation-node .node-icon{fill:#6366f1;pointer-events:none}.transformation-node.has-transformation .node-bg{fill:#6366f1}.transformation-node.has-transformation .node-icon{fill:#fff}.transformation-node:hover .node-bg{transform:scale(1.15);filter:drop-shadow(0 2px 6px rgba(99,102,241,.4))}.drag-path{pointer-events:none;animation:dashMove .5s linear infinite}@keyframes dashMove{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#94a3b8;pointer-events:none}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:14px;max-width:300px;line-height:1.6}@media(max-width:900px){.schema-panel{width:260px}.mapper-container{padding:16px}}@media(max-width:700px){.mapper-container{flex-direction:column;gap:24px}.schema-panel{width:100%;max-height:300px}.connection-layer{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SchemaTreeComponent, selector: "schema-tree", inputs: ["schema", "side", "mappings", "defaultValues"], outputs: ["fieldDragStart", "fieldDragEnd", "fieldDrop", "fieldPositionsChanged", "fieldDefaultValueClick"] }, { kind: "component", type: TransformationPopoverComponent, selector: "transformation-popover", inputs: ["mapping", "position", "sampleData"], outputs: ["save", "delete", "close"] }, { kind: "component", type: ArrayFilterModalComponent, selector: "array-filter-modal", inputs: ["arrayMapping"], outputs: ["save", "close"] }, { kind: "component", type: ArraySelectorModalComponent, selector: "array-selector-modal", inputs: ["mapping"], outputs: ["save", "close"] }, { kind: "component", type: DefaultValuePopoverComponent, selector: "default-value-popover", inputs: ["field", "existingValue", "position"], outputs: ["save", "delete", "close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataMapperComponent, decorators: [{
             type: Component,
@@ -2005,7 +2691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ArrayFilterModalComponent,
                         ArraySelectorModalComponent,
                         DefaultValuePopoverComponent,
-                    ], template: "<div class=\"data-mapper\">\n  <!-- Header Toolbar -->\n  <div class=\"mapper-toolbar\">\n    <div class=\"toolbar-title\">\n      <mat-icon>account_tree</mat-icon>\n      <span>Data Mapper</span>\n    </div>\n    <div class=\"toolbar-actions\">\n      <span class=\"mapping-count\">{{ mappings().length }} mapping(s)</span>\n      <button\n        mat-icon-button\n        matTooltip=\"Clear all mappings\"\n        (click)=\"clearAllMappings()\"\n        [disabled]=\"mappings().length === 0\"\n      >\n        <mat-icon>delete_sweep</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Mapper Area -->\n  <div class=\"mapper-container\" #svgContainer>\n    <!-- Source Schema Panel -->\n    <div class=\"schema-panel source-panel\">\n      <schema-tree\n        [schema]=\"sourceSchema\"\n        [side]=\"'source'\"\n        [mappings]=\"mappings()\"\n        (fieldDragStart)=\"onFieldDragStart($event)\"\n        (fieldPositionsChanged)=\"onSourcePositionsChanged($event)\"\n      ></schema-tree>\n    </div>\n\n    <!-- SVG Connection Layer -->\n    <svg class=\"connection-layer\" #svgElement>\n      <!-- Existing connections -->\n      @for (connection of connections(); track trackByConnectionId($index, connection)) {\n        <g class=\"connection-group\" [class.selected]=\"connection.isSelected\" [class.array-mapping]=\"connection.isArrayMapping\" [class.array-to-object-mapping]=\"connection.isArrayToObjectMapping\">\n          <!-- Connection paths -->\n          @for (path of connection.paths; track $index) {\n            <!-- Shadow path for glow effect -->\n            <path\n              [attr.d]=\"path\"\n              fill=\"none\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              stroke-width=\"6\"\n              stroke-opacity=\"0.2\"\n              stroke-linecap=\"round\"\n            />\n            <!-- Main connection path -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-path\"\n              [class.selected]=\"connection.isSelected\"\n              [class.array-path]=\"connection.isArrayMapping\"\n              [class.array-to-object-path]=\"connection.isArrayToObjectMapping\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              fill=\"none\"\n              stroke-width=\"2.5\"\n              stroke-linecap=\"round\"\n              [attr.stroke-dasharray]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? '8,4' : 'none'\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n            <!-- Invisible wider path for easier clicking -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-hitbox\"\n              fill=\"none\"\n              stroke=\"transparent\"\n              stroke-width=\"20\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n          }\n\n          <!-- Transformation node -->\n          <g\n            class=\"transformation-node\"\n            [class.has-transformation]=\"connection.hasTransformation\"\n            [class.is-array-mapping]=\"connection.isArrayMapping\"\n            [class.is-array-to-object-mapping]=\"connection.isArrayToObjectMapping\"\n            [attr.transform]=\"'translate(' + connection.midPoint.x + ',' + connection.midPoint.y + ')'\"\n            (click)=\"onTransformationNodeClick(connection, $event)\"\n          >\n            <circle r=\"14\" class=\"node-bg\" [attr.fill]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" />\n            <text\n              class=\"node-icon\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              font-family=\"Material Icons\"\n              font-size=\"16\"\n              [attr.fill]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? 'white' : ''\"\n            >\n              {{ getTransformationIcon(connection.mappingId) }}\n            </text>\n          </g>\n        </g>\n      }\n\n      <!-- Drag preview path -->\n      @if (dragPath()) {\n        <path\n          [attr.d]=\"dragPath()\"\n          class=\"drag-path\"\n          fill=\"none\"\n          stroke=\"#6366f1\"\n          stroke-width=\"2.5\"\n          stroke-dasharray=\"8,4\"\n          stroke-linecap=\"round\"\n        />\n      }\n    </svg>\n\n    <!-- Target Schema Panel -->\n    <div class=\"schema-panel target-panel\">\n      <schema-tree\n        [schema]=\"targetSchema\"\n        [side]=\"'target'\"\n        [mappings]=\"mappings()\"\n        [defaultValues]=\"defaultValues()\"\n        (fieldDrop)=\"onFieldDrop($event)\"\n        (fieldPositionsChanged)=\"onTargetPositionsChanged($event)\"\n        (fieldDefaultValueClick)=\"onDefaultValueClick($event)\"\n      ></schema-tree>\n    </div>\n  </div>\n\n  <!-- Instructions -->\n  @if (mappings().length === 0) {\n    <div class=\"empty-state\">\n      <mat-icon>drag_indicator</mat-icon>\n      <p>Drag fields from the source schema to the target schema to create mappings</p>\n    </div>\n  }\n</div>\n\n<!-- Transformation Popover -->\n@if (showPopover() && selectedMapping()) {\n  <transformation-popover\n    [mapping]=\"selectedMapping()!\"\n    [position]=\"popoverPosition()!\"\n    [sampleData]=\"sampleData\"\n    (save)=\"onPopoverSave($event)\"\n    (delete)=\"onPopoverDelete()\"\n    (close)=\"closePopover()\"\n  ></transformation-popover>\n}\n\n<!-- Array Filter Modal -->\n@if (showArrayFilterModal() && selectedArrayMapping()) {\n  <array-filter-modal\n    [arrayMapping]=\"selectedArrayMapping()!\"\n    (save)=\"onArrayFilterSave($event)\"\n    (close)=\"closeArrayFilterModal()\"\n  ></array-filter-modal>\n}\n\n<!-- Array Selector Modal (for array-to-object) -->\n@if (showArraySelectorModal() && selectedArrayToObjectMapping()) {\n  <array-selector-modal\n    [mapping]=\"selectedArrayToObjectMapping()!\"\n    (save)=\"onArraySelectorSave($event)\"\n    (close)=\"closeArraySelectorModal()\"\n  ></array-selector-modal>\n}\n\n<!-- Default Value Popover -->\n@if (showDefaultValuePopover() && selectedDefaultValueField()) {\n  <default-value-popover\n    [field]=\"selectedDefaultValueField()!\"\n    [existingValue]=\"getExistingDefaultValue(selectedDefaultValueField()!.id)\"\n    [position]=\"defaultValuePopoverPosition()!\"\n    (save)=\"onDefaultValueSave($event)\"\n    (delete)=\"onDefaultValueDelete()\"\n    (close)=\"closeDefaultValuePopover()\"\n  ></default-value-popover>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;--data-mapper-bg: #f8fafc;--data-mapper-border-radius: 16px;--data-mapper-shadow: 0 4px 20px rgba(0, 0, 0, .08);--data-mapper-border-color: #e2e8f0;--data-mapper-toolbar-bg: white;--data-mapper-toolbar-border: #e2e8f0;--data-mapper-panel-bg: white;--data-mapper-panel-header-bg: #f8fafc;--data-mapper-panel-width: 320px;--data-mapper-panel-border-radius: 12px;--data-mapper-text-primary: #1e293b;--data-mapper-text-secondary: #64748b;--data-mapper-text-muted: #94a3b8;--data-mapper-accent-primary: #6366f1;--data-mapper-accent-success: #22c55e;--data-mapper-accent-warning: #f59e0b;--data-mapper-accent-danger: #ef4444;--data-mapper-connector-color: #6366f1;--data-mapper-connector-width: 2px;--data-mapper-connector-hover-color: #4f46e5;--data-mapper-spacing-sm: 8px;--data-mapper-spacing-md: 16px;--data-mapper-spacing-lg: 24px;--data-mapper-font-size-sm: 12px;--data-mapper-font-size-md: 14px;--data-mapper-font-size-lg: 18px}.data-mapper{display:flex;flex-direction:column;height:100%;min-height:0;flex:1;background:var(--data-mapper-bg);border-radius:var(--data-mapper-border-radius);overflow:hidden;box-shadow:var(--data-mapper-shadow)}.mapper-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--data-mapper-spacing-md) var(--data-mapper-spacing-lg);background:var(--data-mapper-toolbar-bg);border-bottom:1px solid var(--data-mapper-border-color);flex-shrink:0}.toolbar-title{display:flex;align-items:center;gap:12px;font-size:var(--data-mapper-font-size-lg);font-weight:600;color:var(--data-mapper-text-primary)}.toolbar-title mat-icon{color:var(--data-mapper-accent-primary)}.toolbar-actions{display:flex;align-items:center;gap:var(--data-mapper-spacing-md)}.mapping-count{font-size:var(--data-mapper-font-size-sm);color:var(--data-mapper-text-secondary);background:#f1f5f9;padding:6px 12px;border-radius:20px}.mapper-container{flex:1;display:flex;position:relative;padding:24px;gap:0;overflow:hidden;min-height:0}.schema-panel{width:var(--data-mapper-panel-width);flex-shrink:0;z-index:2;height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.schema-panel.source-panel{margin-right:auto}.schema-panel.target-panel{margin-left:auto}.schema-panel schema-tree{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.connection-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.connection-group{pointer-events:auto;cursor:pointer}.connection-group:hover .connection-path{stroke-width:3;filter:drop-shadow(0 2px 4px rgba(99,102,241,.3))}.connection-group:hover .transformation-node .node-bg{transform:scale(1.1)}.connection-group.selected .connection-path{stroke-width:3;filter:drop-shadow(0 2px 8px rgba(139,92,246,.4))}.connection-path{transition:stroke-width .15s ease,filter .15s ease}.connection-hitbox{cursor:pointer}.transformation-node{cursor:pointer;pointer-events:auto}.transformation-node .node-bg{fill:#fff;stroke:#6366f1;stroke-width:2;transition:transform .15s ease,fill .15s ease}.transformation-node .node-icon{fill:#6366f1;pointer-events:none}.transformation-node.has-transformation .node-bg{fill:#6366f1}.transformation-node.has-transformation .node-icon{fill:#fff}.transformation-node:hover .node-bg{transform:scale(1.15);filter:drop-shadow(0 2px 6px rgba(99,102,241,.4))}.drag-path{pointer-events:none;animation:dashMove .5s linear infinite}@keyframes dashMove{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#94a3b8;pointer-events:none}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:14px;max-width:300px;line-height:1.6}@media(max-width:900px){.schema-panel{width:260px}.mapper-container{padding:16px}}@media(max-width:700px){.mapper-container{flex-direction:column;gap:24px}.schema-panel{width:100%;max-height:300px}.connection-layer{display:none}}\n"] }]
+                    ], template: "<div class=\"data-mapper\">\n  <!-- Header Toolbar -->\n  <div class=\"mapper-toolbar\">\n    <div class=\"toolbar-title\">\n      <mat-icon>account_tree</mat-icon>\n      <span>Data Mapper</span>\n    </div>\n    <div class=\"toolbar-actions\">\n      <span class=\"mapping-count\">{{ mappings().length }} mapping(s)</span>\n      <button\n        mat-icon-button\n        matTooltip=\"Clear all mappings\"\n        (click)=\"clearAllMappings()\"\n        [disabled]=\"mappings().length === 0\"\n      >\n        <mat-icon>delete_sweep</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Mapper Area -->\n  <div class=\"mapper-container\" #svgContainer>\n    <!-- Source Schema Panel -->\n    <div class=\"schema-panel source-panel\">\n      <schema-tree\n        [schema]=\"sourceSchemaForTree()\"\n        [side]=\"'source'\"\n        [mappings]=\"mappings()\"\n        (fieldDragStart)=\"onFieldDragStart($event)\"\n        (fieldPositionsChanged)=\"onSourcePositionsChanged($event)\"\n      ></schema-tree>\n    </div>\n\n    <!-- SVG Connection Layer -->\n    <svg class=\"connection-layer\" #svgElement>\n      <!-- Existing connections -->\n      @for (connection of connections(); track trackByConnectionId($index, connection)) {\n        <g class=\"connection-group\" [class.selected]=\"connection.isSelected\" [class.array-mapping]=\"connection.isArrayMapping\" [class.array-to-object-mapping]=\"connection.isArrayToObjectMapping\">\n          <!-- Connection paths -->\n          @for (path of connection.paths; track $index) {\n            <!-- Shadow path for glow effect -->\n            <path\n              [attr.d]=\"path\"\n              fill=\"none\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              stroke-width=\"6\"\n              stroke-opacity=\"0.2\"\n              stroke-linecap=\"round\"\n            />\n            <!-- Main connection path -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-path\"\n              [class.selected]=\"connection.isSelected\"\n              [class.array-path]=\"connection.isArrayMapping\"\n              [class.array-to-object-path]=\"connection.isArrayToObjectMapping\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              fill=\"none\"\n              stroke-width=\"2.5\"\n              stroke-linecap=\"round\"\n              [attr.stroke-dasharray]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? '8,4' : 'none'\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n            <!-- Invisible wider path for easier clicking -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-hitbox\"\n              fill=\"none\"\n              stroke=\"transparent\"\n              stroke-width=\"20\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n          }\n\n          <!-- Transformation node -->\n          <g\n            class=\"transformation-node\"\n            [class.has-transformation]=\"connection.hasTransformation\"\n            [class.is-array-mapping]=\"connection.isArrayMapping\"\n            [class.is-array-to-object-mapping]=\"connection.isArrayToObjectMapping\"\n            [attr.transform]=\"'translate(' + connection.midPoint.x + ',' + connection.midPoint.y + ')'\"\n            (click)=\"onTransformationNodeClick(connection, $event)\"\n          >\n            <circle r=\"14\" class=\"node-bg\" [attr.fill]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" />\n            <text\n              class=\"node-icon\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              font-family=\"Material Icons\"\n              font-size=\"16\"\n              [attr.fill]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? 'white' : ''\"\n            >\n              {{ getTransformationIcon(connection.mappingId) }}\n            </text>\n          </g>\n        </g>\n      }\n\n      <!-- Drag preview path -->\n      @if (dragPath()) {\n        <path\n          [attr.d]=\"dragPath()\"\n          class=\"drag-path\"\n          fill=\"none\"\n          stroke=\"#6366f1\"\n          stroke-width=\"2.5\"\n          stroke-dasharray=\"8,4\"\n          stroke-linecap=\"round\"\n        />\n      }\n    </svg>\n\n    <!-- Target Schema Panel -->\n    <div class=\"schema-panel target-panel\">\n      <schema-tree\n        [schema]=\"targetSchemaForTree()\"\n        [side]=\"'target'\"\n        [mappings]=\"mappings()\"\n        [defaultValues]=\"defaultValues()\"\n        (fieldDrop)=\"onFieldDrop($event)\"\n        (fieldPositionsChanged)=\"onTargetPositionsChanged($event)\"\n        (fieldDefaultValueClick)=\"onDefaultValueClick($event)\"\n      ></schema-tree>\n    </div>\n  </div>\n\n  <!-- Instructions -->\n  @if (mappings().length === 0) {\n    <div class=\"empty-state\">\n      <mat-icon>drag_indicator</mat-icon>\n      <p>Drag fields from the source schema to the target schema to create mappings</p>\n    </div>\n  }\n</div>\n\n<!-- Transformation Popover -->\n@if (showPopover() && selectedMapping()) {\n  <transformation-popover\n    [mapping]=\"selectedMapping()!\"\n    [position]=\"popoverPosition()!\"\n    [sampleData]=\"sampleData\"\n    (save)=\"onPopoverSave($event)\"\n    (delete)=\"onPopoverDelete()\"\n    (close)=\"closePopover()\"\n  ></transformation-popover>\n}\n\n<!-- Array Filter Modal -->\n@if (showArrayFilterModal() && selectedArrayMapping()) {\n  <array-filter-modal\n    [arrayMapping]=\"selectedArrayMapping()!\"\n    (save)=\"onArrayFilterSave($event)\"\n    (close)=\"closeArrayFilterModal()\"\n  ></array-filter-modal>\n}\n\n<!-- Array Selector Modal (for array-to-object) -->\n@if (showArraySelectorModal() && selectedArrayToObjectMapping()) {\n  <array-selector-modal\n    [mapping]=\"selectedArrayToObjectMapping()!\"\n    (save)=\"onArraySelectorSave($event)\"\n    (close)=\"closeArraySelectorModal()\"\n  ></array-selector-modal>\n}\n\n<!-- Default Value Popover -->\n@if (showDefaultValuePopover() && selectedDefaultValueField()) {\n  <default-value-popover\n    [field]=\"selectedDefaultValueField()!\"\n    [existingValue]=\"getExistingDefaultValue(selectedDefaultValueField()!.id)\"\n    [position]=\"defaultValuePopoverPosition()!\"\n    (save)=\"onDefaultValueSave($event)\"\n    (delete)=\"onDefaultValueDelete()\"\n    (close)=\"closeDefaultValuePopover()\"\n  ></default-value-popover>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;--data-mapper-bg: #f8fafc;--data-mapper-border-radius: 16px;--data-mapper-shadow: 0 4px 20px rgba(0, 0, 0, .08);--data-mapper-border-color: #e2e8f0;--data-mapper-toolbar-bg: white;--data-mapper-toolbar-border: #e2e8f0;--data-mapper-panel-bg: white;--data-mapper-panel-header-bg: #f8fafc;--data-mapper-panel-width: 320px;--data-mapper-panel-border-radius: 12px;--data-mapper-text-primary: #1e293b;--data-mapper-text-secondary: #64748b;--data-mapper-text-muted: #94a3b8;--data-mapper-accent-primary: #6366f1;--data-mapper-accent-success: #22c55e;--data-mapper-accent-warning: #f59e0b;--data-mapper-accent-danger: #ef4444;--data-mapper-connector-color: #6366f1;--data-mapper-connector-width: 2px;--data-mapper-connector-hover-color: #4f46e5;--data-mapper-spacing-sm: 8px;--data-mapper-spacing-md: 16px;--data-mapper-spacing-lg: 24px;--data-mapper-font-size-sm: 12px;--data-mapper-font-size-md: 14px;--data-mapper-font-size-lg: 18px}.data-mapper{display:flex;flex-direction:column;height:100%;min-height:0;flex:1;background:var(--data-mapper-bg);border-radius:var(--data-mapper-border-radius);overflow:hidden;box-shadow:var(--data-mapper-shadow)}.mapper-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--data-mapper-spacing-md) var(--data-mapper-spacing-lg);background:var(--data-mapper-toolbar-bg);border-bottom:1px solid var(--data-mapper-border-color);flex-shrink:0}.toolbar-title{display:flex;align-items:center;gap:12px;font-size:var(--data-mapper-font-size-lg);font-weight:600;color:var(--data-mapper-text-primary)}.toolbar-title mat-icon{color:var(--data-mapper-accent-primary)}.toolbar-actions{display:flex;align-items:center;gap:var(--data-mapper-spacing-md)}.mapping-count{font-size:var(--data-mapper-font-size-sm);color:var(--data-mapper-text-secondary);background:#f1f5f9;padding:6px 12px;border-radius:20px}.mapper-container{flex:1;display:flex;position:relative;padding:24px;gap:0;overflow:hidden;min-height:0}.schema-panel{width:var(--data-mapper-panel-width);flex-shrink:0;z-index:2;height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.schema-panel.source-panel{margin-right:auto}.schema-panel.target-panel{margin-left:auto}.schema-panel schema-tree{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.connection-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.connection-group{pointer-events:auto;cursor:pointer}.connection-group:hover .connection-path{stroke-width:3;filter:drop-shadow(0 2px 4px rgba(99,102,241,.3))}.connection-group:hover .transformation-node .node-bg{transform:scale(1.1)}.connection-group.selected .connection-path{stroke-width:3;filter:drop-shadow(0 2px 8px rgba(139,92,246,.4))}.connection-path{transition:stroke-width .15s ease,filter .15s ease}.connection-hitbox{cursor:pointer}.transformation-node{cursor:pointer;pointer-events:auto}.transformation-node .node-bg{fill:#fff;stroke:#6366f1;stroke-width:2;transition:transform .15s ease,fill .15s ease}.transformation-node .node-icon{fill:#6366f1;pointer-events:none}.transformation-node.has-transformation .node-bg{fill:#6366f1}.transformation-node.has-transformation .node-icon{fill:#fff}.transformation-node:hover .node-bg{transform:scale(1.15);filter:drop-shadow(0 2px 6px rgba(99,102,241,.4))}.drag-path{pointer-events:none;animation:dashMove .5s linear infinite}@keyframes dashMove{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#94a3b8;pointer-events:none}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:14px;max-width:300px;line-height:1.6}@media(max-width:900px){.schema-panel{width:260px}.mapper-container{padding:16px}}@media(max-width:700px){.mapper-container{flex-direction:column;gap:24px}.schema-panel{width:100%;max-height:300px}.connection-layer{display:none}}\n"] }]
         }], propDecorators: { sourceSchema: [{
                 type: Input
             }], targetSchema: [{
@@ -2031,8 +2717,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class SchemaEditorComponent {
     set schema(value) {
         if (value) {
-            this.schemaName.set(value.name);
-            this.fields.set(this.cloneFields(value.fields));
+            this.schemaName.set(value.title || 'New Schema');
+            this.fields.set(this.jsonSchemaToEditorFields(value));
         }
     }
     schemaChange = new EventEmitter();
@@ -2319,17 +3005,57 @@ class SchemaEditorComponent {
     }
     // Emit change event
     emitChange() {
-        this.schemaChange.emit({
-            name: this.schemaName(),
-            fields: this.fields(),
-        });
+        this.schemaChange.emit(this.toJsonSchema());
     }
     // Save the schema
     onSave() {
-        this.save.emit({
-            name: this.schemaName(),
-            fields: this.fields(),
-        });
+        this.save.emit(this.toJsonSchema());
+    }
+    // Convert JSON Schema to internal EditorField format
+    jsonSchemaToEditorFields(schema, requiredFields = []) {
+        const fields = [];
+        if (schema.type === 'object' && schema.properties) {
+            const required = schema.required || requiredFields;
+            for (const [name, propSchema] of Object.entries(schema.properties)) {
+                fields.push(this.jsonSchemaPropertyToEditorField(name, propSchema, required.includes(name)));
+            }
+        }
+        return fields;
+    }
+    jsonSchemaPropertyToEditorField(name, schema, isRequired) {
+        const field = {
+            id: this.generateId(),
+            name,
+            type: this.jsonSchemaTypeToEditorType(schema),
+            description: schema.description,
+            required: isRequired,
+            allowedValues: schema.enum,
+            expanded: false,
+        };
+        if (schema.type === 'object' && schema.properties) {
+            field.children = this.jsonSchemaToEditorFields(schema, schema.required);
+        }
+        else if (schema.type === 'array' && schema.items) {
+            if (schema.items.type === 'object' && schema.items.properties) {
+                field.children = this.jsonSchemaToEditorFields(schema.items, schema.items.required);
+            }
+        }
+        return field;
+    }
+    jsonSchemaTypeToEditorType(schema) {
+        if (schema.format === 'date' || schema.format === 'date-time') {
+            return 'date';
+        }
+        const type = Array.isArray(schema.type) ? schema.type[0] : schema.type;
+        switch (type) {
+            case 'string': return 'string';
+            case 'number':
+            case 'integer': return 'number';
+            case 'boolean': return 'boolean';
+            case 'object': return 'object';
+            case 'array': return 'array';
+            default: return 'string';
+        }
     }
     // Convert to internal JSON format
     toJson() {
@@ -2438,7 +3164,7 @@ class SchemaEditorComponent {
         return field.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SchemaEditorComponent, isStandalone: true, selector: "schema-editor", inputs: { schema: "schema" }, outputs: { schemaChange: "schemaChange", save: "save" }, ngImport: i0, template: "<div class=\"schema-editor\">\n  <!-- Schema Header -->\n  <div class=\"editor-header\">\n    <div class=\"schema-name-section\">\n      <mat-form-field appearance=\"outline\" class=\"schema-name-field\">\n        <mat-label>Schema Name</mat-label>\n        <input\n          #schemaNameInput\n          matInput\n          [value]=\"schemaName()\"\n          (input)=\"onSchemaNameChange($any($event.target).value, schemaNameInput)\"\n          placeholder=\"Enter schema name\"\n        />\n      </mat-form-field>\n    </div>\n    <div class=\"header-actions\">\n      <button mat-flat-button color=\"primary\" (click)=\"addField()\">\n        <mat-icon>add</mat-icon>\n        Add Field\n      </button>\n    </div>\n  </div>\n\n  <!-- Fields List -->\n  <div class=\"fields-container\">\n    @if (fields().length === 0) {\n      <div class=\"empty-state\">\n        <mat-icon>schema</mat-icon>\n        <p>No fields yet. Click \"Add Field\" to get started.</p>\n      </div>\n    } @else {\n      <div class=\"fields-list\">\n        <ng-container *ngTemplateOutlet=\"fieldListTemplate; context: { fields: fields(), level: 0, parentList: fields() }\"></ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Recursive Field Template -->\n<ng-template #fieldListTemplate let-fields=\"fields\" let-level=\"level\" let-parentList=\"parentList\">\n  @for (field of fields; track trackByFieldId($index, field); let i = $index; let first = $first; let last = $last) {\n    <div\n      class=\"field-item\"\n      [class.has-children]=\"field.children && field.children.length > 0\"\n      [class.is-editing]=\"field.isEditing\"\n      [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n      [style.--level]=\"level\"\n    >\n      <!-- Reorder Buttons -->\n      <div class=\"reorder-buttons\">\n        <button\n          class=\"reorder-btn\"\n          [disabled]=\"first\"\n          (click)=\"moveFieldUp(field, parentList)\"\n          matTooltip=\"Move up\"\n        >\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        </button>\n        <button\n          class=\"reorder-btn\"\n          [disabled]=\"last\"\n          (click)=\"moveFieldDown(field, parentList)\"\n          matTooltip=\"Move down\"\n        >\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n\n      <!-- Indent/Outdent Buttons -->\n      <div class=\"indent-buttons\">\n        <button\n          class=\"indent-btn\"\n          [disabled]=\"!canIndent(field, parentList)\"\n          (click)=\"indentField(field, parentList)\"\n          matTooltip=\"Move into previous object/array\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button\n          class=\"indent-btn\"\n          [disabled]=\"level === 0\"\n          (click)=\"outdentField(field, parentList, level)\"\n          matTooltip=\"Move out of parent\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </div>\n\n      <!-- Expand/Collapse -->\n      @if (field.type === 'object' || field.type === 'array') {\n        <button\n          class=\"expand-btn\"\n          (click)=\"toggleExpand(field)\"\n          matTooltip=\"{{ field.expanded ? 'Collapse' : 'Expand' }}\"\n        >\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <!-- Type Icon -->\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      <!-- Field Name -->\n      @if (field.isEditing) {\n        <input\n          class=\"field-name-input\"\n          [value]=\"field.name\"\n          (input)=\"onFieldNameChange(field, $event)\"\n          (blur)=\"stopEdit(field)\"\n          (keydown)=\"onFieldNameKeydown($event, field)\"\n          placeholder=\"Field name\"\n          autofocus\n        />\n      } @else {\n        <span class=\"field-name\" (dblclick)=\"startEdit(field)\">\n          {{ field.name || 'unnamed' }}\n          @if (field.type === 'array') {\n            <span class=\"array-indicator\">[]</span>\n          }\n        </span>\n      }\n\n      <!-- Required Toggle -->\n      <button\n        class=\"required-btn\"\n        [class.is-required]=\"field.required\"\n        (click)=\"toggleRequired(field)\"\n        [matTooltip]=\"field.required ? 'Required (click to make optional)' : 'Optional (click to make required)'\"\n      >\n        <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n      </button>\n\n      <!-- Description Input -->\n      <input\n        class=\"description-input\"\n        [value]=\"field.description || ''\"\n        (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n        placeholder=\"Description...\"\n      />\n\n      <!-- Type Selector -->\n      <mat-form-field appearance=\"outline\" class=\"type-selector\">\n        <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange(field, $event.value)\">\n          @for (type of fieldTypes; track type.value) {\n            <mat-option [value]=\"type.value\">\n              <mat-icon>{{ type.icon }}</mat-icon>\n              {{ type.label }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <!-- Actions -->\n      <div class=\"field-actions\">\n        @if (field.type === 'object' || field.type === 'array') {\n          <button\n            mat-icon-button\n            (click)=\"addChildField(field)\"\n            matTooltip=\"Add child field\"\n          >\n            <mat-icon>add_circle_outline</mat-icon>\n          </button>\n        }\n        @if (field.type === 'string' || field.type === 'number') {\n          <button\n            mat-icon-button\n            (click)=\"toggleValuesEditor(field)\"\n            [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values (' + field.allowedValues.length + ')' : 'Add allowed values'\"\n            [class.has-values]=\"field.allowedValues?.length\"\n          >\n            <mat-icon>{{ field.allowedValues?.length ? 'list' : 'list' }}</mat-icon>\n          </button>\n        }\n        <button mat-icon-button [matMenuTriggerFor]=\"fieldMenu\" matTooltip=\"More options\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #fieldMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"startEdit(field)\">\n            <mat-icon>edit</mat-icon>\n            <span>Rename</span>\n          </button>\n          <button mat-menu-item (click)=\"duplicateField(field, parentList)\">\n            <mat-icon>content_copy</mat-icon>\n            <span>Duplicate</span>\n          </button>\n          <button mat-menu-item (click)=\"deleteField(field, parentList)\" class=\"delete-action\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n\n    <!-- Allowed Values Editor -->\n    @if (field.isEditingValues && (field.type === 'string' || field.type === 'number')) {\n      <div class=\"allowed-values-editor\" [style.--level]=\"level\">\n        <div class=\"values-header\">\n          <span class=\"values-label\">Allowed values:</span>\n          <input\n            #valueInput\n            class=\"value-input\"\n            type=\"text\"\n            placeholder=\"Type value and press Enter\"\n            (keydown)=\"onAllowedValueKeydown($event, field, valueInput)\"\n          />\n          <button class=\"add-value-btn\" (click)=\"addAllowedValue(field, valueInput)\" matTooltip=\"Add value\">\n            <mat-icon>add</mat-icon>\n          </button>\n        </div>\n        @if (field.allowedValues && field.allowedValues.length > 0) {\n          <div class=\"values-list\">\n            @for (value of field.allowedValues; track value; let vi = $index) {\n              <span class=\"value-chip\">\n                {{ value }}\n                <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(field, vi)\" matTooltip=\"Remove\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            }\n          </div>\n        } @else {\n          <div class=\"no-values\">No values defined yet</div>\n        }\n      </div>\n    }\n\n    <!-- Nested Children -->\n    @if ((field.type === 'object' || field.type === 'array') && field.expanded) {\n      <div class=\"nested-fields\" [style.--level]=\"level + 1\">\n        @if (field.children && field.children.length > 0) {\n          <ng-container *ngTemplateOutlet=\"fieldListTemplate; context: { fields: field.children, level: level + 1, parentList: field.children }\"></ng-container>\n        } @else {\n          <div class=\"empty-nested\">\n            <span>No child fields</span>\n            <button mat-button (click)=\"addChildField(field)\" color=\"primary\">\n              <mat-icon>add</mat-icon>\n              Add field\n            </button>\n          </div>\n        }\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{--schema-editor-bg: white;--schema-editor-border-radius: 12px;--schema-editor-shadow: 0 4px 20px rgba(0, 0, 0, .08);--schema-editor-border-color: #e2e8f0;--schema-editor-header-bg: white;--schema-editor-header-border: #e2e8f0;--schema-editor-field-bg: #f8fafc;--schema-editor-field-bg-hover: #f1f5f9;--schema-editor-field-bg-editing: #eff6ff;--schema-editor-field-bg-complex: #fefce8;--schema-editor-field-border-radius: 8px;--schema-editor-text-primary: #1e293b;--schema-editor-text-secondary: #64748b;--schema-editor-text-muted: #94a3b8;--schema-editor-accent-primary: #3b82f6;--schema-editor-accent-success: #22c55e;--schema-editor-accent-warning: #f59e0b;--schema-editor-accent-danger: #ef4444;--schema-editor-spacing-sm: 8px;--schema-editor-spacing-md: 16px;--schema-editor-spacing-lg: 24px;--schema-editor-font-size-sm: 12px;--schema-editor-font-size-md: 14px;--schema-editor-font-size-lg: 16px}.schema-editor{background:var(--schema-editor-bg);border-radius:var(--schema-editor-border-radius);box-shadow:var(--schema-editor-shadow);height:100%;display:flex;flex-direction:column;overflow:hidden}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--schema-editor-spacing-md) var(--schema-editor-spacing-lg);border-bottom:1px solid var(--schema-editor-border-color);gap:var(--schema-editor-spacing-md);flex-shrink:0;background:var(--schema-editor-header-bg)}.editor-header .schema-name-section{flex:1;max-width:400px}.editor-header .schema-name-field{width:100%}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.editor-header .header-actions{display:flex;gap:12px}.fields-container{flex:1;overflow-y:auto;padding:16px;min-height:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;color:#94a3b8;text-align:center}.empty-state mat-icon{font-size:64px;width:64px;height:64px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:16px;margin:0}.fields-list{display:flex;flex-direction:column;gap:4px}.field-item{display:flex;align-items:center;gap:var(--schema-editor-spacing-sm);padding:var(--schema-editor-spacing-sm) 12px;padding-left:calc(12px + var(--level, 0) * 24px);background:var(--schema-editor-field-bg);border-radius:var(--schema-editor-field-border-radius);border:1px solid transparent;transition:all .15s ease}.field-item:hover{background:var(--schema-editor-field-bg-hover);border-color:var(--schema-editor-border-color)}.field-item.is-editing{background:var(--schema-editor-field-bg-editing);border-color:var(--schema-editor-accent-primary)}.field-item.is-complex{background:var(--schema-editor-field-bg-complex)}.field-item.is-complex:hover{background:#fef9c3}.field-item.cdk-drag-preview{box-shadow:0 4px 16px #00000026;border:1px solid var(--schema-editor-accent-primary)}.field-item.cdk-drag-placeholder{opacity:.3}.reorder-buttons{display:flex;flex-direction:column;gap:0}.reorder-buttons .reorder-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:14px;border-radius:3px;transition:all .15s ease}.reorder-buttons .reorder-btn:hover:not(:disabled){background:#e2e8f0;color:#3b82f6}.reorder-buttons .reorder-btn:disabled{opacity:.3;cursor:default}.reorder-buttons .reorder-btn mat-icon{font-size:16px;width:16px;height:16px}.indent-buttons{display:flex;flex-direction:row;gap:2px}.indent-buttons .indent-btn{background:none;border:none;padding:2px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;transition:all .15s ease}.indent-buttons .indent-btn:hover:not(:disabled){background:#dbeafe;color:#2563eb}.indent-buttons .indent-btn:disabled{opacity:.3;cursor:default}.indent-buttons .indent-btn mat-icon{font-size:16px;width:16px;height:16px}.expand-btn{background:none;border:none;padding:4px;cursor:pointer;color:#64748b;border-radius:4px;display:flex;align-items:center;transition:all .15s ease}.expand-btn:hover{background:#e2e8f0;color:#1e293b}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:28px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;cursor:pointer;padding:4px 8px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name:hover{background:#e2e8f0}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-name-input{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;padding:6px 10px;border:2px solid #3b82f6;border-radius:6px;outline:none;background:#fff}.field-name-input::placeholder{color:#94a3b8;font-weight:400}.required-btn{background:none;border:none;padding:4px;cursor:pointer;color:#cbd5e1;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;flex-shrink:0}.required-btn:hover{color:#f59e0b;background:#fef3c7}.required-btn.is-required{color:#f59e0b}.required-btn mat-icon{font-size:18px;width:18px;height:18px}.description-input{flex:1;font-size:13px;color:#64748b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;min-width:100px;transition:all .15s ease}.description-input:focus{border-color:#3b82f6;background:#fff}.description-input::placeholder{color:#94a3b8;font-style:italic}.type-selector{width:140px;flex-shrink:0}.type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.type-selector ::ng-deep .mat-mdc-text-field-wrapper{padding:0 8px!important}.type-selector ::ng-deep .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important;min-height:28px!important}.type-selector ::ng-deep .mat-mdc-select{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-value-text{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-arrow-wrapper{transform:scale(.8)}.field-actions{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s ease}.field-item:hover .field-actions{opacity:1}.field-actions button{color:#64748b}.field-actions button:hover{color:#1e293b}.delete-action{color:#ef4444!important}.delete-action mat-icon{color:#ef4444}.nested-fields{margin-left:calc(var(--level, 0) * 24px + 24px);padding-left:16px;border-left:2px solid #e2e8f0;display:flex;flex-direction:column;gap:4px;margin-top:4px;margin-bottom:8px}.empty-nested{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#94a3b8;font-size:13px;font-style:italic;background:#f8fafc;border-radius:6px;border:1px dashed #e2e8f0}.allowed-values-editor{margin-left:calc(var(--level, 0) * 24px + 48px);margin-top:4px;margin-bottom:8px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px}.allowed-values-editor .values-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.allowed-values-editor .values-label{font-size:12px;font-weight:500;color:#166534}.allowed-values-editor .value-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #86efac;border-radius:4px;outline:none;background:#fff}.allowed-values-editor .value-input:focus{border-color:#22c55e}.allowed-values-editor .value-input::placeholder{color:#94a3b8}.allowed-values-editor .add-value-btn{background:#22c55e;border:none;color:#fff;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.allowed-values-editor .add-value-btn:hover{background:#16a34a}.allowed-values-editor .add-value-btn mat-icon{font-size:18px;width:18px;height:18px}.allowed-values-editor .values-list{display:flex;flex-wrap:wrap;gap:6px}.allowed-values-editor .value-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#fff;border:1px solid #86efac;border-radius:4px;font-size:12px;color:#166534}.allowed-values-editor .value-chip .remove-value-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.allowed-values-editor .value-chip .remove-value-btn:hover{color:#ef4444}.allowed-values-editor .value-chip .remove-value-btn mat-icon{font-size:14px;width:14px;height:14px}.allowed-values-editor .no-values{font-size:12px;color:#94a3b8;font-style:italic}.field-actions .has-values{color:#22c55e!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: DragDropModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SchemaEditorComponent, isStandalone: true, selector: "schema-editor", inputs: { schema: "schema" }, outputs: { schemaChange: "schemaChange", save: "save" }, ngImport: i0, template: "<div class=\"schema-editor\">\n  <!-- Schema Header -->\n  <div class=\"editor-header\">\n    <div class=\"schema-name-section\">\n      <mat-form-field appearance=\"outline\" class=\"schema-name-field\">\n        <mat-label>Schema Name</mat-label>\n        <input\n          #schemaNameInput\n          matInput\n          [value]=\"schemaName()\"\n          (input)=\"onSchemaNameChange($any($event.target).value, schemaNameInput)\"\n          placeholder=\"Enter schema name\"\n        />\n      </mat-form-field>\n    </div>\n    <div class=\"header-actions\">\n      <button mat-flat-button color=\"primary\" (click)=\"addField()\">\n        <mat-icon>add</mat-icon>\n        Add Field\n      </button>\n    </div>\n  </div>\n\n  <!-- Fields List -->\n  <div class=\"fields-container\">\n    @if (fields().length === 0) {\n      <div class=\"empty-state\">\n        <mat-icon>schema</mat-icon>\n        <p>No fields yet. Click \"Add Field\" to get started.</p>\n      </div>\n    } @else {\n      <div class=\"fields-list\">\n        <ng-container *ngTemplateOutlet=\"fieldListTemplate; context: { fields: fields(), level: 0, parentList: fields() }\"></ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Recursive Field Template -->\n<ng-template #fieldListTemplate let-fields=\"fields\" let-level=\"level\" let-parentList=\"parentList\">\n  @for (field of fields; track trackByFieldId($index, field); let i = $index; let first = $first; let last = $last) {\n    <div\n      class=\"field-item\"\n      [class.has-children]=\"field.children && field.children.length > 0\"\n      [class.is-editing]=\"field.isEditing\"\n      [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n      [style.--level]=\"level\"\n    >\n      <!-- Reorder Buttons -->\n      <div class=\"reorder-buttons\">\n        <button\n          class=\"reorder-btn\"\n          [disabled]=\"first\"\n          (click)=\"moveFieldUp(field, parentList)\"\n          matTooltip=\"Move up\"\n        >\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        </button>\n        <button\n          class=\"reorder-btn\"\n          [disabled]=\"last\"\n          (click)=\"moveFieldDown(field, parentList)\"\n          matTooltip=\"Move down\"\n        >\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n\n      <!-- Indent/Outdent Buttons -->\n      <div class=\"indent-buttons\">\n        <button\n          class=\"indent-btn\"\n          [disabled]=\"!canIndent(field, parentList)\"\n          (click)=\"indentField(field, parentList)\"\n          matTooltip=\"Move into previous object/array\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button\n          class=\"indent-btn\"\n          [disabled]=\"level === 0\"\n          (click)=\"outdentField(field, parentList, level)\"\n          matTooltip=\"Move out of parent\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </div>\n\n      <!-- Expand/Collapse -->\n      @if (field.type === 'object' || field.type === 'array') {\n        <button\n          class=\"expand-btn\"\n          (click)=\"toggleExpand(field)\"\n          matTooltip=\"{{ field.expanded ? 'Collapse' : 'Expand' }}\"\n        >\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <!-- Type Icon -->\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      <!-- Field Name -->\n      @if (field.isEditing) {\n        <input\n          class=\"field-name-input\"\n          [value]=\"field.name\"\n          (input)=\"onFieldNameChange(field, $event)\"\n          (blur)=\"stopEdit(field)\"\n          (keydown)=\"onFieldNameKeydown($event, field)\"\n          placeholder=\"Field name\"\n          autofocus\n        />\n      } @else {\n        <span class=\"field-name\" (dblclick)=\"startEdit(field)\">\n          {{ field.name || 'unnamed' }}\n          @if (field.type === 'array') {\n            <span class=\"array-indicator\">[]</span>\n          }\n        </span>\n      }\n\n      <!-- Required Toggle -->\n      <button\n        class=\"required-btn\"\n        [class.is-required]=\"field.required\"\n        (click)=\"toggleRequired(field)\"\n        [matTooltip]=\"field.required ? 'Required (click to make optional)' : 'Optional (click to make required)'\"\n      >\n        <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n      </button>\n\n      <!-- Description Input -->\n      <input\n        class=\"description-input\"\n        [value]=\"field.description || ''\"\n        (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n        placeholder=\"Description...\"\n      />\n\n      <!-- Type Selector -->\n      <mat-form-field appearance=\"outline\" class=\"type-selector\">\n        <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange(field, $event.value)\">\n          @for (type of fieldTypes; track type.value) {\n            <mat-option [value]=\"type.value\">\n              <mat-icon>{{ type.icon }}</mat-icon>\n              {{ type.label }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <!-- Actions -->\n      <div class=\"field-actions\">\n        @if (field.type === 'object' || field.type === 'array') {\n          <button\n            mat-icon-button\n            (click)=\"addChildField(field)\"\n            matTooltip=\"Add child field\"\n          >\n            <mat-icon>add_circle_outline</mat-icon>\n          </button>\n        }\n        @if (field.type === 'string' || field.type === 'number') {\n          <button\n            mat-icon-button\n            (click)=\"toggleValuesEditor(field)\"\n            [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values (' + field.allowedValues.length + ')' : 'Add allowed values'\"\n            [class.has-values]=\"field.allowedValues?.length\"\n          >\n            <mat-icon>{{ field.allowedValues?.length ? 'list' : 'list' }}</mat-icon>\n          </button>\n        }\n        <button mat-icon-button [matMenuTriggerFor]=\"fieldMenu\" matTooltip=\"More options\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #fieldMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"startEdit(field)\">\n            <mat-icon>edit</mat-icon>\n            <span>Rename</span>\n          </button>\n          <button mat-menu-item (click)=\"duplicateField(field, parentList)\">\n            <mat-icon>content_copy</mat-icon>\n            <span>Duplicate</span>\n          </button>\n          <button mat-menu-item (click)=\"deleteField(field, parentList)\" class=\"delete-action\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n\n    <!-- Allowed Values Editor -->\n    @if (field.isEditingValues && (field.type === 'string' || field.type === 'number')) {\n      <div class=\"allowed-values-editor\" [style.--level]=\"level\">\n        <div class=\"values-header\">\n          <span class=\"values-label\">Allowed values:</span>\n          <input\n            #valueInput\n            class=\"value-input\"\n            type=\"text\"\n            placeholder=\"Type value and press Enter\"\n            (keydown)=\"onAllowedValueKeydown($event, field, valueInput)\"\n          />\n          <button class=\"add-value-btn\" (click)=\"addAllowedValue(field, valueInput)\" matTooltip=\"Add value\">\n            <mat-icon>add</mat-icon>\n          </button>\n        </div>\n        @if (field.allowedValues && field.allowedValues.length > 0) {\n          <div class=\"values-list\">\n            @for (value of field.allowedValues; track value; let vi = $index) {\n              <span class=\"value-chip\">\n                {{ value }}\n                <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(field, vi)\" matTooltip=\"Remove\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            }\n          </div>\n        } @else {\n          <div class=\"no-values\">No values defined yet</div>\n        }\n      </div>\n    }\n\n    <!-- Nested Children -->\n    @if ((field.type === 'object' || field.type === 'array') && field.expanded) {\n      <div class=\"nested-fields\" [style.--level]=\"level + 1\">\n        @if (field.children && field.children.length > 0) {\n          <ng-container *ngTemplateOutlet=\"fieldListTemplate; context: { fields: field.children, level: level + 1, parentList: field.children }\"></ng-container>\n        } @else {\n          <div class=\"empty-nested\">\n            <span>No child fields</span>\n            <button mat-button (click)=\"addChildField(field)\" color=\"primary\">\n              <mat-icon>add</mat-icon>\n              Add field\n            </button>\n          </div>\n        }\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{--schema-editor-bg: white;--schema-editor-border-radius: 12px;--schema-editor-shadow: 0 4px 20px rgba(0, 0, 0, .08);--schema-editor-border-color: #e2e8f0;--schema-editor-header-bg: white;--schema-editor-header-border: #e2e8f0;--schema-editor-field-bg: #f8fafc;--schema-editor-field-bg-hover: #f1f5f9;--schema-editor-field-bg-editing: #eff6ff;--schema-editor-field-bg-complex: #fefce8;--schema-editor-field-border-radius: 8px;--schema-editor-text-primary: #1e293b;--schema-editor-text-secondary: #64748b;--schema-editor-text-muted: #94a3b8;--schema-editor-accent-primary: #3b82f6;--schema-editor-accent-success: #22c55e;--schema-editor-accent-warning: #f59e0b;--schema-editor-accent-danger: #ef4444;--schema-editor-spacing-sm: 8px;--schema-editor-spacing-md: 16px;--schema-editor-spacing-lg: 24px;--schema-editor-font-size-sm: 12px;--schema-editor-font-size-md: 14px;--schema-editor-font-size-lg: 16px}.schema-editor{background:var(--schema-editor-bg);border-radius:var(--schema-editor-border-radius);box-shadow:var(--schema-editor-shadow);height:100%;display:flex;flex-direction:column;overflow:hidden}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--schema-editor-spacing-md) var(--schema-editor-spacing-lg);border-bottom:1px solid var(--schema-editor-border-color);gap:var(--schema-editor-spacing-md);flex-shrink:0;background:var(--schema-editor-header-bg)}.editor-header .schema-name-section{flex:1;max-width:400px}.editor-header .schema-name-field{width:100%}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.editor-header .header-actions{display:flex;gap:12px}.fields-container{flex:1;overflow-y:auto;padding:16px;min-height:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;color:#94a3b8;text-align:center}.empty-state mat-icon{font-size:64px;width:64px;height:64px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:16px;margin:0}.fields-list{display:flex;flex-direction:column;gap:4px}.field-item{display:flex;align-items:center;gap:var(--schema-editor-spacing-sm);padding:var(--schema-editor-spacing-sm) 12px;padding-left:calc(12px + var(--level, 0) * 24px);background:var(--schema-editor-field-bg);border-radius:var(--schema-editor-field-border-radius);border:1px solid transparent;transition:all .15s ease}.field-item:hover{background:var(--schema-editor-field-bg-hover);border-color:var(--schema-editor-border-color)}.field-item.is-editing{background:var(--schema-editor-field-bg-editing);border-color:var(--schema-editor-accent-primary)}.field-item.is-complex{background:var(--schema-editor-field-bg-complex)}.field-item.is-complex:hover{background:#fef9c3}.field-item.cdk-drag-preview{box-shadow:0 4px 16px #00000026;border:1px solid var(--schema-editor-accent-primary)}.field-item.cdk-drag-placeholder{opacity:.3}.reorder-buttons{display:flex;flex-direction:column;gap:0}.reorder-buttons .reorder-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:14px;border-radius:3px;transition:all .15s ease}.reorder-buttons .reorder-btn:hover:not(:disabled){background:#e2e8f0;color:#3b82f6}.reorder-buttons .reorder-btn:disabled{opacity:.3;cursor:default}.reorder-buttons .reorder-btn mat-icon{font-size:16px;width:16px;height:16px}.indent-buttons{display:flex;flex-direction:row;gap:2px}.indent-buttons .indent-btn{background:none;border:none;padding:2px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;transition:all .15s ease}.indent-buttons .indent-btn:hover:not(:disabled){background:#dbeafe;color:#2563eb}.indent-buttons .indent-btn:disabled{opacity:.3;cursor:default}.indent-buttons .indent-btn mat-icon{font-size:16px;width:16px;height:16px}.expand-btn{background:none;border:none;padding:4px;cursor:pointer;color:#64748b;border-radius:4px;display:flex;align-items:center;transition:all .15s ease}.expand-btn:hover{background:#e2e8f0;color:#1e293b}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:28px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;cursor:pointer;padding:4px 8px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name:hover{background:#e2e8f0}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-name-input{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;padding:6px 10px;border:2px solid #3b82f6;border-radius:6px;outline:none;background:#fff}.field-name-input::placeholder{color:#94a3b8;font-weight:400}.required-btn{background:none;border:none;padding:4px;cursor:pointer;color:#cbd5e1;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;flex-shrink:0}.required-btn:hover{color:#f59e0b;background:#fef3c7}.required-btn.is-required{color:#f59e0b}.required-btn mat-icon{font-size:18px;width:18px;height:18px}.description-input{flex:1;font-size:13px;color:#64748b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;min-width:100px;transition:all .15s ease}.description-input:focus{border-color:#3b82f6;background:#fff}.description-input::placeholder{color:#94a3b8;font-style:italic}.type-selector{width:140px;flex-shrink:0}.type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.type-selector ::ng-deep .mat-mdc-text-field-wrapper{padding:0 8px!important}.type-selector ::ng-deep .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important;min-height:28px!important}.type-selector ::ng-deep .mat-mdc-select{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-value-text{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-arrow-wrapper{transform:scale(.8)}.field-actions{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s ease}.field-item:hover .field-actions{opacity:1}.field-actions button{color:#64748b}.field-actions button:hover{color:#1e293b}.delete-action{color:#ef4444!important}.delete-action mat-icon{color:#ef4444}.nested-fields{margin-left:calc(var(--level, 0) * 24px + 24px);padding-left:16px;border-left:2px solid #e2e8f0;display:flex;flex-direction:column;gap:4px;margin-top:4px;margin-bottom:8px}.empty-nested{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#94a3b8;font-size:13px;font-style:italic;background:#f8fafc;border-radius:6px;border:1px dashed #e2e8f0}.allowed-values-editor{margin-left:calc(var(--level, 0) * 24px + 48px);margin-top:4px;margin-bottom:8px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px}.allowed-values-editor .values-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.allowed-values-editor .values-label{font-size:12px;font-weight:500;color:#166534}.allowed-values-editor .value-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #86efac;border-radius:4px;outline:none;background:#fff}.allowed-values-editor .value-input:focus{border-color:#22c55e}.allowed-values-editor .value-input::placeholder{color:#94a3b8}.allowed-values-editor .add-value-btn{background:#22c55e;border:none;color:#fff;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.allowed-values-editor .add-value-btn:hover{background:#16a34a}.allowed-values-editor .add-value-btn mat-icon{font-size:18px;width:18px;height:18px}.allowed-values-editor .values-list{display:flex;flex-wrap:wrap;gap:6px}.allowed-values-editor .value-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#fff;border:1px solid #86efac;border-radius:4px;font-size:12px;color:#166534}.allowed-values-editor .value-chip .remove-value-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.allowed-values-editor .value-chip .remove-value-btn:hover{color:#ef4444}.allowed-values-editor .value-chip .remove-value-btn mat-icon{font-size:14px;width:14px;height:14px}.allowed-values-editor .no-values{font-size:12px;color:#94a3b8;font-style:italic}.field-actions .has-values{color:#22c55e!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: DragDropModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaEditorComponent, decorators: [{
             type: Component,
@@ -2471,5 +3197,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayFilterModalComponent, ArraySelectorModalComponent, DataMapperComponent, DefaultValuePopoverComponent, MappingService, SchemaEditorComponent, SchemaParserService, SchemaTreeComponent, SvgConnectorService, TransformationPopoverComponent, TransformationService };
+export { ArrayFilterModalComponent, ArraySelectorModalComponent, DataMapperComponent, DefaultValuePopoverComponent, MappingService, SchemaEditorComponent, SchemaParserService, SchemaTreeComponent, SvgConnectorService, TransformationPopoverComponent, TransformationService, addProperty, createEmptySchema, getSchemaType, removeProperty, schemaToFields };
 //# sourceMappingURL=expeed-ngx-data-mapper.mjs.map