@expeed/ngx-data-mapper 1.0.0

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

@@ -0,0 +1,2475 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, EventEmitter, inject, ViewChildren, ViewChild, Output, Input, Component, HostListener } from '@angular/core';
+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 { MatButtonModule } from '@angular/material/button';
+import * as i8 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i6 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i7 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 { MatMenuModule } from '@angular/material/menu';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+
+class MappingService {
+    mappings = signal([], ...(ngDevMode ? [{ debugName: "mappings" }] : []));
+    arrayMappings = signal([], ...(ngDevMode ? [{ debugName: "arrayMappings" }] : []));
+    arrayToObjectMappings = signal([], ...(ngDevMode ? [{ debugName: "arrayToObjectMappings" }] : []));
+    defaultValues = signal([], ...(ngDevMode ? [{ debugName: "defaultValues" }] : []));
+    selectedMappingId = signal(null, ...(ngDevMode ? [{ debugName: "selectedMappingId" }] : []));
+    dragState = signal({
+        isDragging: false,
+        sourceField: null,
+        startPoint: null,
+        currentPoint: null,
+    }, ...(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" }] : []));
+    selectedMapping = computed(() => {
+        const id = this.selectedMappingId();
+        return this.mappings().find((m) => m.id === id) || null;
+    }, ...(ngDevMode ? [{ debugName: "selectedMapping" }] : []));
+    currentDragState = computed(() => this.dragState(), ...(ngDevMode ? [{ debugName: "currentDragState" }] : []));
+    generateId() {
+        return `mapping-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    startDrag(field, startPoint) {
+        this.dragState.set({
+            isDragging: true,
+            sourceField: field,
+            startPoint,
+            currentPoint: startPoint,
+        });
+    }
+    updateDragPosition(currentPoint) {
+        this.dragState.update((state) => ({
+            ...state,
+            currentPoint,
+        }));
+    }
+    endDrag() {
+        this.dragState.set({
+            isDragging: false,
+            sourceField: null,
+            startPoint: null,
+            currentPoint: null,
+        });
+    }
+    createMapping(sourceFields, targetField, transformation) {
+        // Check if this is an array-to-array mapping
+        const sourceField = sourceFields[0];
+        if (sourceField.type === 'array' && targetField.type === 'array') {
+            return this.createArrayMapping(sourceField, targetField);
+        }
+        // Check if this is an array-to-object mapping
+        if (sourceField.type === 'array' && targetField.type === 'object') {
+            return this.createArrayToObjectMapping(sourceField, targetField);
+        }
+        // Check if fields are within arrays and need array context
+        const arrayMappingId = this.findOrCreateArrayContext(sourceField, targetField);
+        // Check if fields need array-to-object context
+        const arrayToObjectMappingId = this.findOrCreateArrayToObjectContext(sourceField, targetField);
+        const existingMapping = this.mappings().find((m) => m.targetField.id === targetField.id);
+        if (existingMapping) {
+            // Add source fields to existing mapping (for concat scenarios)
+            const updatedMapping = {
+                ...existingMapping,
+                sourceFields: [
+                    ...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' },
+            };
+            this.mappings.update((mappings) => mappings.map((m) => (m.id === existingMapping.id ? updatedMapping : m)));
+            return updatedMapping;
+        }
+        const newMapping = {
+            id: this.generateId(),
+            sourceFields,
+            targetField,
+            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,
+            arrayToObjectMappingId, // Links to parent array-to-object mapping if applicable
+        };
+        this.mappings.update((mappings) => [...mappings, newMapping]);
+        // If this is part of an array mapping, add to itemMappings
+        if (arrayMappingId) {
+            this.arrayMappings.update((ams) => ams.map((am) => am.id === arrayMappingId
+                ? { ...am, itemMappings: [...am.itemMappings, newMapping] }
+                : am));
+        }
+        // If this is part of an array-to-object mapping, add to itemMappings
+        if (arrayToObjectMappingId) {
+            this.arrayToObjectMappings.update((ams) => ams.map((am) => am.id === arrayToObjectMappingId
+                ? { ...am, itemMappings: [...am.itemMappings, newMapping] }
+                : am));
+        }
+        return newMapping;
+    }
+    createArrayMapping(sourceArray, targetArray) {
+        // Check if array mapping already exists
+        const existingArrayMapping = this.arrayMappings().find((am) => am.sourceArray.id === sourceArray.id && am.targetArray.id === targetArray.id);
+        if (existingArrayMapping) {
+            // Return a dummy field mapping representing the array mapping
+            const existing = this.mappings().find(m => m.id === existingArrayMapping.id);
+            if (existing)
+                return existing;
+        }
+        const arrayMapping = {
+            id: this.generateId(),
+            sourceArray,
+            targetArray,
+            itemMappings: [],
+        };
+        this.arrayMappings.update((ams) => [...ams, arrayMapping]);
+        // Also create a field mapping to visualize the array connection
+        const fieldMapping = {
+            id: arrayMapping.id,
+            sourceFields: [sourceArray],
+            targetField: targetArray,
+            transformation: { type: 'direct' },
+            isArrayMapping: true,
+        };
+        this.mappings.update((mappings) => [...mappings, fieldMapping]);
+        return fieldMapping;
+    }
+    createArrayToObjectMapping(sourceArray, targetObject) {
+        // Check if array-to-object mapping already exists
+        const existingMapping = this.arrayToObjectMappings().find((am) => am.sourceArray.id === sourceArray.id && am.targetObject.id === targetObject.id);
+        if (existingMapping) {
+            const existing = this.mappings().find(m => m.id === existingMapping.id);
+            if (existing)
+                return existing;
+        }
+        const arrayToObjectMapping = {
+            id: this.generateId(),
+            sourceArray,
+            targetObject,
+            selector: { mode: 'first' }, // Default to first item
+            itemMappings: [],
+        };
+        this.arrayToObjectMappings.update((ams) => [...ams, arrayToObjectMapping]);
+        // Create a field mapping to visualize the connection
+        const fieldMapping = {
+            id: arrayToObjectMapping.id,
+            sourceFields: [sourceArray],
+            targetField: targetObject,
+            transformation: { type: 'direct' },
+            isArrayToObjectMapping: true,
+        };
+        this.mappings.update((mappings) => [...mappings, fieldMapping]);
+        return fieldMapping;
+    }
+    findOrCreateArrayContext(sourceField, targetField) {
+        // If both fields are array items, check if an array mapping exists
+        if (sourceField.isArrayItem && targetField.isArrayItem) {
+            const existingArrayMapping = this.arrayMappings().find((am) => am.sourceArray.path === sourceField.parentArrayPath &&
+                am.targetArray.path === targetField.parentArrayPath);
+            if (existingArrayMapping) {
+                return existingArrayMapping.id;
+            }
+        }
+        return undefined;
+    }
+    findOrCreateArrayToObjectContext(sourceField, targetField) {
+        // If source is array item and target is within an object (not array item)
+        if (sourceField.isArrayItem && !targetField.isArrayItem && targetField.path.includes('.')) {
+            // Find the parent object path
+            const targetParts = targetField.path.split('.');
+            const parentObjectPath = targetParts.slice(0, -1).join('.');
+            const existingMapping = this.arrayToObjectMappings().find((am) => am.sourceArray.path === sourceField.parentArrayPath &&
+                am.targetObject.path === parentObjectPath);
+            if (existingMapping) {
+                return existingMapping.id;
+            }
+        }
+        return undefined;
+    }
+    getArrayMapping(id) {
+        return this.arrayMappings().find((am) => am.id === id);
+    }
+    getArrayMappingForField(field) {
+        if (!field.parentArrayPath)
+            return undefined;
+        return this.arrayMappings().find((am) => am.sourceArray.path === field.parentArrayPath ||
+            am.targetArray.path === field.parentArrayPath);
+    }
+    removeArrayMapping(arrayMappingId) {
+        // Remove the array mapping
+        this.arrayMappings.update((ams) => ams.filter((am) => am.id !== arrayMappingId));
+        // Remove all field mappings associated with this array mapping
+        this.mappings.update((mappings) => mappings.filter((m) => m.arrayMappingId !== arrayMappingId && m.id !== arrayMappingId));
+    }
+    updateArrayFilter(arrayMappingId, filter) {
+        this.arrayMappings.update((ams) => ams.map((am) => am.id === arrayMappingId ? { ...am, filter } : am));
+    }
+    getArrayToObjectMapping(id) {
+        return this.arrayToObjectMappings().find((am) => am.id === id);
+    }
+    updateArrayToObjectSelector(mappingId, selector) {
+        this.arrayToObjectMappings.update((ams) => ams.map((am) => am.id === mappingId ? { ...am, selector } : am));
+    }
+    removeArrayToObjectMapping(mappingId) {
+        // Remove the array-to-object mapping
+        this.arrayToObjectMappings.update((ams) => ams.filter((am) => am.id !== mappingId));
+        // Remove all field mappings associated with this mapping
+        this.mappings.update((mappings) => mappings.filter((m) => m.arrayToObjectMappingId !== mappingId && m.id !== mappingId));
+    }
+    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));
+    }
+    removeMapping(mappingId) {
+        this.mappings.update((mappings) => mappings.filter((m) => m.id !== mappingId));
+        if (this.selectedMappingId() === mappingId) {
+            this.selectedMappingId.set(null);
+        }
+    }
+    removeSourceFromMapping(mappingId, sourceFieldId) {
+        const mapping = this.mappings().find((m) => m.id === mappingId);
+        if (!mapping)
+            return;
+        if (mapping.sourceFields.length <= 1) {
+            this.removeMapping(mappingId);
+        }
+        else {
+            this.mappings.update((mappings) => mappings.map((m) => m.id === mappingId
+                ? {
+                    ...m,
+                    sourceFields: m.sourceFields.filter((sf) => sf.id !== sourceFieldId),
+                    transformation: m.sourceFields.length - 1 === 1
+                        ? { type: 'direct' }
+                        : m.transformation,
+                }
+                : m));
+        }
+    }
+    selectMapping(mappingId) {
+        this.selectedMappingId.set(mappingId);
+    }
+    getMappingForTarget(targetFieldId) {
+        return this.mappings().find((m) => m.targetField.id === targetFieldId);
+    }
+    getMappingsForSource(sourceFieldId) {
+        return this.mappings().filter((m) => m.sourceFields.some((sf) => sf.id === sourceFieldId));
+    }
+    clearAllMappings() {
+        this.mappings.set([]);
+        this.arrayMappings.set([]);
+        this.arrayToObjectMappings.set([]);
+        this.defaultValues.set([]);
+        this.selectedMappingId.set(null);
+    }
+    // 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 };
+            this.defaultValues.update(dv => dv.map(d => d.id === existingDefault.id ? updated : d));
+            return updated;
+        }
+        const newDefault = {
+            id: this.generateId(),
+            targetField,
+            value,
+            valueType,
+        };
+        this.defaultValues.update(dv => [...dv, newDefault]);
+        return newDefault;
+    }
+    getDefaultValue(targetFieldId) {
+        return this.defaultValues().find(d => d.targetField.id === targetFieldId);
+    }
+    removeDefaultValue(targetFieldId) {
+        this.defaultValues.update(dv => dv.filter(d => d.targetField.id !== targetFieldId));
+    }
+    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() {
+        const exportData = {
+            mappings: this.mappings(),
+            arrayMappings: this.arrayMappings(),
+            arrayToObjectMappings: this.arrayToObjectMappings(),
+            defaultValues: this.defaultValues(),
+        };
+        return JSON.stringify(exportData, null, 2);
+    }
+    importMappings(json) {
+        try {
+            const data = JSON.parse(json);
+            if (data.mappings) {
+                this.mappings.set(data.mappings);
+                this.arrayMappings.set(data.arrayMappings || []);
+                this.arrayToObjectMappings.set(data.arrayToObjectMappings || []);
+                this.defaultValues.set(data.defaultValues || []);
+            }
+            else {
+                // Legacy format
+                this.mappings.set(data);
+            }
+        }
+        catch (e) {
+            console.error('Failed to import mappings:', e);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MappingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MappingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MappingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class TransformationService {
+    applyTransformation(sourceValues, sourceFields, config) {
+        const values = sourceFields.map((f) => this.getValueByPath(sourceValues, f.path));
+        switch (config.type) {
+            case 'direct':
+                return String(values[0] ?? '');
+            case 'concat':
+                if (config.template) {
+                    return this.applyTemplate(config.template, sourceFields, sourceValues);
+                }
+                return values.join(config.separator ?? ' ');
+            case 'substring':
+                const str = String(values[0] ?? '');
+                return str.substring(config.startIndex ?? 0, config.endIndex ?? str.length);
+            case 'replace':
+                return String(values[0] ?? '').replace(new RegExp(config.searchValue ?? '', 'g'), config.replaceValue ?? '');
+            case 'uppercase':
+                return String(values[0] ?? '').toUpperCase();
+            case 'lowercase':
+                return String(values[0] ?? '').toLowerCase();
+            case 'dateFormat':
+                return this.formatDate(values[0], config.inputFormat, config.outputFormat);
+            case 'extractYear':
+                return this.extractDatePart(values[0], 'year');
+            case 'extractMonth':
+                return this.extractDatePart(values[0], 'month');
+            case 'extractDay':
+                return this.extractDatePart(values[0], 'day');
+            case 'extractHour':
+                return this.extractDatePart(values[0], 'hour');
+            case 'extractMinute':
+                return this.extractDatePart(values[0], 'minute');
+            case 'extractSecond':
+                return this.extractDatePart(values[0], 'second');
+            case 'numberFormat':
+                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] ?? '');
+        }
+    }
+    getValueByPath(obj, path) {
+        return path.split('.').reduce((acc, part) => {
+            if (acc && typeof acc === 'object') {
+                return acc[part];
+            }
+            return undefined;
+        }, obj);
+    }
+    applyTemplate(template, sourceFields, sourceValues) {
+        let result = template;
+        sourceFields.forEach((field) => {
+            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 ?? ''));
+        });
+        return result;
+    }
+    formatDate(value, inputFormat, outputFormat) {
+        if (!value)
+            return '';
+        try {
+            const date = new Date(value);
+            if (isNaN(date.getTime()))
+                return String(value);
+            // Simple format implementation
+            const format = outputFormat ?? 'YYYY-MM-DD';
+            return format
+                .replace('YYYY', date.getFullYear().toString())
+                .replace('MM', (date.getMonth() + 1).toString().padStart(2, '0'))
+                .replace('DD', date.getDate().toString().padStart(2, '0'))
+                .replace('HH', date.getHours().toString().padStart(2, '0'))
+                .replace('mm', date.getMinutes().toString().padStart(2, '0'))
+                .replace('ss', date.getSeconds().toString().padStart(2, '0'));
+        }
+        catch {
+            return String(value);
+        }
+    }
+    extractDatePart(value, part) {
+        if (!value)
+            return '';
+        try {
+            const date = new Date(value);
+            if (isNaN(date.getTime()))
+                return String(value);
+            switch (part) {
+                case 'year':
+                    return date.getFullYear().toString();
+                case 'month':
+                    return (date.getMonth() + 1).toString().padStart(2, '0');
+                case 'day':
+                    return date.getDate().toString().padStart(2, '0');
+                case 'hour':
+                    return date.getHours().toString().padStart(2, '0');
+                case 'minute':
+                    return date.getMinutes().toString().padStart(2, '0');
+                case 'second':
+                    return date.getSeconds().toString().padStart(2, '0');
+                default:
+                    return String(value);
+            }
+        }
+        catch {
+            return String(value);
+        }
+    }
+    formatNumber(value, decimalPlaces, prefix, suffix) {
+        if (value === null || value === undefined)
+            return '';
+        const num = Number(value);
+        if (isNaN(num))
+            return String(value);
+        let formatted = decimalPlaces !== undefined
+            ? num.toFixed(decimalPlaces)
+            : 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]';
+        }
+    }
+    getTransformationLabel(type) {
+        const labels = {
+            direct: 'Direct Mapping',
+            concat: 'Concatenate',
+            substring: 'Substring',
+            replace: 'Find & Replace',
+            uppercase: 'Uppercase',
+            lowercase: 'Lowercase',
+            dateFormat: 'Date Format',
+            extractYear: 'Extract Year',
+            extractMonth: 'Extract Month',
+            extractDay: 'Extract Day',
+            extractHour: 'Extract Hour',
+            extractMinute: 'Extract Minute',
+            extractSecond: 'Extract Second',
+            numberFormat: 'Number Format',
+            template: 'Template',
+            custom: 'Custom Expression',
+        };
+        return labels[type];
+    }
+    getAvailableTransformations() {
+        return [
+            { type: 'direct', label: 'Direct Mapping' },
+            { type: 'concat', label: 'Concatenate', category: 'String' },
+            { type: 'substring', label: 'Substring', category: 'String' },
+            { type: 'replace', label: 'Find & Replace', category: 'String' },
+            { type: 'uppercase', label: 'Uppercase', category: 'String' },
+            { type: 'lowercase', label: 'Lowercase', category: 'String' },
+            { type: 'template', label: 'Template', category: 'String' },
+            { type: 'dateFormat', label: 'Format Date', category: 'Date' },
+            { type: 'extractYear', label: 'Extract Year', category: 'Date' },
+            { type: 'extractMonth', label: 'Extract Month', category: 'Date' },
+            { type: 'extractDay', label: 'Extract Day', category: 'Date' },
+            { type: 'extractHour', label: 'Extract Hour', category: 'Date' },
+            { 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' },
+        ];
+    }
+    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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TransformationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SvgConnectorService {
+    createBezierPath(start, end) {
+        const dx = end.x - start.x;
+        const controlPointOffset = Math.min(Math.abs(dx) * 0.5, 150);
+        const cp1x = start.x + controlPointOffset;
+        const cp1y = start.y;
+        const cp2x = end.x - controlPointOffset;
+        const cp2y = end.y;
+        return `M ${start.x} ${start.y} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${end.x} ${end.y}`;
+    }
+    createMultiSourcePath(sources, target) {
+        const mergeX = target.x - 80;
+        const mergeY = target.y;
+        const mergePoint = { x: mergeX, y: mergeY };
+        const paths = sources.map((source) => {
+            // Path from source to merge point
+            const dx1 = mergeX - source.x;
+            const cp1Offset = Math.min(Math.abs(dx1) * 0.4, 100);
+            return `M ${source.x} ${source.y} C ${source.x + cp1Offset} ${source.y}, ${mergeX - cp1Offset} ${mergeY}, ${mergeX} ${mergeY}`;
+        });
+        // Add path from merge point to target
+        const finalPath = `M ${mergeX} ${mergeY} L ${target.x} ${target.y}`;
+        paths.push(finalPath);
+        return { paths, mergePoint };
+    }
+    getMidPoint(start, end) {
+        return {
+            x: (start.x + end.x) / 2,
+            y: (start.y + end.y) / 2,
+        };
+    }
+    getMultiSourceMidPoint(sources, target) {
+        const mergeX = target.x - 80;
+        return {
+            x: mergeX,
+            y: target.y,
+        };
+    }
+    calculateConnectionPoint(rect, side, containerRect) {
+        const relativeY = rect.top - containerRect.top + rect.height / 2;
+        if (side === 'source') {
+            return {
+                x: rect.right - containerRect.left,
+                y: relativeY,
+            };
+        }
+        else {
+            return {
+                x: rect.left - containerRect.left,
+                y: relativeY,
+            };
+        }
+    }
+    isPointNearPath(point, pathStart, pathEnd, threshold = 10) {
+        // Simplified hit detection using distance to line segment
+        const A = point.x - pathStart.x;
+        const B = point.y - pathStart.y;
+        const C = pathEnd.x - pathStart.x;
+        const D = pathEnd.y - pathStart.y;
+        const dot = A * C + B * D;
+        const lenSq = C * C + D * D;
+        let param = -1;
+        if (lenSq !== 0) {
+            param = dot / lenSq;
+        }
+        let xx, yy;
+        if (param < 0) {
+            xx = pathStart.x;
+            yy = pathStart.y;
+        }
+        else if (param > 1) {
+            xx = pathEnd.x;
+            yy = pathEnd.y;
+        }
+        else {
+            xx = pathStart.x + param * C;
+            yy = pathStart.y + param * D;
+        }
+        const dx = point.x - xx;
+        const dy = point.y - yy;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        return distance <= threshold;
+    }
+    createDragPath(start, end) {
+        return this.createBezierPath(start, end);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SvgConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SvgConnectorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SvgConnectorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SchemaParserService {
+    modelRegistry = {};
+    idCounter = 0;
+    registerModels(models) {
+        this.modelRegistry = { ...this.modelRegistry, ...models };
+    }
+    clearRegistry() {
+        this.modelRegistry = {};
+    }
+    parseSchema(schemaJson, schemaName = 'Schema') {
+        const schema = typeof schemaJson === 'string' ? JSON.parse(schemaJson) : schemaJson;
+        this.idCounter = 0;
+        // Extract definitions from the schema document itself
+        const localDefs = schema.$defs || schema.definitions || {};
+        const combinedRegistry = { ...this.modelRegistry, ...localDefs };
+        let resolvedSchema;
+        if (schema.$ref) {
+            // Resolve the reference
+            resolvedSchema = this.resolveRef(schema.$ref, combinedRegistry);
+        }
+        else if (schema.properties) {
+            // Direct schema with properties
+            resolvedSchema = schema;
+        }
+        else {
+            throw new Error('Schema must have either $ref or properties');
+        }
+        // Build fields from the resolved schema
+        let fields = this.buildFields(resolvedSchema, combinedRegistry, '');
+        // Apply exclude filter
+        if (schema.exclude && schema.exclude.length > 0) {
+            fields = this.applyExclude(fields, schema.exclude);
+        }
+        // Apply include filter (only if specified)
+        if (schema.include && schema.include.length > 0) {
+            fields = this.applyInclude(fields, schema.include);
+        }
+        return {
+            name: schema.title || schemaName,
+            fields,
+        };
+    }
+    resolveRef(ref, registry) {
+        // Handle different ref formats:
+        // #model, #/definitions/model, #/$defs/model, model
+        let modelName;
+        if (ref.startsWith('#/$defs/')) {
+            modelName = ref.substring(8);
+        }
+        else if (ref.startsWith('#/definitions/')) {
+            modelName = ref.substring(14);
+        }
+        else if (ref.startsWith('#')) {
+            modelName = ref.substring(1);
+        }
+        else {
+            modelName = ref;
+        }
+        const resolved = registry[modelName];
+        if (!resolved) {
+            throw new Error(`Cannot resolve reference: ${ref}. Model "${modelName}" not found in registry.`);
+        }
+        // If the resolved schema also has a $ref, resolve it recursively
+        if (resolved.$ref) {
+            return this.resolveRef(resolved.$ref, registry);
+        }
+        return resolved;
+    }
+    buildFields(schema, registry, parentPath, arrayContext) {
+        const fields = [];
+        if (!schema.properties) {
+            return fields;
+        }
+        for (const [name, propSchema] of Object.entries(schema.properties)) {
+            const path = parentPath ? `${parentPath}.${name}` : name;
+            const field = this.buildField(name, propSchema, registry, path, arrayContext);
+            fields.push(field);
+        }
+        return fields;
+    }
+    buildField(name, schema, registry, path, arrayContext) {
+        // Resolve $ref if present
+        let resolvedSchema = schema;
+        if (schema.$ref) {
+            resolvedSchema = { ...this.resolveRef(schema.$ref, registry), ...schema };
+            delete resolvedSchema.$ref;
+        }
+        const fieldType = this.mapType(resolvedSchema);
+        const field = {
+            id: `field-${++this.idCounter}-${name}`,
+            name,
+            type: fieldType,
+            path,
+            description: resolvedSchema.description,
+            isArrayItem: arrayContext?.isArrayItem,
+            parentArrayPath: arrayContext?.parentArrayPath,
+        };
+        // Handle nested objects
+        if (fieldType === 'object' && resolvedSchema.properties) {
+            field.children = this.buildFields(resolvedSchema, registry, path, arrayContext);
+            field.expanded = true;
+        }
+        // Handle arrays with object items
+        if (fieldType === 'array' && resolvedSchema.items) {
+            let itemSchema = resolvedSchema.items;
+            if (itemSchema.$ref) {
+                itemSchema = this.resolveRef(itemSchema.$ref, registry);
+            }
+            if (itemSchema.properties) {
+                // Mark children as array items with reference to parent array
+                field.children = this.buildFields(itemSchema, registry, `${path}[]`, {
+                    isArrayItem: true,
+                    parentArrayPath: path,
+                });
+                field.expanded = true;
+            }
+        }
+        return field;
+    }
+    mapType(schema) {
+        const type = schema.type;
+        const format = schema.format;
+        // Check format first for date types
+        if (format === 'date' || format === 'date-time' || format === 'time') {
+            return 'date';
+        }
+        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:
+                // If type is not specified but has properties, it's an object
+                if (schema.properties) {
+                    return 'object';
+                }
+                return 'string';
+        }
+    }
+    applyExclude(fields, exclude) {
+        return fields
+            .filter((field) => !exclude.includes(field.name) && !exclude.includes(field.path))
+            .map((field) => {
+            if (field.children) {
+                // Filter nested fields by checking both full path and relative name
+                const filteredChildren = this.applyExclude(field.children, exclude);
+                return { ...field, children: filteredChildren };
+            }
+            return field;
+        });
+    }
+    applyInclude(fields, include) {
+        return fields
+            .filter((field) => {
+            // Include if field name or path matches
+            if (include.includes(field.name) || include.includes(field.path)) {
+                return true;
+            }
+            // Include if any child path matches
+            if (field.children) {
+                return this.hasIncludedChild(field.children, include);
+            }
+            return false;
+        })
+            .map((field) => {
+            if (field.children) {
+                // Keep parent but filter children
+                const filteredChildren = this.applyInclude(field.children, include);
+                return { ...field, children: filteredChildren.length > 0 ? filteredChildren : field.children };
+            }
+            return field;
+        });
+    }
+    hasIncludedChild(fields, include) {
+        return fields.some((field) => {
+            if (include.includes(field.name) || include.includes(field.path)) {
+                return true;
+            }
+            if (field.children) {
+                return this.hasIncludedChild(field.children, include);
+            }
+            return false;
+        });
+    }
+    // Utility method to create a schema document from model name
+    createSchemaFromRef(modelRef, options) {
+        return {
+            $ref: modelRef,
+            title: options?.title,
+            exclude: options?.exclude,
+            include: options?.include,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaParserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaParserService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaParserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SchemaTreeComponent {
+    schema;
+    side = 'source';
+    mappings = [];
+    defaultValues = [];
+    fieldDragStart = new EventEmitter();
+    fieldDragEnd = new EventEmitter();
+    fieldDrop = new EventEmitter();
+    fieldPositionsChanged = new EventEmitter();
+    fieldDefaultValueClick = new EventEmitter();
+    schemaFieldsContainer;
+    fieldItems;
+    mappingService = inject(MappingService);
+    resizeObserver;
+    scrollHandler = () => this.onScroll();
+    ngAfterViewInit() {
+        this.emitFieldPositions();
+        this.resizeObserver = new ResizeObserver(() => {
+            this.emitFieldPositions();
+        });
+        this.fieldItems.changes.subscribe(() => {
+            this.emitFieldPositions();
+        });
+        // Add scroll listener to update connector positions
+        if (this.schemaFieldsContainer?.nativeElement) {
+            this.schemaFieldsContainer.nativeElement.addEventListener('scroll', this.scrollHandler, { passive: true });
+        }
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.schemaFieldsContainer?.nativeElement) {
+            this.schemaFieldsContainer.nativeElement.removeEventListener('scroll', this.scrollHandler);
+        }
+    }
+    onScroll() {
+        this.emitFieldPositions();
+    }
+    emitFieldPositions() {
+        setTimeout(() => {
+            const positions = new Map();
+            this.fieldItems.forEach((item) => {
+                const fieldId = item.nativeElement.getAttribute('data-field-id');
+                if (fieldId) {
+                    positions.set(fieldId, item.nativeElement.getBoundingClientRect());
+                }
+            });
+            this.fieldPositionsChanged.emit(positions);
+        });
+    }
+    toggleExpand(field, event) {
+        event.stopPropagation();
+        field.expanded = !field.expanded;
+        setTimeout(() => this.emitFieldPositions(), 50);
+    }
+    onDragStart(event, field) {
+        if (this.side !== 'source')
+            return;
+        const element = event.currentTarget;
+        const rect = element.getBoundingClientRect();
+        this.fieldDragStart.emit({ field, element, rect });
+    }
+    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 });
+    }
+    getTypeIcon(type) {
+        const icons = {
+            string: 'text_fields',
+            number: 'pin',
+            boolean: 'toggle_on',
+            object: 'data_object',
+            array: 'data_array',
+            date: 'calendar_today',
+        };
+        return icons[type] || 'help_outline';
+    }
+    isFieldMapped(field) {
+        if (this.side === 'source') {
+            return this.mappings.some((m) => m.sourceFields.some((sf) => sf.id === field.id));
+        }
+        else {
+            return this.mappings.some((m) => m.targetField.id === field.id);
+        }
+    }
+    getFieldMappingCount(field) {
+        if (this.side === 'source') {
+            return this.mappings.filter((m) => m.sourceFields.some((sf) => sf.id === field.id)).length;
+        }
+        else {
+            const mapping = this.mappings.find((m) => m.targetField.id === field.id);
+            return mapping ? mapping.sourceFields.length : 0;
+        }
+    }
+    hasDefaultValue(field) {
+        return this.defaultValues.some(d => d.targetField.id === field.id);
+    }
+    getDefaultValueDisplay(field) {
+        const defaultValue = this.defaultValues.find(d => d.targetField.id === field.id);
+        if (!defaultValue || defaultValue.value === null)
+            return '';
+        if (defaultValue.valueType === 'date' && defaultValue.value) {
+            return new Date(defaultValue.value).toLocaleDateString();
+        }
+        return String(defaultValue.value);
+    }
+    onFieldClick(event, field) {
+        // Only handle clicks on target fields that are leaf nodes (no children) or have specific types
+        if (this.side !== 'target')
+            return;
+        if (field.type === 'object' || field.type === 'array')
+            return;
+        // Don't trigger if the field is already mapped (unless it has a default value)
+        if (this.isFieldMapped(field) && !this.hasDefaultValue(field))
+            return;
+        // Allow clicking on unmapped fields OR fields with default values (to edit them)
+        if (!this.isFieldMapped(field) || this.hasDefaultValue(field)) {
+            event.stopPropagation();
+            const element = event.currentTarget;
+            const rect = element.getBoundingClientRect();
+            this.fieldDefaultValueClick.emit({ field, element, rect });
+        }
+    }
+    trackByFieldId(index, field) {
+        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"] }] });
+}
+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"] }]
+        }], propDecorators: { schema: [{
+                type: Input
+            }], side: [{
+                type: Input
+            }], mappings: [{
+                type: Input
+            }], defaultValues: [{
+                type: Input
+            }], fieldDragStart: [{
+                type: Output
+            }], fieldDragEnd: [{
+                type: Output
+            }], fieldDrop: [{
+                type: Output
+            }], fieldPositionsChanged: [{
+                type: Output
+            }], fieldDefaultValueClick: [{
+                type: Output
+            }], schemaFieldsContainer: [{
+                type: ViewChild,
+                args: ['schemaFields']
+            }], fieldItems: [{
+                type: ViewChildren,
+                args: ['fieldItem']
+            }] } });
+
+class TransformationPopoverComponent {
+    mapping;
+    position = { x: 0, y: 0 };
+    sampleData = {};
+    save = new EventEmitter();
+    delete = new EventEmitter();
+    close = new EventEmitter();
+    transformationService = inject(TransformationService);
+    transformationType = 'direct';
+    config = { type: 'direct' };
+    preview = '';
+    availableTransformations = this.transformationService.getAvailableTransformations();
+    ngOnInit() {
+        this.initFromMapping();
+    }
+    ngOnChanges(changes) {
+        if (changes['mapping'] || changes['sampleData']) {
+            this.initFromMapping();
+        }
+    }
+    initFromMapping() {
+        if (this.mapping) {
+            this.config = { ...this.mapping.transformation };
+            this.transformationType = this.config.type;
+            this.updatePreview();
+        }
+    }
+    onTypeChange() {
+        this.config = {
+            ...this.config,
+            type: this.transformationType,
+        };
+        // Set defaults based on type
+        switch (this.transformationType) {
+            case 'concat':
+                this.config.separator = this.config.separator ?? ' ';
+                this.config.template = this.config.template ?? this.getDefaultTemplate();
+                break;
+            case 'substring':
+                this.config.startIndex = this.config.startIndex ?? 0;
+                this.config.endIndex = this.config.endIndex ?? 10;
+                break;
+            case 'replace':
+                this.config.searchValue = this.config.searchValue ?? '';
+                this.config.replaceValue = this.config.replaceValue ?? '';
+                break;
+            case 'dateFormat':
+                this.config.outputFormat = this.config.outputFormat ?? 'YYYY-MM-DD';
+                break;
+            case 'numberFormat':
+                this.config.decimalPlaces = this.config.decimalPlaces ?? 2;
+                break;
+        }
+        this.updatePreview();
+    }
+    getDefaultTemplate() {
+        return this.mapping.sourceFields.map((f) => `{${f.name}}`).join(' ');
+    }
+    updatePreview() {
+        if (!this.mapping || !this.sampleData) {
+            this.preview = '';
+            return;
+        }
+        this.preview = this.transformationService.applyTransformation(this.sampleData, this.mapping.sourceFields, this.config);
+    }
+    onConfigChange() {
+        this.updatePreview();
+    }
+    onSave() {
+        this.save.emit(this.config);
+    }
+    onDelete() {
+        this.delete.emit();
+    }
+    onClose() {
+        this.close.emit();
+    }
+    getSourceFieldNames() {
+        return this.mapping.sourceFields.map((f) => f.name).join(', ');
+    }
+    getPopoverStyle() {
+        return {
+            left: `${this.position.x}px`,
+            top: `${this.position.y}px`,
+        };
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TransformationPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'transformation-popover', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatSelectModule,
+                        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"] }]
+        }], propDecorators: { mapping: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], sampleData: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });
+
+class ArrayFilterModalComponent {
+    arrayMapping;
+    save = new EventEmitter();
+    close = new EventEmitter();
+    filterEnabled = signal(false, ...(ngDevMode ? [{ debugName: "filterEnabled" }] : []));
+    rootGroup = signal(this.createEmptyGroup(), ...(ngDevMode ? [{ debugName: "rootGroup" }] : []));
+    // Available fields from the source array's children
+    availableFields = computed(() => {
+        const fields = [];
+        this.collectFields(this.arrayMapping.sourceArray.children || [], '', fields);
+        return fields;
+    }, ...(ngDevMode ? [{ debugName: "availableFields" }] : []));
+    // 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: 'does 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: 'greater than', needsValue: true },
+        { value: 'lessThan', label: 'less than', needsValue: true },
+        { value: 'greaterThanOrEqual', label: 'greater or equal', needsValue: true },
+        { value: 'lessThanOrEqual', label: 'less or equal', needsValue: true },
+    ];
+    booleanOperators = [
+        { value: 'isTrue', label: 'is true', needsValue: false },
+        { value: 'isFalse', label: 'is false', needsValue: false },
+    ];
+    ngOnInit() {
+        // Initialize from existing filter config
+        if (this.arrayMapping.filter?.enabled && this.arrayMapping.filter.root) {
+            this.filterEnabled.set(true);
+            this.rootGroup.set(this.cloneGroup(this.arrayMapping.filter.root));
+        }
+    }
+    createEmptyGroup() {
+        return {
+            id: this.generateId(),
+            type: 'group',
+            logic: 'and',
+            children: [],
+        };
+    }
+    generateId() {
+        return `filter-${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 }),
+        };
+    }
+    collectFields(fields, prefix, result) {
+        for (const field of fields) {
+            const path = prefix ? `${prefix}.${field.name}` : field.name;
+            if (field.type !== 'object' && field.type !== 'array') {
+                result.push({ path, name: field.name, type: field.type });
+            }
+            if (field.children) {
+                this.collectFields(field.children, path, result);
+            }
+        }
+    }
+    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;
+        }
+    }
+    getFieldType(fieldPath) {
+        const field = this.availableFields().find((f) => f.path === fieldPath);
+        return field?.type || 'string';
+    }
+    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 fields = this.availableFields();
+        const firstField = fields[0];
+        const newCondition = {
+            id: this.generateId(),
+            type: 'condition',
+            field: firstField?.path || '',
+            fieldName: firstField?.name || '',
+            operator: 'equals',
+            value: '',
+            valueType: firstField?.type || 'string',
+        };
+        group.children = [...group.children, newCondition];
+        this.triggerUpdate();
+    }
+    addGroup(parentGroup) {
+        const newGroup = {
+            id: this.generateId(),
+            type: 'group',
+            logic: parentGroup.logic === 'and' ? 'or' : 'and', // Default to opposite logic
+            children: [],
+        };
+        parentGroup.children = [...parentGroup.children, newGroup];
+        this.triggerUpdate();
+    }
+    removeItem(parentGroup, itemId) {
+        parentGroup.children = parentGroup.children.filter((c) => c.id !== itemId);
+        this.triggerUpdate();
+    }
+    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;
+            // Reset operator to first valid option for new type
+            const operators = this.getOperatorsForField(fieldPath);
+            condition.operator = operators[0].value;
+            condition.value = '';
+        }
+        this.triggerUpdate();
+    }
+    onOperatorChange(condition, operator) {
+        condition.operator = operator;
+        if (!this.operatorNeedsValue(operator)) {
+            condition.value = '';
+        }
+        this.triggerUpdate();
+    }
+    onValueChange(condition, value) {
+        if (condition.valueType === 'number') {
+            condition.value = parseFloat(value) || 0;
+        }
+        else {
+            condition.value = value;
+        }
+        this.triggerUpdate();
+    }
+    onLogicChange(group, logic) {
+        group.logic = logic;
+        this.triggerUpdate();
+    }
+    triggerUpdate() {
+        // Trigger signal update by creating a new reference
+        this.rootGroup.set(this.cloneGroup(this.rootGroup()));
+    }
+    hasConditions(group) {
+        return group.children.length > 0;
+    }
+    countConditions(group) {
+        let count = 0;
+        for (const child of group.children) {
+            if (child.type === 'condition') {
+                count++;
+            }
+            else {
+                count += this.countConditions(child);
+            }
+        }
+        return count;
+    }
+    onSave() {
+        if (!this.filterEnabled()) {
+            this.save.emit(undefined);
+        }
+        else {
+            this.save.emit({
+                enabled: true,
+                root: this.rootGroup(),
+            });
+        }
+    }
+    onClose() {
+        this.close.emit();
+    }
+    onBackdropClick(event) {
+        if (event.target.classList.contains('modal-backdrop')) {
+            this.onClose();
+        }
+    }
+    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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrayFilterModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'array-filter-modal', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatRadioModule,
+                        MatSlideToggleModule,
+                        MatTooltipModule,
+                        MatDividerModule,
+                    ], 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"] }]
+        }], propDecorators: { arrayMapping: [{
+                type: Input,
+                args: [{ required: true }]
+            }], save: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });
+
+class ArraySelectorModalComponent {
+    mapping;
+    save = new EventEmitter();
+    close = new EventEmitter();
+    selectionMode = signal('first', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+    conditionGroup = signal(this.createEmptyGroup(), ...(ngDevMode ? [{ debugName: "conditionGroup" }] : []));
+    // Available fields from the source array's children
+    availableFields = computed(() => {
+        const fields = [];
+        this.collectFields(this.mapping.sourceArray.children || [], '', fields);
+        return fields;
+    }, ...(ngDevMode ? [{ debugName: "availableFields" }] : []));
+    // 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: 'does 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: 'greater than', needsValue: true },
+        { value: 'lessThan', label: 'less than', needsValue: true },
+        { value: 'greaterThanOrEqual', label: 'greater or equal', needsValue: true },
+        { value: 'lessThanOrEqual', label: 'less or equal', needsValue: true },
+    ];
+    booleanOperators = [
+        { value: 'isTrue', label: 'is true', needsValue: false },
+        { value: 'isFalse', label: 'is false', needsValue: false },
+    ];
+    ngOnInit() {
+        // Initialize from existing selector config
+        if (this.mapping.selector) {
+            this.selectionMode.set(this.mapping.selector.mode);
+            if (this.mapping.selector.condition) {
+                this.conditionGroup.set(this.cloneGroup(this.mapping.selector.condition));
+            }
+        }
+    }
+    createEmptyGroup() {
+        return {
+            id: this.generateId(),
+            type: 'group',
+            logic: 'and',
+            children: [],
+        };
+    }
+    generateId() {
+        return `filter-${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 }),
+        };
+    }
+    collectFields(fields, prefix, result) {
+        for (const field of fields) {
+            const path = prefix ? `${prefix}.${field.name}` : field.name;
+            if (field.type !== 'object' && field.type !== 'array') {
+                result.push({ path, name: field.name, type: field.type });
+            }
+            if (field.children) {
+                this.collectFields(field.children, path, result);
+            }
+        }
+    }
+    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 fields = this.availableFields();
+        const firstField = fields[0];
+        const newCondition = {
+            id: this.generateId(),
+            type: 'condition',
+            field: firstField?.path || '',
+            fieldName: firstField?.name || '',
+            operator: 'equals',
+            value: '',
+            valueType: firstField?.type || 'string',
+        };
+        group.children = [...group.children, newCondition];
+        this.triggerUpdate();
+    }
+    addGroup(parentGroup) {
+        const newGroup = {
+            id: this.generateId(),
+            type: 'group',
+            logic: parentGroup.logic === 'and' ? 'or' : 'and',
+            children: [],
+        };
+        parentGroup.children = [...parentGroup.children, newGroup];
+        this.triggerUpdate();
+    }
+    removeItem(parentGroup, itemId) {
+        parentGroup.children = parentGroup.children.filter((c) => c.id !== itemId);
+        this.triggerUpdate();
+    }
+    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.triggerUpdate();
+    }
+    onOperatorChange(condition, operator) {
+        condition.operator = operator;
+        if (!this.operatorNeedsValue(operator)) {
+            condition.value = '';
+        }
+        this.triggerUpdate();
+    }
+    onValueChange(condition, value) {
+        if (condition.valueType === 'number') {
+            condition.value = parseFloat(value) || 0;
+        }
+        else {
+            condition.value = value;
+        }
+        this.triggerUpdate();
+    }
+    onLogicChange(group, logic) {
+        group.logic = logic;
+        this.triggerUpdate();
+    }
+    triggerUpdate() {
+        this.conditionGroup.set(this.cloneGroup(this.conditionGroup()));
+    }
+    onSave() {
+        const config = {
+            mode: this.selectionMode(),
+        };
+        if (this.selectionMode() === 'condition') {
+            config.condition = this.conditionGroup();
+        }
+        this.save.emit(config);
+    }
+    onClose() {
+        this.close.emit();
+    }
+    onBackdropClick(event) {
+        if (event.target.classList.contains('modal-backdrop')) {
+            this.onClose();
+        }
+    }
+    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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArraySelectorModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'array-selector-modal', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatRadioModule,
+                        MatSlideToggleModule,
+                        MatTooltipModule,
+                        MatDividerModule,
+                    ], 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"] }]
+        }], propDecorators: { mapping: [{
+                type: Input,
+                args: [{ required: true }]
+            }], save: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });
+
+class DefaultValuePopoverComponent {
+    field;
+    existingValue;
+    position;
+    save = new EventEmitter();
+    delete = new EventEmitter();
+    close = new EventEmitter();
+    stringValue = '';
+    numberValue = null;
+    booleanValue = false;
+    dateValue = null;
+    ngOnInit() {
+        if (this.existingValue) {
+            switch (this.existingValue.valueType) {
+                case 'string':
+                    this.stringValue = this.existingValue.value || '';
+                    break;
+                case 'number':
+                    this.numberValue = this.existingValue.value;
+                    break;
+                case 'boolean':
+                    this.booleanValue = this.existingValue.value;
+                    break;
+                case 'date':
+                    this.dateValue = this.existingValue.value ? new Date(this.existingValue.value) : null;
+                    break;
+            }
+        }
+    }
+    get fieldType() {
+        if (this.field.type === 'date' || this.field.name.toLowerCase().includes('date')) {
+            return 'date';
+        }
+        return this.field.type;
+    }
+    onSave() {
+        let value;
+        switch (this.fieldType) {
+            case 'number':
+                value = this.numberValue;
+                break;
+            case 'boolean':
+                value = this.booleanValue;
+                break;
+            case 'date':
+                value = this.dateValue;
+                break;
+            default:
+                value = this.stringValue || null;
+        }
+        this.save.emit(value);
+    }
+    onDelete() {
+        this.delete.emit();
+    }
+    onClose() {
+        this.close.emit();
+    }
+    onBackdropClick(event) {
+        if (event.target.classList.contains('popover-backdrop')) {
+            this.onClose();
+        }
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultValuePopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'default-value-popover', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                    ], 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"] }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], existingValue: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });
+
+class DataMapperComponent {
+    sourceSchema;
+    targetSchema;
+    sampleData = {};
+    mappingsChange = new EventEmitter();
+    svgContainer;
+    svgElement;
+    mappingService = inject(MappingService);
+    svgConnectorService = inject(SvgConnectorService);
+    transformationService = inject(TransformationService);
+    // Field positions from both trees
+    sourcePositions = new Map();
+    targetPositions = new Map();
+    // Visual state
+    connections = signal([], ...(ngDevMode ? [{ debugName: "connections" }] : []));
+    dragPath = signal(null, ...(ngDevMode ? [{ debugName: "dragPath" }] : []));
+    selectedMappingId = signal(null, ...(ngDevMode ? [{ debugName: "selectedMappingId" }] : []));
+    popoverPosition = signal(null, ...(ngDevMode ? [{ debugName: "popoverPosition" }] : []));
+    // Array filter modal state
+    showArrayFilterModal = signal(false, ...(ngDevMode ? [{ debugName: "showArrayFilterModal" }] : []));
+    selectedArrayMapping = signal(null, ...(ngDevMode ? [{ debugName: "selectedArrayMapping" }] : []));
+    // Array selector modal state (for array-to-object)
+    showArraySelectorModal = signal(false, ...(ngDevMode ? [{ debugName: "showArraySelectorModal" }] : []));
+    selectedArrayToObjectMapping = signal(null, ...(ngDevMode ? [{ debugName: "selectedArrayToObjectMapping" }] : []));
+    // Default value popover state
+    showDefaultValuePopover = signal(false, ...(ngDevMode ? [{ debugName: "showDefaultValuePopover" }] : []));
+    selectedDefaultValueField = signal(null, ...(ngDevMode ? [{ debugName: "selectedDefaultValueField" }] : []));
+    defaultValuePopoverPosition = signal(null, ...(ngDevMode ? [{ debugName: "defaultValuePopoverPosition" }] : []));
+    // Computed values
+    mappings = computed(() => this.mappingService.allMappings(), ...(ngDevMode ? [{ debugName: "mappings" }] : []));
+    arrayMappings = computed(() => this.mappingService.allArrayMappings(), ...(ngDevMode ? [{ debugName: "arrayMappings" }] : []));
+    defaultValues = computed(() => this.mappingService.allDefaultValues(), ...(ngDevMode ? [{ debugName: "defaultValues" }] : []));
+    selectedMapping = computed(() => this.mappingService.selectedMapping(), ...(ngDevMode ? [{ debugName: "selectedMapping" }] : []));
+    showPopover = computed(() => this.selectedMappingId() !== null && this.popoverPosition() !== null && !this.showArrayFilterModal(), ...(ngDevMode ? [{ debugName: "showPopover" }] : []));
+    isDragging = false;
+    dragSourceField = null;
+    dragStartPoint = null;
+    resizeObserver;
+    ngAfterViewInit() {
+        this.setupResizeObserver();
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    setupResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateConnections();
+        });
+        if (this.svgContainer?.nativeElement) {
+            this.resizeObserver.observe(this.svgContainer.nativeElement);
+        }
+    }
+    onSourcePositionsChanged(positions) {
+        this.sourcePositions = positions;
+        this.updateConnections();
+    }
+    onTargetPositionsChanged(positions) {
+        this.targetPositions = positions;
+        this.updateConnections();
+    }
+    onFieldDragStart(event) {
+        if (!this.svgContainer?.nativeElement)
+            return;
+        const containerRect = this.svgContainer.nativeElement.getBoundingClientRect();
+        const startPoint = this.svgConnectorService.calculateConnectionPoint(event.rect, 'source', containerRect);
+        this.isDragging = true;
+        this.dragSourceField = event.field;
+        this.dragStartPoint = startPoint;
+        document.body.style.cursor = 'grabbing';
+    }
+    onMouseMove(event) {
+        if (!this.isDragging || !this.dragStartPoint || !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);
+    }
+    onMouseUp(event) {
+        if (this.isDragging) {
+            this.dragPath.set(null);
+            this.isDragging = false;
+            this.dragSourceField = null;
+            this.dragStartPoint = null;
+            document.body.style.cursor = '';
+        }
+    }
+    onFieldDrop(event) {
+        if (!this.dragSourceField)
+            return;
+        // Create mapping
+        const mapping = this.mappingService.createMapping([this.dragSourceField], event.field);
+        this.mappingsChange.emit(this.mappingService.allMappings());
+        this.updateConnections();
+        // Reset drag state
+        this.isDragging = false;
+        this.dragSourceField = null;
+        this.dragStartPoint = null;
+        this.dragPath.set(null);
+        document.body.style.cursor = '';
+    }
+    onConnectionClick(connection, event) {
+        event.stopPropagation();
+        this.selectedMappingId.set(connection.mappingId);
+        this.mappingService.selectMapping(connection.mappingId);
+        // Position popover at click location
+        this.popoverPosition.set({
+            x: event.clientX,
+            y: event.clientY,
+        });
+        this.updateConnections();
+    }
+    onTransformationNodeClick(connection, event) {
+        event.stopPropagation();
+        // If it's an array mapping, show the filter modal
+        if (connection.isArrayMapping) {
+            const arrayMapping = this.mappingService.getArrayMapping(connection.mappingId);
+            if (arrayMapping) {
+                this.selectedArrayMapping.set(arrayMapping);
+                this.showArrayFilterModal.set(true);
+                return;
+            }
+        }
+        // If it's an array-to-object mapping, show the selector modal
+        if (connection.isArrayToObjectMapping) {
+            const arrayToObjectMapping = this.mappingService.getArrayToObjectMapping(connection.mappingId);
+            if (arrayToObjectMapping) {
+                this.selectedArrayToObjectMapping.set(arrayToObjectMapping);
+                this.showArraySelectorModal.set(true);
+                return;
+            }
+        }
+        this.onConnectionClick(connection, event);
+    }
+    onArrayFilterSave(filter) {
+        const arrayMapping = this.selectedArrayMapping();
+        if (arrayMapping) {
+            this.mappingService.updateArrayFilter(arrayMapping.id, filter);
+            this.mappingsChange.emit(this.mappingService.allMappings());
+        }
+        this.closeArrayFilterModal();
+        this.updateConnections();
+    }
+    closeArrayFilterModal() {
+        this.showArrayFilterModal.set(false);
+        this.selectedArrayMapping.set(null);
+    }
+    onArraySelectorSave(selector) {
+        const mapping = this.selectedArrayToObjectMapping();
+        if (mapping) {
+            this.mappingService.updateArrayToObjectSelector(mapping.id, selector);
+            this.mappingsChange.emit(this.mappingService.allMappings());
+        }
+        this.closeArraySelectorModal();
+        this.updateConnections();
+    }
+    closeArraySelectorModal() {
+        this.showArraySelectorModal.set(false);
+        this.selectedArrayToObjectMapping.set(null);
+    }
+    // Default value methods
+    onDefaultValueClick(event) {
+        this.selectedDefaultValueField.set(event.field);
+        this.defaultValuePopoverPosition.set({
+            x: event.rect.right,
+            y: event.rect.top + event.rect.height / 2,
+        });
+        this.showDefaultValuePopover.set(true);
+    }
+    onDefaultValueSave(value) {
+        const field = this.selectedDefaultValueField();
+        if (field) {
+            this.mappingService.setDefaultValue(field, value);
+            this.mappingsChange.emit(this.mappingService.allMappings());
+        }
+        this.closeDefaultValuePopover();
+    }
+    onDefaultValueDelete() {
+        const field = this.selectedDefaultValueField();
+        if (field) {
+            this.mappingService.removeDefaultValue(field.id);
+            this.mappingsChange.emit(this.mappingService.allMappings());
+        }
+        this.closeDefaultValuePopover();
+    }
+    closeDefaultValuePopover() {
+        this.showDefaultValuePopover.set(false);
+        this.selectedDefaultValueField.set(null);
+        this.defaultValuePopoverPosition.set(null);
+    }
+    getExistingDefaultValue(fieldId) {
+        return this.mappingService.getDefaultValue(fieldId);
+    }
+    onPopoverSave(config) {
+        const mappingId = this.selectedMappingId();
+        if (mappingId) {
+            this.mappingService.updateTransformation(mappingId, config);
+            this.mappingsChange.emit(this.mappingService.allMappings());
+        }
+        this.closePopover();
+        this.updateConnections();
+    }
+    onPopoverDelete() {
+        const mappingId = this.selectedMappingId();
+        if (mappingId) {
+            this.mappingService.removeMapping(mappingId);
+            this.mappingsChange.emit(this.mappingService.allMappings());
+        }
+        this.closePopover();
+        this.updateConnections();
+    }
+    closePopover() {
+        this.selectedMappingId.set(null);
+        this.popoverPosition.set(null);
+        this.mappingService.selectMapping(null);
+        this.updateConnections();
+    }
+    updateConnections() {
+        if (!this.svgContainer?.nativeElement)
+            return;
+        const containerRect = this.svgContainer.nativeElement.getBoundingClientRect();
+        const mappings = this.mappingService.allMappings();
+        const selectedId = this.selectedMappingId();
+        const newConnections = [];
+        for (const mapping of mappings) {
+            const targetRect = this.targetPositions.get(mapping.targetField.id);
+            if (!targetRect)
+                continue;
+            const targetPoint = this.svgConnectorService.calculateConnectionPoint(targetRect, 'target', containerRect);
+            const sourcePoints = [];
+            for (const sourceField of mapping.sourceFields) {
+                const sourceRect = this.sourcePositions.get(sourceField.id);
+                if (sourceRect) {
+                    sourcePoints.push(this.svgConnectorService.calculateConnectionPoint(sourceRect, 'source', containerRect));
+                }
+            }
+            if (sourcePoints.length === 0)
+                continue;
+            let paths;
+            let midPoint;
+            if (sourcePoints.length === 1) {
+                paths = [this.svgConnectorService.createBezierPath(sourcePoints[0], targetPoint)];
+                midPoint = this.svgConnectorService.getMidPoint(sourcePoints[0], targetPoint);
+            }
+            else {
+                const result = this.svgConnectorService.createMultiSourcePath(sourcePoints, targetPoint);
+                paths = result.paths;
+                midPoint = result.mergePoint;
+            }
+            // Check if this array mapping has a filter
+            let hasFilter = false;
+            if (mapping.isArrayMapping) {
+                const arrayMapping = this.mappingService.getArrayMapping(mapping.id);
+                hasFilter = arrayMapping?.filter?.enabled === true && (arrayMapping?.filter?.root?.children?.length ?? 0) > 0;
+            }
+            newConnections.push({
+                id: `conn-${mapping.id}`,
+                mappingId: mapping.id,
+                paths,
+                midPoint,
+                targetPoint,
+                hasTransformation: mapping.transformation.type !== 'direct',
+                isSelected: mapping.id === selectedId,
+                isArrayMapping: mapping.isArrayMapping || false,
+                isArrayToObjectMapping: mapping.isArrayToObjectMapping || false,
+                hasFilter,
+            });
+        }
+        this.connections.set(newConnections);
+    }
+    getTransformationIcon(mappingId) {
+        const mapping = this.mappings().find((m) => m.id === mappingId);
+        if (!mapping)
+            return 'settings';
+        // Show filter icon for array mappings with filter, otherwise loop icon
+        if (mapping.isArrayMapping) {
+            const arrayMapping = this.mappingService.getArrayMapping(mappingId);
+            if (arrayMapping?.filter?.enabled && (arrayMapping?.filter?.root?.children?.length ?? 0) > 0) {
+                return 'filter_alt';
+            }
+            return 'loop';
+        }
+        // Show appropriate icon for array-to-object mappings
+        if (mapping.isArrayToObjectMapping) {
+            const atoMapping = this.mappingService.getArrayToObjectMapping(mappingId);
+            if (atoMapping?.selector.mode === 'first')
+                return 'first_page';
+            if (atoMapping?.selector.mode === 'last')
+                return 'last_page';
+            if (atoMapping?.selector.mode === 'condition')
+                return 'filter_alt';
+            return 'swap_horiz';
+        }
+        const icons = {
+            direct: 'arrow_forward',
+            concat: 'merge',
+            substring: 'content_cut',
+            replace: 'find_replace',
+            uppercase: 'text_fields',
+            lowercase: 'text_fields',
+            dateFormat: 'calendar_today',
+            extractYear: 'event',
+            extractMonth: 'event',
+            extractDay: 'event',
+            extractHour: 'schedule',
+            extractMinute: 'schedule',
+            extractSecond: 'schedule',
+            numberFormat: 'pin',
+            template: 'code',
+            custom: 'functions',
+        };
+        return icons[mapping.transformation.type] || 'settings';
+    }
+    clearAllMappings() {
+        this.mappingService.clearAllMappings();
+        this.mappingsChange.emit([]);
+        this.updateConnections();
+    }
+    exportMappings() {
+        return this.mappingService.exportMappings();
+    }
+    importMappings(json) {
+        this.mappingService.importMappings(json);
+        this.mappingsChange.emit(this.mappingService.allMappings());
+        this.updateConnections();
+    }
+    trackByConnectionId(index, connection) {
+        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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataMapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'data-mapper', standalone: true, imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        SchemaTreeComponent,
+                        TransformationPopoverComponent,
+                        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"] }]
+        }], propDecorators: { sourceSchema: [{
+                type: Input
+            }], targetSchema: [{
+                type: Input
+            }], sampleData: [{
+                type: Input
+            }], mappingsChange: [{
+                type: Output
+            }], svgContainer: [{
+                type: ViewChild,
+                args: ['svgContainer']
+            }], svgElement: [{
+                type: ViewChild,
+                args: ['svgElement']
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }] } });
+
+class SchemaEditorComponent {
+    set schema(value) {
+        if (value) {
+            this.schemaName.set(value.name);
+            this.fields.set(this.cloneFields(value.fields));
+        }
+    }
+    schemaChange = new EventEmitter();
+    save = new EventEmitter();
+    schemaName = signal('New Schema', ...(ngDevMode ? [{ debugName: "schemaName" }] : []));
+    fields = signal([], ...(ngDevMode ? [{ debugName: "fields" }] : []));
+    fieldTypes = [
+        { value: 'string', label: 'String', icon: 'text_fields' },
+        { value: 'number', label: 'Number', icon: 'pin' },
+        { value: 'boolean', label: 'Boolean', icon: 'toggle_on' },
+        { value: 'date', label: 'Date', icon: 'calendar_today' },
+        { value: 'object', label: 'Object', icon: 'data_object' },
+        { value: 'array', label: 'Array', icon: 'data_array' },
+    ];
+    generateId() {
+        return `field-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    cloneFields(fields) {
+        return fields.map(f => ({
+            ...f,
+            children: f.children ? this.cloneFields(f.children) : undefined,
+        }));
+    }
+    getTypeIcon(type) {
+        return this.fieldTypes.find(t => t.value === type)?.icon || 'help_outline';
+    }
+    // Add a new field at the root level
+    addField() {
+        const newField = {
+            id: this.generateId(),
+            name: '',
+            type: 'string',
+            isEditing: true,
+            expanded: false,
+        };
+        this.fields.update(fields => [...fields, newField]);
+        this.emitChange();
+    }
+    // Add a child field to an object or array
+    addChildField(parent) {
+        if (!parent.children) {
+            parent.children = [];
+        }
+        const newField = {
+            id: this.generateId(),
+            name: '',
+            type: 'string',
+            isEditing: true,
+        };
+        parent.children.push(newField);
+        parent.expanded = true;
+        this.fields.update(fields => [...fields]);
+        this.emitChange();
+    }
+    // Delete a field
+    deleteField(field, parentList) {
+        const index = parentList.indexOf(field);
+        if (index > -1) {
+            parentList.splice(index, 1);
+            this.fields.update(fields => [...fields]);
+            this.emitChange();
+        }
+    }
+    // Duplicate a field
+    duplicateField(field, parentList) {
+        const index = parentList.indexOf(field);
+        if (index > -1) {
+            const clone = {
+                ...field,
+                id: this.generateId(),
+                name: field.name + '_copy',
+                children: field.children ? this.cloneFields(field.children) : undefined,
+                isEditing: false,
+            };
+            parentList.splice(index + 1, 0, clone);
+            this.fields.update(fields => [...fields]);
+            this.emitChange();
+        }
+    }
+    // Toggle field expansion
+    toggleExpand(field) {
+        field.expanded = !field.expanded;
+        this.fields.update(fields => [...fields]);
+    }
+    // Start editing a field
+    startEdit(field) {
+        field.isEditing = true;
+        this.fields.update(fields => [...fields]);
+    }
+    // Stop editing a field
+    stopEdit(field) {
+        field.isEditing = false;
+        if (!field.name.trim()) {
+            field.name = 'unnamed';
+        }
+        this.fields.update(fields => [...fields]);
+        this.emitChange();
+    }
+    // Handle field name input - only allow valid property name characters
+    onFieldNameChange(field, event) {
+        const input = event.target;
+        // Remove invalid characters: only allow letters, numbers, underscores, and dollar signs
+        // Property names should start with letter, underscore, or dollar sign
+        const sanitized = input.value.replace(/[^a-zA-Z0-9_$]/g, '');
+        field.name = sanitized;
+        // Update input value if it was sanitized
+        if (input.value !== sanitized) {
+            input.value = sanitized;
+        }
+    }
+    // Handle field type change
+    onFieldTypeChange(field, type) {
+        field.type = type;
+        // Initialize children array for object/array types
+        if ((type === 'object' || type === 'array') && !field.children) {
+            field.children = [];
+        }
+        this.fields.update(fields => [...fields]);
+        this.emitChange();
+    }
+    // Toggle required status
+    toggleRequired(field) {
+        field.required = !field.required;
+        this.fields.update(fields => [...fields]);
+        this.emitChange();
+    }
+    // Update field description
+    onDescriptionChange(field, description) {
+        field.description = description;
+        this.fields.update(fields => [...fields]);
+        this.emitChange();
+    }
+    // Toggle allowed values editor
+    toggleValuesEditor(field) {
+        field.isEditingValues = !field.isEditingValues;
+        if (field.isEditingValues && !field.allowedValues) {
+            field.allowedValues = [];
+        }
+        this.fields.update(fields => [...fields]);
+    }
+    // Add allowed value
+    addAllowedValue(field, input) {
+        const value = input.value.trim();
+        if (value && !field.allowedValues?.includes(value)) {
+            if (!field.allowedValues) {
+                field.allowedValues = [];
+            }
+            field.allowedValues.push(value);
+            input.value = '';
+            this.fields.update(fields => [...fields]);
+            this.emitChange();
+        }
+    }
+    // Remove allowed value
+    removeAllowedValue(field, index) {
+        if (field.allowedValues) {
+            field.allowedValues.splice(index, 1);
+            if (field.allowedValues.length === 0) {
+                field.allowedValues = undefined;
+            }
+            this.fields.update(fields => [...fields]);
+            this.emitChange();
+        }
+    }
+    // Handle Enter key in allowed value input
+    onAllowedValueKeydown(event, field, input) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.addAllowedValue(field, input);
+        }
+    }
+    // Handle keyboard events in field name input
+    onFieldNameKeydown(event, field) {
+        if (event.key === 'Enter') {
+            this.stopEdit(field);
+        }
+        else if (event.key === 'Escape') {
+            field.isEditing = false;
+            this.fields.update(fields => [...fields]);
+        }
+    }
+    // Move field up in list
+    moveFieldUp(field, parentList) {
+        const index = parentList.indexOf(field);
+        if (index > 0) {
+            [parentList[index - 1], parentList[index]] = [parentList[index], parentList[index - 1]];
+            this.fields.update(fields => [...fields]);
+            this.emitChange();
+        }
+    }
+    // Move field down in list
+    moveFieldDown(field, parentList) {
+        const index = parentList.indexOf(field);
+        if (index < parentList.length - 1) {
+            [parentList[index], parentList[index + 1]] = [parentList[index + 1], parentList[index]];
+            this.fields.update(fields => [...fields]);
+            this.emitChange();
+        }
+    }
+    // Check if field can be indented (previous sibling must be object/array)
+    canIndent(field, parentList) {
+        const index = parentList.indexOf(field);
+        if (index <= 0)
+            return false;
+        const prevSibling = parentList[index - 1];
+        return prevSibling.type === 'object' || prevSibling.type === 'array';
+    }
+    // Indent field - move into previous sibling's children
+    indentField(field, parentList) {
+        const index = parentList.indexOf(field);
+        if (index <= 0)
+            return;
+        const prevSibling = parentList[index - 1];
+        if (prevSibling.type !== 'object' && prevSibling.type !== 'array')
+            return;
+        // Remove from current list
+        parentList.splice(index, 1);
+        // Add to previous sibling's children
+        if (!prevSibling.children) {
+            prevSibling.children = [];
+        }
+        prevSibling.children.push(field);
+        prevSibling.expanded = true;
+        this.fields.update(fields => [...fields]);
+        this.emitChange();
+    }
+    // Outdent field - move out of parent to grandparent level
+    outdentField(field, parentList, level) {
+        if (level === 0)
+            return;
+        // Find the parent object/array that contains this list
+        const parent = this.findParentOfList(this.fields(), parentList);
+        if (!parent)
+            return;
+        // Find the grandparent list
+        const grandparentList = this.findParentList(this.fields(), parent);
+        if (!grandparentList)
+            return;
+        // Remove from current list
+        const index = parentList.indexOf(field);
+        parentList.splice(index, 1);
+        // Add to grandparent list after the parent
+        const parentIndex = grandparentList.indexOf(parent);
+        grandparentList.splice(parentIndex + 1, 0, field);
+        this.fields.update(fields => [...fields]);
+        this.emitChange();
+    }
+    // Find the parent field that contains a given list
+    findParentOfList(searchIn, targetList) {
+        for (const field of searchIn) {
+            if (field.children === targetList) {
+                return field;
+            }
+            if (field.children) {
+                const found = this.findParentOfList(field.children, targetList);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    // Find the list that contains a given field
+    findParentList(searchIn, targetField) {
+        if (searchIn.includes(targetField)) {
+            return searchIn;
+        }
+        for (const field of searchIn) {
+            if (field.children) {
+                const found = this.findParentList(field.children, targetField);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    // Update schema name - only allow valid characters
+    onSchemaNameChange(name, input) {
+        const sanitized = name.replace(/[^a-zA-Z0-9_$]/g, '');
+        this.schemaName.set(sanitized);
+        if (input && input.value !== sanitized) {
+            input.value = sanitized;
+        }
+        this.emitChange();
+    }
+    // Emit change event
+    emitChange() {
+        this.schemaChange.emit({
+            name: this.schemaName(),
+            fields: this.fields(),
+        });
+    }
+    // Save the schema
+    onSave() {
+        this.save.emit({
+            name: this.schemaName(),
+            fields: this.fields(),
+        });
+    }
+    // Convert to internal JSON format
+    toJson() {
+        return JSON.stringify({
+            name: this.schemaName(),
+            fields: this.stripEditingState(this.fields()),
+        }, null, 2);
+    }
+    // Convert to valid JSON Schema format
+    toJsonSchema() {
+        const required = [];
+        const properties = {};
+        for (const field of this.fields()) {
+            if (field.required && field.name) {
+                required.push(field.name);
+            }
+            if (field.name) {
+                properties[field.name] = this.fieldToJsonSchema(field);
+            }
+        }
+        const schema = {
+            $schema: 'https://json-schema.org/draft/2020-12/schema',
+            type: 'object',
+            title: this.schemaName(),
+            properties,
+        };
+        if (required.length > 0) {
+            schema['required'] = required;
+        }
+        return schema;
+    }
+    fieldToJsonSchema(field) {
+        const schema = {};
+        // Map type
+        if (field.type === 'date') {
+            schema['type'] = 'string';
+            schema['format'] = 'date-time';
+        }
+        else if (field.type === 'array') {
+            schema['type'] = 'array';
+            if (field.children && field.children.length > 0) {
+                // If array has children, treat first child as item schema
+                const itemProperties = {};
+                const itemRequired = [];
+                for (const child of field.children) {
+                    if (child.name) {
+                        itemProperties[child.name] = this.fieldToJsonSchema(child);
+                        if (child.required) {
+                            itemRequired.push(child.name);
+                        }
+                    }
+                }
+                const items = {
+                    type: 'object',
+                    properties: itemProperties,
+                };
+                if (itemRequired.length > 0) {
+                    items['required'] = itemRequired;
+                }
+                schema['items'] = items;
+            }
+        }
+        else if (field.type === 'object') {
+            schema['type'] = 'object';
+            if (field.children && field.children.length > 0) {
+                const childProperties = {};
+                const childRequired = [];
+                for (const child of field.children) {
+                    if (child.name) {
+                        childProperties[child.name] = this.fieldToJsonSchema(child);
+                        if (child.required) {
+                            childRequired.push(child.name);
+                        }
+                    }
+                }
+                schema['properties'] = childProperties;
+                if (childRequired.length > 0) {
+                    schema['required'] = childRequired;
+                }
+            }
+        }
+        else {
+            schema['type'] = field.type;
+        }
+        // Add description
+        if (field.description) {
+            schema['description'] = field.description;
+        }
+        // Add enum for allowed values
+        if (field.allowedValues && field.allowedValues.length > 0) {
+            schema['enum'] = field.allowedValues;
+        }
+        return schema;
+    }
+    stripEditingState(fields) {
+        return fields.map(f => {
+            const { isEditing, isEditingValues, ...rest } = f;
+            return {
+                ...rest,
+                children: f.children ? this.stripEditingState(f.children) : undefined,
+            };
+        });
+    }
+    // Track by function for ngFor
+    trackByFieldId(index, field) {
+        return field.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SchemaEditorComponent, isStandalone: true, selector: "schema-editor", inputs: { schema: "schema" }, outputs: { schemaChange: "schemaChange", save: "save" }, ngImport: i0, template: "<div class=\"schema-editor\">\n  <!-- Schema Header -->\n  <div class=\"editor-header\">\n    <div class=\"schema-name-section\">\n      <mat-form-field appearance=\"outline\" class=\"schema-name-field\">\n        <mat-label>Schema Name</mat-label>\n        <input\n          #schemaNameInput\n          matInput\n          [value]=\"schemaName()\"\n          (input)=\"onSchemaNameChange($any($event.target).value, schemaNameInput)\"\n          placeholder=\"Enter schema name\"\n        />\n      </mat-form-field>\n    </div>\n    <div class=\"header-actions\">\n      <button mat-flat-button color=\"primary\" (click)=\"addField()\">\n        <mat-icon>add</mat-icon>\n        Add Field\n      </button>\n    </div>\n  </div>\n\n  <!-- Fields List -->\n  <div class=\"fields-container\">\n    @if (fields().length === 0) {\n      <div class=\"empty-state\">\n        <mat-icon>schema</mat-icon>\n        <p>No fields yet. Click \"Add Field\" to get started.</p>\n      </div>\n    } @else {\n      <div class=\"fields-list\">\n        <ng-container *ngTemplateOutlet=\"fieldListTemplate; context: { fields: fields(), level: 0, parentList: fields() }\"></ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Recursive Field Template -->\n<ng-template #fieldListTemplate let-fields=\"fields\" let-level=\"level\" let-parentList=\"parentList\">\n  @for (field of fields; track trackByFieldId($index, field); let i = $index; let first = $first; let last = $last) {\n    <div\n      class=\"field-item\"\n      [class.has-children]=\"field.children && field.children.length > 0\"\n      [class.is-editing]=\"field.isEditing\"\n      [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n      [style.--level]=\"level\"\n    >\n      <!-- Reorder Buttons -->\n      <div class=\"reorder-buttons\">\n        <button\n          class=\"reorder-btn\"\n          [disabled]=\"first\"\n          (click)=\"moveFieldUp(field, parentList)\"\n          matTooltip=\"Move up\"\n        >\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        </button>\n        <button\n          class=\"reorder-btn\"\n          [disabled]=\"last\"\n          (click)=\"moveFieldDown(field, parentList)\"\n          matTooltip=\"Move down\"\n        >\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </div>\n\n      <!-- Indent/Outdent Buttons -->\n      <div class=\"indent-buttons\">\n        <button\n          class=\"indent-btn\"\n          [disabled]=\"!canIndent(field, parentList)\"\n          (click)=\"indentField(field, parentList)\"\n          matTooltip=\"Move into previous object/array\"\n        >\n          <mat-icon>chevron_right</mat-icon>\n        </button>\n        <button\n          class=\"indent-btn\"\n          [disabled]=\"level === 0\"\n          (click)=\"outdentField(field, parentList, level)\"\n          matTooltip=\"Move out of parent\"\n        >\n          <mat-icon>chevron_left</mat-icon>\n        </button>\n      </div>\n\n      <!-- Expand/Collapse -->\n      @if (field.type === 'object' || field.type === 'array') {\n        <button\n          class=\"expand-btn\"\n          (click)=\"toggleExpand(field)\"\n          matTooltip=\"{{ field.expanded ? 'Collapse' : 'Expand' }}\"\n        >\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <!-- Type Icon -->\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      <!-- Field Name -->\n      @if (field.isEditing) {\n        <input\n          class=\"field-name-input\"\n          [value]=\"field.name\"\n          (input)=\"onFieldNameChange(field, $event)\"\n          (blur)=\"stopEdit(field)\"\n          (keydown)=\"onFieldNameKeydown($event, field)\"\n          placeholder=\"Field name\"\n          autofocus\n        />\n      } @else {\n        <span class=\"field-name\" (dblclick)=\"startEdit(field)\">\n          {{ field.name || 'unnamed' }}\n          @if (field.type === 'array') {\n            <span class=\"array-indicator\">[]</span>\n          }\n        </span>\n      }\n\n      <!-- Required Toggle -->\n      <button\n        class=\"required-btn\"\n        [class.is-required]=\"field.required\"\n        (click)=\"toggleRequired(field)\"\n        [matTooltip]=\"field.required ? 'Required (click to make optional)' : 'Optional (click to make required)'\"\n      >\n        <mat-icon>{{ field.required ? 'star' : 'star_border' }}</mat-icon>\n      </button>\n\n      <!-- Description Input -->\n      <input\n        class=\"description-input\"\n        [value]=\"field.description || ''\"\n        (input)=\"onDescriptionChange(field, $any($event.target).value)\"\n        placeholder=\"Description...\"\n      />\n\n      <!-- Type Selector -->\n      <mat-form-field appearance=\"outline\" class=\"type-selector\">\n        <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange(field, $event.value)\">\n          @for (type of fieldTypes; track type.value) {\n            <mat-option [value]=\"type.value\">\n              <mat-icon>{{ type.icon }}</mat-icon>\n              {{ type.label }}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <!-- Actions -->\n      <div class=\"field-actions\">\n        @if (field.type === 'object' || field.type === 'array') {\n          <button\n            mat-icon-button\n            (click)=\"addChildField(field)\"\n            matTooltip=\"Add child field\"\n          >\n            <mat-icon>add_circle_outline</mat-icon>\n          </button>\n        }\n        @if (field.type === 'string' || field.type === 'number') {\n          <button\n            mat-icon-button\n            (click)=\"toggleValuesEditor(field)\"\n            [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values (' + field.allowedValues.length + ')' : 'Add allowed values'\"\n            [class.has-values]=\"field.allowedValues?.length\"\n          >\n            <mat-icon>{{ field.allowedValues?.length ? 'list' : 'list' }}</mat-icon>\n          </button>\n        }\n        <button mat-icon-button [matMenuTriggerFor]=\"fieldMenu\" matTooltip=\"More options\">\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #fieldMenu=\"matMenu\">\n          <button mat-menu-item (click)=\"startEdit(field)\">\n            <mat-icon>edit</mat-icon>\n            <span>Rename</span>\n          </button>\n          <button mat-menu-item (click)=\"duplicateField(field, parentList)\">\n            <mat-icon>content_copy</mat-icon>\n            <span>Duplicate</span>\n          </button>\n          <button mat-menu-item (click)=\"deleteField(field, parentList)\" class=\"delete-action\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n\n    <!-- Allowed Values Editor -->\n    @if (field.isEditingValues && (field.type === 'string' || field.type === 'number')) {\n      <div class=\"allowed-values-editor\" [style.--level]=\"level\">\n        <div class=\"values-header\">\n          <span class=\"values-label\">Allowed values:</span>\n          <input\n            #valueInput\n            class=\"value-input\"\n            type=\"text\"\n            placeholder=\"Type value and press Enter\"\n            (keydown)=\"onAllowedValueKeydown($event, field, valueInput)\"\n          />\n          <button class=\"add-value-btn\" (click)=\"addAllowedValue(field, valueInput)\" matTooltip=\"Add value\">\n            <mat-icon>add</mat-icon>\n          </button>\n        </div>\n        @if (field.allowedValues && field.allowedValues.length > 0) {\n          <div class=\"values-list\">\n            @for (value of field.allowedValues; track value; let vi = $index) {\n              <span class=\"value-chip\">\n                {{ value }}\n                <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(field, vi)\" matTooltip=\"Remove\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            }\n          </div>\n        } @else {\n          <div class=\"no-values\">No values defined yet</div>\n        }\n      </div>\n    }\n\n    <!-- Nested Children -->\n    @if ((field.type === 'object' || field.type === 'array') && field.expanded) {\n      <div class=\"nested-fields\" [style.--level]=\"level + 1\">\n        @if (field.children && field.children.length > 0) {\n          <ng-container *ngTemplateOutlet=\"fieldListTemplate; context: { fields: field.children, level: level + 1, parentList: field.children }\"></ng-container>\n        } @else {\n          <div class=\"empty-nested\">\n            <span>No child fields</span>\n            <button mat-button (click)=\"addChildField(field)\" color=\"primary\">\n              <mat-icon>add</mat-icon>\n              Add field\n            </button>\n          </div>\n        }\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{--schema-editor-bg: white;--schema-editor-border-radius: 12px;--schema-editor-shadow: 0 4px 20px rgba(0, 0, 0, .08);--schema-editor-border-color: #e2e8f0;--schema-editor-header-bg: white;--schema-editor-header-border: #e2e8f0;--schema-editor-field-bg: #f8fafc;--schema-editor-field-bg-hover: #f1f5f9;--schema-editor-field-bg-editing: #eff6ff;--schema-editor-field-bg-complex: #fefce8;--schema-editor-field-border-radius: 8px;--schema-editor-text-primary: #1e293b;--schema-editor-text-secondary: #64748b;--schema-editor-text-muted: #94a3b8;--schema-editor-accent-primary: #3b82f6;--schema-editor-accent-success: #22c55e;--schema-editor-accent-warning: #f59e0b;--schema-editor-accent-danger: #ef4444;--schema-editor-spacing-sm: 8px;--schema-editor-spacing-md: 16px;--schema-editor-spacing-lg: 24px;--schema-editor-font-size-sm: 12px;--schema-editor-font-size-md: 14px;--schema-editor-font-size-lg: 16px}.schema-editor{background:var(--schema-editor-bg);border-radius:var(--schema-editor-border-radius);box-shadow:var(--schema-editor-shadow);height:100%;display:flex;flex-direction:column;overflow:hidden}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--schema-editor-spacing-md) var(--schema-editor-spacing-lg);border-bottom:1px solid var(--schema-editor-border-color);gap:var(--schema-editor-spacing-md);flex-shrink:0;background:var(--schema-editor-header-bg)}.editor-header .schema-name-section{flex:1;max-width:400px}.editor-header .schema-name-field{width:100%}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.editor-header .header-actions{display:flex;gap:12px}.fields-container{flex:1;overflow-y:auto;padding:16px;min-height:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;color:#94a3b8;text-align:center}.empty-state mat-icon{font-size:64px;width:64px;height:64px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:16px;margin:0}.fields-list{display:flex;flex-direction:column;gap:4px}.field-item{display:flex;align-items:center;gap:var(--schema-editor-spacing-sm);padding:var(--schema-editor-spacing-sm) 12px;padding-left:calc(12px + var(--level, 0) * 24px);background:var(--schema-editor-field-bg);border-radius:var(--schema-editor-field-border-radius);border:1px solid transparent;transition:all .15s ease}.field-item:hover{background:var(--schema-editor-field-bg-hover);border-color:var(--schema-editor-border-color)}.field-item.is-editing{background:var(--schema-editor-field-bg-editing);border-color:var(--schema-editor-accent-primary)}.field-item.is-complex{background:var(--schema-editor-field-bg-complex)}.field-item.is-complex:hover{background:#fef9c3}.field-item.cdk-drag-preview{box-shadow:0 4px 16px #00000026;border:1px solid var(--schema-editor-accent-primary)}.field-item.cdk-drag-placeholder{opacity:.3}.reorder-buttons{display:flex;flex-direction:column;gap:0}.reorder-buttons .reorder-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:14px;border-radius:3px;transition:all .15s ease}.reorder-buttons .reorder-btn:hover:not(:disabled){background:#e2e8f0;color:#3b82f6}.reorder-buttons .reorder-btn:disabled{opacity:.3;cursor:default}.reorder-buttons .reorder-btn mat-icon{font-size:16px;width:16px;height:16px}.indent-buttons{display:flex;flex-direction:row;gap:2px}.indent-buttons .indent-btn{background:none;border:none;padding:2px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;transition:all .15s ease}.indent-buttons .indent-btn:hover:not(:disabled){background:#dbeafe;color:#2563eb}.indent-buttons .indent-btn:disabled{opacity:.3;cursor:default}.indent-buttons .indent-btn mat-icon{font-size:16px;width:16px;height:16px}.expand-btn{background:none;border:none;padding:4px;cursor:pointer;color:#64748b;border-radius:4px;display:flex;align-items:center;transition:all .15s ease}.expand-btn:hover{background:#e2e8f0;color:#1e293b}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:28px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;cursor:pointer;padding:4px 8px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name:hover{background:#e2e8f0}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-name-input{flex:0 0 auto;width:150px;font-size:14px;font-weight:500;color:#1e293b;padding:6px 10px;border:2px solid #3b82f6;border-radius:6px;outline:none;background:#fff}.field-name-input::placeholder{color:#94a3b8;font-weight:400}.required-btn{background:none;border:none;padding:4px;cursor:pointer;color:#cbd5e1;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;flex-shrink:0}.required-btn:hover{color:#f59e0b;background:#fef3c7}.required-btn.is-required{color:#f59e0b}.required-btn mat-icon{font-size:18px;width:18px;height:18px}.description-input{flex:1;font-size:13px;color:#64748b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;min-width:100px;transition:all .15s ease}.description-input:focus{border-color:#3b82f6;background:#fff}.description-input::placeholder{color:#94a3b8;font-style:italic}.type-selector{width:140px;flex-shrink:0}.type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.type-selector ::ng-deep .mat-mdc-text-field-wrapper{padding:0 8px!important}.type-selector ::ng-deep .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important;min-height:28px!important}.type-selector ::ng-deep .mat-mdc-select{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-value-text{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-arrow-wrapper{transform:scale(.8)}.field-actions{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s ease}.field-item:hover .field-actions{opacity:1}.field-actions button{color:#64748b}.field-actions button:hover{color:#1e293b}.delete-action{color:#ef4444!important}.delete-action mat-icon{color:#ef4444}.nested-fields{margin-left:calc(var(--level, 0) * 24px + 24px);padding-left:16px;border-left:2px solid #e2e8f0;display:flex;flex-direction:column;gap:4px;margin-top:4px;margin-bottom:8px}.empty-nested{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#94a3b8;font-size:13px;font-style:italic;background:#f8fafc;border-radius:6px;border:1px dashed #e2e8f0}.allowed-values-editor{margin-left:calc(var(--level, 0) * 24px + 48px);margin-top:4px;margin-bottom:8px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px}.allowed-values-editor .values-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.allowed-values-editor .values-label{font-size:12px;font-weight:500;color:#166534}.allowed-values-editor .value-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #86efac;border-radius:4px;outline:none;background:#fff}.allowed-values-editor .value-input:focus{border-color:#22c55e}.allowed-values-editor .value-input::placeholder{color:#94a3b8}.allowed-values-editor .add-value-btn{background:#22c55e;border:none;color:#fff;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.allowed-values-editor .add-value-btn:hover{background:#16a34a}.allowed-values-editor .add-value-btn mat-icon{font-size:18px;width:18px;height:18px}.allowed-values-editor .values-list{display:flex;flex-wrap:wrap;gap:6px}.allowed-values-editor .value-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#fff;border:1px solid #86efac;border-radius:4px;font-size:12px;color:#166534}.allowed-values-editor .value-chip .remove-value-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.allowed-values-editor .value-chip .remove-value-btn:hover{color:#ef4444}.allowed-values-editor .value-chip .remove-value-btn mat-icon{font-size:14px;width:14px;height:14px}.allowed-values-editor .no-values{font-size:12px;color:#94a3b8;font-style:italic}.field-actions .has-values{color:#22c55e!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: DragDropModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'schema-editor', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                        MatMenuModule,
+                        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"] }]
+        }], propDecorators: { schema: [{
+                type: Input
+            }], schemaChange: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of ngx-data-mapper
+ */
+// Models
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ArrayFilterModalComponent, ArraySelectorModalComponent, DataMapperComponent, DefaultValuePopoverComponent, MappingService, SchemaEditorComponent, SchemaParserService, SchemaTreeComponent, SvgConnectorService, TransformationPopoverComponent, TransformationService };
+//# sourceMappingURL=expeed-ngx-data-mapper.mjs.map