@expeed/ngx-data-mapper 1.0.0 → 1.2.0

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

@@ -4,29 +4,122 @@ 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 * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i5$1 from '@angular/material/input';
+import * as i5 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 i10 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 { 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 i8$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i9$1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+
+/**
+ * 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" }] : []));
@@ -34,16 +127,21 @@ class MappingService {
     arrayToObjectMappings = signal([], ...(ngDevMode ? [{ debugName: "arrayToObjectMappings" }] : []));
     defaultValues = signal([], ...(ngDevMode ? [{ debugName: "defaultValues" }] : []));
     selectedMappingId = signal(null, ...(ngDevMode ? [{ debugName: "selectedMappingId" }] : []));
+    _sourceSchemaRef = signal(null, ...(ngDevMode ? [{ debugName: "_sourceSchemaRef" }] : []));
+    _targetSchemaRef = signal(null, ...(ngDevMode ? [{ debugName: "_targetSchemaRef" }] : []));
     dragState = signal({
         isDragging: false,
         sourceField: null,
         startPoint: null,
         currentPoint: null,
+        dragMode: 'new',
     }, ...(ngDevMode ? [{ debugName: "dragState" }] : []));
     allMappings = computed(() => this.mappings(), ...(ngDevMode ? [{ debugName: "allMappings" }] : []));
     allArrayMappings = computed(() => this.arrayMappings(), ...(ngDevMode ? [{ debugName: "allArrayMappings" }] : []));
     allArrayToObjectMappings = computed(() => this.arrayToObjectMappings(), ...(ngDevMode ? [{ debugName: "allArrayToObjectMappings" }] : []));
     allDefaultValues = computed(() => this.defaultValues(), ...(ngDevMode ? [{ debugName: "allDefaultValues" }] : []));
+    sourceSchemaRef = computed(() => this._sourceSchemaRef(), ...(ngDevMode ? [{ debugName: "sourceSchemaRef" }] : []));
+    targetSchemaRef = computed(() => this._targetSchemaRef(), ...(ngDevMode ? [{ debugName: "targetSchemaRef" }] : []));
     selectedMapping = computed(() => {
         const id = this.selectedMappingId();
         return this.mappings().find((m) => m.id === id) || null;
@@ -58,6 +156,26 @@ class MappingService {
             sourceField: field,
             startPoint,
             currentPoint: startPoint,
+            dragMode: 'new',
+        });
+    }
+    startEndpointDrag(mappingId, endpointType, startPoint, sourceFieldIndex) {
+        const mapping = this.mappings().find(m => m.id === mappingId);
+        if (!mapping)
+            return;
+        // For source endpoint, we show the line from target back to cursor
+        // For target endpoint, we show the line from source(s) to cursor
+        const dragMode = endpointType === 'source' ? 'move-source' : 'move-target';
+        this.dragState.set({
+            isDragging: true,
+            sourceField: endpointType === 'source'
+                ? mapping.sourceFields[sourceFieldIndex ?? 0]
+                : mapping.targetField,
+            startPoint,
+            currentPoint: startPoint,
+            dragMode,
+            mappingId,
+            sourceFieldIndex,
         });
     }
     updateDragPosition(currentPoint) {
@@ -72,8 +190,62 @@ class MappingService {
             sourceField: null,
             startPoint: null,
             currentPoint: null,
+            dragMode: 'new',
         });
     }
+    changeSourceField(mappingId, newSourceField, sourceFieldIndex) {
+        const mapping = this.mappings().find(m => m.id === mappingId);
+        if (!mapping)
+            return;
+        // Don't allow if new source is the same as target
+        if (newSourceField.id === mapping.targetField.id)
+            return;
+        // Don't allow if source already exists in the mapping
+        if (mapping.sourceFields.some(sf => sf.id === newSourceField.id))
+            return;
+        if (sourceFieldIndex !== undefined && mapping.sourceFields.length > 1) {
+            // Replace specific source field in multi-source mapping
+            const newSourceFields = [...mapping.sourceFields];
+            newSourceFields[sourceFieldIndex] = newSourceField;
+            this.mappings.update(mappings => mappings.map(m => m.id === mappingId ? { ...m, sourceFields: newSourceFields } : m));
+        }
+        else {
+            // Single source mapping - replace the source field
+            this.mappings.update(mappings => mappings.map(m => m.id === mappingId ? { ...m, sourceFields: [newSourceField] } : m));
+        }
+    }
+    changeTargetField(mappingId, newTargetField) {
+        const mapping = this.mappings().find(m => m.id === mappingId);
+        if (!mapping)
+            return;
+        // Don't allow if new target is same as any source
+        if (mapping.sourceFields.some(sf => sf.id === newTargetField.id))
+            return;
+        // Check if another mapping already targets this field
+        const existingMapping = this.mappings().find(m => m.targetField.id === newTargetField.id && m.id !== mappingId);
+        if (existingMapping) {
+            // Merge into existing mapping (add sources)
+            const mergedSources = [
+                ...existingMapping.sourceFields,
+                ...mapping.sourceFields.filter(sf => !existingMapping.sourceFields.some(esf => esf.id === sf.id)),
+            ];
+            this.mappings.update(mappings => mappings
+                .filter(m => m.id !== mappingId) // Remove old mapping
+                .map(m => m.id === existingMapping.id
+                ? {
+                    ...m,
+                    sourceFields: mergedSources,
+                    transformations: mergedSources.length > 1
+                        ? [{ type: 'concat', separator: ' ' }]
+                        : m.transformations,
+                }
+                : m));
+        }
+        else {
+            // Simply update the target field
+            this.mappings.update(mappings => mappings.map(m => m.id === mappingId ? { ...m, targetField: newTargetField } : m));
+        }
+    }
     createMapping(sourceFields, targetField, transformation) {
         // Check if this is an array-to-array mapping
         const sourceField = sourceFields[0];
@@ -97,9 +269,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 +280,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 +322,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 +349,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 +413,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 +434,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));
         }
@@ -284,13 +456,20 @@ class MappingService {
         this.arrayToObjectMappings.set([]);
         this.defaultValues.set([]);
         this.selectedMappingId.set(null);
+        this._sourceSchemaRef.set(null);
+        this._targetSchemaRef.set(null);
+    }
+    setSourceSchemaRef(ref) {
+        this._sourceSchemaRef.set(ref);
+    }
+    setTargetSchemaRef(ref) {
+        this._targetSchemaRef.set(ref);
     }
     // Default value methods
     setDefaultValue(targetField, value) {
-        const valueType = this.getValueType(targetField.type);
         const existingDefault = this.defaultValues().find(d => d.targetField.id === targetField.id);
         if (existingDefault) {
-            const updated = { ...existingDefault, value, valueType };
+            const updated = { ...existingDefault, value };
             this.defaultValues.update(dv => dv.map(d => d.id === existingDefault.id ? updated : d));
             return updated;
         }
@@ -298,7 +477,6 @@ class MappingService {
             id: this.generateId(),
             targetField,
             value,
-            valueType,
         };
         this.defaultValues.update(dv => [...dv, newDefault]);
         return newDefault;
@@ -312,22 +490,46 @@ class MappingService {
     hasDefaultValue(targetFieldId) {
         return this.defaultValues().some(d => d.targetField.id === targetFieldId);
     }
-    getValueType(fieldType) {
-        switch (fieldType) {
-            case 'number': return 'number';
-            case 'boolean': return 'boolean';
-            case 'date': return 'date';
-            default: return 'string';
+    exportMappings(name, description) {
+        const exportData = {
+            version: '1.0',
+            name: name || 'Mapping Configuration',
+            description: description || '',
+            mappings: this.mappings(),
+            arrayMappings: this.arrayMappings(),
+            arrayToObjectMappings: this.arrayToObjectMappings(),
+            defaultValues: this.defaultValues(),
+        };
+        // Include schema refs if set
+        if (this._sourceSchemaRef()) {
+            exportData['sourceSchemaRef'] = this._sourceSchemaRef();
         }
+        if (this._targetSchemaRef()) {
+            exportData['targetSchemaRef'] = this._targetSchemaRef();
+        }
+        return JSON.stringify(exportData, null, 2);
     }
-    exportMappings() {
+    /**
+     * Export mappings as a MappingDocument object (not stringified)
+     */
+    exportMappingsAsObject(name, description) {
         const exportData = {
+            version: '1.0',
+            name: name || 'Mapping Configuration',
+            description: description || '',
             mappings: this.mappings(),
             arrayMappings: this.arrayMappings(),
             arrayToObjectMappings: this.arrayToObjectMappings(),
             defaultValues: this.defaultValues(),
         };
-        return JSON.stringify(exportData, null, 2);
+        // Include schema refs if set
+        if (this._sourceSchemaRef()) {
+            exportData['sourceSchemaRef'] = this._sourceSchemaRef();
+        }
+        if (this._targetSchemaRef()) {
+            exportData['targetSchemaRef'] = this._targetSchemaRef();
+        }
+        return exportData;
     }
     importMappings(json) {
         try {
@@ -337,6 +539,8 @@ class MappingService {
                 this.arrayMappings.set(data.arrayMappings || []);
                 this.arrayToObjectMappings.set(data.arrayToObjectMappings || []);
                 this.defaultValues.set(data.defaultValues || []);
+                this._sourceSchemaRef.set(data.sourceSchemaRef || null);
+                this._targetSchemaRef.set(data.targetSchemaRef || null);
             }
             else {
                 // Legacy format
@@ -377,6 +581,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 +603,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 +690,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 +757,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 +784,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 +795,6 @@ class TransformationService {
             extractSecond: 'Extract Second',
             numberFormat: 'Number Format',
             template: 'Template',
-            custom: 'Custom Expression',
         };
         return labels[type];
     }
@@ -523,6 +806,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 +817,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' });
 }
@@ -585,15 +938,17 @@ class SvgConnectorService {
     }
     calculateConnectionPoint(rect, side, containerRect) {
         const relativeY = rect.top - containerRect.top + rect.height / 2;
+        // Offset to position endpoint circles outside the schema panels
+        const endpointOffset = 8;
         if (side === 'source') {
             return {
-                x: rect.right - containerRect.left,
+                x: rect.right - containerRect.left + endpointOffset,
                 y: relativeY,
             };
         }
         else {
             return {
-                x: rect.left - containerRect.left,
+                x: rect.left - containerRect.left - endpointOffset,
                 y: relativeY,
             };
         }
@@ -761,7 +1116,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') {
@@ -859,6 +1214,7 @@ class SchemaTreeComponent {
     fieldDragStart = new EventEmitter();
     fieldDragEnd = new EventEmitter();
     fieldDrop = new EventEmitter();
+    sourceDrop = new EventEmitter(); // For endpoint dragging - drop on source field
     fieldPositionsChanged = new EventEmitter();
     fieldDefaultValueClick = new EventEmitter();
     schemaFieldsContainer;
@@ -910,21 +1266,45 @@ class SchemaTreeComponent {
     onDragStart(event, field) {
         if (this.side !== 'source')
             return;
+        // Don't start new drag if endpoint dragging is in progress
+        const dragState = this.mappingService.currentDragState();
+        if (dragState.isDragging)
+            return;
         const element = event.currentTarget;
         const rect = element.getBoundingClientRect();
         this.fieldDragStart.emit({ field, element, rect });
     }
+    isEndpointDragMode() {
+        const dragState = this.mappingService.currentDragState();
+        return dragState.isDragging && (dragState.dragMode === 'move-source' || dragState.dragMode === 'move-target');
+    }
+    isSourceEndpointDragging() {
+        const dragState = this.mappingService.currentDragState();
+        return dragState.isDragging && dragState.dragMode === 'move-source';
+    }
+    isTargetEndpointDragging() {
+        const dragState = this.mappingService.currentDragState();
+        return dragState.isDragging && dragState.dragMode === 'move-target';
+    }
     onDragOver(event) {
         if (this.side === 'target') {
             event.preventDefault();
         }
     }
     onDrop(event, field) {
-        if (this.side !== 'target')
-            return;
         const element = event.currentTarget;
         const rect = element.getBoundingClientRect();
-        this.fieldDrop.emit({ field, element, rect });
+        // Check if endpoint dragging is in progress (via MappingService drag state)
+        const dragState = this.mappingService.currentDragState();
+        // Handle source drop during endpoint dragging (moving source endpoint)
+        if (this.side === 'source' && dragState.isDragging && dragState.dragMode === 'move-source') {
+            this.sourceDrop.emit({ field, element, rect });
+            return;
+        }
+        // Handle target drop (either endpoint dragging or new mapping)
+        if (this.side === 'target') {
+            this.fieldDrop.emit({ field, element, rect });
+        }
     }
     getTypeIcon(type) {
         const icons = {
@@ -961,7 +1341,7 @@ class SchemaTreeComponent {
         const defaultValue = this.defaultValues.find(d => d.targetField.id === field.id);
         if (!defaultValue || defaultValue.value === null)
             return '';
-        if (defaultValue.valueType === 'date' && defaultValue.value) {
+        if (defaultValue.targetField.type === 'date' && defaultValue.value) {
             return new Date(defaultValue.value).toLocaleDateString();
         }
         return String(defaultValue.value);
@@ -987,11 +1367,11 @@ 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", sourceDrop: "sourceDrop", 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') && !isEndpointDragMode()\"\n      [class.droppable]=\"(side === 'target' && ((!field.children || field.children.length === 0) || field.type === 'array' || field.type === 'object')) || (side === 'source' && isSourceEndpointDragging() && ((!field.children || field.children.length === 0) || field.type === 'array'))\"\n      [class.endpoint-drop-target]=\"(side === 'source' && isSourceEndpointDragging()) || (side === 'target' && isTargetEndpointDragging())\"\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(--data-mapper-panel-bg, var(--surface-card, #ffffff));border-radius:var(--data-mapper-panel-border-radius, 12px);border:var(--data-mapper-panel-border, none);box-shadow:var(--data-mapper-panel-shadow, 0 2px 8px rgba(0, 0, 0, .08));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}.field-item.endpoint-drop-target{background-color:#fef3c7}.field-item.endpoint-drop-target:hover{background-color:#fde68a}.field-item.endpoint-drop-target .connection-point .point-dot{animation:pulse-drop-target 1s ease-in-out infinite}@keyframes pulse-drop-target{0%,to{transform:scale(1);box-shadow:0 0 0 3px #f59e0b4d}50%{transform:scale(1.2);box-shadow:0 0 0 6px #f59e0b33}}.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,
-            args: [{ selector: 'schema-tree', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule], 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"] }]
+            args: [{ selector: 'schema-tree', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule], 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') && !isEndpointDragMode()\"\n      [class.droppable]=\"(side === 'target' && ((!field.children || field.children.length === 0) || field.type === 'array' || field.type === 'object')) || (side === 'source' && isSourceEndpointDragging() && ((!field.children || field.children.length === 0) || field.type === 'array'))\"\n      [class.endpoint-drop-target]=\"(side === 'source' && isSourceEndpointDragging()) || (side === 'target' && isTargetEndpointDragging())\"\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(--data-mapper-panel-bg, var(--surface-card, #ffffff));border-radius:var(--data-mapper-panel-border-radius, 12px);border:var(--data-mapper-panel-border, none);box-shadow:var(--data-mapper-panel-shadow, 0 2px 8px rgba(0, 0, 0, .08));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}.field-item.endpoint-drop-target{background-color:#fef3c7}.field-item.endpoint-drop-target:hover{background-color:#fde68a}.field-item.endpoint-drop-target .connection-point .point-dot{animation:pulse-drop-target 1s ease-in-out infinite}@keyframes pulse-drop-target{0%,to{transform:scale(1);box-shadow:0 0 0 3px #f59e0b4d}50%{transform:scale(1.2);box-shadow:0 0 0 6px #f59e0b33}}.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"] }]
         }], propDecorators: { schema: [{
                 type: Input
             }], side: [{
@@ -1006,6 +1386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Output
             }], fieldDrop: [{
                 type: Output
+            }], sourceDrop: [{
+                type: Output
             }], fieldPositionsChanged: [{
                 type: Output
             }], fieldDefaultValueClick: [{
@@ -1018,6 +1400,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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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 +1617,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 +1637,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 +1803,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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i10.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: i10.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: i10.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 +1897,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 +2114,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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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.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 +2318,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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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.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,
@@ -1575,7 +2357,7 @@ class DefaultValuePopoverComponent {
     dateValue = null;
     ngOnInit() {
         if (this.existingValue) {
-            switch (this.existingValue.valueType) {
+            switch (this.fieldType) {
                 case 'string':
                     this.stringValue = this.existingValue.value || '';
                     break;
@@ -1626,7 +2408,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.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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.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 +2439,22 @@ 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);
+        }
+    }
+    set sourceSchemaRef(value) {
+        this.mappingService.setSourceSchemaRef(value ?? null);
+    }
+    set targetSchemaRef(value) {
+        this.mappingService.setTargetSchemaRef(value ?? null);
+    }
     sampleData = {};
     mappingsChange = new EventEmitter();
     svgContainer;
@@ -1666,6 +2462,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();
@@ -1694,6 +2507,12 @@ class DataMapperComponent {
     dragSourceField = null;
     dragStartPoint = null;
     resizeObserver;
+    // Endpoint drag state
+    isEndpointDragging = false;
+    endpointDragMappingId = null;
+    endpointDragType = null;
+    endpointDragSourceIndex = null;
+    endpointDragAnchorPoint = null;
     ngAfterViewInit() {
         this.setupResizeObserver();
     }
@@ -1729,15 +2548,27 @@ class DataMapperComponent {
         document.body.style.cursor = 'grabbing';
     }
     onMouseMove(event) {
-        if (!this.isDragging || !this.dragStartPoint || !this.svgContainer?.nativeElement)
+        if (!this.svgContainer?.nativeElement)
             return;
         const containerRect = this.svgContainer.nativeElement.getBoundingClientRect();
         const currentPoint = {
             x: event.clientX - containerRect.left,
             y: event.clientY - containerRect.top,
         };
-        const path = this.svgConnectorService.createDragPath(this.dragStartPoint, currentPoint);
-        this.dragPath.set(path);
+        // Handle new connection dragging
+        if (this.isDragging && this.dragStartPoint) {
+            const path = this.svgConnectorService.createDragPath(this.dragStartPoint, currentPoint);
+            this.dragPath.set(path);
+            return;
+        }
+        // Handle endpoint dragging
+        if (this.isEndpointDragging && this.endpointDragAnchorPoint) {
+            // Show drag path from anchor to cursor
+            const path = this.endpointDragType === 'source'
+                ? this.svgConnectorService.createDragPath(currentPoint, this.endpointDragAnchorPoint)
+                : this.svgConnectorService.createDragPath(this.endpointDragAnchorPoint, currentPoint);
+            this.dragPath.set(path);
+        }
     }
     onMouseUp(event) {
         if (this.isDragging) {
@@ -1747,8 +2578,53 @@ class DataMapperComponent {
             this.dragStartPoint = null;
             document.body.style.cursor = '';
         }
+        if (this.isEndpointDragging) {
+            this.cancelEndpointDrag();
+        }
+    }
+    onEndpointDragStart(connection, endpointType, sourceIndex, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (!this.svgContainer?.nativeElement)
+            return;
+        this.isEndpointDragging = true;
+        this.endpointDragMappingId = connection.mappingId;
+        this.endpointDragType = endpointType;
+        this.endpointDragSourceIndex = sourceIndex;
+        // Set anchor point (the point that stays fixed)
+        if (endpointType === 'source') {
+            // Moving source, anchor is the target
+            this.endpointDragAnchorPoint = connection.targetPoint;
+        }
+        else {
+            // Moving target, anchor is the first source (or merge point for multi-source)
+            this.endpointDragAnchorPoint = connection.sourcePoints[0];
+        }
+        // Update MappingService drag state so schema-tree can detect endpoint dragging
+        this.mappingService.startEndpointDrag(connection.mappingId, endpointType, endpointType === 'source' ? connection.sourcePoints[sourceIndex] : connection.targetPoint, sourceIndex);
+        document.body.style.cursor = 'grabbing';
+        this.updateConnections(); // Update to show connection as being dragged
+    }
+    cancelEndpointDrag() {
+        this.dragPath.set(null);
+        this.isEndpointDragging = false;
+        this.endpointDragMappingId = null;
+        this.endpointDragType = null;
+        this.endpointDragSourceIndex = null;
+        this.endpointDragAnchorPoint = null;
+        document.body.style.cursor = '';
+        this.mappingService.endDrag(); // Reset MappingService drag state
+        this.updateConnections(); // Update to restore connection visibility
     }
     onFieldDrop(event) {
+        // Handle endpoint drag completion (drop on target field)
+        if (this.isEndpointDragging && this.endpointDragMappingId && this.endpointDragType === 'target') {
+            this.mappingService.changeTargetField(this.endpointDragMappingId, event.field);
+            this.mappingsChange.emit(this.mappingService.allMappings());
+            this.updateConnections();
+            this.cancelEndpointDrag();
+            return;
+        }
         if (!this.dragSourceField)
             return;
         // Create mapping
@@ -1762,6 +2638,15 @@ class DataMapperComponent {
         this.dragPath.set(null);
         document.body.style.cursor = '';
     }
+    onSourceFieldDrop(event) {
+        // Handle endpoint drag completion (drop on source field)
+        if (this.isEndpointDragging && this.endpointDragMappingId && this.endpointDragType === 'source') {
+            this.mappingService.changeSourceField(this.endpointDragMappingId, event.field, this.endpointDragSourceIndex ?? undefined);
+            this.mappingsChange.emit(this.mappingService.allMappings());
+            this.updateConnections();
+            this.cancelEndpointDrag();
+        }
+    }
     onConnectionClick(connection, event) {
         event.stopPropagation();
         this.selectedMappingId.set(connection.mappingId);
@@ -1854,10 +2739,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();
@@ -1920,13 +2805,15 @@ class DataMapperComponent {
                 id: `conn-${mapping.id}`,
                 mappingId: mapping.id,
                 paths,
+                sourcePoints,
                 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,
                 hasFilter,
+                isBeingDragged: mapping.id === this.endpointDragMappingId,
             });
         }
         this.connections.set(newConnections);
@@ -1972,7 +2859,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 +2882,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", sourceSchemaRef: "sourceSchemaRef", targetSchemaRef: "targetSchemaRef", 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        (sourceDrop)=\"onSourceFieldDrop($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\" [class.being-dragged]=\"connection.isBeingDragged\">\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\n          <!-- Source endpoint circles (draggable) -->\n          @for (sourcePoint of connection.sourcePoints; track $index) {\n            <circle\n              class=\"endpoint-handle source-endpoint\"\n              [attr.cx]=\"sourcePoint.x\"\n              [attr.cy]=\"sourcePoint.y\"\n              r=\"6\"\n              [class.selected]=\"connection.isSelected\"\n              (mousedown)=\"onEndpointDragStart(connection, 'source', $index, $event)\"\n            />\n          }\n\n          <!-- Target endpoint circle (draggable) -->\n          <circle\n            class=\"endpoint-handle target-endpoint\"\n            [attr.cx]=\"connection.targetPoint.x\"\n            [attr.cy]=\"connection.targetPoint.y\"\n            r=\"6\"\n            [class.selected]=\"connection.isSelected\"\n            (mousedown)=\"onEndpointDragStart(connection, 'target', 0, $event)\"\n          />\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:3}.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-group.being-dragged{opacity:.3;pointer-events:none}.connection-group.being-dragged .endpoint-handle{opacity:0}.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}}.endpoint-handle{fill:#fff;stroke:#6366f1;stroke-width:2;cursor:grab;opacity:0;transition:opacity .15s ease,transform .15s ease,r .15s ease;pointer-events:auto}.endpoint-handle:hover{opacity:1;r:8;fill:#6366f1;cursor:grab}.endpoint-handle:active{cursor:grabbing}.endpoint-handle.selected,.connection-group:hover .endpoint-handle{opacity:.7}.connection-group.selected .endpoint-handle{opacity:1}.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", "sourceDrop", "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,11 +2896,15 @@ 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        (sourceDrop)=\"onSourceFieldDrop($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\" [class.being-dragged]=\"connection.isBeingDragged\">\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\n          <!-- Source endpoint circles (draggable) -->\n          @for (sourcePoint of connection.sourcePoints; track $index) {\n            <circle\n              class=\"endpoint-handle source-endpoint\"\n              [attr.cx]=\"sourcePoint.x\"\n              [attr.cy]=\"sourcePoint.y\"\n              r=\"6\"\n              [class.selected]=\"connection.isSelected\"\n              (mousedown)=\"onEndpointDragStart(connection, 'source', $index, $event)\"\n            />\n          }\n\n          <!-- Target endpoint circle (draggable) -->\n          <circle\n            class=\"endpoint-handle target-endpoint\"\n            [attr.cx]=\"connection.targetPoint.x\"\n            [attr.cy]=\"connection.targetPoint.y\"\n            r=\"6\"\n            [class.selected]=\"connection.isSelected\"\n            (mousedown)=\"onEndpointDragStart(connection, 'target', 0, $event)\"\n          />\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:3}.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-group.being-dragged{opacity:.3;pointer-events:none}.connection-group.being-dragged .endpoint-handle{opacity:0}.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}}.endpoint-handle{fill:#fff;stroke:#6366f1;stroke-width:2;cursor:grab;opacity:0;transition:opacity .15s ease,transform .15s ease,r .15s ease;pointer-events:auto}.endpoint-handle:hover{opacity:1;r:8;fill:#6366f1;cursor:grab}.endpoint-handle:active{cursor:grabbing}.endpoint-handle.selected,.connection-group:hover .endpoint-handle{opacity:.7}.connection-group.selected .endpoint-handle{opacity:1}.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: [{
                 type: Input
+            }], sourceSchemaRef: [{
+                type: Input
+            }], targetSchemaRef: [{
+                type: Input
             }], sampleData: [{
                 type: Input
             }], mappingsChange: [{
@@ -2031,14 +2926,36 @@ 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));
+            // Don't overwrite fields if we have uncommitted changes (fields being edited or with empty names)
+            const hasUncommittedChanges = this.fields().some(f => f.isEditing || f.isEditingDefault || f.isEditingValues || !f.name) || this.hasUncommittedChildFields(this.fields());
+            this.schemaName.set(value.title || 'New Schema');
+            if (!hasUncommittedChanges) {
+                this.fields.set(this.jsonSchemaToEditorFields(value));
+            }
         }
     }
+    hasUncommittedChildFields(fields) {
+        for (const field of fields) {
+            if (field.children) {
+                if (field.children.some(c => c.isEditing || c.isEditingDefault || c.isEditingValues || !c.name)) {
+                    return true;
+                }
+                if (this.hasUncommittedChildFields(field.children)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    showJsonToggle = true;
     schemaChange = new EventEmitter();
     save = new EventEmitter();
     schemaName = signal('New Schema', ...(ngDevMode ? [{ debugName: "schemaName" }] : []));
     fields = signal([], ...(ngDevMode ? [{ debugName: "fields" }] : []));
+    // View mode: 'visual' or 'json'
+    viewMode = signal('visual', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+    jsonText = signal('', ...(ngDevMode ? [{ debugName: "jsonText" }] : []));
+    jsonError = signal(null, ...(ngDevMode ? [{ debugName: "jsonError" }] : []));
     fieldTypes = [
         { value: 'string', label: 'String', icon: 'text_fields' },
         { value: 'number', label: 'Number', icon: 'pin' },
@@ -2069,7 +2986,8 @@ class SchemaEditorComponent {
             expanded: false,
         };
         this.fields.update(fields => [...fields, newField]);
-        this.emitChange();
+        // Don't emit change here - field has empty name and would be filtered out
+        // Change will be emitted in stopEdit() when user provides a name
     }
     // Add a child field to an object or array
     addChildField(parent) {
@@ -2085,7 +3003,8 @@ class SchemaEditorComponent {
         parent.children.push(newField);
         parent.expanded = true;
         this.fields.update(fields => [...fields]);
-        this.emitChange();
+        // Don't emit change here - field has empty name and would be filtered out
+        // Change will be emitted in stopEdit() when user provides a name
     }
     // Delete a field
     deleteField(field, parentList) {
@@ -2167,21 +3086,43 @@ class SchemaEditorComponent {
     }
     // Toggle allowed values editor
     toggleValuesEditor(field) {
+        const wasEditingDefault = field.isEditingDefault;
         field.isEditingValues = !field.isEditingValues;
-        if (field.isEditingValues && !field.allowedValues) {
-            field.allowedValues = [];
+        if (field.isEditingValues) {
+            // Close default editor when opening values editor
+            field.isEditingDefault = false;
+            if (!field.allowedValues) {
+                field.allowedValues = [];
+            }
         }
         this.fields.update(fields => [...fields]);
+        // Emit change if we closed the default editor (to save any default value)
+        if (wasEditingDefault) {
+            this.emitChange();
+        }
     }
     // Add allowed value
     addAllowedValue(field, input) {
-        const value = input.value.trim();
+        // Handle both direct input reference and event from button click
+        let inputEl = null;
+        if (input instanceof HTMLInputElement) {
+            inputEl = input;
+        }
+        else {
+            // Find the input by traversing up to .values-header and then querying for .value-input
+            const target = input.target;
+            const header = target.closest('.values-header');
+            inputEl = header?.querySelector('.value-input');
+        }
+        if (!inputEl)
+            return;
+        const value = inputEl.value.trim();
         if (value && !field.allowedValues?.includes(value)) {
             if (!field.allowedValues) {
                 field.allowedValues = [];
             }
             field.allowedValues.push(value);
-            input.value = '';
+            inputEl.value = '';
             this.fields.update(fields => [...fields]);
             this.emitChange();
         }
@@ -2204,6 +3145,52 @@ class SchemaEditorComponent {
             this.addAllowedValue(field, input);
         }
     }
+    // Toggle default value editor
+    toggleDefaultEditor(field) {
+        const wasEditingValues = field.isEditingValues;
+        field.isEditingDefault = !field.isEditingDefault;
+        if (field.isEditingDefault) {
+            // Close values editor when opening default editor
+            field.isEditingValues = false;
+        }
+        this.fields.update(fields => [...fields]);
+        // Emit change if we closed the values editor (to save any allowed values)
+        if (wasEditingValues) {
+            this.emitChange();
+        }
+    }
+    // Update default value
+    onDefaultValueChange(field, value) {
+        if (value === '') {
+            field.defaultValue = undefined;
+        }
+        else if (field.type === 'number') {
+            const num = parseFloat(value);
+            field.defaultValue = isNaN(num) ? undefined : num;
+        }
+        else if (field.type === 'boolean') {
+            field.defaultValue = value === 'true';
+        }
+        else {
+            field.defaultValue = value;
+        }
+        this.fields.update(fields => [...fields]);
+        this.emitChange();
+    }
+    // Clear default value
+    clearDefaultValue(field) {
+        field.defaultValue = undefined;
+        field.isEditingDefault = false;
+        this.fields.update(fields => [...fields]);
+        this.emitChange();
+    }
+    // Handle Enter key in default value input
+    onDefaultValueKeydown(event, field) {
+        if (event.key === 'Enter' || event.key === 'Escape') {
+            field.isEditingDefault = false;
+            this.fields.update(fields => [...fields]);
+        }
+    }
     // Handle keyboard events in field name input
     onFieldNameKeydown(event, field) {
         if (event.key === 'Enter') {
@@ -2232,6 +3219,15 @@ class SchemaEditorComponent {
             this.emitChange();
         }
     }
+    // Handle drag and drop reorder
+    onFieldDrop(event) {
+        if (event.previousIndex !== event.currentIndex) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+            this.fields.update(fields => [...fields]);
+            // Don't emit change here - it causes parent to reset expanded state
+            // Order change will be captured on next edit or save
+        }
+    }
     // Check if field can be indented (previous sibling must be object/array)
     canIndent(field, parentList) {
         const index = parentList.indexOf(field);
@@ -2255,9 +3251,11 @@ class SchemaEditorComponent {
             prevSibling.children = [];
         }
         prevSibling.children.push(field);
+        // Always expand the target (keep open if already open, open if closed)
         prevSibling.expanded = true;
         this.fields.update(fields => [...fields]);
-        this.emitChange();
+        // Don't emit change here - it causes parent to reset expanded state
+        // Structure change will be captured on next edit or save
     }
     // Outdent field - move out of parent to grandparent level
     outdentField(field, parentList, level) {
@@ -2278,7 +3276,8 @@ class SchemaEditorComponent {
         const parentIndex = grandparentList.indexOf(parent);
         grandparentList.splice(parentIndex + 1, 0, field);
         this.fields.update(fields => [...fields]);
-        this.emitChange();
+        // Don't emit change here - it causes parent to reset expanded state
+        // Structure change will be captured on next edit or save
     }
     // Find the parent field that contains a given list
     findParentOfList(searchIn, targetList) {
@@ -2319,17 +3318,58 @@ 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,
+            defaultValue: schema.default,
+            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() {
@@ -2422,11 +3462,15 @@ class SchemaEditorComponent {
         if (field.allowedValues && field.allowedValues.length > 0) {
             schema['enum'] = field.allowedValues;
         }
+        // Add default value
+        if (field.defaultValue !== undefined) {
+            schema['default'] = field.defaultValue;
+        }
         return schema;
     }
     stripEditingState(fields) {
         return fields.map(f => {
-            const { isEditing, isEditingValues, ...rest } = f;
+            const { isEditing, isEditingValues, isEditingDefault, ...rest } = f;
             return {
                 ...rest,
                 children: f.children ? this.stripEditingState(f.children) : undefined,
@@ -2437,8 +3481,50 @@ class SchemaEditorComponent {
     trackByFieldId(index, field) {
         return field.id;
     }
+    // --- JSON View Methods ---
+    setViewMode(mode) {
+        if (mode === 'json') {
+            // Sync JSON text from current schema state
+            this.jsonText.set(JSON.stringify(this.toJsonSchema(), null, 2));
+            this.jsonError.set(null);
+        }
+        this.viewMode.set(mode);
+    }
+    onJsonTextChange(text) {
+        this.jsonText.set(text);
+        try {
+            JSON.parse(text);
+            this.jsonError.set(null);
+        }
+        catch (e) {
+            this.jsonError.set(e.message);
+        }
+    }
+    applyJsonChanges() {
+        try {
+            const parsed = JSON.parse(this.jsonText());
+            // Update internal state from JSON
+            this.schemaName.set(parsed.title || 'New Schema');
+            this.fields.set(this.jsonSchemaToEditorFields(parsed));
+            this.jsonError.set(null);
+            this.emitChange();
+        }
+        catch (e) {
+            this.jsonError.set(e.message);
+        }
+    }
+    formatJson() {
+        try {
+            const parsed = JSON.parse(this.jsonText());
+            this.jsonText.set(JSON.stringify(parsed, null, 2));
+            this.jsonError.set(null);
+        }
+        catch (e) {
+            this.jsonError.set(e.message);
+        }
+    }
     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", showJsonToggle: "showJsonToggle" }, 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\n    @if (showJsonToggle) {\n      <mat-button-toggle-group [value]=\"viewMode()\" (change)=\"setViewMode($event.value)\" class=\"view-toggle\">\n        <mat-button-toggle value=\"visual\">Visual</mat-button-toggle>\n        <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n      </mat-button-toggle-group>\n    }\n\n    <div class=\"header-actions\">\n      @if (viewMode() === 'visual') {\n        <button mat-flat-button color=\"primary\" (click)=\"addField()\">\n          <mat-icon>add</mat-icon>\n          Add Field\n        </button>\n      } @else {\n        <button mat-stroked-button (click)=\"formatJson()\">\n          <mat-icon>auto_fix_high</mat-icon>\n          Format\n        </button>\n        <button mat-flat-button color=\"primary\" (click)=\"applyJsonChanges()\" [disabled]=\"jsonError()\">\n          <mat-icon>check</mat-icon>\n          Apply\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- JSON View -->\n  @if (viewMode() === 'json') {\n    <div class=\"json-view\">\n      @if (jsonError()) {\n        <div class=\"json-error\">\n          <mat-icon>error</mat-icon>\n          {{ jsonError() }}\n        </div>\n      }\n      <textarea\n        class=\"json-textarea\"\n        [value]=\"jsonText()\"\n        (input)=\"onJsonTextChange($any($event.target).value)\"\n        spellcheck=\"false\"\n      ></textarea>\n    </div>\n  }\n\n  <!-- Fields List (Visual View) -->\n  <div class=\"fields-container\" [class.hidden]=\"viewMode() === 'json'\">\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\n        class=\"fields-list\"\n        cdkDropList\n        [cdkDropListData]=\"fields()\"\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\n      >\n        @for (field of fields(); track field.id) {\n          <div class=\"field-wrapper\" cdkDrag>\n            <!-- Drag Placeholder -->\n            <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n\n            <!-- Drag Preview -->\n            <div *cdkDragPreview class=\"drag-preview\">\n              <mat-icon>{{ getTypeIcon(field.type) }}</mat-icon>\n              {{ field.name || 'unnamed' }}\n            </div>\n\n            <div\n              class=\"field-item\"\n              [class.is-editing]=\"field.isEditing\"\n              [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n            >\n              <!-- Drag Handle -->\n              <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n                <mat-icon>drag_indicator</mat-icon>\n              </div>\n\n              <!-- Indent/Outdent Buttons -->\n              <div class=\"indent-buttons\">\n                <button\n                  class=\"indent-btn\"\n                  [disabled]=\"!canIndent(field, fields())\"\n                  (click)=\"indentField(field, fields())\"\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\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>list</mat-icon>\n                  </button>\n                }\n                @if (field.type !== 'object' && field.type !== 'array') {\n                  <button\n                    mat-icon-button\n                    (click)=\"toggleDefaultEditor(field)\"\n                    [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n                    [class.has-default]=\"field.defaultValue !== undefined\"\n                  >\n                    <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</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, fields())\">\n                    <mat-icon>content_copy</mat-icon>\n                    <span>Duplicate</span>\n                  </button>\n                  <button mat-menu-item (click)=\"deleteField(field, fields())\" 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\">\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, $event)\" 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            <!-- Default Value Editor -->\n            @if (field.isEditingDefault && field.type !== 'object' && field.type !== 'array') {\n              <div class=\"default-value-editor\">\n                <div class=\"default-header\">\n                  <span class=\"default-label\">Default value:</span>\n                  @if (field.type === 'boolean') {\n                    <select\n                      class=\"default-select\"\n                      [value]=\"field.defaultValue?.toString() || ''\"\n                      (change)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                    >\n                      <option value=\"\">No default</option>\n                      <option value=\"true\">true</option>\n                      <option value=\"false\">false</option>\n                    </select>\n                  } @else {\n                    <input\n                      class=\"default-input\"\n                      [type]=\"field.type === 'number' ? 'number' : 'text'\"\n                      [value]=\"field.defaultValue ?? ''\"\n                      (input)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                      (keydown)=\"onDefaultValueKeydown($event, field)\"\n                      placeholder=\"Enter default value\"\n                    />\n                  }\n                  @if (field.defaultValue !== undefined) {\n                    <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(field)\" matTooltip=\"Clear default\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Nested Children -->\n            @if ((field.type === 'object' || field.type === 'array') && field.expanded && field.children) {\n              <div\n                class=\"nested-fields\"\n                cdkDropList\n                [cdkDropListData]=\"field.children\"\n                (cdkDropListDropped)=\"onFieldDrop($event)\"\n              >\n                @if (field.children.length > 0) {\n                  @for (child of field.children; track child.id) {\n                    <div class=\"field-wrapper\" cdkDrag>\n                      <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                      <div *cdkDragPreview class=\"drag-preview\">\n                        <mat-icon>{{ getTypeIcon(child.type) }}</mat-icon>\n                        {{ child.name || 'unnamed' }}\n                      </div>\n                      <ng-container *ngTemplateOutlet=\"fieldItemTemplate; context: { field: child, parentList: field.children, level: 1 }\"></ng-container>\n\n                      <!-- Allowed Values Editor for nested field -->\n                      @if (child.isEditingValues && (child.type === 'string' || child.type === 'number')) {\n                        <div class=\"allowed-values-editor\">\n                          <div class=\"values-header\">\n                            <span class=\"values-label\">Allowed values:</span>\n                            <input\n                              #childValueInput\n                              class=\"value-input\"\n                              type=\"text\"\n                              placeholder=\"Type value and press Enter\"\n                              (keydown)=\"onAllowedValueKeydown($event, child, childValueInput)\"\n                            />\n                            <button class=\"add-value-btn\" (click)=\"addAllowedValue(child, $event)\" matTooltip=\"Add value\">\n                              <mat-icon>add</mat-icon>\n                            </button>\n                          </div>\n                          @if (child.allowedValues && child.allowedValues.length > 0) {\n                            <div class=\"values-list\">\n                              @for (value of child.allowedValues; track value; let vi = $index) {\n                                <span class=\"value-chip\">\n                                  {{ value }}\n                                  <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(child, 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                      <!-- Default Value Editor for nested field -->\n                      @if (child.isEditingDefault && child.type !== 'object' && child.type !== 'array') {\n                        <div class=\"default-value-editor\">\n                          <div class=\"default-header\">\n                            <span class=\"default-label\">Default value:</span>\n                            @if (child.type === 'boolean') {\n                              <select\n                                class=\"default-select\"\n                                [value]=\"child.defaultValue?.toString() || ''\"\n                                (change)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                              >\n                                <option value=\"\">No default</option>\n                                <option value=\"true\">true</option>\n                                <option value=\"false\">false</option>\n                              </select>\n                            } @else {\n                              <input\n                                class=\"default-input\"\n                                [type]=\"child.type === 'number' ? 'number' : 'text'\"\n                                [value]=\"child.defaultValue ?? ''\"\n                                (input)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                                (keydown)=\"onDefaultValueKeydown($event, child)\"\n                                placeholder=\"Enter default value\"\n                              />\n                            }\n                            @if (child.defaultValue !== undefined) {\n                              <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(child)\" matTooltip=\"Clear default\">\n                                <mat-icon>close</mat-icon>\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\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          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Field Item Template (for nested fields) -->\n<ng-template #fieldItemTemplate let-field=\"field\" let-parentList=\"parentList\" let-level=\"level\">\n  <div\n    class=\"field-item\"\n    [class.is-editing]=\"field.isEditing\"\n    [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n    [style.--level]=\"level\"\n  >\n    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n      <mat-icon>drag_indicator</mat-icon>\n    </div>\n\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        (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    @if (field.type === 'object' || field.type === 'array') {\n      <button class=\"expand-btn\" (click)=\"toggleExpand(field)\" [matTooltip]=\"field.expanded ? 'Collapse' : 'Expand'\">\n        <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n      </button>\n    } @else {\n      <span class=\"expand-placeholder\"></span>\n    }\n\n    <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\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    <button\n      class=\"required-btn\"\n      [class.is-required]=\"field.required\"\n      (click)=\"toggleRequired(field)\"\n      [matTooltip]=\"field.required ? 'Required' : 'Optional'\"\n    >\n      <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n    </button>\n\n    <input\n      class=\"description-input\"\n      [value]=\"field.description || ''\"\n      (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n      placeholder=\"Description...\"\n    />\n\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    <div class=\"field-actions\">\n      @if (field.type === 'object' || field.type === 'array') {\n        <button mat-icon-button (click)=\"addChildField(field)\" matTooltip=\"Add child field\">\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' : 'Add allowed values'\"\n          [class.has-values]=\"field.allowedValues?.length\"\n        >\n          <mat-icon>list</mat-icon>\n        </button>\n      }\n      @if (field.type !== 'object' && field.type !== 'array') {\n        <button\n          mat-icon-button\n          (click)=\"toggleDefaultEditor(field)\"\n          [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n          [class.has-default]=\"field.defaultValue !== undefined\"\n        >\n          <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n        </button>\n      }\n      <button mat-icon-button [matMenuTriggerFor]=\"nestedMenu\" matTooltip=\"More options\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #nestedMenu=\"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</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-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 .schema-name-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:36px}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__leading,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__trailing{border-color:var(--schema-editor-border-color)!important}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch{border-right:none}.editor-header .schema-name-field ::ng-deep input.mat-mdc-input-element{font-size:14px}.editor-header .schema-name-field ::ng-deep .mat-mdc-floating-label{font-size:13px}.editor-header .header-actions{display:flex;gap:12px}.editor-header .header-actions button{display:flex;align-items:center;gap:6px}.editor-header .view-toggle{border:1px solid var(--schema-editor-border-color);border-radius:8px;overflow:hidden}.editor-header .view-toggle ::ng-deep .mat-button-toggle{background:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle.mat-button-toggle-checked{background:var(--schema-editor-accent-primary);color:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle .mat-button-toggle-label-content{padding:0 16px;font-size:13px;font-weight:500;line-height:32px}.json-view{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.json-error{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fef2f2;border-bottom:1px solid #fecaca;color:#dc2626;font-size:12px;flex-shrink:0}.json-error mat-icon{font-size:16px;width:16px;height:16px}.json-textarea{flex:1;width:100%;padding:16px;border:none;outline:none;resize:none;font-family:SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;line-height:1.6;color:var(--schema-editor-text-primary);background:var(--schema-editor-bg);tab-size:2;box-sizing:border-box}.json-textarea:focus{outline:none}.hidden{display:none!important}.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:block;min-height:50px}.fields-list .field-wrapper{margin-bottom: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}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:#94a3b8;padding:4px;border-radius:4px;transition:all .15s ease}.drag-handle:hover{background:#e2e8f0;color:#64748b}.drag-handle:active{cursor:grabbing}.drag-handle mat-icon{font-size:20px;width:20px;height:20px}.field-wrapper{display:block}::ng-deep .drag-preview{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 16px!important;background:#fff!important;border:2px solid #3b82f6!important;border-radius:8px!important;box-shadow:0 8px 24px #0003!important;font-size:14px!important;font-weight:500!important;color:#1e293b!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important}::ng-deep .drag-preview mat-icon{color:#3b82f6!important;font-size:20px!important;width:20px!important;height:20px!important;flex-shrink:0!important;overflow:hidden!important}.drag-placeholder{background:#e2e8f0;border:2px dashed var(--schema-editor-accent-primary);border-radius:var(--schema-editor-field-border-radius);min-height:48px;margin-bottom:4px}.drag-placeholder .placeholder-content{height:100%;min-height:48px}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .field-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.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:block;min-height:30px;margin-top:4px;margin-bottom:8px}.nested-fields .field-wrapper{margin-bottom:4px}.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}.field-actions .has-default{color:#8b5cf6!important}.default-value-editor{margin-left:calc(var(--level, 0) * 24px + 48px);margin-top:4px;margin-bottom:8px;padding:12px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:8px}.default-value-editor .default-header{display:flex;align-items:center;gap:8px}.default-value-editor .default-label{font-size:12px;font-weight:500;color:#6d28d9}.default-value-editor .default-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;max-width:200px}.default-value-editor .default-input:focus{border-color:#8b5cf6}.default-value-editor .default-input::placeholder{color:#94a3b8}.default-value-editor .default-select{padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;cursor:pointer}.default-value-editor .default-select:focus{border-color:#8b5cf6}.default-value-editor .clear-default-btn{background:none;border:none;padding:4px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.default-value-editor .clear-default-btn:hover{color:#ef4444}.default-value-editor .clear-default-btn mat-icon{font-size:16px;width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.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: i4.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: i8$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: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$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: MatButtonToggleModule }, { kind: "directive", type: i9$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i9$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.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: i10.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: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i10.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i10.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaEditorComponent, decorators: [{
             type: Component,
@@ -2452,10 +3538,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatSelectModule,
                         MatTooltipModule,
                         MatMenuModule,
+                        MatButtonToggleModule,
                         DragDropModule,
-                    ], 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"] }]
+                    ], 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\n    @if (showJsonToggle) {\n      <mat-button-toggle-group [value]=\"viewMode()\" (change)=\"setViewMode($event.value)\" class=\"view-toggle\">\n        <mat-button-toggle value=\"visual\">Visual</mat-button-toggle>\n        <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n      </mat-button-toggle-group>\n    }\n\n    <div class=\"header-actions\">\n      @if (viewMode() === 'visual') {\n        <button mat-flat-button color=\"primary\" (click)=\"addField()\">\n          <mat-icon>add</mat-icon>\n          Add Field\n        </button>\n      } @else {\n        <button mat-stroked-button (click)=\"formatJson()\">\n          <mat-icon>auto_fix_high</mat-icon>\n          Format\n        </button>\n        <button mat-flat-button color=\"primary\" (click)=\"applyJsonChanges()\" [disabled]=\"jsonError()\">\n          <mat-icon>check</mat-icon>\n          Apply\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- JSON View -->\n  @if (viewMode() === 'json') {\n    <div class=\"json-view\">\n      @if (jsonError()) {\n        <div class=\"json-error\">\n          <mat-icon>error</mat-icon>\n          {{ jsonError() }}\n        </div>\n      }\n      <textarea\n        class=\"json-textarea\"\n        [value]=\"jsonText()\"\n        (input)=\"onJsonTextChange($any($event.target).value)\"\n        spellcheck=\"false\"\n      ></textarea>\n    </div>\n  }\n\n  <!-- Fields List (Visual View) -->\n  <div class=\"fields-container\" [class.hidden]=\"viewMode() === 'json'\">\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\n        class=\"fields-list\"\n        cdkDropList\n        [cdkDropListData]=\"fields()\"\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\n      >\n        @for (field of fields(); track field.id) {\n          <div class=\"field-wrapper\" cdkDrag>\n            <!-- Drag Placeholder -->\n            <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n\n            <!-- Drag Preview -->\n            <div *cdkDragPreview class=\"drag-preview\">\n              <mat-icon>{{ getTypeIcon(field.type) }}</mat-icon>\n              {{ field.name || 'unnamed' }}\n            </div>\n\n            <div\n              class=\"field-item\"\n              [class.is-editing]=\"field.isEditing\"\n              [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n            >\n              <!-- Drag Handle -->\n              <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n                <mat-icon>drag_indicator</mat-icon>\n              </div>\n\n              <!-- Indent/Outdent Buttons -->\n              <div class=\"indent-buttons\">\n                <button\n                  class=\"indent-btn\"\n                  [disabled]=\"!canIndent(field, fields())\"\n                  (click)=\"indentField(field, fields())\"\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\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>list</mat-icon>\n                  </button>\n                }\n                @if (field.type !== 'object' && field.type !== 'array') {\n                  <button\n                    mat-icon-button\n                    (click)=\"toggleDefaultEditor(field)\"\n                    [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n                    [class.has-default]=\"field.defaultValue !== undefined\"\n                  >\n                    <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</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, fields())\">\n                    <mat-icon>content_copy</mat-icon>\n                    <span>Duplicate</span>\n                  </button>\n                  <button mat-menu-item (click)=\"deleteField(field, fields())\" 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\">\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, $event)\" 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            <!-- Default Value Editor -->\n            @if (field.isEditingDefault && field.type !== 'object' && field.type !== 'array') {\n              <div class=\"default-value-editor\">\n                <div class=\"default-header\">\n                  <span class=\"default-label\">Default value:</span>\n                  @if (field.type === 'boolean') {\n                    <select\n                      class=\"default-select\"\n                      [value]=\"field.defaultValue?.toString() || ''\"\n                      (change)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                    >\n                      <option value=\"\">No default</option>\n                      <option value=\"true\">true</option>\n                      <option value=\"false\">false</option>\n                    </select>\n                  } @else {\n                    <input\n                      class=\"default-input\"\n                      [type]=\"field.type === 'number' ? 'number' : 'text'\"\n                      [value]=\"field.defaultValue ?? ''\"\n                      (input)=\"onDefaultValueChange(field, $any($event.target).value)\"\n                      (keydown)=\"onDefaultValueKeydown($event, field)\"\n                      placeholder=\"Enter default value\"\n                    />\n                  }\n                  @if (field.defaultValue !== undefined) {\n                    <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(field)\" matTooltip=\"Clear default\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Nested Children -->\n            @if ((field.type === 'object' || field.type === 'array') && field.expanded && field.children) {\n              <div\n                class=\"nested-fields\"\n                cdkDropList\n                [cdkDropListData]=\"field.children\"\n                (cdkDropListDropped)=\"onFieldDrop($event)\"\n              >\n                @if (field.children.length > 0) {\n                  @for (child of field.children; track child.id) {\n                    <div class=\"field-wrapper\" cdkDrag>\n                      <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                      <div *cdkDragPreview class=\"drag-preview\">\n                        <mat-icon>{{ getTypeIcon(child.type) }}</mat-icon>\n                        {{ child.name || 'unnamed' }}\n                      </div>\n                      <ng-container *ngTemplateOutlet=\"fieldItemTemplate; context: { field: child, parentList: field.children, level: 1 }\"></ng-container>\n\n                      <!-- Allowed Values Editor for nested field -->\n                      @if (child.isEditingValues && (child.type === 'string' || child.type === 'number')) {\n                        <div class=\"allowed-values-editor\">\n                          <div class=\"values-header\">\n                            <span class=\"values-label\">Allowed values:</span>\n                            <input\n                              #childValueInput\n                              class=\"value-input\"\n                              type=\"text\"\n                              placeholder=\"Type value and press Enter\"\n                              (keydown)=\"onAllowedValueKeydown($event, child, childValueInput)\"\n                            />\n                            <button class=\"add-value-btn\" (click)=\"addAllowedValue(child, $event)\" matTooltip=\"Add value\">\n                              <mat-icon>add</mat-icon>\n                            </button>\n                          </div>\n                          @if (child.allowedValues && child.allowedValues.length > 0) {\n                            <div class=\"values-list\">\n                              @for (value of child.allowedValues; track value; let vi = $index) {\n                                <span class=\"value-chip\">\n                                  {{ value }}\n                                  <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(child, 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                      <!-- Default Value Editor for nested field -->\n                      @if (child.isEditingDefault && child.type !== 'object' && child.type !== 'array') {\n                        <div class=\"default-value-editor\">\n                          <div class=\"default-header\">\n                            <span class=\"default-label\">Default value:</span>\n                            @if (child.type === 'boolean') {\n                              <select\n                                class=\"default-select\"\n                                [value]=\"child.defaultValue?.toString() || ''\"\n                                (change)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                              >\n                                <option value=\"\">No default</option>\n                                <option value=\"true\">true</option>\n                                <option value=\"false\">false</option>\n                              </select>\n                            } @else {\n                              <input\n                                class=\"default-input\"\n                                [type]=\"child.type === 'number' ? 'number' : 'text'\"\n                                [value]=\"child.defaultValue ?? ''\"\n                                (input)=\"onDefaultValueChange(child, $any($event.target).value)\"\n                                (keydown)=\"onDefaultValueKeydown($event, child)\"\n                                placeholder=\"Enter default value\"\n                              />\n                            }\n                            @if (child.defaultValue !== undefined) {\n                              <button class=\"clear-default-btn\" (click)=\"clearDefaultValue(child)\" matTooltip=\"Clear default\">\n                                <mat-icon>close</mat-icon>\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\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          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Field Item Template (for nested fields) -->\n<ng-template #fieldItemTemplate let-field=\"field\" let-parentList=\"parentList\" let-level=\"level\">\n  <div\n    class=\"field-item\"\n    [class.is-editing]=\"field.isEditing\"\n    [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n    [style.--level]=\"level\"\n  >\n    <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n      <mat-icon>drag_indicator</mat-icon>\n    </div>\n\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        (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    @if (field.type === 'object' || field.type === 'array') {\n      <button class=\"expand-btn\" (click)=\"toggleExpand(field)\" [matTooltip]=\"field.expanded ? 'Collapse' : 'Expand'\">\n        <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n      </button>\n    } @else {\n      <span class=\"expand-placeholder\"></span>\n    }\n\n    <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\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    <button\n      class=\"required-btn\"\n      [class.is-required]=\"field.required\"\n      (click)=\"toggleRequired(field)\"\n      [matTooltip]=\"field.required ? 'Required' : 'Optional'\"\n    >\n      <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n    </button>\n\n    <input\n      class=\"description-input\"\n      [value]=\"field.description || ''\"\n      (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n      placeholder=\"Description...\"\n    />\n\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    <div class=\"field-actions\">\n      @if (field.type === 'object' || field.type === 'array') {\n        <button mat-icon-button (click)=\"addChildField(field)\" matTooltip=\"Add child field\">\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' : 'Add allowed values'\"\n          [class.has-values]=\"field.allowedValues?.length\"\n        >\n          <mat-icon>list</mat-icon>\n        </button>\n      }\n      @if (field.type !== 'object' && field.type !== 'array') {\n        <button\n          mat-icon-button\n          (click)=\"toggleDefaultEditor(field)\"\n          [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n          [class.has-default]=\"field.defaultValue !== undefined\"\n        >\n          <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n        </button>\n      }\n      <button mat-icon-button [matMenuTriggerFor]=\"nestedMenu\" matTooltip=\"More options\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #nestedMenu=\"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</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-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 .schema-name-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:36px}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__leading,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__trailing{border-color:var(--schema-editor-border-color)!important}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch{border-right:none}.editor-header .schema-name-field ::ng-deep input.mat-mdc-input-element{font-size:14px}.editor-header .schema-name-field ::ng-deep .mat-mdc-floating-label{font-size:13px}.editor-header .header-actions{display:flex;gap:12px}.editor-header .header-actions button{display:flex;align-items:center;gap:6px}.editor-header .view-toggle{border:1px solid var(--schema-editor-border-color);border-radius:8px;overflow:hidden}.editor-header .view-toggle ::ng-deep .mat-button-toggle{background:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle.mat-button-toggle-checked{background:var(--schema-editor-accent-primary);color:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle .mat-button-toggle-label-content{padding:0 16px;font-size:13px;font-weight:500;line-height:32px}.json-view{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.json-error{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fef2f2;border-bottom:1px solid #fecaca;color:#dc2626;font-size:12px;flex-shrink:0}.json-error mat-icon{font-size:16px;width:16px;height:16px}.json-textarea{flex:1;width:100%;padding:16px;border:none;outline:none;resize:none;font-family:SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;line-height:1.6;color:var(--schema-editor-text-primary);background:var(--schema-editor-bg);tab-size:2;box-sizing:border-box}.json-textarea:focus{outline:none}.hidden{display:none!important}.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:block;min-height:50px}.fields-list .field-wrapper{margin-bottom: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}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:#94a3b8;padding:4px;border-radius:4px;transition:all .15s ease}.drag-handle:hover{background:#e2e8f0;color:#64748b}.drag-handle:active{cursor:grabbing}.drag-handle mat-icon{font-size:20px;width:20px;height:20px}.field-wrapper{display:block}::ng-deep .drag-preview{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 16px!important;background:#fff!important;border:2px solid #3b82f6!important;border-radius:8px!important;box-shadow:0 8px 24px #0003!important;font-size:14px!important;font-weight:500!important;color:#1e293b!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important}::ng-deep .drag-preview mat-icon{color:#3b82f6!important;font-size:20px!important;width:20px!important;height:20px!important;flex-shrink:0!important;overflow:hidden!important}.drag-placeholder{background:#e2e8f0;border:2px dashed var(--schema-editor-accent-primary);border-radius:var(--schema-editor-field-border-radius);min-height:48px;margin-bottom:4px}.drag-placeholder .placeholder-content{height:100%;min-height:48px}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .field-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.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:block;min-height:30px;margin-top:4px;margin-bottom:8px}.nested-fields .field-wrapper{margin-bottom:4px}.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}.field-actions .has-default{color:#8b5cf6!important}.default-value-editor{margin-left:calc(var(--level, 0) * 24px + 48px);margin-top:4px;margin-bottom:8px;padding:12px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:8px}.default-value-editor .default-header{display:flex;align-items:center;gap:8px}.default-value-editor .default-label{font-size:12px;font-weight:500;color:#6d28d9}.default-value-editor .default-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;max-width:200px}.default-value-editor .default-input:focus{border-color:#8b5cf6}.default-value-editor .default-input::placeholder{color:#94a3b8}.default-value-editor .default-select{padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;cursor:pointer}.default-value-editor .default-select:focus{border-color:#8b5cf6}.default-value-editor .clear-default-btn{background:none;border:none;padding:4px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.default-value-editor .clear-default-btn:hover{color:#ef4444}.default-value-editor .clear-default-btn mat-icon{font-size:16px;width:16px;height:16px}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input
+            }], showJsonToggle: [{
+                type: Input
             }], schemaChange: [{
                 type: Output
             }], save: [{
@@ -2471,5 +3560,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