@expeed/ngx-data-mapper 1.3.2 → 1.3.4

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, EventEmitter, inject, ViewChildren, ViewChild, Output, Input, Component, HostListener, ChangeDetectorRef, ApplicationRef } 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';
@@ -8,7 +8,7 @@ import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$1 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
@@ -17,109 +17,17 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i8 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i7$2 from '@angular/cdk/drag-drop';
+import * as i9 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i6 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i7$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i9 from '@angular/material/divider';
+import * as i9$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i6$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
-import * as i6$2 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i6$3 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-
-/**
- * Standard JSON Schema (draft-07) TypeScript interfaces
- */
-/**
- * Convert JSON Schema to flat field list for UI rendering
- */
-function schemaToFields(schema, parentPath = '') {
-    const fields = [];
-    if (schema.type === 'object' && schema.properties) {
-        for (const [name, propSchema] of Object.entries(schema.properties)) {
-            const path = parentPath ? `${parentPath}.${name}` : name;
-            const field = {
-                name,
-                path,
-                schema: propSchema,
-                expanded: false,
-            };
-            if (propSchema.type === 'object' && propSchema.properties) {
-                field.children = schemaToFields(propSchema, path);
-            }
-            else if (propSchema.type === 'array' && propSchema.items) {
-                field.children = schemaToFields(propSchema.items, `${path}[]`);
-            }
-            fields.push(field);
-        }
-    }
-    return fields;
-}
-/**
- * Get the simple type for display purposes
- */
-function getSchemaType(schema) {
-    if (Array.isArray(schema.type)) {
-        return schema.type.filter(t => t !== 'null').join(' | ');
-    }
-    if (schema.type === 'integer') {
-        return 'number';
-    }
-    if (schema.format === 'date' || schema.format === 'date-time') {
-        return 'date';
-    }
-    return schema.type || 'any';
-}
-/**
- * Create an empty JSON Schema for a new schema definition
- */
-function createEmptySchema(title = 'New Schema') {
-    return {
-        $schema: 'http://json-schema.org/draft-07/schema#',
-        title,
-        type: 'object',
-        properties: {},
-        required: [],
-    };
-}
-/**
- * Add a property to a schema
- */
-function addProperty(schema, name, type, options) {
-    const newSchema = { ...schema };
-    newSchema.properties = { ...newSchema.properties };
-    const propSchema = { type };
-    if (options?.description) {
-        propSchema.description = options.description;
-    }
-    if (type === 'object') {
-        propSchema.properties = {};
-    }
-    else if (type === 'array') {
-        propSchema.items = { type: 'string' };
-    }
-    newSchema.properties[name] = propSchema;
-    if (options?.required) {
-        newSchema.required = [...(newSchema.required || []), name];
-    }
-    return newSchema;
-}
-/**
- * Remove a property from a schema
- */
-function removeProperty(schema, name) {
-    const newSchema = { ...schema };
-    newSchema.properties = { ...newSchema.properties };
-    delete newSchema.properties[name];
-    newSchema.required = (newSchema.required || []).filter(r => r !== name);
-    return newSchema;
-}
 
 class MappingService {
     mappings = signal([], ...(ngDevMode ? [{ debugName: "mappings" }] : []));
@@ -150,6 +58,14 @@ class MappingService {
     generateId() {
         return `mapping-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
     }
+    /**
+     * Strip UI-only properties from a field node for storage.
+     * Removes: children, expanded (not needed in mapping output)
+     */
+    stripFieldForStorage(field) {
+        const { children, expanded, ...rest } = field;
+        return rest;
+    }
     startDrag(field, startPoint) {
         this.dragState.set({
             isDragging: true,
@@ -203,15 +119,16 @@ class MappingService {
         // Don't allow if source already exists in the mapping
         if (mapping.sourceFields.some(sf => sf.id === newSourceField.id))
             return;
+        const strippedField = this.stripFieldForStorage(newSourceField);
         if (sourceFieldIndex !== undefined && mapping.sourceFields.length > 1) {
             // Replace specific source field in multi-source mapping
             const newSourceFields = [...mapping.sourceFields];
-            newSourceFields[sourceFieldIndex] = newSourceField;
+            newSourceFields[sourceFieldIndex] = strippedField;
             this.mappings.update(mappings => mappings.map(m => m.id === mappingId ? { ...m, sourceFields: newSourceFields } : m));
         }
         else {
             // Single source mapping - replace the source field
-            this.mappings.update(mappings => mappings.map(m => m.id === mappingId ? { ...m, sourceFields: [newSourceField] } : m));
+            this.mappings.update(mappings => mappings.map(m => m.id === mappingId ? { ...m, sourceFields: [strippedField] } : m));
         }
     }
     changeTargetField(mappingId, newTargetField) {
@@ -243,7 +160,7 @@ class MappingService {
         }
         else {
             // Simply update the target field
-            this.mappings.update(mappings => mappings.map(m => m.id === mappingId ? { ...m, targetField: newTargetField } : m));
+            this.mappings.update(mappings => mappings.map(m => m.id === mappingId ? { ...m, targetField: this.stripFieldForStorage(newTargetField) } : m));
         }
     }
     createMapping(sourceFields, targetField, transformation) {
@@ -263,11 +180,14 @@ class MappingService {
         const existingMapping = this.mappings().find((m) => m.targetField.id === targetField.id);
         if (existingMapping) {
             // Add source fields to existing mapping (for concat scenarios)
+            const newSources = sourceFields
+                .filter((sf) => !existingMapping.sourceFields.some((esf) => esf.id === sf.id))
+                .map(f => this.stripFieldForStorage(f));
             const updatedMapping = {
                 ...existingMapping,
                 sourceFields: [
                     ...existingMapping.sourceFields,
-                    ...sourceFields.filter((sf) => !existingMapping.sourceFields.some((esf) => esf.id === sf.id)),
+                    ...newSources,
                 ],
                 transformations: existingMapping.sourceFields.length + sourceFields.length > 1
                     ? [{ type: 'concat', separator: ' ', ...transformation }]
@@ -278,8 +198,8 @@ class MappingService {
         }
         const newMapping = {
             id: this.generateId(),
-            sourceFields,
-            targetField,
+            sourceFields: sourceFields.map(f => this.stripFieldForStorage(f)),
+            targetField: this.stripFieldForStorage(targetField),
             transformations: transformation ? [transformation] : [{ type: 'direct' }],
             isArrayMapping: false, // Only true for array-to-array connections
             arrayMappingId, // Links to parent array mapping if within array context
@@ -320,8 +240,8 @@ class MappingService {
         // Also create a field mapping to visualize the array connection
         const fieldMapping = {
             id: arrayMapping.id,
-            sourceFields: [sourceArray],
-            targetField: targetArray,
+            sourceFields: [this.stripFieldForStorage(sourceArray)],
+            targetField: this.stripFieldForStorage(targetArray),
             transformations: [{ type: 'direct' }],
             isArrayMapping: true,
         };
@@ -347,8 +267,8 @@ class MappingService {
         // Create a field mapping to visualize the connection
         const fieldMapping = {
             id: arrayToObjectMapping.id,
-            sourceFields: [sourceArray],
-            targetField: targetObject,
+            sourceFields: [this.stripFieldForStorage(sourceArray)],
+            targetField: this.stripFieldForStorage(targetObject),
             transformations: [{ type: 'direct' }],
             isArrayToObjectMapping: true,
         };
@@ -551,10 +471,108 @@ class MappingService {
             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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MappingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MappingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MappingService, 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;
+        // Offset to position endpoint circles outside the schema panels
+        const endpointOffset = 8;
+        if (side === 'source') {
+            return {
+                x: rect.right - containerRect.left + endpointOffset,
+                y: relativeY,
+            };
+        }
+        else {
+            return {
+                x: rect.left - containerRect.left - endpointOffset,
+                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.8", ngImport: i0, type: SvgConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SvgConnectorService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MappingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SvgConnectorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -888,108 +906,10 @@ class TransformationService {
         }
         return this.evaluateCondition(value, config.condition.root);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TransformationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TransformationService, providedIn: 'root' });
-}
-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;
-        // Offset to position endpoint circles outside the schema panels
-        const endpointOffset = 8;
-        if (side === 'source') {
-            return {
-                x: rect.right - containerRect.left + endpointOffset,
-                y: relativeY,
-            };
-        }
-        else {
-            return {
-                x: rect.left - containerRect.left - endpointOffset,
-                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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TransformationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TransformationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SvgConnectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TransformationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -997,24 +917,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }] });
 
 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;
+    parseSchema(schema, schemaName = 'Schema') {
         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);
+            resolvedSchema = this.resolveRef(schema.$ref, localDefs);
         }
         else if (schema.properties) {
             // Direct schema with properties
@@ -1024,23 +935,15 @@ class SchemaParserService {
             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);
-        }
+        const fields = this.buildFields(resolvedSchema, localDefs, '');
         return {
             name: schema.title || schemaName,
             fields,
         };
     }
-    resolveRef(ref, registry) {
+    resolveRef(ref, definitions) {
         // Handle different ref formats:
-        // #model, #/definitions/model, #/$defs/model, model
+        // #/$defs/model, #/definitions/model
         let modelName;
         if (ref.startsWith('#/$defs/')) {
             modelName = ref.substring(8);
@@ -1048,39 +951,39 @@ class SchemaParserService {
         else if (ref.startsWith('#/definitions/')) {
             modelName = ref.substring(14);
         }
-        else if (ref.startsWith('#')) {
-            modelName = ref.substring(1);
-        }
         else {
-            modelName = ref;
+            throw new Error(`Invalid $ref format: ${ref}. Use #/$defs/name or #/definitions/name`);
         }
-        const resolved = registry[modelName];
-        if (!resolved) {
-            throw new Error(`Cannot resolve reference: ${ref}. Model "${modelName}" not found in registry.`);
+        const resolved = definitions[modelName];
+        if (!resolved || typeof resolved === 'boolean') {
+            throw new Error(`Cannot resolve reference: ${ref}. Definition "${modelName}" not found.`);
         }
         // If the resolved schema also has a $ref, resolve it recursively
         if (resolved.$ref) {
-            return this.resolveRef(resolved.$ref, registry);
+            return this.resolveRef(resolved.$ref, definitions);
         }
         return resolved;
     }
-    buildFields(schema, registry, parentPath, arrayContext) {
+    buildFields(schema, definitions, parentPath, arrayContext) {
         const fields = [];
         if (!schema.properties) {
             return fields;
         }
         for (const [name, propSchema] of Object.entries(schema.properties)) {
+            // Skip boolean schema definitions
+            if (typeof propSchema === 'boolean')
+                continue;
             const path = parentPath ? `${parentPath}.${name}` : name;
-            const field = this.buildField(name, propSchema, registry, path, arrayContext);
+            const field = this.buildField(name, propSchema, definitions, path, arrayContext);
             fields.push(field);
         }
         return fields;
     }
-    buildField(name, schema, registry, path, arrayContext) {
+    buildField(name, schema, definitions, path, arrayContext) {
         // Resolve $ref if present
         let resolvedSchema = schema;
         if (schema.$ref) {
-            resolvedSchema = { ...this.resolveRef(schema.$ref, registry), ...schema };
+            resolvedSchema = { ...this.resolveRef(schema.$ref, definitions), ...schema };
             delete resolvedSchema.$ref;
         }
         const fieldType = this.mapType(resolvedSchema);
@@ -1095,18 +998,22 @@ class SchemaParserService {
         };
         // Handle nested objects
         if (fieldType === 'object' && resolvedSchema.properties) {
-            field.children = this.buildFields(resolvedSchema, registry, path, arrayContext);
+            field.children = this.buildFields(resolvedSchema, definitions, path, arrayContext);
             field.expanded = true;
         }
         // Handle arrays with object items
         if (fieldType === 'array' && resolvedSchema.items) {
+            // Skip boolean or array schema definitions for items
+            if (typeof resolvedSchema.items === 'boolean' || Array.isArray(resolvedSchema.items)) {
+                return field;
+            }
             let itemSchema = resolvedSchema.items;
             if (itemSchema.$ref) {
-                itemSchema = this.resolveRef(itemSchema.$ref, registry);
+                itemSchema = this.resolveRef(itemSchema.$ref, definitions);
             }
             if (itemSchema.properties) {
                 // Mark children as array items with reference to parent array
-                field.children = this.buildFields(itemSchema, registry, `${path}[]`, {
+                field.children = this.buildFields(itemSchema, definitions, `${path}[]`, {
                     isArrayItem: true,
                     parentArrayPath: path,
                 });
@@ -1142,64 +1049,10 @@ class SchemaParserService {
                 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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SchemaParserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SchemaParserService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaParserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SchemaParserService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1367,10 +1220,10 @@ class SchemaTreeComponent {
     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", showSchemaName: "showSchemaName" }, outputs: { fieldDragStart: "fieldDragStart", fieldDragEnd: "fieldDragEnd", fieldDrop: "fieldDrop", sourceDrop: "sourceDrop", fieldPositionsChanged: "fieldPositionsChanged", fieldDefaultValueClick: "fieldDefaultValueClick" }, viewQueries: [{ propertyName: "schemaFieldsContainer", first: true, predicate: ["schemaFields"], descendants: true }, { propertyName: "fieldItems", predicate: ["fieldItem"], descendants: true }], ngImport: i0, template: "<div class=\"schema-tree\" [class.source]=\"side === 'source'\" [class.target]=\"side === 'target'\">\n  <div class=\"schema-header\">\n    @if (showSchemaName) {\n      <span class=\"schema-title\">{{ schema.name }}</span>\n    }\n    <span class=\"schema-badge\">{{ side === 'source' ? 'Source' : 'Target' }}</span>\n  </div>\n\n  <div class=\"schema-fields\" #schemaFields>\n    <ng-container *ngTemplateOutlet=\"fieldList; context: { fields: schema.fields, level: 0 }\"></ng-container>\n  </div>\n</div>\n\n<ng-template #fieldList let-fields=\"fields\" let-level=\"level\">\n  @for (field of fields; track trackByFieldId($index, field)) {\n    <div\n      #fieldItem\n      class=\"field-item\"\n      [class.mapped]=\"isFieldMapped(field)\"\n      [class.has-default]=\"hasDefaultValue(field)\"\n      [class.has-children]=\"field.children && field.children.length > 0\"\n      [class.expanded]=\"field.expanded\"\n      [class.is-array]=\"field.type === 'array'\"\n      [class.draggable]=\"side === 'source' && ((!field.children || field.children.length === 0) || field.type === 'array') && !isEndpointDragMode()\"\n      [class.droppable]=\"(side === 'target' && ((!field.children || field.children.length === 0) || field.type === 'array' || field.type === 'object')) || (side === 'source' && isSourceEndpointDragging() && ((!field.children || field.children.length === 0) || field.type === 'array'))\"\n      [class.endpoint-drop-target]=\"(side === 'source' && isSourceEndpointDragging()) || (side === 'target' && isTargetEndpointDragging())\"\n      [class.clickable]=\"side === 'target' && (!isFieldMapped(field) || hasDefaultValue(field)) && field.type !== 'object' && field.type !== 'array'\"\n      [style.padding-left.px]=\"16 + level * 20\"\n      [attr.data-field-id]=\"field.id\"\n      (mousedown)=\"onDragStart($event, field)\"\n      (mouseup)=\"onDrop($event, field)\"\n      (click)=\"onFieldClick($event, field)\"\n    >\n      <!-- Expand/Collapse button for nested objects -->\n      @if (field.children && field.children.length > 0) {\n        <button class=\"expand-btn\" (click)=\"toggleExpand(field, $event)\">\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <!-- Field type icon -->\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      <!-- Field name with array indicator -->\n      <span class=\"field-name\">{{ field.name }}@if (field.type === 'array') {<span class=\"array-indicator\">[]</span>}</span>\n\n      <!-- Mapping indicator -->\n      @if (isFieldMapped(field)) {\n        <span class=\"mapping-indicator\" [matTooltip]=\"getFieldMappingCount(field) + ' mapping(s)'\">\n          <mat-icon>{{ field.type === 'array' ? 'loop' : 'link' }}</mat-icon>\n          @if (getFieldMappingCount(field) > 1) {\n            <span class=\"mapping-count\">{{ getFieldMappingCount(field) }}</span>\n          }\n        </span>\n      }\n\n      <!-- Default value indicator -->\n      @if (hasDefaultValue(field)) {\n        <span class=\"default-indicator\" [matTooltip]=\"'Default: ' + getDefaultValueDisplay(field)\">\n          <mat-icon>edit</mat-icon>\n          <span class=\"default-value\">{{ getDefaultValueDisplay(field) }}</span>\n        </span>\n      }\n\n      <!-- Connection point - show for leaf nodes, arrays, and objects (on target for array-to-object) -->\n      @if ((!field.children || field.children.length === 0) || field.type === 'array' || (side === 'target' && field.type === 'object')) {\n        <div class=\"connection-point\" [class.source]=\"side === 'source'\" [class.target]=\"side === 'target'\" [class.array-point]=\"field.type === 'array'\" [class.object-point]=\"field.type === 'object'\">\n          <span class=\"point-dot\"></span>\n        </div>\n      }\n    </div>\n\n    <!-- Nested children -->\n    @if (field.children && field.children.length > 0 && field.expanded) {\n      <div class=\"nested-fields\">\n        <ng-container *ngTemplateOutlet=\"fieldList; context: { fields: field.children, level: level + 1 }\"></ng-container>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.schema-tree{background:var(--data-mapper-panel-bg, var(--surface-card, #ffffff));border-radius:var(--data-mapper-panel-border-radius, 12px);border:var(--data-mapper-panel-border, none);box-shadow:var(--data-mapper-panel-shadow, 0 2px 8px rgba(0, 0, 0, .08));overflow:hidden;height:100%;min-height:0;display:flex;flex-direction:column;flex:1}.schema-tree.source .schema-header{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.schema-tree.source .connection-point{right:8px}.schema-tree.target .schema-header{background:linear-gradient(135deg,#10b981,#059669)}.schema-tree.target .connection-point{left:8px}.schema-header{padding:16px 20px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.schema-title{font-size:16px;font-weight:600;letter-spacing:.3px}.schema-badge{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#fff3;padding:4px 10px;border-radius:20px}.schema-fields{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;min-height:0}.field-item{display:flex;align-items:center;padding:10px 16px;gap:8px;cursor:default;transition:background-color .15s ease;position:relative;-webkit-user-select:none;user-select:none}.field-item:hover{background-color:var(--surface-hover, #f8fafc)}.field-item.mapped{background-color:var(--surface-mapped, #f0fdf4)}.field-item.mapped:hover{background-color:#dcfce7}.field-item.draggable{cursor:grab}.field-item.draggable:active{cursor:grabbing}.field-item.draggable:hover .connection-point .point-dot{transform:scale(1.3);background:#6366f1}.field-item.droppable{cursor:pointer}.field-item.droppable:hover .connection-point .point-dot{transform:scale(1.3);background:#10b981}.field-item.endpoint-drop-target{background-color:#fef3c7}.field-item.endpoint-drop-target:hover{background-color:#fde68a}.field-item.endpoint-drop-target .connection-point .point-dot{animation:pulse-drop-target 1s ease-in-out infinite}@keyframes pulse-drop-target{0%,to{transform:scale(1);box-shadow:0 0 0 3px #f59e0b4d}50%{transform:scale(1.2);box-shadow:0 0 0 6px #f59e0b33}}.expand-btn{background:none;border:none;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#94a3b8;border-radius:4px;transition:all .15s ease}.expand-btn:hover{background-color:#e2e8f0;color:#475569}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:24px;height:24px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:1;font-size:14px;color:#1e293b;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-item.is-array{background-color:#fffbeb}.field-item.is-array:hover,.field-item.is-array.mapped{background-color:#fef3c7}.field-item.is-array .type-icon{color:#f59e0b}.connection-point.array-point .point-dot{background:#f59e0b;box-shadow:0 0 0 3px #f59e0b4d}.connection-point.object-point .point-dot{background:#8b5cf6;box-shadow:0 0 0 3px #8b5cf64d}.mapping-indicator{display:flex;align-items:center;gap:2px;color:#10b981}.mapping-indicator mat-icon{font-size:16px;width:16px;height:16px}.mapping-indicator .mapping-count{font-size:11px;font-weight:600;background:#10b981;color:#fff;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center}.connection-point{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;align-items:center;justify-content:center}.connection-point.source{right:8px}.connection-point.target{left:8px}.point-dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1;transition:all .2s ease;box-shadow:0 0 0 3px #cbd5e14d}.mapped .point-dot{background:#10b981;box-shadow:0 0 0 3px #10b9814d}.nested-fields{border-left:2px solid #e2e8f0;margin-left:28px}.field-item.has-default{background-color:#eff6ff}.field-item.has-default:hover{background-color:#dbeafe}.field-item.clickable{cursor:pointer}.field-item.clickable:hover:not(.has-default){background-color:#f1f5f9}.field-item.clickable:hover:not(.has-default):after{content:\"Click to set default\";position:absolute;right:32px;font-size:11px;color:#64748b;font-style:italic}.field-item.clickable.has-default:hover:after{content:\"Click to edit\";position:absolute;right:32px;font-size:11px;color:#3b82f6;font-style:italic}.default-indicator{display:flex;align-items:center;gap:4px;color:#3b82f6;font-size:12px;background:#dbeafe;padding:2px 8px;border-radius:4px;max-width:100px;overflow:hidden}.default-indicator mat-icon{font-size:14px;width:14px;height:14px}.default-indicator .default-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SchemaTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SchemaTreeComponent, isStandalone: true, selector: "schema-tree", inputs: { schema: "schema", side: "side", mappings: "mappings", defaultValues: "defaultValues", showSchemaName: "showSchemaName" }, outputs: { fieldDragStart: "fieldDragStart", fieldDragEnd: "fieldDragEnd", fieldDrop: "fieldDrop", sourceDrop: "sourceDrop", fieldPositionsChanged: "fieldPositionsChanged", fieldDefaultValueClick: "fieldDefaultValueClick" }, viewQueries: [{ propertyName: "schemaFieldsContainer", first: true, predicate: ["schemaFields"], descendants: true }, { propertyName: "fieldItems", predicate: ["fieldItem"], descendants: true }], ngImport: i0, template: "<div class=\"schema-tree\" [class.source]=\"side === 'source'\" [class.target]=\"side === 'target'\">\n  <div class=\"schema-header\">\n    @if (showSchemaName) {\n      <span class=\"schema-title\">{{ schema.name }}</span>\n    }\n    <span class=\"schema-badge\">{{ side === 'source' ? 'Source' : 'Target' }}</span>\n  </div>\n\n  <div class=\"schema-fields\" #schemaFields>\n    <ng-container *ngTemplateOutlet=\"fieldList; context: { fields: schema.fields, level: 0 }\"></ng-container>\n  </div>\n</div>\n\n<ng-template #fieldList let-fields=\"fields\" let-level=\"level\">\n  @for (field of fields; track trackByFieldId($index, field)) {\n    <div\n      #fieldItem\n      class=\"field-item\"\n      [class.mapped]=\"isFieldMapped(field)\"\n      [class.has-default]=\"hasDefaultValue(field)\"\n      [class.has-children]=\"field.children && field.children.length > 0\"\n      [class.expanded]=\"field.expanded\"\n      [class.is-array]=\"field.type === 'array'\"\n      [class.draggable]=\"side === 'source' && ((!field.children || field.children.length === 0) || field.type === 'array') && !isEndpointDragMode()\"\n      [class.droppable]=\"(side === 'target' && ((!field.children || field.children.length === 0) || field.type === 'array' || field.type === 'object')) || (side === 'source' && isSourceEndpointDragging() && ((!field.children || field.children.length === 0) || field.type === 'array'))\"\n      [class.endpoint-drop-target]=\"(side === 'source' && isSourceEndpointDragging()) || (side === 'target' && isTargetEndpointDragging())\"\n      [class.clickable]=\"side === 'target' && (!isFieldMapped(field) || hasDefaultValue(field)) && field.type !== 'object' && field.type !== 'array'\"\n      [style.padding-left.px]=\"16 + level * 20\"\n      [attr.data-field-id]=\"field.id\"\n      (mousedown)=\"onDragStart($event, field)\"\n      (mouseup)=\"onDrop($event, field)\"\n      (click)=\"onFieldClick($event, field)\"\n    >\n      <!-- Expand/Collapse button for nested objects -->\n      @if (field.children && field.children.length > 0) {\n        <button class=\"expand-btn\" (click)=\"toggleExpand(field, $event)\">\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <!-- Field type icon -->\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      <!-- Field name with array indicator -->\n      <span class=\"field-name\">{{ field.name }}@if (field.type === 'array') {<span class=\"array-indicator\">[]</span>}</span>\n\n      <!-- Mapping indicator -->\n      @if (isFieldMapped(field)) {\n        <span class=\"mapping-indicator\" [matTooltip]=\"getFieldMappingCount(field) + ' mapping(s)'\">\n          <mat-icon>{{ field.type === 'array' ? 'loop' : 'link' }}</mat-icon>\n          @if (getFieldMappingCount(field) > 1) {\n            <span class=\"mapping-count\">{{ getFieldMappingCount(field) }}</span>\n          }\n        </span>\n      }\n\n      <!-- Default value indicator -->\n      @if (hasDefaultValue(field)) {\n        <span class=\"default-indicator\" [matTooltip]=\"'Default: ' + getDefaultValueDisplay(field)\">\n          <mat-icon>edit</mat-icon>\n          <span class=\"default-value\">{{ getDefaultValueDisplay(field) }}</span>\n        </span>\n      }\n\n      <!-- Connection point - show for leaf nodes, arrays, and objects (on target for array-to-object) -->\n      @if ((!field.children || field.children.length === 0) || field.type === 'array' || (side === 'target' && field.type === 'object')) {\n        <div class=\"connection-point\" [class.source]=\"side === 'source'\" [class.target]=\"side === 'target'\" [class.array-point]=\"field.type === 'array'\" [class.object-point]=\"field.type === 'object'\">\n          <span class=\"point-dot\"></span>\n        </div>\n      }\n    </div>\n\n    <!-- Nested children -->\n    @if (field.children && field.children.length > 0 && field.expanded) {\n      <div class=\"nested-fields\">\n        <ng-container *ngTemplateOutlet=\"fieldList; context: { fields: field.children, level: level + 1 }\"></ng-container>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.schema-tree{background:var(--data-mapper-panel-bg, var(--surface-card, #ffffff));border-radius:var(--data-mapper-panel-border-radius, 12px);border:var(--data-mapper-panel-border, none);box-shadow:var(--data-mapper-panel-shadow, 0 2px 8px rgba(0, 0, 0, .08));overflow:hidden;height:100%;min-height:0;display:flex;flex-direction:column;flex:1}.schema-tree.source .schema-header{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.schema-tree.source .connection-point{right:8px}.schema-tree.target .schema-header{background:linear-gradient(135deg,#10b981,#059669)}.schema-tree.target .connection-point{left:8px}.schema-header{padding:16px 20px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.schema-title{font-size:16px;font-weight:600;letter-spacing:.3px}.schema-badge{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#fff3;padding:4px 10px;border-radius:20px}.schema-fields{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;min-height:0}.field-item{display:flex;align-items:center;padding:10px 16px;gap:8px;cursor:default;transition:background-color .15s ease;position:relative;-webkit-user-select:none;user-select:none}.field-item:hover{background-color:var(--surface-hover, #f8fafc)}.field-item.mapped{background-color:var(--surface-mapped, #f0fdf4)}.field-item.mapped:hover{background-color:#dcfce7}.field-item.draggable{cursor:grab}.field-item.draggable:active{cursor:grabbing}.field-item.draggable:hover .connection-point .point-dot{transform:scale(1.3);background:#6366f1}.field-item.droppable{cursor:pointer}.field-item.droppable:hover .connection-point .point-dot{transform:scale(1.3);background:#10b981}.field-item.endpoint-drop-target{background-color:#fef3c7}.field-item.endpoint-drop-target:hover{background-color:#fde68a}.field-item.endpoint-drop-target .connection-point .point-dot{animation:pulse-drop-target 1s ease-in-out infinite}@keyframes pulse-drop-target{0%,to{transform:scale(1);box-shadow:0 0 0 3px #f59e0b4d}50%{transform:scale(1.2);box-shadow:0 0 0 6px #f59e0b33}}.expand-btn{background:none;border:none;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#94a3b8;border-radius:4px;transition:all .15s ease}.expand-btn:hover{background-color:#e2e8f0;color:#475569}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:24px;height:24px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:1;font-size:14px;color:#1e293b;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-item.is-array{background-color:#fffbeb}.field-item.is-array:hover,.field-item.is-array.mapped{background-color:#fef3c7}.field-item.is-array .type-icon{color:#f59e0b}.connection-point.array-point .point-dot{background:#f59e0b;box-shadow:0 0 0 3px #f59e0b4d}.connection-point.object-point .point-dot{background:#8b5cf6;box-shadow:0 0 0 3px #8b5cf64d}.mapping-indicator{display:flex;align-items:center;gap:2px;color:#10b981}.mapping-indicator mat-icon{font-size:16px;width:16px;height:16px}.mapping-indicator .mapping-count{font-size:11px;font-weight:600;background:#10b981;color:#fff;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center}.connection-point{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;align-items:center;justify-content:center}.connection-point.source{right:8px}.connection-point.target{left:8px}.point-dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1;transition:all .2s ease;box-shadow:0 0 0 3px #cbd5e14d}.mapped .point-dot{background:#10b981;box-shadow:0 0 0 3px #10b9814d}.nested-fields{border-left:2px solid #e2e8f0;margin-left:28px}.field-item.has-default{background-color:#eff6ff}.field-item.has-default:hover{background-color:#dbeafe}.field-item.clickable{cursor:pointer}.field-item.clickable:hover:not(.has-default){background-color:#f1f5f9}.field-item.clickable:hover:not(.has-default):after{content:\"Click to set default\";position:absolute;right:32px;font-size:11px;color:#64748b;font-style:italic}.field-item.clickable.has-default:hover:after{content:\"Click to edit\";position:absolute;right:32px;font-size:11px;color:#3b82f6;font-style:italic}.default-indicator{display:flex;align-items:center;gap:4px;color:#3b82f6;font-size:12px;background:#dbeafe;padding:2px 8px;border-radius:4px;max-width:100px;overflow:hidden}.default-indicator mat-icon{font-size:14px;width:14px;height:14px}.default-indicator .default-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SchemaTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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    @if (showSchemaName) {\n      <span class=\"schema-title\">{{ schema.name }}</span>\n    }\n    <span class=\"schema-badge\">{{ side === 'source' ? 'Source' : 'Target' }}</span>\n  </div>\n\n  <div class=\"schema-fields\" #schemaFields>\n    <ng-container *ngTemplateOutlet=\"fieldList; context: { fields: schema.fields, level: 0 }\"></ng-container>\n  </div>\n</div>\n\n<ng-template #fieldList let-fields=\"fields\" let-level=\"level\">\n  @for (field of fields; track trackByFieldId($index, field)) {\n    <div\n      #fieldItem\n      class=\"field-item\"\n      [class.mapped]=\"isFieldMapped(field)\"\n      [class.has-default]=\"hasDefaultValue(field)\"\n      [class.has-children]=\"field.children && field.children.length > 0\"\n      [class.expanded]=\"field.expanded\"\n      [class.is-array]=\"field.type === 'array'\"\n      [class.draggable]=\"side === 'source' && ((!field.children || field.children.length === 0) || field.type === 'array') && !isEndpointDragMode()\"\n      [class.droppable]=\"(side === 'target' && ((!field.children || field.children.length === 0) || field.type === 'array' || field.type === 'object')) || (side === 'source' && isSourceEndpointDragging() && ((!field.children || field.children.length === 0) || field.type === 'array'))\"\n      [class.endpoint-drop-target]=\"(side === 'source' && isSourceEndpointDragging()) || (side === 'target' && isTargetEndpointDragging())\"\n      [class.clickable]=\"side === 'target' && (!isFieldMapped(field) || hasDefaultValue(field)) && field.type !== 'object' && field.type !== 'array'\"\n      [style.padding-left.px]=\"16 + level * 20\"\n      [attr.data-field-id]=\"field.id\"\n      (mousedown)=\"onDragStart($event, field)\"\n      (mouseup)=\"onDrop($event, field)\"\n      (click)=\"onFieldClick($event, field)\"\n    >\n      <!-- Expand/Collapse button for nested objects -->\n      @if (field.children && field.children.length > 0) {\n        <button class=\"expand-btn\" (click)=\"toggleExpand(field, $event)\">\n          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      } @else {\n        <span class=\"expand-placeholder\"></span>\n      }\n\n      <!-- Field type icon -->\n      <mat-icon class=\"type-icon\" [matTooltip]=\"field.type\">{{ getTypeIcon(field.type) }}</mat-icon>\n\n      <!-- Field name with array indicator -->\n      <span class=\"field-name\">{{ field.name }}@if (field.type === 'array') {<span class=\"array-indicator\">[]</span>}</span>\n\n      <!-- Mapping indicator -->\n      @if (isFieldMapped(field)) {\n        <span class=\"mapping-indicator\" [matTooltip]=\"getFieldMappingCount(field) + ' mapping(s)'\">\n          <mat-icon>{{ field.type === 'array' ? 'loop' : 'link' }}</mat-icon>\n          @if (getFieldMappingCount(field) > 1) {\n            <span class=\"mapping-count\">{{ getFieldMappingCount(field) }}</span>\n          }\n        </span>\n      }\n\n      <!-- Default value indicator -->\n      @if (hasDefaultValue(field)) {\n        <span class=\"default-indicator\" [matTooltip]=\"'Default: ' + getDefaultValueDisplay(field)\">\n          <mat-icon>edit</mat-icon>\n          <span class=\"default-value\">{{ getDefaultValueDisplay(field) }}</span>\n        </span>\n      }\n\n      <!-- Connection point - show for leaf nodes, arrays, and objects (on target for array-to-object) -->\n      @if ((!field.children || field.children.length === 0) || field.type === 'array' || (side === 'target' && field.type === 'object')) {\n        <div class=\"connection-point\" [class.source]=\"side === 'source'\" [class.target]=\"side === 'target'\" [class.array-point]=\"field.type === 'array'\" [class.object-point]=\"field.type === 'object'\">\n          <span class=\"point-dot\"></span>\n        </div>\n      }\n    </div>\n\n    <!-- Nested children -->\n    @if (field.children && field.children.length > 0 && field.expanded) {\n      <div class=\"nested-fields\">\n        <ng-container *ngTemplateOutlet=\"fieldList; context: { fields: field.children, level: level + 1 }\"></ng-container>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.schema-tree{background:var(--data-mapper-panel-bg, var(--surface-card, #ffffff));border-radius:var(--data-mapper-panel-border-radius, 12px);border:var(--data-mapper-panel-border, none);box-shadow:var(--data-mapper-panel-shadow, 0 2px 8px rgba(0, 0, 0, .08));overflow:hidden;height:100%;min-height:0;display:flex;flex-direction:column;flex:1}.schema-tree.source .schema-header{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.schema-tree.source .connection-point{right:8px}.schema-tree.target .schema-header{background:linear-gradient(135deg,#10b981,#059669)}.schema-tree.target .connection-point{left:8px}.schema-header{padding:16px 20px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.schema-title{font-size:16px;font-weight:600;letter-spacing:.3px}.schema-badge{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;background:#fff3;padding:4px 10px;border-radius:20px}.schema-fields{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;min-height:0}.field-item{display:flex;align-items:center;padding:10px 16px;gap:8px;cursor:default;transition:background-color .15s ease;position:relative;-webkit-user-select:none;user-select:none}.field-item:hover{background-color:var(--surface-hover, #f8fafc)}.field-item.mapped{background-color:var(--surface-mapped, #f0fdf4)}.field-item.mapped:hover{background-color:#dcfce7}.field-item.draggable{cursor:grab}.field-item.draggable:active{cursor:grabbing}.field-item.draggable:hover .connection-point .point-dot{transform:scale(1.3);background:#6366f1}.field-item.droppable{cursor:pointer}.field-item.droppable:hover .connection-point .point-dot{transform:scale(1.3);background:#10b981}.field-item.endpoint-drop-target{background-color:#fef3c7}.field-item.endpoint-drop-target:hover{background-color:#fde68a}.field-item.endpoint-drop-target .connection-point .point-dot{animation:pulse-drop-target 1s ease-in-out infinite}@keyframes pulse-drop-target{0%,to{transform:scale(1);box-shadow:0 0 0 3px #f59e0b4d}50%{transform:scale(1.2);box-shadow:0 0 0 6px #f59e0b33}}.expand-btn{background:none;border:none;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#94a3b8;border-radius:4px;transition:all .15s ease}.expand-btn:hover{background-color:#e2e8f0;color:#475569}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:24px;height:24px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.field-name{flex:1;font-size:14px;color:#1e293b;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-name .array-indicator{color:#f59e0b;font-weight:600;margin-left:2px}.field-item.is-array{background-color:#fffbeb}.field-item.is-array:hover,.field-item.is-array.mapped{background-color:#fef3c7}.field-item.is-array .type-icon{color:#f59e0b}.connection-point.array-point .point-dot{background:#f59e0b;box-shadow:0 0 0 3px #f59e0b4d}.connection-point.object-point .point-dot{background:#8b5cf6;box-shadow:0 0 0 3px #8b5cf64d}.mapping-indicator{display:flex;align-items:center;gap:2px;color:#10b981}.mapping-indicator mat-icon{font-size:16px;width:16px;height:16px}.mapping-indicator .mapping-count{font-size:11px;font-weight:600;background:#10b981;color:#fff;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center}.connection-point{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;align-items:center;justify-content:center}.connection-point.source{right:8px}.connection-point.target{left:8px}.point-dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1;transition:all .2s ease;box-shadow:0 0 0 3px #cbd5e14d}.mapped .point-dot{background:#10b981;box-shadow:0 0 0 3px #10b9814d}.nested-fields{border-left:2px solid #e2e8f0;margin-left:28px}.field-item.has-default{background-color:#eff6ff}.field-item.has-default:hover{background-color:#dbeafe}.field-item.clickable{cursor:pointer}.field-item.clickable:hover:not(.has-default){background-color:#f1f5f9}.field-item.clickable:hover:not(.has-default):after{content:\"Click to set default\";position:absolute;right:32px;font-size:11px;color:#64748b;font-style:italic}.field-item.clickable.has-default:hover:after{content:\"Click to edit\";position:absolute;right:32px;font-size:11px;color:#3b82f6;font-style:italic}.default-indicator{display:flex;align-items:center;gap:4px;color:#3b82f6;font-size:12px;background:#dbeafe;padding:2px 8px;border-radius:4px;max-width:100px;overflow:hidden}.default-indicator mat-icon{font-size:14px;width:14px;height:14px}.default-indicator .default-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}\n"] }]
         }], propDecorators: { schema: [{
@@ -1585,10 +1438,10 @@ class ConditionBuilderComponent {
         const op = allOperators.find((o) => o.value === operator);
         return op?.label || operator;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConditionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ConditionBuilderComponent, isStandalone: true, selector: "condition-builder", inputs: { fields: "fields", condition: "condition", compact: "compact" }, outputs: { conditionChange: "conditionChange" }, ngImport: i0, template: "<div class=\"condition-builder\" [class.compact]=\"compact\">\r\n  <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: rootGroup, isRoot: true }\"></ng-container>\r\n</div>\r\n\r\n<!-- Recursive group template -->\r\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\" let-parentGroup=\"parentGroup\">\r\n  <div class=\"filter-group\" [class.root-group]=\"isRoot\" [class.nested-group]=\"!isRoot\">\r\n    <!-- Group header with logic toggle (only show if multiple children or nested) -->\r\n    @if (group.children.length > 1 || !isRoot) {\r\n      <div class=\"group-header\">\r\n        <div class=\"logic-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"logic-btn\"\r\n            [class.active]=\"group.logic === 'and'\"\r\n            (click)=\"onLogicChange(group, 'and')\"\r\n          >\r\n            AND\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"logic-btn\"\r\n            [class.active]=\"group.logic === 'or'\"\r\n            (click)=\"onLogicChange(group, 'or')\"\r\n          >\r\n            OR\r\n          </button>\r\n        </div>\r\n        @if (!isRoot) {\r\n          <button mat-icon-button class=\"remove-group-btn\" matTooltip=\"Remove group\" (click)=\"removeItem(parentGroup, group.id)\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Group children -->\r\n    <div class=\"group-children\">\r\n      @for (item of group.children; track item.id; let i = $index) {\r\n        <!-- Logic connector between items -->\r\n        @if (i > 0) {\r\n          <div class=\"logic-connector\">\r\n            <span class=\"logic-badge\" [class.and]=\"group.logic === 'and'\" [class.or]=\"group.logic === 'or'\">\r\n              {{ group.logic | uppercase }}\r\n            </span>\r\n          </div>\r\n        }\r\n\r\n        @if (isCondition(item)) {\r\n          <!-- Condition row -->\r\n          <div class=\"condition-row\">\r\n            <!-- Field selector (only if multiple fields) -->\r\n            @if (showFieldSelector) {\r\n              <mat-form-field appearance=\"outline\" class=\"field-select\">\r\n                <mat-select [value]=\"item.field\" (selectionChange)=\"onFieldChange(item, $event.value)\">\r\n                  @for (field of availableFields; track field.path) {\r\n                    <mat-option [value]=\"field.path\">{{ field.name }}</mat-option>\r\n                  }\r\n                </mat-select>\r\n              </mat-form-field>\r\n            }\r\n\r\n            <!-- Operator selector -->\r\n            <mat-form-field appearance=\"outline\" class=\"operator-select\">\r\n              <mat-select [value]=\"item.operator\" (selectionChange)=\"onOperatorChange(item, $event.value)\">\r\n                @for (op of getOperatorsForField(item.field); track op.value) {\r\n                  <mat-option [value]=\"op.value\">{{ op.label }}</mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <!-- Value input (only if operator needs value) -->\r\n            @if (operatorNeedsValue(item.operator)) {\r\n              @if (item.valueType === 'boolean') {\r\n                <mat-slide-toggle\r\n                  [checked]=\"item.value === true\"\r\n                  (change)=\"onValueChange(item, $event.checked)\"\r\n                  class=\"bool-toggle\"\r\n                >\r\n                </mat-slide-toggle>\r\n              } @else if (item.valueType === 'number') {\r\n                <mat-form-field appearance=\"outline\" class=\"value-input\">\r\n                  <input\r\n                    matInput\r\n                    type=\"number\"\r\n                    [value]=\"item.value\"\r\n                    (input)=\"onValueChange(item, $any($event.target).value)\"\r\n                    placeholder=\"value\"\r\n                  />\r\n                </mat-form-field>\r\n              } @else {\r\n                <mat-form-field appearance=\"outline\" class=\"value-input\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [value]=\"item.value\"\r\n                    (input)=\"onValueChange(item, $any($event.target).value)\"\r\n                    placeholder=\"value\"\r\n                  />\r\n                </mat-form-field>\r\n              }\r\n            }\r\n\r\n            <!-- Remove condition button -->\r\n            <button mat-icon-button class=\"remove-btn\" matTooltip=\"Remove\" (click)=\"removeItem(group, item.id)\">\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          </div>\r\n        } @else if (isGroup(item)) {\r\n          <!-- Nested group -->\r\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: item, isRoot: false, parentGroup: group }\"></ng-container>\r\n        }\r\n      }\r\n\r\n      <!-- Empty state -->\r\n      @if (group.children.length === 0) {\r\n        <div class=\"empty-group\">\r\n          <span>No conditions defined</span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Group actions -->\r\n    <div class=\"group-actions\">\r\n      <button type=\"button\" class=\"add-btn\" (click)=\"addCondition(group)\">\r\n        <mat-icon>add</mat-icon>\r\n        @if (!compact) {\r\n          <span>Add condition</span>\r\n        }\r\n      </button>\r\n      @if (!compact && group.children.length > 0) {\r\n        <button type=\"button\" class=\"add-btn add-group-btn\" (click)=\"addGroup(group)\">\r\n          <mat-icon>folder_open</mat-icon>\r\n          <span>Add group</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".condition-builder.compact .filter-group{padding:8px}.condition-builder.compact .condition-row{gap:6px}.condition-builder.compact .operator-select{min-width:100px}.condition-builder.compact .value-input{min-width:80px}.condition-builder.compact .add-btn{padding:4px 8px;font-size:12px}.filter-group{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px}.filter-group.nested-group{margin-top:8px;background:#f1f5f9;border-color:#cbd5e1}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.logic-toggle{display:flex;gap:4px}.logic-btn{padding:4px 12px;border:1px solid #cbd5e1;background:#fff;border-radius:4px;font-size:11px;font-weight:600;color:#64748b;cursor:pointer;transition:all .15s ease}.logic-btn:hover{border-color:#94a3b8}.logic-btn.active{background:#6366f1;border-color:#6366f1;color:#fff}.group-children{display:flex;flex-direction:column;gap:8px}.logic-connector{display:flex;align-items:center;justify-content:center;padding:4px 0}.logic-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px}.logic-badge.and{background:#dbeafe;color:#1d4ed8}.logic-badge.or{background:#fef3c7;color:#b45309}.condition-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.field-select{min-width:120px}.operator-select{min-width:130px}.value-input{min-width:100px;flex:1}.bool-toggle{margin:0 8px}.remove-btn,.remove-group-btn{width:28px;height:28px;line-height:28px;flex-shrink:0}.remove-btn mat-icon,.remove-group-btn mat-icon{font-size:18px;width:18px;height:18px;color:#94a3b8}.remove-btn:hover mat-icon,.remove-group-btn:hover mat-icon{color:#ef4444}.empty-group{display:flex;align-items:center;justify-content:center;padding:12px;color:#94a3b8;font-size:13px;font-style:italic}.group-actions{display:flex;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed #e2e8f0}.add-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;background:#fff;border:1px dashed #cbd5e1;border-radius:6px;font-size:13px;color:#64748b;cursor:pointer;transition:all .15s ease}.add-btn mat-icon{font-size:16px;width:16px;height:16px}.add-btn:hover{border-color:#6366f1;color:#6366f1;background:#f5f3ff}.add-btn.add-group-btn{border-style:solid}::ng-deep .condition-builder .mat-mdc-form-field{font-size:13px}::ng-deep .condition-builder .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .condition-builder .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 6px}::ng-deep .condition-builder .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConditionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ConditionBuilderComponent, isStandalone: true, selector: "condition-builder", inputs: { fields: "fields", condition: "condition", compact: "compact" }, outputs: { conditionChange: "conditionChange" }, ngImport: i0, template: "<div class=\"condition-builder\" [class.compact]=\"compact\">\r\n  <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: rootGroup, isRoot: true }\"></ng-container>\r\n</div>\r\n\r\n<!-- Recursive group template -->\r\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\" let-parentGroup=\"parentGroup\">\r\n  <div class=\"filter-group\" [class.root-group]=\"isRoot\" [class.nested-group]=\"!isRoot\">\r\n    <!-- Group header with logic toggle (only show if multiple children or nested) -->\r\n    @if (group.children.length > 1 || !isRoot) {\r\n      <div class=\"group-header\">\r\n        <div class=\"logic-toggle\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"logic-btn\"\r\n            [class.active]=\"group.logic === 'and'\"\r\n            (click)=\"onLogicChange(group, 'and')\"\r\n          >\r\n            AND\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"logic-btn\"\r\n            [class.active]=\"group.logic === 'or'\"\r\n            (click)=\"onLogicChange(group, 'or')\"\r\n          >\r\n            OR\r\n          </button>\r\n        </div>\r\n        @if (!isRoot) {\r\n          <button mat-icon-button class=\"remove-group-btn\" matTooltip=\"Remove group\" (click)=\"removeItem(parentGroup, group.id)\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Group children -->\r\n    <div class=\"group-children\">\r\n      @for (item of group.children; track item.id; let i = $index) {\r\n        <!-- Logic connector between items -->\r\n        @if (i > 0) {\r\n          <div class=\"logic-connector\">\r\n            <span class=\"logic-badge\" [class.and]=\"group.logic === 'and'\" [class.or]=\"group.logic === 'or'\">\r\n              {{ group.logic | uppercase }}\r\n            </span>\r\n          </div>\r\n        }\r\n\r\n        @if (isCondition(item)) {\r\n          <!-- Condition row -->\r\n          <div class=\"condition-row\">\r\n            <!-- Field selector (only if multiple fields) -->\r\n            @if (showFieldSelector) {\r\n              <mat-form-field appearance=\"outline\" class=\"field-select\">\r\n                <mat-select [value]=\"item.field\" (selectionChange)=\"onFieldChange(item, $event.value)\">\r\n                  @for (field of availableFields; track field.path) {\r\n                    <mat-option [value]=\"field.path\">{{ field.name }}</mat-option>\r\n                  }\r\n                </mat-select>\r\n              </mat-form-field>\r\n            }\r\n\r\n            <!-- Operator selector -->\r\n            <mat-form-field appearance=\"outline\" class=\"operator-select\">\r\n              <mat-select [value]=\"item.operator\" (selectionChange)=\"onOperatorChange(item, $event.value)\">\r\n                @for (op of getOperatorsForField(item.field); track op.value) {\r\n                  <mat-option [value]=\"op.value\">{{ op.label }}</mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <!-- Value input (only if operator needs value) -->\r\n            @if (operatorNeedsValue(item.operator)) {\r\n              @if (item.valueType === 'boolean') {\r\n                <mat-slide-toggle\r\n                  [checked]=\"item.value === true\"\r\n                  (change)=\"onValueChange(item, $event.checked)\"\r\n                  class=\"bool-toggle\"\r\n                >\r\n                </mat-slide-toggle>\r\n              } @else if (item.valueType === 'number') {\r\n                <mat-form-field appearance=\"outline\" class=\"value-input\">\r\n                  <input\r\n                    matInput\r\n                    type=\"number\"\r\n                    [value]=\"item.value\"\r\n                    (input)=\"onValueChange(item, $any($event.target).value)\"\r\n                    placeholder=\"value\"\r\n                  />\r\n                </mat-form-field>\r\n              } @else {\r\n                <mat-form-field appearance=\"outline\" class=\"value-input\">\r\n                  <input\r\n                    matInput\r\n                    type=\"text\"\r\n                    [value]=\"item.value\"\r\n                    (input)=\"onValueChange(item, $any($event.target).value)\"\r\n                    placeholder=\"value\"\r\n                  />\r\n                </mat-form-field>\r\n              }\r\n            }\r\n\r\n            <!-- Remove condition button -->\r\n            <button mat-icon-button class=\"remove-btn\" matTooltip=\"Remove\" (click)=\"removeItem(group, item.id)\">\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          </div>\r\n        } @else if (isGroup(item)) {\r\n          <!-- Nested group -->\r\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: item, isRoot: false, parentGroup: group }\"></ng-container>\r\n        }\r\n      }\r\n\r\n      <!-- Empty state -->\r\n      @if (group.children.length === 0) {\r\n        <div class=\"empty-group\">\r\n          <span>No conditions defined</span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Group actions -->\r\n    <div class=\"group-actions\">\r\n      <button type=\"button\" class=\"add-btn\" (click)=\"addCondition(group)\">\r\n        <mat-icon>add</mat-icon>\r\n        @if (!compact) {\r\n          <span>Add condition</span>\r\n        }\r\n      </button>\r\n      @if (!compact && group.children.length > 0) {\r\n        <button type=\"button\" class=\"add-btn add-group-btn\" (click)=\"addGroup(group)\">\r\n          <mat-icon>folder_open</mat-icon>\r\n          <span>Add group</span>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".condition-builder.compact .filter-group{padding:8px}.condition-builder.compact .condition-row{gap:6px}.condition-builder.compact .operator-select{min-width:100px}.condition-builder.compact .value-input{min-width:80px}.condition-builder.compact .add-btn{padding:4px 8px;font-size:12px}.filter-group{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px}.filter-group.nested-group{margin-top:8px;background:#f1f5f9;border-color:#cbd5e1}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.logic-toggle{display:flex;gap:4px}.logic-btn{padding:4px 12px;border:1px solid #cbd5e1;background:#fff;border-radius:4px;font-size:11px;font-weight:600;color:#64748b;cursor:pointer;transition:all .15s ease}.logic-btn:hover{border-color:#94a3b8}.logic-btn.active{background:#6366f1;border-color:#6366f1;color:#fff}.group-children{display:flex;flex-direction:column;gap:8px}.logic-connector{display:flex;align-items:center;justify-content:center;padding:4px 0}.logic-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px}.logic-badge.and{background:#dbeafe;color:#1d4ed8}.logic-badge.or{background:#fef3c7;color:#b45309}.condition-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.field-select{min-width:120px}.operator-select{min-width:130px}.value-input{min-width:100px;flex:1}.bool-toggle{margin:0 8px}.remove-btn,.remove-group-btn{width:28px;height:28px;line-height:28px;flex-shrink:0}.remove-btn mat-icon,.remove-group-btn mat-icon{font-size:18px;width:18px;height:18px;color:#94a3b8}.remove-btn:hover mat-icon,.remove-group-btn:hover mat-icon{color:#ef4444}.empty-group{display:flex;align-items:center;justify-content:center;padding:12px;color:#94a3b8;font-size:13px;font-style:italic}.group-actions{display:flex;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed #e2e8f0}.add-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;background:#fff;border:1px dashed #cbd5e1;border-radius:6px;font-size:13px;color:#64748b;cursor:pointer;transition:all .15s ease}.add-btn mat-icon{font-size:16px;width:16px;height:16px}.add-btn:hover{border-color:#6366f1;color:#6366f1;background:#f5f3ff}.add-btn.add-group-btn{border-style:solid}::ng-deep .condition-builder .mat-mdc-form-field{font-size:13px}::ng-deep .condition-builder .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .condition-builder .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 6px}::ng-deep .condition-builder .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConditionBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConditionBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'condition-builder', standalone: true, imports: [
                         CommonModule,
@@ -1886,10 +1739,10 @@ class TransformationPopoverComponent {
         };
         return labels[operator] || operator;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TransformationPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TransformationPopoverComponent, isStandalone: true, selector: "transformation-popover", inputs: { mapping: "mapping", position: "position", sampleData: "sampleData" }, outputs: { save: "save", delete: "delete", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"transformation-popover\" [ngStyle]=\"getPopoverStyle()\">\r\n  <div class=\"popover-arrow\"></div>\r\n\r\n  <div class=\"popover-header\">\r\n    <span class=\"popover-title\">Transformation</span>\r\n    <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"popover-content\">\r\n    <!-- Source/Target Info -->\r\n    <div class=\"mapping-info\">\r\n      <div class=\"info-row\">\r\n        <span class=\"info-label\">Source:</span>\r\n        <span class=\"info-value\">{{ getSourceFieldNames() }}</span>\r\n      </div>\r\n      <div class=\"info-row\">\r\n        <span class=\"info-label\">Target:</span>\r\n        <span class=\"info-value\">{{ mapping.targetField.name }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Single Step Mode (default, clean UI) -->\r\n    @if (!isMultiStep) {\r\n      <ng-container *ngTemplateOutlet=\"stepConfig; context: { step: steps[0], index: 0, showHeader: false }\"></ng-container>\r\n\r\n      <!-- Preview Section -->\r\n      <div class=\"preview-section\">\r\n        <span class=\"preview-label\">Preview:</span>\r\n        <div class=\"preview-value\">{{ stepPreviews[0] || '(empty)' }}</div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Multi-Step Mode -->\r\n    @if (isMultiStep) {\r\n      <div class=\"steps-container\" cdkDropList (cdkDropListDropped)=\"onStepDrop($event)\">\r\n        @for (step of steps; track $index; let i = $index) {\r\n          <div class=\"step-card\" [class.expanded]=\"isStepExpanded(i)\" cdkDrag>\r\n            <!-- Collapsed View -->\r\n            @if (!isStepExpanded(i)) {\r\n              <div class=\"step-collapsed\" (click)=\"toggleStep(i)\">\r\n                <mat-icon class=\"drag-handle\" cdkDragHandle (click)=\"$event.stopPropagation()\">drag_indicator</mat-icon>\r\n                <div class=\"step-collapsed-header\">\r\n                  <div class=\"step-title-row\">\r\n                    <span class=\"step-number\">Step {{ i + 1 }}: {{ getStepTypeLabel(step.type) }}</span>\r\n                    @if (hasCondition(step)) {\r\n                      <span class=\"condition-badge\" matTooltip=\"{{ getConditionSummary(step) }}\">\r\n                        <mat-icon>filter_alt</mat-icon>\r\n                        if\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                  <div class=\"step-collapsed-actions\">\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"expand-btn\"\r\n                      (click)=\"toggleStep(i); $event.stopPropagation()\"\r\n                      matTooltip=\"Edit step\"\r\n                    >\r\n                      <mat-icon>edit</mat-icon>\r\n                    </button>\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"remove-step-btn\"\r\n                      (click)=\"removeStep(i); $event.stopPropagation()\"\r\n                      matTooltip=\"Remove step\"\r\n                    >\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n                <div class=\"step-collapsed-preview\">\r\n                  <span class=\"step-input\">\"{{ (stepInputs[i] || '') | slice:0:20 }}{{ (stepInputs[i] || '').length > 20 ? '...' : '' }}\"</span>\r\n                  <mat-icon class=\"arrow-icon\">arrow_forward</mat-icon>\r\n                  <span class=\"step-output\">\"{{ (stepPreviews[i] || '') | slice:0:20 }}{{ (stepPreviews[i] || '').length > 20 ? '...' : '' }}\"</span>\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n            <!-- Expanded View -->\r\n            @if (isStepExpanded(i)) {\r\n              <div class=\"step-expanded\">\r\n                <mat-icon class=\"drag-handle\" cdkDragHandle>drag_indicator</mat-icon>\r\n                <div class=\"step-header\">\r\n                  <span class=\"step-number\">Step {{ i + 1 }}</span>\r\n                  <div class=\"step-header-actions\">\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"collapse-btn\"\r\n                      (click)=\"toggleStep(i)\"\r\n                      matTooltip=\"Collapse\"\r\n                    >\r\n                      <mat-icon>expand_less</mat-icon>\r\n                    </button>\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"remove-step-btn\"\r\n                      (click)=\"removeStep(i)\"\r\n                      matTooltip=\"Remove step\"\r\n                    >\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"step-content\">\r\n                  <ng-container *ngTemplateOutlet=\"stepConfig; context: { step: step, index: i, showHeader: false }\"></ng-container>\r\n                </div>\r\n\r\n                <!-- Step Preview -->\r\n                <div class=\"step-preview\">\r\n                  <mat-icon class=\"preview-arrow\">arrow_downward</mat-icon>\r\n                  <span class=\"step-preview-value\">{{ stepPreviews[i] || '(empty)' }}</span>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Final Preview -->\r\n      <div class=\"preview-section final-preview\">\r\n        <span class=\"preview-label\">Final Result:</span>\r\n        <div class=\"preview-value\">{{ finalPreview || '(empty)' }}</div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Add Step Button - Always visible -->\r\n  <div class=\"add-step-section\">\r\n    <button mat-stroked-button class=\"add-step-btn\" (click)=\"addStep()\">\r\n      <mat-icon>add</mat-icon>\r\n      @if (isMultiStep) {\r\n        Add Step\r\n      } @else {\r\n        Add Transformation Step\r\n      }\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"popover-actions\">\r\n    <button mat-button color=\"warn\" (click)=\"onDelete()\" matTooltip=\"Remove this mapping\">\r\n      <mat-icon>delete</mat-icon>\r\n      Delete\r\n    </button>\r\n    <div class=\"action-spacer\"></div>\r\n    <button mat-button (click)=\"onClose()\">Cancel</button>\r\n    <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Apply</button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Backdrop -->\r\n<div class=\"popover-backdrop\" (click)=\"onClose()\"></div>\r\n\r\n<!-- Step Configuration Template -->\r\n<ng-template #stepConfig let-step=\"step\" let-index=\"index\" let-showHeader=\"showHeader\">\r\n  <!-- Transformation Type -->\r\n  <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n    <mat-label>Transformation Type</mat-label>\r\n    <mat-select [(ngModel)]=\"step.type\" (selectionChange)=\"onStepTypeChange(index)\">\r\n      @for (t of availableTransformations; track t.type) {\r\n        <mat-option [value]=\"t.type\">{{ t.label }}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <!-- Type-specific options -->\r\n  @switch (step.type) {\r\n    @case ('concat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Separator</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.separator\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\" \"\r\n          />\r\n          <mat-hint>Join values with this (default: space)</mat-hint>\r\n        </mat-form-field>\r\n        <div class=\"or-divider\">or use template for custom format</div>\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Template</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.template\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            [placeholder]=\"'{0} - {1}'\"\r\n          />\r\n          <mat-hint>Overrides separator if set</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('substring') {\r\n      <div class=\"config-section config-row\">\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Start Index</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.startIndex\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            min=\"0\"\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>End Index</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.endIndex\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('replace') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Search For</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.searchValue\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Replace With</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.replaceValue\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('dateFormat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Output Format</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.outputFormat\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\"YYYY-MM-DD\"\r\n          />\r\n          <mat-hint>YYYY, MM, DD, HH, mm, ss</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('numberFormat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Decimal Places</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.decimalPlaces\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            min=\"0\"\r\n          />\r\n        </mat-form-field>\r\n        <div class=\"config-row\">\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>Prefix</mat-label>\r\n            <input\r\n              matInput\r\n              [(ngModel)]=\"step.prefix\"\r\n              (ngModelChange)=\"onConfigChange()\"\r\n              placeholder=\"$\"\r\n            />\r\n          </mat-form-field>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>Suffix</mat-label>\r\n            <input\r\n              matInput\r\n              [(ngModel)]=\"step.suffix\"\r\n              (ngModelChange)=\"onConfigChange()\"\r\n            />\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @case ('mask') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Pattern</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.pattern\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\"(###) ###-####\"\r\n          />\r\n          <mat-hint># = character from input</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('template') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Template Expression</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"step.template\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            rows=\"3\"\r\n            [placeholder]=\"'Hello {0}, your ID is {1}'\"\r\n          ></textarea>\r\n          @if (index === 0) {\r\n            <mat-hint>Use {{ '{' }}0{{ '}' }}, {{ '{' }}1{{ '}' }}, etc. for source fields</mat-hint>\r\n          } @else {\r\n            <mat-hint>Use {{ '{' }}0{{ '}' }} for the value from previous step</mat-hint>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Condition Section -->\r\n  <div class=\"condition-section\">\r\n    <mat-checkbox\r\n      [checked]=\"hasCondition(step)\"\r\n      (change)=\"toggleCondition(step, $event.checked)\"\r\n      class=\"condition-checkbox\"\r\n    >\r\n      Apply conditionally\r\n    </mat-checkbox>\r\n\r\n    @if (hasCondition(step)) {\r\n      <div class=\"condition-content\">\r\n        <condition-builder\r\n          [condition]=\"step.condition?.root || null\"\r\n          [compact]=\"true\"\r\n          (conditionChange)=\"onConditionChange(step, $event)\"\r\n        ></condition-builder>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.popover-backdrop{position:fixed;inset:0;background:#0000004d;z-index:999}.transformation-popover{position:fixed;z-index:1000;width:420px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;transform:translate(-50%,-50%);animation:popoverIn .2s ease-out}@keyframes popoverIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.popover-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#f8fafc;border-radius:12px 12px 0 0}.popover-title{font-size:16px;font-weight:600;color:#1e293b}.close-btn{width:32px;height:32px;line-height:32px}.close-btn mat-icon{font-size:20px;width:20px;height:20px}.popover-content{padding:20px;max-height:500px;overflow-y:auto}.mapping-info{background:#f1f5f9;border-radius:8px;padding:12px 16px;margin-bottom:16px}.info-row{display:flex;align-items:center;gap:8px}.info-row+.info-row{margin-top:8px}.info-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;width:60px}.info-value{font-size:14px;color:#1e293b;font-weight:500}.full-width{width:100%}.config-section{margin-top:12px}.or-divider{text-align:center;font-size:11px;color:#94a3b8;margin:8px 0}.condition-section{margin-top:16px;padding-top:12px;border-top:1px dashed #e2e8f0}.condition-checkbox{font-size:13px;color:#64748b}.condition-content{margin-top:12px}.config-row{display:flex;gap:12px}.config-row mat-form-field{flex:1}.preview-section{margin-top:16px;padding:12px 16px;background:linear-gradient(135deg,#eff6ff,#f0fdf4);border-radius:8px;border:1px solid #e0e7ff}.preview-label{font-size:11px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}.preview-value{font-size:14px;color:#1e293b;font-family:Monaco,Menlo,monospace;word-break:break-all;min-height:20px}.steps-container{display:flex;flex-direction:column;gap:12px}.step-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;transition:all .2s ease}.step-card.expanded{border-color:#6366f1;border-width:2px;background:#fff}.step-collapsed{display:grid;grid-template-columns:auto 1fr;gap:0 12px;padding:12px;cursor:pointer;transition:background .15s ease}.step-collapsed:hover{background:#f1f5f9}.step-collapsed .drag-handle{grid-row:span 2;align-self:center}.step-collapsed-header{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.step-collapsed-header .step-title-row{display:flex;align-items:center;gap:8px;flex:1}.step-collapsed-header .step-number{flex-shrink:0}.condition-badge{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;background:#fef3c7;border:1px solid #f59e0b;border-radius:4px;font-size:10px;font-weight:600;color:#b45309;cursor:help}.condition-badge mat-icon{font-size:12px;width:12px;height:12px}.step-collapsed-actions{display:flex;align-items:center;gap:4px}.step-collapsed-preview{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;font-family:Monaco,Menlo,monospace}.step-input{color:#64748b;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arrow-icon{font-size:14px;width:14px;height:14px;color:#6366f1}.step-output{color:#059669;font-weight:500;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step-expanded{display:grid;grid-template-columns:auto 1fr;gap:0 12px;padding:12px}.step-expanded .drag-handle{grid-row:1;align-self:center}.step-expanded .step-header,.step-expanded .step-content,.step-expanded .step-preview{grid-column:2}.step-header{display:flex;align-items:center;margin-bottom:12px}.step-header .step-number{flex:1}.step-header-actions{display:flex;align-items:center;gap:4px}.step-number{font-size:12px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:.5px}.expand-btn,.collapse-btn{width:28px;height:28px;line-height:28px}.expand-btn mat-icon,.collapse-btn mat-icon{font-size:18px;width:18px;height:18px;color:#64748b}.expand-btn:hover mat-icon,.collapse-btn:hover mat-icon{color:#6366f1}.remove-step-btn{width:28px;height:28px;line-height:28px}.remove-step-btn mat-icon{font-size:18px;width:18px;height:18px;color:#94a3b8}.remove-step-btn:hover mat-icon{color:#ef4444}.step-preview{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;background:#f1f5f9;border-radius:6px}.preview-arrow{font-size:16px;width:16px;height:16px;color:#6366f1}.step-preview-value{font-size:13px;color:#475569;font-family:Monaco,Menlo,monospace;word-break:break-all;flex:1}.add-step-section{padding:12px 20px;border-top:1px solid #e2e8f0;background:#fafafa}.add-step-btn{width:100%;border-style:dashed;color:#64748b}.add-step-btn mat-icon{font-size:18px;width:18px;height:18px;margin-right:4px}.add-step-btn:hover{border-color:#6366f1;color:#6366f1;background:#f5f3ff}.final-preview{margin-top:16px;background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:2px solid #10b981;border-radius:8px;position:relative}.final-preview .preview-label{color:#059669;font-size:12px;font-weight:700}.final-preview .preview-value{color:#065f46;font-weight:600}.final-preview:before{content:\"\\2713\";position:absolute;right:12px;top:10px;color:#10b981;font-size:16px;font-weight:700}.popover-actions{display:flex;align-items:center;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;border-radius:0 0 12px 12px}.action-spacer{flex:1}::ng-deep .transformation-popover .mat-mdc-form-field{font-size:14px}::ng-deep .transformation-popover .mat-mdc-text-field-wrapper{background:#fff}::ng-deep .transformation-popover .mat-mdc-form-field-subscript-wrapper{font-size:11px}.drag-handle{cursor:grab;color:#94a3b8;font-size:20px;width:20px;height:20px;flex-shrink:0}.drag-handle:hover{color:#6366f1}.drag-handle:active{cursor:grabbing}.step-card.cdk-drag-preview{box-shadow:0 5px 20px #00000040;border-radius:8px;background:#fff}.step-card.cdk-drag-placeholder{opacity:.4;background:#e2e8f0;border:2px dashed #94a3b8}.step-card.cdk-drag-animating{transition:transform .2s ease}.steps-container.cdk-drop-list-dragging .step-card:not(.cdk-drag-placeholder){transition:transform .2s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i7$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ConditionBuilderComponent, selector: "condition-builder", inputs: ["fields", "condition", "compact"], outputs: ["conditionChange"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TransformationPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TransformationPopoverComponent, isStandalone: true, selector: "transformation-popover", inputs: { mapping: "mapping", position: "position", sampleData: "sampleData" }, outputs: { save: "save", delete: "delete", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"transformation-popover\" [ngStyle]=\"getPopoverStyle()\">\r\n  <div class=\"popover-arrow\"></div>\r\n\r\n  <div class=\"popover-header\">\r\n    <span class=\"popover-title\">Transformation</span>\r\n    <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"popover-content\">\r\n    <!-- Source/Target Info -->\r\n    <div class=\"mapping-info\">\r\n      <div class=\"info-row\">\r\n        <span class=\"info-label\">Source:</span>\r\n        <span class=\"info-value\">{{ getSourceFieldNames() }}</span>\r\n      </div>\r\n      <div class=\"info-row\">\r\n        <span class=\"info-label\">Target:</span>\r\n        <span class=\"info-value\">{{ mapping.targetField.name }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Single Step Mode (default, clean UI) -->\r\n    @if (!isMultiStep) {\r\n      <ng-container *ngTemplateOutlet=\"stepConfig; context: { step: steps[0], index: 0, showHeader: false }\"></ng-container>\r\n\r\n      <!-- Preview Section -->\r\n      <div class=\"preview-section\">\r\n        <span class=\"preview-label\">Preview:</span>\r\n        <div class=\"preview-value\">{{ stepPreviews[0] || '(empty)' }}</div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Multi-Step Mode -->\r\n    @if (isMultiStep) {\r\n      <div class=\"steps-container\" cdkDropList (cdkDropListDropped)=\"onStepDrop($event)\">\r\n        @for (step of steps; track $index; let i = $index) {\r\n          <div class=\"step-card\" [class.expanded]=\"isStepExpanded(i)\" cdkDrag>\r\n            <!-- Collapsed View -->\r\n            @if (!isStepExpanded(i)) {\r\n              <div class=\"step-collapsed\" (click)=\"toggleStep(i)\">\r\n                <mat-icon class=\"drag-handle\" cdkDragHandle (click)=\"$event.stopPropagation()\">drag_indicator</mat-icon>\r\n                <div class=\"step-collapsed-header\">\r\n                  <div class=\"step-title-row\">\r\n                    <span class=\"step-number\">Step {{ i + 1 }}: {{ getStepTypeLabel(step.type) }}</span>\r\n                    @if (hasCondition(step)) {\r\n                      <span class=\"condition-badge\" matTooltip=\"{{ getConditionSummary(step) }}\">\r\n                        <mat-icon>filter_alt</mat-icon>\r\n                        if\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                  <div class=\"step-collapsed-actions\">\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"expand-btn\"\r\n                      (click)=\"toggleStep(i); $event.stopPropagation()\"\r\n                      matTooltip=\"Edit step\"\r\n                    >\r\n                      <mat-icon>edit</mat-icon>\r\n                    </button>\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"remove-step-btn\"\r\n                      (click)=\"removeStep(i); $event.stopPropagation()\"\r\n                      matTooltip=\"Remove step\"\r\n                    >\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n                <div class=\"step-collapsed-preview\">\r\n                  <span class=\"step-input\">\"{{ (stepInputs[i] || '') | slice:0:20 }}{{ (stepInputs[i] || '').length > 20 ? '...' : '' }}\"</span>\r\n                  <mat-icon class=\"arrow-icon\">arrow_forward</mat-icon>\r\n                  <span class=\"step-output\">\"{{ (stepPreviews[i] || '') | slice:0:20 }}{{ (stepPreviews[i] || '').length > 20 ? '...' : '' }}\"</span>\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n            <!-- Expanded View -->\r\n            @if (isStepExpanded(i)) {\r\n              <div class=\"step-expanded\">\r\n                <mat-icon class=\"drag-handle\" cdkDragHandle>drag_indicator</mat-icon>\r\n                <div class=\"step-header\">\r\n                  <span class=\"step-number\">Step {{ i + 1 }}</span>\r\n                  <div class=\"step-header-actions\">\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"collapse-btn\"\r\n                      (click)=\"toggleStep(i)\"\r\n                      matTooltip=\"Collapse\"\r\n                    >\r\n                      <mat-icon>expand_less</mat-icon>\r\n                    </button>\r\n                    <button\r\n                      mat-icon-button\r\n                      class=\"remove-step-btn\"\r\n                      (click)=\"removeStep(i)\"\r\n                      matTooltip=\"Remove step\"\r\n                    >\r\n                      <mat-icon>close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"step-content\">\r\n                  <ng-container *ngTemplateOutlet=\"stepConfig; context: { step: step, index: i, showHeader: false }\"></ng-container>\r\n                </div>\r\n\r\n                <!-- Step Preview -->\r\n                <div class=\"step-preview\">\r\n                  <mat-icon class=\"preview-arrow\">arrow_downward</mat-icon>\r\n                  <span class=\"step-preview-value\">{{ stepPreviews[i] || '(empty)' }}</span>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Final Preview -->\r\n      <div class=\"preview-section final-preview\">\r\n        <span class=\"preview-label\">Final Result:</span>\r\n        <div class=\"preview-value\">{{ finalPreview || '(empty)' }}</div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Add Step Button - Always visible -->\r\n  <div class=\"add-step-section\">\r\n    <button mat-stroked-button class=\"add-step-btn\" (click)=\"addStep()\">\r\n      <mat-icon>add</mat-icon>\r\n      @if (isMultiStep) {\r\n        Add Step\r\n      } @else {\r\n        Add Transformation Step\r\n      }\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"popover-actions\">\r\n    <button mat-button color=\"warn\" (click)=\"onDelete()\" matTooltip=\"Remove this mapping\">\r\n      <mat-icon>delete</mat-icon>\r\n      Delete\r\n    </button>\r\n    <div class=\"action-spacer\"></div>\r\n    <button mat-button (click)=\"onClose()\">Cancel</button>\r\n    <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Apply</button>\r\n  </div>\r\n</div>\r\n\r\n<!-- Backdrop -->\r\n<div class=\"popover-backdrop\" (click)=\"onClose()\"></div>\r\n\r\n<!-- Step Configuration Template -->\r\n<ng-template #stepConfig let-step=\"step\" let-index=\"index\" let-showHeader=\"showHeader\">\r\n  <!-- Transformation Type -->\r\n  <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n    <mat-label>Transformation Type</mat-label>\r\n    <mat-select [(ngModel)]=\"step.type\" (selectionChange)=\"onStepTypeChange(index)\">\r\n      @for (t of availableTransformations; track t.type) {\r\n        <mat-option [value]=\"t.type\">{{ t.label }}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <!-- Type-specific options -->\r\n  @switch (step.type) {\r\n    @case ('concat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Separator</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.separator\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\" \"\r\n          />\r\n          <mat-hint>Join values with this (default: space)</mat-hint>\r\n        </mat-form-field>\r\n        <div class=\"or-divider\">or use template for custom format</div>\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Template</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.template\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            [placeholder]=\"'{0} - {1}'\"\r\n          />\r\n          <mat-hint>Overrides separator if set</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('substring') {\r\n      <div class=\"config-section config-row\">\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>Start Index</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.startIndex\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            min=\"0\"\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\">\r\n          <mat-label>End Index</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.endIndex\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('replace') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Search For</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.searchValue\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Replace With</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.replaceValue\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('dateFormat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Output Format</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.outputFormat\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\"YYYY-MM-DD\"\r\n          />\r\n          <mat-hint>YYYY, MM, DD, HH, mm, ss</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('numberFormat') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Decimal Places</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            [(ngModel)]=\"step.decimalPlaces\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            min=\"0\"\r\n          />\r\n        </mat-form-field>\r\n        <div class=\"config-row\">\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>Prefix</mat-label>\r\n            <input\r\n              matInput\r\n              [(ngModel)]=\"step.prefix\"\r\n              (ngModelChange)=\"onConfigChange()\"\r\n              placeholder=\"$\"\r\n            />\r\n          </mat-form-field>\r\n          <mat-form-field appearance=\"outline\">\r\n            <mat-label>Suffix</mat-label>\r\n            <input\r\n              matInput\r\n              [(ngModel)]=\"step.suffix\"\r\n              (ngModelChange)=\"onConfigChange()\"\r\n            />\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @case ('mask') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Pattern</mat-label>\r\n          <input\r\n            matInput\r\n            [(ngModel)]=\"step.pattern\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            placeholder=\"(###) ###-####\"\r\n          />\r\n          <mat-hint># = character from input</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @case ('template') {\r\n      <div class=\"config-section\">\r\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\r\n          <mat-label>Template Expression</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"step.template\"\r\n            (ngModelChange)=\"onConfigChange()\"\r\n            rows=\"3\"\r\n            [placeholder]=\"'Hello {0}, your ID is {1}'\"\r\n          ></textarea>\r\n          @if (index === 0) {\r\n            <mat-hint>Use {{ '{' }}0{{ '}' }}, {{ '{' }}1{{ '}' }}, etc. for source fields</mat-hint>\r\n          } @else {\r\n            <mat-hint>Use {{ '{' }}0{{ '}' }} for the value from previous step</mat-hint>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Condition Section -->\r\n  <div class=\"condition-section\">\r\n    <mat-checkbox\r\n      [checked]=\"hasCondition(step)\"\r\n      (change)=\"toggleCondition(step, $event.checked)\"\r\n      class=\"condition-checkbox\"\r\n    >\r\n      Apply conditionally\r\n    </mat-checkbox>\r\n\r\n    @if (hasCondition(step)) {\r\n      <div class=\"condition-content\">\r\n        <condition-builder\r\n          [condition]=\"step.condition?.root || null\"\r\n          [compact]=\"true\"\r\n          (conditionChange)=\"onConditionChange(step, $event)\"\r\n        ></condition-builder>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.popover-backdrop{position:fixed;inset:0;background:#0000004d;z-index:999}.transformation-popover{position:fixed;z-index:1000;width:420px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;transform:translate(-50%,-50%);animation:popoverIn .2s ease-out}@keyframes popoverIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.popover-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#f8fafc;border-radius:12px 12px 0 0}.popover-title{font-size:16px;font-weight:600;color:#1e293b}.close-btn{width:32px;height:32px;line-height:32px}.close-btn mat-icon{font-size:20px;width:20px;height:20px}.popover-content{padding:20px;max-height:500px;overflow-y:auto}.mapping-info{background:#f1f5f9;border-radius:8px;padding:12px 16px;margin-bottom:16px}.info-row{display:flex;align-items:center;gap:8px}.info-row+.info-row{margin-top:8px}.info-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;width:60px}.info-value{font-size:14px;color:#1e293b;font-weight:500}.full-width{width:100%}.config-section{margin-top:12px}.or-divider{text-align:center;font-size:11px;color:#94a3b8;margin:8px 0}.condition-section{margin-top:16px;padding-top:12px;border-top:1px dashed #e2e8f0}.condition-checkbox{font-size:13px;color:#64748b}.condition-content{margin-top:12px}.config-row{display:flex;gap:12px}.config-row mat-form-field{flex:1}.preview-section{margin-top:16px;padding:12px 16px;background:linear-gradient(135deg,#eff6ff,#f0fdf4);border-radius:8px;border:1px solid #e0e7ff}.preview-label{font-size:11px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}.preview-value{font-size:14px;color:#1e293b;font-family:Monaco,Menlo,monospace;word-break:break-all;min-height:20px}.steps-container{display:flex;flex-direction:column;gap:12px}.step-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;transition:all .2s ease}.step-card.expanded{border-color:#6366f1;border-width:2px;background:#fff}.step-collapsed{display:grid;grid-template-columns:auto 1fr;gap:0 12px;padding:12px;cursor:pointer;transition:background .15s ease}.step-collapsed:hover{background:#f1f5f9}.step-collapsed .drag-handle{grid-row:span 2;align-self:center}.step-collapsed-header{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.step-collapsed-header .step-title-row{display:flex;align-items:center;gap:8px;flex:1}.step-collapsed-header .step-number{flex-shrink:0}.condition-badge{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;background:#fef3c7;border:1px solid #f59e0b;border-radius:4px;font-size:10px;font-weight:600;color:#b45309;cursor:help}.condition-badge mat-icon{font-size:12px;width:12px;height:12px}.step-collapsed-actions{display:flex;align-items:center;gap:4px}.step-collapsed-preview{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;font-family:Monaco,Menlo,monospace}.step-input{color:#64748b;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arrow-icon{font-size:14px;width:14px;height:14px;color:#6366f1}.step-output{color:#059669;font-weight:500;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step-expanded{display:grid;grid-template-columns:auto 1fr;gap:0 12px;padding:12px}.step-expanded .drag-handle{grid-row:1;align-self:center}.step-expanded .step-header,.step-expanded .step-content,.step-expanded .step-preview{grid-column:2}.step-header{display:flex;align-items:center;margin-bottom:12px}.step-header .step-number{flex:1}.step-header-actions{display:flex;align-items:center;gap:4px}.step-number{font-size:12px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:.5px}.expand-btn,.collapse-btn{width:28px;height:28px;line-height:28px}.expand-btn mat-icon,.collapse-btn mat-icon{font-size:18px;width:18px;height:18px;color:#64748b}.expand-btn:hover mat-icon,.collapse-btn:hover mat-icon{color:#6366f1}.remove-step-btn{width:28px;height:28px;line-height:28px}.remove-step-btn mat-icon{font-size:18px;width:18px;height:18px;color:#94a3b8}.remove-step-btn:hover mat-icon{color:#ef4444}.step-preview{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;background:#f1f5f9;border-radius:6px}.preview-arrow{font-size:16px;width:16px;height:16px;color:#6366f1}.step-preview-value{font-size:13px;color:#475569;font-family:Monaco,Menlo,monospace;word-break:break-all;flex:1}.add-step-section{padding:12px 20px;border-top:1px solid #e2e8f0;background:#fafafa}.add-step-btn{width:100%;border-style:dashed;color:#64748b}.add-step-btn mat-icon{font-size:18px;width:18px;height:18px;margin-right:4px}.add-step-btn:hover{border-color:#6366f1;color:#6366f1;background:#f5f3ff}.final-preview{margin-top:16px;background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:2px solid #10b981;border-radius:8px;position:relative}.final-preview .preview-label{color:#059669;font-size:12px;font-weight:700}.final-preview .preview-value{color:#065f46;font-weight:600}.final-preview:before{content:\"\\2713\";position:absolute;right:12px;top:10px;color:#10b981;font-size:16px;font-weight:700}.popover-actions{display:flex;align-items:center;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;border-radius:0 0 12px 12px}.action-spacer{flex:1}::ng-deep .transformation-popover .mat-mdc-form-field{font-size:14px}::ng-deep .transformation-popover .mat-mdc-text-field-wrapper{background:#fff}::ng-deep .transformation-popover .mat-mdc-form-field-subscript-wrapper{font-size:11px}.drag-handle{cursor:grab;color:#94a3b8;font-size:20px;width:20px;height:20px;flex-shrink:0}.drag-handle:hover{color:#6366f1}.drag-handle:active{cursor:grabbing}.step-card.cdk-drag-preview{box-shadow:0 5px 20px #00000040;border-radius:8px;background:#fff}.step-card.cdk-drag-placeholder{opacity:.4;background:#e2e8f0;border:2px dashed #94a3b8}.step-card.cdk-drag-animating{transition:transform .2s ease}.steps-container.cdk-drop-list-dragging .step-card:not(.cdk-drag-placeholder){transition:transform .2s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ConditionBuilderComponent, selector: "condition-builder", inputs: ["fields", "condition", "compact"], outputs: ["conditionChange"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TransformationPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TransformationPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'transformation-popover', standalone: true, imports: [
                         CommonModule,
@@ -2116,10 +1969,10 @@ class ArrayFilterModalComponent {
             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.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ArrayFilterModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ArrayFilterModalComponent, isStandalone: true, selector: "array-filter-modal", inputs: { arrayMapping: "arrayMapping" }, outputs: { save: "save", close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"filter-modal\">\n    <div class=\"modal-header\">\n      <div class=\"header-title\">\n        <mat-icon>filter_list</mat-icon>\n        <span>Array Filter</span>\n      </div>\n      <span class=\"array-path\">{{ arrayMapping.sourceArray.name }}[] &rarr; {{ arrayMapping.targetArray.name }}[]</span>\n      <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"modal-body\">\n      <!-- Filter mode selection -->\n      <div class=\"filter-mode\">\n        <mat-radio-group [value]=\"filterEnabled()\" (change)=\"filterEnabled.set($event.value)\">\n          <mat-radio-button [value]=\"false\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>select_all</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">No filter</span>\n                <span class=\"mode-desc\">Map all records from source to target</span>\n              </div>\n            </div>\n          </mat-radio-button>\n          <mat-radio-button [value]=\"true\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>filter_alt</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">Filter records</span>\n                <span class=\"mode-desc\">Only map records matching conditions</span>\n              </div>\n            </div>\n          </mat-radio-button>\n        </mat-radio-group>\n      </div>\n\n      <!-- Conditions builder (only when filter enabled) -->\n      @if (filterEnabled()) {\n        <mat-divider></mat-divider>\n\n        <div class=\"conditions-section\">\n          <!-- Root group -->\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: rootGroup(), isRoot: true }\"></ng-container>\n        </div>\n      }\n    </div>\n\n    <div class=\"modal-footer\">\n      <button mat-button (click)=\"onClose()\">Cancel</button>\n      <button mat-flat-button color=\"primary\" (click)=\"onSave()\">\n        Apply\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Recursive group template -->\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\" let-parentGroup=\"parentGroup\">\n  <div class=\"filter-group\" [class.root-group]=\"isRoot\" [class.nested-group]=\"!isRoot\">\n    <!-- Group header with logic toggle -->\n    <div class=\"group-header\">\n      <div class=\"logic-toggle\">\n        <span class=\"logic-label\">Match</span>\n        <mat-radio-group [value]=\"group.logic\" (change)=\"onLogicChange(group, $event.value)\">\n          <mat-radio-button value=\"and\">ALL (AND)</mat-radio-button>\n          <mat-radio-button value=\"or\">ANY (OR)</mat-radio-button>\n        </mat-radio-group>\n      </div>\n      @if (!isRoot) {\n        <button mat-icon-button class=\"remove-group-btn\" matTooltip=\"Remove group\" (click)=\"removeItem(parentGroup, group.id)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </div>\n\n    <!-- Group children -->\n    <div class=\"group-children\">\n      @for (item of group.children; track item.id; let i = $index) {\n        <!-- Logic connector between items -->\n        @if (i > 0) {\n          <div class=\"logic-connector\">\n            <span class=\"logic-badge\" [class.and]=\"group.logic === 'and'\" [class.or]=\"group.logic === 'or'\">\n              {{ group.logic | uppercase }}\n            </span>\n          </div>\n        }\n\n        @if (isCondition(item)) {\n          <!-- Condition row -->\n          <div class=\"condition-row\">\n            <div class=\"condition-inputs\">\n              <!-- Field selector -->\n              <mat-form-field appearance=\"outline\" class=\"field-select\">\n                <mat-label>Field</mat-label>\n                <mat-select [value]=\"item.field\" (selectionChange)=\"onFieldChange(item, $event.value)\">\n                  @for (field of availableFields(); track field.path) {\n                    <mat-option [value]=\"field.path\">\n                      {{ field.name }}\n                      <span class=\"field-type\">({{ field.type }})</span>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <!-- Operator selector -->\n              <mat-form-field appearance=\"outline\" class=\"operator-select\">\n                <mat-label>Operator</mat-label>\n                <mat-select [value]=\"item.operator\" (selectionChange)=\"onOperatorChange(item, $event.value)\">\n                  @for (op of getOperatorsForField(item.field); track op.value) {\n                    <mat-option [value]=\"op.value\">{{ op.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <!-- Value input (only if operator needs value) -->\n              @if (operatorNeedsValue(item.operator)) {\n                @if (item.valueType === 'boolean') {\n                  <mat-slide-toggle\n                    [checked]=\"item.value === true\"\n                    (change)=\"onValueChange(item, $event.checked)\"\n                    class=\"bool-toggle\"\n                  >\n                    {{ item.value ? 'true' : 'false' }}\n                  </mat-slide-toggle>\n                } @else if (item.valueType === 'number') {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input\n                      matInput\n                      type=\"number\"\n                      [value]=\"item.value\"\n                      (input)=\"onValueChange(item, $any($event.target).value)\"\n                    />\n                  </mat-form-field>\n                } @else {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input\n                      matInput\n                      type=\"text\"\n                      [value]=\"item.value\"\n                      (input)=\"onValueChange(item, $any($event.target).value)\"\n                    />\n                  </mat-form-field>\n                }\n              }\n\n              <!-- Remove condition button -->\n              <button mat-icon-button class=\"remove-btn\" matTooltip=\"Remove condition\" (click)=\"removeItem(group, item.id)\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        } @else if (isGroup(item)) {\n          <!-- Nested group -->\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: item, isRoot: false, parentGroup: group }\"></ng-container>\n        }\n      }\n\n      <!-- Empty state -->\n      @if (group.children.length === 0) {\n        <div class=\"empty-group\">\n          <mat-icon>info_outline</mat-icon>\n          <span>No conditions. Add a condition or group.</span>\n        </div>\n      }\n    </div>\n\n    <!-- Group actions -->\n    <div class=\"group-actions\">\n      <button mat-stroked-button class=\"add-condition-btn\" (click)=\"addCondition(group)\">\n        <mat-icon>add</mat-icon>\n        Add Condition\n      </button>\n      <button mat-stroked-button class=\"add-group-btn\" (click)=\"addGroup(group)\">\n        <mat-icon>folder_open</mat-icon>\n        Add Group\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#0000004d;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.filter-modal{position:relative;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;width:600px;max-width:100%;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;flex-shrink:0}.modal-header .header-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}.modal-header .array-path{flex:1;font-size:13px;opacity:.9;text-align:right;margin-right:8px}.modal-header .close-btn{color:#fff;opacity:.9}.modal-header .close-btn:hover{opacity:1}.modal-body{flex:1;overflow-y:auto;padding:20px;min-height:0}.filter-mode mat-radio-group{display:flex;flex-direction:column;gap:12px}.filter-mode .mode-option ::ng-deep .mdc-form-field{align-items:flex-start}.filter-mode .mode-option ::ng-deep .mdc-radio{margin-top:4px}.filter-mode .mode-content{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;transition:all .2s ease;cursor:pointer}.filter-mode .mode-content:hover{background:#f1f5f9;border-color:#cbd5e1}.filter-mode .mode-content mat-icon{color:#64748b;margin-top:2px}.filter-mode .mode-text{display:flex;flex-direction:column;gap:2px}.filter-mode .mode-label{font-size:14px;font-weight:500;color:#1e293b}.filter-mode .mode-desc{font-size:12px;color:#64748b}.filter-mode mat-radio-button.mat-mdc-radio-checked .mode-content{background:#fffbeb;border-color:#f59e0b}.filter-mode mat-radio-button.mat-mdc-radio-checked .mode-content mat-icon{color:#f59e0b}mat-divider{margin:20px 0}.conditions-section{display:flex;flex-direction:column;gap:16px}.filter-group{border-radius:8px}.filter-group.root-group{background:#f8fafc;border:1px solid #e2e8f0;padding:16px}.filter-group.nested-group{background:#fff;border:2px dashed #cbd5e1;padding:12px;margin-top:8px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e2e8f0}.logic-toggle{display:flex;align-items:center;gap:12px}.logic-toggle .logic-label{font-size:13px;font-weight:500;color:#475569}.logic-toggle mat-radio-group{display:flex;gap:12px}.logic-toggle mat-radio-button{font-size:12px}.logic-toggle mat-radio-button ::ng-deep .mdc-label{font-size:12px}.remove-group-btn{color:#94a3b8}.remove-group-btn:hover{color:#ef4444}.group-children{display:flex;flex-direction:column}.logic-connector{display:flex;align-items:center;justify-content:center;padding:8px 0}.logic-connector .logic-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:12px;letter-spacing:.5px}.logic-connector .logic-badge.and{background:#dbeafe;color:#1d4ed8}.logic-connector .logic-badge.or{background:#fef3c7;color:#b45309}.condition-row .condition-inputs{display:flex;align-items:flex-start;gap:8px;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px}.condition-row .condition-inputs .field-select{flex:1;min-width:120px}.condition-row .condition-inputs .operator-select{flex:1;min-width:130px}.condition-row .condition-inputs .value-input{flex:1;min-width:100px}.condition-row .condition-inputs .bool-toggle{padding-top:12px;min-width:80px}.condition-row .condition-inputs .remove-btn{color:#94a3b8;align-self:center}.condition-row .condition-inputs .remove-btn:hover{color:#ef4444}.condition-row .condition-inputs mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.nested-group .condition-row .condition-inputs{background:#f8fafc}.field-type{font-size:11px;color:#94a3b8;margin-left:4px}.empty-group{display:flex;align-items:center;gap:8px;padding:16px;background:#fef3c7;border-radius:8px;color:#92400e;font-size:13px}.empty-group mat-icon{font-size:20px;width:20px;height:20px}.group-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.add-condition-btn{color:#f59e0b;border-color:#f59e0b;font-size:12px}.add-condition-btn mat-icon{font-size:16px;width:16px;height:16px}.add-group-btn{color:#6366f1;border-color:#6366f1;font-size:12px}.add-group-btn mat-icon{font-size:16px;width:16px;height:16px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArrayFilterModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ArrayFilterModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-filter-modal', standalone: true, imports: [
                         CommonModule,
@@ -2320,10 +2173,10 @@ class ArraySelectorModalComponent {
             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.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ArraySelectorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ArraySelectorModalComponent, isStandalone: true, selector: "array-selector-modal", inputs: { mapping: "mapping" }, outputs: { save: "save", close: "close" }, ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"selector-modal\">\n    <div class=\"modal-header\">\n      <div class=\"header-title\">\n        <mat-icon>swap_horiz</mat-icon>\n        <span>Array to Object</span>\n      </div>\n      <span class=\"mapping-path\">{{ mapping.sourceArray.name }}[] &rarr; {{ mapping.targetObject.name }}</span>\n      <button mat-icon-button class=\"close-btn\" (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"modal-body\">\n      <p class=\"description\">\n        Select which item from the array should be mapped to the target object.\n      </p>\n\n      <!-- Selection mode -->\n      <div class=\"selection-mode\">\n        <mat-radio-group [value]=\"selectionMode()\" (change)=\"selectionMode.set($event.value)\">\n          <mat-radio-button value=\"first\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>first_page</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">First item</span>\n                <span class=\"mode-desc\">Use the first item in the array</span>\n              </div>\n            </div>\n          </mat-radio-button>\n\n          <mat-radio-button value=\"last\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>last_page</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">Last item</span>\n                <span class=\"mode-desc\">Use the last item in the array</span>\n              </div>\n            </div>\n          </mat-radio-button>\n\n          <mat-radio-button value=\"condition\" class=\"mode-option\">\n            <div class=\"mode-content\">\n              <mat-icon>filter_alt</mat-icon>\n              <div class=\"mode-text\">\n                <span class=\"mode-label\">First matching condition</span>\n                <span class=\"mode-desc\">Use the first item that matches the condition</span>\n              </div>\n            </div>\n          </mat-radio-button>\n        </mat-radio-group>\n      </div>\n\n      <!-- Condition builder (only when condition mode selected) -->\n      @if (selectionMode() === 'condition') {\n        <mat-divider></mat-divider>\n\n        <div class=\"conditions-section\">\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: conditionGroup(), isRoot: true }\"></ng-container>\n        </div>\n      }\n    </div>\n\n    <div class=\"modal-footer\">\n      <button mat-button (click)=\"onClose()\">Cancel</button>\n      <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Apply</button>\n    </div>\n  </div>\n</div>\n\n<!-- Recursive group template -->\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\" let-parentGroup=\"parentGroup\">\n  <div class=\"filter-group\" [class.root-group]=\"isRoot\" [class.nested-group]=\"!isRoot\">\n    <div class=\"group-header\">\n      <div class=\"logic-toggle\">\n        <span class=\"logic-label\">Match</span>\n        <mat-radio-group [value]=\"group.logic\" (change)=\"onLogicChange(group, $event.value)\">\n          <mat-radio-button value=\"and\">ALL (AND)</mat-radio-button>\n          <mat-radio-button value=\"or\">ANY (OR)</mat-radio-button>\n        </mat-radio-group>\n      </div>\n      @if (!isRoot) {\n        <button mat-icon-button class=\"remove-group-btn\" matTooltip=\"Remove group\" (click)=\"removeItem(parentGroup, group.id)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </div>\n\n    <div class=\"group-children\">\n      @for (item of group.children; track item.id; let i = $index) {\n        @if (i > 0) {\n          <div class=\"logic-connector\">\n            <span class=\"logic-badge\" [class.and]=\"group.logic === 'and'\" [class.or]=\"group.logic === 'or'\">\n              {{ group.logic | uppercase }}\n            </span>\n          </div>\n        }\n\n        @if (isCondition(item)) {\n          <div class=\"condition-row\">\n            <div class=\"condition-inputs\">\n              <mat-form-field appearance=\"outline\" class=\"field-select\">\n                <mat-label>Field</mat-label>\n                <mat-select [value]=\"item.field\" (selectionChange)=\"onFieldChange(item, $event.value)\">\n                  @for (field of availableFields(); track field.path) {\n                    <mat-option [value]=\"field.path\">\n                      {{ field.name }}\n                      <span class=\"field-type\">({{ field.type }})</span>\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <mat-form-field appearance=\"outline\" class=\"operator-select\">\n                <mat-label>Operator</mat-label>\n                <mat-select [value]=\"item.operator\" (selectionChange)=\"onOperatorChange(item, $event.value)\">\n                  @for (op of getOperatorsForField(item.field); track op.value) {\n                    <mat-option [value]=\"op.value\">{{ op.label }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              @if (operatorNeedsValue(item.operator)) {\n                @if (item.valueType === 'boolean') {\n                  <mat-slide-toggle\n                    [checked]=\"item.value === true\"\n                    (change)=\"onValueChange(item, $event.checked)\"\n                    class=\"bool-toggle\"\n                  >\n                    {{ item.value ? 'true' : 'false' }}\n                  </mat-slide-toggle>\n                } @else if (item.valueType === 'number') {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input matInput type=\"number\" [value]=\"item.value\" (input)=\"onValueChange(item, $any($event.target).value)\" />\n                  </mat-form-field>\n                } @else {\n                  <mat-form-field appearance=\"outline\" class=\"value-input\">\n                    <mat-label>Value</mat-label>\n                    <input matInput type=\"text\" [value]=\"item.value\" (input)=\"onValueChange(item, $any($event.target).value)\" />\n                  </mat-form-field>\n                }\n              }\n\n              <button mat-icon-button class=\"remove-btn\" matTooltip=\"Remove condition\" (click)=\"removeItem(group, item.id)\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        } @else if (isGroup(item)) {\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { group: item, isRoot: false, parentGroup: group }\"></ng-container>\n        }\n      }\n\n      @if (group.children.length === 0) {\n        <div class=\"empty-group\">\n          <mat-icon>info_outline</mat-icon>\n          <span>No conditions. Add a condition to filter.</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"group-actions\">\n      <button mat-stroked-button class=\"add-condition-btn\" (click)=\"addCondition(group)\">\n        <mat-icon>add</mat-icon>\n        Add Condition\n      </button>\n      <button mat-stroked-button class=\"add-group-btn\" (click)=\"addGroup(group)\">\n        <mat-icon>folder_open</mat-icon>\n        Add Group\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".modal-backdrop{position:fixed;inset:0;background:#0000004d;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.selector-modal{position:relative;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;width:580px;max-width:100%;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;flex-shrink:0}.modal-header .header-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}.modal-header .mapping-path{flex:1;font-size:13px;opacity:.9;text-align:right;margin-right:8px}.modal-header .close-btn{color:#fff;opacity:.9}.modal-header .close-btn:hover{opacity:1}.modal-body{flex:1;overflow-y:auto;padding:20px;min-height:0}.description{font-size:14px;color:#64748b;margin:0 0 16px}.selection-mode mat-radio-group{display:flex;flex-direction:column;gap:12px}.selection-mode .mode-option ::ng-deep .mdc-form-field{align-items:flex-start}.selection-mode .mode-option ::ng-deep .mdc-radio{margin-top:4px}.selection-mode .mode-content{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;transition:all .2s ease;cursor:pointer}.selection-mode .mode-content:hover{background:#f1f5f9;border-color:#cbd5e1}.selection-mode .mode-content mat-icon{color:#64748b;margin-top:2px}.selection-mode .mode-text{display:flex;flex-direction:column;gap:2px}.selection-mode .mode-label{font-size:14px;font-weight:500;color:#1e293b}.selection-mode .mode-desc{font-size:12px;color:#64748b}.selection-mode mat-radio-button.mat-mdc-radio-checked .mode-content{background:#f5f3ff;border-color:#8b5cf6}.selection-mode mat-radio-button.mat-mdc-radio-checked .mode-content mat-icon{color:#8b5cf6}mat-divider{margin:20px 0}.conditions-section{display:flex;flex-direction:column;gap:16px}.filter-group{border-radius:8px}.filter-group.root-group{background:#f8fafc;border:1px solid #e2e8f0;padding:16px}.filter-group.nested-group{background:#fff;border:2px dashed #cbd5e1;padding:12px;margin-top:8px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e2e8f0}.logic-toggle{display:flex;align-items:center;gap:12px}.logic-toggle .logic-label{font-size:13px;font-weight:500;color:#475569}.logic-toggle mat-radio-group{display:flex;gap:12px}.logic-toggle mat-radio-button{font-size:12px}.logic-toggle mat-radio-button ::ng-deep .mdc-label{font-size:12px}.remove-group-btn{color:#94a3b8}.remove-group-btn:hover{color:#ef4444}.group-children{display:flex;flex-direction:column}.logic-connector{display:flex;align-items:center;justify-content:center;padding:8px 0}.logic-connector .logic-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:12px;letter-spacing:.5px}.logic-connector .logic-badge.and{background:#dbeafe;color:#1d4ed8}.logic-connector .logic-badge.or{background:#fef3c7;color:#b45309}.condition-row .condition-inputs{display:flex;align-items:flex-start;gap:8px;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px}.condition-row .condition-inputs .field-select{flex:1;min-width:120px}.condition-row .condition-inputs .operator-select{flex:1;min-width:130px}.condition-row .condition-inputs .value-input{flex:1;min-width:100px}.condition-row .condition-inputs .bool-toggle{padding-top:12px;min-width:80px}.condition-row .condition-inputs .remove-btn{color:#94a3b8;align-self:center}.condition-row .condition-inputs .remove-btn:hover{color:#ef4444}.condition-row .condition-inputs mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.nested-group .condition-row .condition-inputs{background:#f8fafc}.field-type{font-size:11px;color:#94a3b8;margin-left:4px}.empty-group{display:flex;align-items:center;gap:8px;padding:16px;background:#fef3c7;border-radius:8px;color:#92400e;font-size:13px}.empty-group mat-icon{font-size:20px;width:20px;height:20px}.group-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.add-condition-btn{color:#8b5cf6;border-color:#8b5cf6;font-size:12px}.add-condition-btn mat-icon{font-size:16px;width:16px;height:16px}.add-group-btn{color:#6366f1;border-color:#6366f1;font-size:12px}.add-group-btn mat-icon{font-size:16px;width:16px;height:16px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ArraySelectorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ArraySelectorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'array-selector-modal', standalone: true, imports: [
                         CommonModule,
@@ -2410,10 +2263,10 @@ class DefaultValuePopoverComponent {
             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: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DefaultValuePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DefaultValuePopoverComponent, isStandalone: true, selector: "default-value-popover", inputs: { field: "field", existingValue: "existingValue", position: "position" }, outputs: { save: "save", delete: "delete", close: "close" }, ngImport: i0, template: "<div class=\"popover-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"popover-container\">\n    <div class=\"popover-header\">\n      <div class=\"header-title\">\n        <mat-icon>edit</mat-icon>\n        <span>Default Value</span>\n      </div>\n      <button mat-icon-button (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"popover-content\">\n      <div class=\"field-info\">\n        <span class=\"field-name\">{{ field.name }}</span>\n        <span class=\"field-type\">{{ fieldType }}</span>\n      </div>\n\n      <!-- String input -->\n      @if (fieldType === 'string') {\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <mat-label>Default Value</mat-label>\n          <input matInput [(ngModel)]=\"stringValue\" placeholder=\"Enter default value\">\n        </mat-form-field>\n      }\n\n      <!-- Number input -->\n      @if (fieldType === 'number') {\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <mat-label>Default Value</mat-label>\n          <input matInput type=\"number\" [(ngModel)]=\"numberValue\" placeholder=\"Enter number\">\n        </mat-form-field>\n      }\n\n      <!-- Boolean input -->\n      @if (fieldType === 'boolean') {\n        <div class=\"boolean-input\">\n          <mat-slide-toggle [(ngModel)]=\"booleanValue\">\n            {{ booleanValue ? 'True' : 'False' }}\n          </mat-slide-toggle>\n        </div>\n      }\n\n      <!-- Date input -->\n      @if (fieldType === 'date') {\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <mat-label>Default Date</mat-label>\n          <input matInput [matDatepicker]=\"picker\" [(ngModel)]=\"dateValue\">\n          <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n          <mat-datepicker #picker></mat-datepicker>\n        </mat-form-field>\n      }\n    </div>\n\n    <div class=\"popover-actions\">\n      @if (existingValue) {\n        <button mat-button color=\"warn\" (click)=\"onDelete()\">\n          <mat-icon>delete</mat-icon>\n          Remove\n        </button>\n      }\n      <span class=\"spacer\"></span>\n      <button mat-button (click)=\"onClose()\">Cancel</button>\n      <button mat-flat-button color=\"primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n</div>\n", styles: [".popover-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000004d;z-index:1000;display:flex;align-items:center;justify-content:center}.popover-container{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;min-width:320px;max-width:400px;overflow:hidden}.popover-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(135deg,#10b981,#059669);color:#fff}.popover-header .header-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}.popover-header .header-title mat-icon{font-size:20px;width:20px;height:20px}.popover-header button{color:#fff}.popover-content{padding:20px}.field-info{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:10px 12px;background:#f8fafc;border-radius:8px}.field-info .field-name{font-weight:600;color:#1e293b}.field-info .field-type{font-size:12px;color:#64748b;background:#e2e8f0;padding:2px 8px;border-radius:4px;text-transform:uppercase}.full-width{width:100%}.boolean-input{padding:12px 0}.popover-actions{display:flex;align-items:center;gap:8px;padding:16px 20px;background:#f8fafc;border-top:1px solid #e2e8f0}.popover-actions .spacer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultValuePopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DefaultValuePopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'default-value-popover', standalone: true, imports: [
                         CommonModule,
@@ -2884,10 +2737,10 @@ class DataMapperComponent {
     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", sourceSchemaRef: "sourceSchemaRef", targetSchemaRef: "targetSchemaRef", sampleData: "sampleData" }, outputs: { mappingsChange: "mappingsChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "svgContainer", first: true, predicate: ["svgContainer"], descendants: true }, { propertyName: "svgElement", first: true, predicate: ["svgElement"], descendants: true }], ngImport: i0, template: "<div class=\"data-mapper\">\n  <!-- Header Toolbar -->\n  <div class=\"mapper-toolbar\">\n    <div class=\"toolbar-title\">\n      <mat-icon>account_tree</mat-icon>\n      <span>Data Mapper</span>\n    </div>\n    <div class=\"toolbar-actions\">\n      <span class=\"mapping-count\">{{ mappings().length }} mapping(s)</span>\n      <button\n        mat-icon-button\n        matTooltip=\"Clear all mappings\"\n        (click)=\"clearAllMappings()\"\n        [disabled]=\"mappings().length === 0\"\n      >\n        <mat-icon>delete_sweep</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Mapper Area -->\n  <div class=\"mapper-container\" #svgContainer>\n    <!-- Source Schema Panel -->\n    <div class=\"schema-panel source-panel\">\n      <schema-tree\n        [schema]=\"sourceSchemaForTree()\"\n        [side]=\"'source'\"\n        [mappings]=\"mappings()\"\n        (fieldDragStart)=\"onFieldDragStart($event)\"\n        (fieldPositionsChanged)=\"onSourcePositionsChanged($event)\"\n        (sourceDrop)=\"onSourceFieldDrop($event)\"\n      ></schema-tree>\n    </div>\n\n    <!-- SVG Connection Layer -->\n    <svg class=\"connection-layer\" #svgElement>\n      <!-- Existing connections -->\n      @for (connection of connections(); track trackByConnectionId($index, connection)) {\n        <g class=\"connection-group\" [class.selected]=\"connection.isSelected\" [class.array-mapping]=\"connection.isArrayMapping\" [class.array-to-object-mapping]=\"connection.isArrayToObjectMapping\" [class.being-dragged]=\"connection.isBeingDragged\">\n          <!-- Connection paths -->\n          @for (path of connection.paths; track $index) {\n            <!-- Shadow path for glow effect -->\n            <path\n              [attr.d]=\"path\"\n              fill=\"none\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              stroke-width=\"6\"\n              stroke-opacity=\"0.2\"\n              stroke-linecap=\"round\"\n            />\n            <!-- Main connection path -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-path\"\n              [class.selected]=\"connection.isSelected\"\n              [class.array-path]=\"connection.isArrayMapping\"\n              [class.array-to-object-path]=\"connection.isArrayToObjectMapping\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              fill=\"none\"\n              stroke-width=\"2.5\"\n              stroke-linecap=\"round\"\n              [attr.stroke-dasharray]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? '8,4' : 'none'\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n            <!-- Invisible wider path for easier clicking -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-hitbox\"\n              fill=\"none\"\n              stroke=\"transparent\"\n              stroke-width=\"20\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n          }\n\n          <!-- Transformation node -->\n          <g\n            class=\"transformation-node\"\n            [class.has-transformation]=\"connection.hasTransformation\"\n            [class.is-array-mapping]=\"connection.isArrayMapping\"\n            [class.is-array-to-object-mapping]=\"connection.isArrayToObjectMapping\"\n            [attr.transform]=\"'translate(' + connection.midPoint.x + ',' + connection.midPoint.y + ')'\"\n            (click)=\"onTransformationNodeClick(connection, $event)\"\n          >\n            <circle r=\"14\" class=\"node-bg\" [attr.fill]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" />\n            <text\n              class=\"node-icon\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              font-family=\"Material Icons\"\n              font-size=\"16\"\n              [attr.fill]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? 'white' : ''\"\n            >\n              {{ getTransformationIcon(connection.mappingId) }}\n            </text>\n          </g>\n\n          <!-- Source endpoint circles (draggable) -->\n          @for (sourcePoint of connection.sourcePoints; track $index) {\n            <circle\n              class=\"endpoint-handle source-endpoint\"\n              [attr.cx]=\"sourcePoint.x\"\n              [attr.cy]=\"sourcePoint.y\"\n              r=\"6\"\n              [class.selected]=\"connection.isSelected\"\n              (mousedown)=\"onEndpointDragStart(connection, 'source', $index, $event)\"\n            />\n          }\n\n          <!-- Target endpoint circle (draggable) -->\n          <circle\n            class=\"endpoint-handle target-endpoint\"\n            [attr.cx]=\"connection.targetPoint.x\"\n            [attr.cy]=\"connection.targetPoint.y\"\n            r=\"6\"\n            [class.selected]=\"connection.isSelected\"\n            (mousedown)=\"onEndpointDragStart(connection, 'target', 0, $event)\"\n          />\n        </g>\n      }\n\n      <!-- Drag preview path -->\n      @if (dragPath()) {\n        <path\n          [attr.d]=\"dragPath()\"\n          class=\"drag-path\"\n          fill=\"none\"\n          stroke=\"#6366f1\"\n          stroke-width=\"2.5\"\n          stroke-dasharray=\"8,4\"\n          stroke-linecap=\"round\"\n        />\n      }\n    </svg>\n\n    <!-- Target Schema Panel -->\n    <div class=\"schema-panel target-panel\">\n      <schema-tree\n        [schema]=\"targetSchemaForTree()\"\n        [side]=\"'target'\"\n        [mappings]=\"mappings()\"\n        [defaultValues]=\"defaultValues()\"\n        (fieldDrop)=\"onFieldDrop($event)\"\n        (fieldPositionsChanged)=\"onTargetPositionsChanged($event)\"\n        (fieldDefaultValueClick)=\"onDefaultValueClick($event)\"\n      ></schema-tree>\n    </div>\n  </div>\n\n  <!-- Instructions -->\n  @if (mappings().length === 0) {\n    <div class=\"empty-state\">\n      <mat-icon>drag_indicator</mat-icon>\n      <p>Drag fields from the source schema to the target schema to create mappings</p>\n    </div>\n  }\n</div>\n\n<!-- Transformation Popover -->\n@if (showPopover() && selectedMapping()) {\n  <transformation-popover\n    [mapping]=\"selectedMapping()!\"\n    [position]=\"popoverPosition()!\"\n    [sampleData]=\"sampleData\"\n    (save)=\"onPopoverSave($event)\"\n    (delete)=\"onPopoverDelete()\"\n    (close)=\"closePopover()\"\n  ></transformation-popover>\n}\n\n<!-- Array Filter Modal -->\n@if (showArrayFilterModal() && selectedArrayMapping()) {\n  <array-filter-modal\n    [arrayMapping]=\"selectedArrayMapping()!\"\n    (save)=\"onArrayFilterSave($event)\"\n    (close)=\"closeArrayFilterModal()\"\n  ></array-filter-modal>\n}\n\n<!-- Array Selector Modal (for array-to-object) -->\n@if (showArraySelectorModal() && selectedArrayToObjectMapping()) {\n  <array-selector-modal\n    [mapping]=\"selectedArrayToObjectMapping()!\"\n    (save)=\"onArraySelectorSave($event)\"\n    (close)=\"closeArraySelectorModal()\"\n  ></array-selector-modal>\n}\n\n<!-- Default Value Popover -->\n@if (showDefaultValuePopover() && selectedDefaultValueField()) {\n  <default-value-popover\n    [field]=\"selectedDefaultValueField()!\"\n    [existingValue]=\"getExistingDefaultValue(selectedDefaultValueField()!.id)\"\n    [position]=\"defaultValuePopoverPosition()!\"\n    (save)=\"onDefaultValueSave($event)\"\n    (delete)=\"onDefaultValueDelete()\"\n    (close)=\"closeDefaultValuePopover()\"\n  ></default-value-popover>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;--data-mapper-bg: #f8fafc;--data-mapper-border-radius: 16px;--data-mapper-shadow: 0 4px 20px rgba(0, 0, 0, .08);--data-mapper-border-color: #e2e8f0;--data-mapper-toolbar-bg: white;--data-mapper-toolbar-border: #e2e8f0;--data-mapper-panel-bg: white;--data-mapper-panel-header-bg: #f8fafc;--data-mapper-panel-width: 320px;--data-mapper-panel-border-radius: 12px;--data-mapper-text-primary: #1e293b;--data-mapper-text-secondary: #64748b;--data-mapper-text-muted: #94a3b8;--data-mapper-accent-primary: #6366f1;--data-mapper-accent-success: #22c55e;--data-mapper-accent-warning: #f59e0b;--data-mapper-accent-danger: #ef4444;--data-mapper-connector-color: #6366f1;--data-mapper-connector-width: 2px;--data-mapper-connector-hover-color: #4f46e5;--data-mapper-spacing-sm: 8px;--data-mapper-spacing-md: 16px;--data-mapper-spacing-lg: 24px;--data-mapper-font-size-sm: 12px;--data-mapper-font-size-md: 14px;--data-mapper-font-size-lg: 18px}.data-mapper{display:flex;flex-direction:column;height:100%;min-height:0;flex:1;background:var(--data-mapper-bg);border-radius:var(--data-mapper-border-radius);overflow:hidden;box-shadow:var(--data-mapper-shadow)}.mapper-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--data-mapper-spacing-md) var(--data-mapper-spacing-lg);background:var(--data-mapper-toolbar-bg);border-bottom:1px solid var(--data-mapper-border-color);flex-shrink:0}.toolbar-title{display:flex;align-items:center;gap:12px;font-size:var(--data-mapper-font-size-lg);font-weight:600;color:var(--data-mapper-text-primary)}.toolbar-title mat-icon{color:var(--data-mapper-accent-primary)}.toolbar-actions{display:flex;align-items:center;gap:var(--data-mapper-spacing-md)}.mapping-count{font-size:var(--data-mapper-font-size-sm);color:var(--data-mapper-text-secondary);background:#f1f5f9;padding:6px 12px;border-radius:20px}.mapper-container{flex:1;display:flex;position:relative;padding:24px;gap:0;overflow:hidden;min-height:0}.schema-panel{width:var(--data-mapper-panel-width);flex-shrink:0;z-index:2;height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.schema-panel.source-panel{margin-right:auto}.schema-panel.target-panel{margin-left:auto}.schema-panel schema-tree{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.connection-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}.connection-group{pointer-events:auto;cursor:pointer}.connection-group:hover .connection-path{stroke-width:3;filter:drop-shadow(0 2px 4px rgba(99,102,241,.3))}.connection-group:hover .transformation-node .node-bg{transform:scale(1.1)}.connection-group.selected .connection-path{stroke-width:3;filter:drop-shadow(0 2px 8px rgba(139,92,246,.4))}.connection-group.being-dragged{opacity:.3;pointer-events:none}.connection-group.being-dragged .endpoint-handle{opacity:0}.connection-path{transition:stroke-width .15s ease,filter .15s ease}.connection-hitbox{cursor:pointer}.transformation-node{cursor:pointer;pointer-events:auto}.transformation-node .node-bg{fill:#fff;stroke:#6366f1;stroke-width:2;transition:transform .15s ease,fill .15s ease}.transformation-node .node-icon{fill:#6366f1;pointer-events:none}.transformation-node.has-transformation .node-bg{fill:#6366f1}.transformation-node.has-transformation .node-icon{fill:#fff}.transformation-node:hover .node-bg{transform:scale(1.15);filter:drop-shadow(0 2px 6px rgba(99,102,241,.4))}.drag-path{pointer-events:none;animation:dashMove .5s linear infinite}@keyframes dashMove{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}.endpoint-handle{fill:#fff;stroke:#6366f1;stroke-width:2;cursor:grab;opacity:0;transition:opacity .15s ease,transform .15s ease,r .15s ease;pointer-events:auto}.endpoint-handle:hover{opacity:1;r:8;fill:#6366f1;cursor:grab}.endpoint-handle:active{cursor:grabbing}.endpoint-handle.selected,.connection-group:hover .endpoint-handle{opacity:.7}.connection-group.selected .endpoint-handle{opacity:1}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#94a3b8;pointer-events:none}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:14px;max-width:300px;line-height:1.6}@media(max-width:900px){.schema-panel{width:260px}.mapper-container{padding:16px}}@media(max-width:700px){.mapper-container{flex-direction:column;gap:24px}.schema-panel{width:100%;max-height:300px}.connection-layer{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SchemaTreeComponent, selector: "schema-tree", inputs: ["schema", "side", "mappings", "defaultValues", "showSchemaName"], outputs: ["fieldDragStart", "fieldDragEnd", "fieldDrop", "sourceDrop", "fieldPositionsChanged", "fieldDefaultValueClick"] }, { kind: "component", type: TransformationPopoverComponent, selector: "transformation-popover", inputs: ["mapping", "position", "sampleData"], outputs: ["save", "delete", "close"] }, { kind: "component", type: ArrayFilterModalComponent, selector: "array-filter-modal", inputs: ["arrayMapping"], outputs: ["save", "close"] }, { kind: "component", type: ArraySelectorModalComponent, selector: "array-selector-modal", inputs: ["mapping"], outputs: ["save", "close"] }, { kind: "component", type: DefaultValuePopoverComponent, selector: "default-value-popover", inputs: ["field", "existingValue", "position"], outputs: ["save", "delete", "close"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DataMapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DataMapperComponent, isStandalone: true, selector: "data-mapper", inputs: { sourceSchema: "sourceSchema", targetSchema: "targetSchema", sourceSchemaRef: "sourceSchemaRef", targetSchemaRef: "targetSchemaRef", sampleData: "sampleData" }, outputs: { mappingsChange: "mappingsChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "svgContainer", first: true, predicate: ["svgContainer"], descendants: true }, { propertyName: "svgElement", first: true, predicate: ["svgElement"], descendants: true }], ngImport: i0, template: "<div class=\"data-mapper\">\n  <!-- Header Toolbar -->\n  <div class=\"mapper-toolbar\">\n    <div class=\"toolbar-title\">\n      <mat-icon>account_tree</mat-icon>\n      <span>Data Mapper</span>\n    </div>\n    <div class=\"toolbar-actions\">\n      <span class=\"mapping-count\">{{ mappings().length }} mapping(s)</span>\n      <button\n        mat-icon-button\n        matTooltip=\"Clear all mappings\"\n        (click)=\"clearAllMappings()\"\n        [disabled]=\"mappings().length === 0\"\n      >\n        <mat-icon>delete_sweep</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Main Mapper Area -->\n  <div class=\"mapper-container\" #svgContainer>\n    <!-- Source Schema Panel -->\n    <div class=\"schema-panel source-panel\">\n      <schema-tree\n        [schema]=\"sourceSchemaForTree()\"\n        [side]=\"'source'\"\n        [mappings]=\"mappings()\"\n        (fieldDragStart)=\"onFieldDragStart($event)\"\n        (fieldPositionsChanged)=\"onSourcePositionsChanged($event)\"\n        (sourceDrop)=\"onSourceFieldDrop($event)\"\n      ></schema-tree>\n    </div>\n\n    <!-- SVG Connection Layer -->\n    <svg class=\"connection-layer\" #svgElement>\n      <!-- Existing connections -->\n      @for (connection of connections(); track trackByConnectionId($index, connection)) {\n        <g class=\"connection-group\" [class.selected]=\"connection.isSelected\" [class.array-mapping]=\"connection.isArrayMapping\" [class.array-to-object-mapping]=\"connection.isArrayToObjectMapping\" [class.being-dragged]=\"connection.isBeingDragged\">\n          <!-- Connection paths -->\n          @for (path of connection.paths; track $index) {\n            <!-- Shadow path for glow effect -->\n            <path\n              [attr.d]=\"path\"\n              fill=\"none\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              stroke-width=\"6\"\n              stroke-opacity=\"0.2\"\n              stroke-linecap=\"round\"\n            />\n            <!-- Main connection path -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-path\"\n              [class.selected]=\"connection.isSelected\"\n              [class.array-path]=\"connection.isArrayMapping\"\n              [class.array-to-object-path]=\"connection.isArrayToObjectMapping\"\n              [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : (connection.isSelected ? '#8b5cf6' : '#6366f1'))\"\n              fill=\"none\"\n              stroke-width=\"2.5\"\n              stroke-linecap=\"round\"\n              [attr.stroke-dasharray]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? '8,4' : 'none'\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n            <!-- Invisible wider path for easier clicking -->\n            <path\n              [attr.d]=\"path\"\n              class=\"connection-hitbox\"\n              fill=\"none\"\n              stroke=\"transparent\"\n              stroke-width=\"20\"\n              (click)=\"onConnectionClick(connection, $event)\"\n            />\n          }\n\n          <!-- Transformation node -->\n          <g\n            class=\"transformation-node\"\n            [class.has-transformation]=\"connection.hasTransformation\"\n            [class.is-array-mapping]=\"connection.isArrayMapping\"\n            [class.is-array-to-object-mapping]=\"connection.isArrayToObjectMapping\"\n            [attr.transform]=\"'translate(' + connection.midPoint.x + ',' + connection.midPoint.y + ')'\"\n            (click)=\"onTransformationNodeClick(connection, $event)\"\n          >\n            <circle r=\"14\" class=\"node-bg\" [attr.fill]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" [attr.stroke]=\"connection.isArrayToObjectMapping ? '#8b5cf6' : (connection.isArrayMapping ? '#f59e0b' : '')\" />\n            <text\n              class=\"node-icon\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              font-family=\"Material Icons\"\n              font-size=\"16\"\n              [attr.fill]=\"connection.isArrayMapping || connection.isArrayToObjectMapping ? 'white' : ''\"\n            >\n              {{ getTransformationIcon(connection.mappingId) }}\n            </text>\n          </g>\n\n          <!-- Source endpoint circles (draggable) -->\n          @for (sourcePoint of connection.sourcePoints; track $index) {\n            <circle\n              class=\"endpoint-handle source-endpoint\"\n              [attr.cx]=\"sourcePoint.x\"\n              [attr.cy]=\"sourcePoint.y\"\n              r=\"6\"\n              [class.selected]=\"connection.isSelected\"\n              (mousedown)=\"onEndpointDragStart(connection, 'source', $index, $event)\"\n            />\n          }\n\n          <!-- Target endpoint circle (draggable) -->\n          <circle\n            class=\"endpoint-handle target-endpoint\"\n            [attr.cx]=\"connection.targetPoint.x\"\n            [attr.cy]=\"connection.targetPoint.y\"\n            r=\"6\"\n            [class.selected]=\"connection.isSelected\"\n            (mousedown)=\"onEndpointDragStart(connection, 'target', 0, $event)\"\n          />\n        </g>\n      }\n\n      <!-- Drag preview path -->\n      @if (dragPath()) {\n        <path\n          [attr.d]=\"dragPath()\"\n          class=\"drag-path\"\n          fill=\"none\"\n          stroke=\"#6366f1\"\n          stroke-width=\"2.5\"\n          stroke-dasharray=\"8,4\"\n          stroke-linecap=\"round\"\n        />\n      }\n    </svg>\n\n    <!-- Target Schema Panel -->\n    <div class=\"schema-panel target-panel\">\n      <schema-tree\n        [schema]=\"targetSchemaForTree()\"\n        [side]=\"'target'\"\n        [mappings]=\"mappings()\"\n        [defaultValues]=\"defaultValues()\"\n        (fieldDrop)=\"onFieldDrop($event)\"\n        (fieldPositionsChanged)=\"onTargetPositionsChanged($event)\"\n        (fieldDefaultValueClick)=\"onDefaultValueClick($event)\"\n      ></schema-tree>\n    </div>\n  </div>\n\n  <!-- Instructions -->\n  @if (mappings().length === 0) {\n    <div class=\"empty-state\">\n      <mat-icon>drag_indicator</mat-icon>\n      <p>Drag fields from the source schema to the target schema to create mappings</p>\n    </div>\n  }\n</div>\n\n<!-- Transformation Popover -->\n@if (showPopover() && selectedMapping()) {\n  <transformation-popover\n    [mapping]=\"selectedMapping()!\"\n    [position]=\"popoverPosition()!\"\n    [sampleData]=\"sampleData\"\n    (save)=\"onPopoverSave($event)\"\n    (delete)=\"onPopoverDelete()\"\n    (close)=\"closePopover()\"\n  ></transformation-popover>\n}\n\n<!-- Array Filter Modal -->\n@if (showArrayFilterModal() && selectedArrayMapping()) {\n  <array-filter-modal\n    [arrayMapping]=\"selectedArrayMapping()!\"\n    (save)=\"onArrayFilterSave($event)\"\n    (close)=\"closeArrayFilterModal()\"\n  ></array-filter-modal>\n}\n\n<!-- Array Selector Modal (for array-to-object) -->\n@if (showArraySelectorModal() && selectedArrayToObjectMapping()) {\n  <array-selector-modal\n    [mapping]=\"selectedArrayToObjectMapping()!\"\n    (save)=\"onArraySelectorSave($event)\"\n    (close)=\"closeArraySelectorModal()\"\n  ></array-selector-modal>\n}\n\n<!-- Default Value Popover -->\n@if (showDefaultValuePopover() && selectedDefaultValueField()) {\n  <default-value-popover\n    [field]=\"selectedDefaultValueField()!\"\n    [existingValue]=\"getExistingDefaultValue(selectedDefaultValueField()!.id)\"\n    [position]=\"defaultValuePopoverPosition()!\"\n    (save)=\"onDefaultValueSave($event)\"\n    (delete)=\"onDefaultValueDelete()\"\n    (close)=\"closeDefaultValuePopover()\"\n  ></default-value-popover>\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;--data-mapper-bg: #f8fafc;--data-mapper-border-radius: 16px;--data-mapper-shadow: 0 4px 20px rgba(0, 0, 0, .08);--data-mapper-border-color: #e2e8f0;--data-mapper-toolbar-bg: white;--data-mapper-toolbar-border: #e2e8f0;--data-mapper-panel-bg: white;--data-mapper-panel-header-bg: #f8fafc;--data-mapper-panel-width: 320px;--data-mapper-panel-border-radius: 12px;--data-mapper-text-primary: #1e293b;--data-mapper-text-secondary: #64748b;--data-mapper-text-muted: #94a3b8;--data-mapper-accent-primary: #6366f1;--data-mapper-accent-success: #22c55e;--data-mapper-accent-warning: #f59e0b;--data-mapper-accent-danger: #ef4444;--data-mapper-connector-color: #6366f1;--data-mapper-connector-width: 2px;--data-mapper-connector-hover-color: #4f46e5;--data-mapper-spacing-sm: 8px;--data-mapper-spacing-md: 16px;--data-mapper-spacing-lg: 24px;--data-mapper-font-size-sm: 12px;--data-mapper-font-size-md: 14px;--data-mapper-font-size-lg: 18px}.data-mapper{display:flex;flex-direction:column;height:100%;min-height:0;flex:1;background:var(--data-mapper-bg);border-radius:var(--data-mapper-border-radius);overflow:hidden;box-shadow:var(--data-mapper-shadow)}.mapper-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--data-mapper-spacing-md) var(--data-mapper-spacing-lg);background:var(--data-mapper-toolbar-bg);border-bottom:1px solid var(--data-mapper-border-color);flex-shrink:0}.toolbar-title{display:flex;align-items:center;gap:12px;font-size:var(--data-mapper-font-size-lg);font-weight:600;color:var(--data-mapper-text-primary)}.toolbar-title mat-icon{color:var(--data-mapper-accent-primary)}.toolbar-actions{display:flex;align-items:center;gap:var(--data-mapper-spacing-md)}.mapping-count{font-size:var(--data-mapper-font-size-sm);color:var(--data-mapper-text-secondary);background:#f1f5f9;padding:6px 12px;border-radius:20px}.mapper-container{flex:1;display:flex;position:relative;padding:24px;gap:0;overflow:hidden;min-height:0}.schema-panel{width:var(--data-mapper-panel-width);flex-shrink:0;z-index:2;height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.schema-panel.source-panel{margin-right:auto}.schema-panel.target-panel{margin-left:auto}.schema-panel schema-tree{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.connection-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}.connection-group{pointer-events:auto;cursor:pointer}.connection-group:hover .connection-path{stroke-width:3;filter:drop-shadow(0 2px 4px rgba(99,102,241,.3))}.connection-group:hover .transformation-node .node-bg{transform:scale(1.1)}.connection-group.selected .connection-path{stroke-width:3;filter:drop-shadow(0 2px 8px rgba(139,92,246,.4))}.connection-group.being-dragged{opacity:.3;pointer-events:none}.connection-group.being-dragged .endpoint-handle{opacity:0}.connection-path{transition:stroke-width .15s ease,filter .15s ease}.connection-hitbox{cursor:pointer}.transformation-node{cursor:pointer;pointer-events:auto}.transformation-node .node-bg{fill:#fff;stroke:#6366f1;stroke-width:2;transition:transform .15s ease,fill .15s ease}.transformation-node .node-icon{fill:#6366f1;pointer-events:none}.transformation-node.has-transformation .node-bg{fill:#6366f1}.transformation-node.has-transformation .node-icon{fill:#fff}.transformation-node:hover .node-bg{transform:scale(1.15);filter:drop-shadow(0 2px 6px rgba(99,102,241,.4))}.drag-path{pointer-events:none;animation:dashMove .5s linear infinite}@keyframes dashMove{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}.endpoint-handle{fill:#fff;stroke:#6366f1;stroke-width:2;cursor:grab;opacity:0;transition:opacity .15s ease,transform .15s ease,r .15s ease;pointer-events:auto}.endpoint-handle:hover{opacity:1;r:8;fill:#6366f1;cursor:grab}.endpoint-handle:active{cursor:grabbing}.endpoint-handle.selected,.connection-group:hover .endpoint-handle{opacity:.7}.connection-group.selected .endpoint-handle{opacity:1}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#94a3b8;pointer-events:none}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:14px;max-width:300px;line-height:1.6}@media(max-width:900px){.schema-panel{width:260px}.mapper-container{padding:16px}}@media(max-width:700px){.mapper-container{flex-direction:column;gap:24px}.schema-panel{width:100%;max-height:300px}.connection-layer{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SchemaTreeComponent, selector: "schema-tree", inputs: ["schema", "side", "mappings", "defaultValues", "showSchemaName"], outputs: ["fieldDragStart", "fieldDragEnd", "fieldDrop", "sourceDrop", "fieldPositionsChanged", "fieldDefaultValueClick"] }, { kind: "component", type: TransformationPopoverComponent, selector: "transformation-popover", inputs: ["mapping", "position", "sampleData"], outputs: ["save", "delete", "close"] }, { kind: "component", type: ArrayFilterModalComponent, selector: "array-filter-modal", inputs: ["arrayMapping"], outputs: ["save", "close"] }, { kind: "component", type: ArraySelectorModalComponent, selector: "array-selector-modal", inputs: ["mapping"], outputs: ["save", "close"] }, { kind: "component", type: DefaultValuePopoverComponent, selector: "default-value-popover", inputs: ["field", "existingValue", "position"], outputs: ["save", "delete", "close"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataMapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DataMapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'data-mapper', standalone: true, imports: [
                         CommonModule,
@@ -2926,1309 +2779,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['document:mouseup', ['$event']]
             }] } });
 
-class FieldItemComponent {
-    cdr = inject(ChangeDetectorRef);
-    appRef = inject(ApplicationRef);
-    // Local expanded state to bypass change detection issues - using signal for better reactivity
-    localExpanded = signal(false, ...(ngDevMode ? [{ debugName: "localExpanded" }] : []));
-    field;
-    parentList;
-    level = 0;
-    showDisplayType = false;
-    fieldChange = new EventEmitter();
-    delete = new EventEmitter();
-    duplicate = new EventEmitter();
-    outdent = new EventEmitter();
-    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: 'time', label: 'Time', icon: 'schedule' },
-        { value: 'object', label: 'Object', icon: 'data_object' },
-        { value: 'array', label: 'Array', icon: 'data_array' },
-    ];
-    stringDisplayTypes = [
-        { value: 'textbox', label: 'Textbox', icon: 'edit' },
-        { value: 'dropdown', label: 'Dropdown', icon: 'arrow_drop_down_circle' },
-        { value: 'textarea', label: 'Textarea', icon: 'notes' },
-        { value: 'richtext', label: 'Rich Text', icon: 'format_color_text' },
-    ];
-    dateDisplayTypes = [
-        { value: 'datepicker', label: 'Date Picker', icon: 'calendar_today' },
-        { value: 'datetimepicker', label: 'DateTime Picker', icon: 'schedule' },
-        { value: 'textbox', label: 'Textbox', icon: 'edit' },
-    ];
-    timeDisplayTypes = [
-        { value: 'timepicker', label: 'Time Picker', icon: 'schedule' },
-        { value: 'textbox', label: 'Textbox', icon: 'edit' },
-    ];
-    numberDisplayTypes = [
-        { value: 'textbox', label: 'Textbox', icon: 'edit' },
-        { value: 'stepper', label: 'Stepper', icon: 'unfold_more' },
-    ];
-    booleanDisplayTypes = [
-        { value: 'checkbox', label: 'Checkbox', icon: 'check_box' },
-        { value: 'toggle', label: 'Toggle', icon: 'toggle_on' },
-    ];
-    stringFormats = [
-        { value: '', label: '(none)' },
-        { value: 'email', label: 'Email' },
-        { value: 'uri', label: 'URI (URL)' },
-        { value: 'uuid', label: 'UUID' },
-    ];
-    getDisplayTypes(fieldType) {
-        if (fieldType === 'date')
-            return this.dateDisplayTypes;
-        if (fieldType === 'time')
-            return this.timeDisplayTypes;
-        if (fieldType === 'number')
-            return this.numberDisplayTypes;
-        if (fieldType === 'boolean')
-            return this.booleanDisplayTypes;
-        return this.stringDisplayTypes;
-    }
-    getTypeIcon(type) {
-        return this.fieldTypes.find(t => t.value === type)?.icon || 'help_outline';
-    }
-    ngOnInit() {
-        // Initialize localExpanded from field.expanded if it exists
-        if (this.field?.expanded !== undefined) {
-            this.localExpanded.set(this.field.expanded);
-        }
-        // Initialize children array for object/array types if needed
-        if ((this.field?.type === 'object' || this.field?.type === 'array') && !this.field.children) {
-            this.field.children = [];
-        }
-    }
-    ngOnChanges(changes) {
-        // When field input changes, sync localExpanded with field.expanded
-        // But PRESERVE localExpanded if field.expanded is false/undefined and we have a true value
-        if (changes['field']) {
-            if (this.field) {
-                // If field.expanded is explicitly true, use it (we just set it)
-                if (this.field.expanded === true) {
-                    this.localExpanded.set(true);
-                }
-                // If field.expanded is explicitly false, use it (user collapsed)
-                else if (this.field.expanded === false) {
-                    this.localExpanded.set(false);
-                }
-                // If field.expanded is undefined, preserve current localExpanded state
-                // This happens when parent updates and field object is new but doesn't have expanded set yet
-                else {
-                    // Preserve current localExpanded, and sync field.expanded to match
-                    if (this.field.expanded !== this.localExpanded()) {
-                        this.field.expanded = this.localExpanded();
-                    }
-                }
-                // Initialize children array for object/array types if needed
-                if ((this.field.type === 'object' || this.field.type === 'array') && !this.field.children) {
-                    this.field.children = [];
-                }
-            }
-        }
-    }
-    generateId() {
-        return `field-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    toggleExpand() {
-        this.handleExpandClick();
-    }
-    handleExpandClick(event) {
-        if (event) {
-            event.stopPropagation();
-        }
-        // Ensure children array exists
-        if (!this.field.children) {
-            this.field.children = [];
-        }
-        // Toggle local expanded state (using signal)
-        const newExpandedState = !this.localExpanded();
-        this.localExpanded.set(newExpandedState);
-        // Sync to field.expanded (mutation persists because field object reference stays the same)
-        this.field.expanded = newExpandedState;
-        // Force immediate change detection - this should trigger template re-render
-        this.cdr.markForCheck();
-        this.cdr.detectChanges();
-        // Don't emit fieldChange - expand/collapse is local UI state only
-        // We only emit when actual field data changes (name, type, children, etc.)
-    }
-    onFieldNameChange(event) {
-        const input = event.target;
-        const sanitized = input.value.replace(/[^a-zA-Z0-9_$]/g, '');
-        this.field.name = sanitized;
-        if (input.value !== sanitized) {
-            input.value = sanitized;
-        }
-    }
-    onFieldNameBlur() {
-        if (!this.field.name.trim()) {
-            this.field.name = 'unnamed';
-        }
-        this.fieldChange.emit();
-    }
-    onFieldTypeChange(type) {
-        this.field.type = type;
-        if ((type === 'object' || type === 'array') && !this.field.children) {
-            this.field.children = [];
-        }
-        if (type === 'string')
-            this.field.displayType = 'textbox';
-        else if (type === 'number')
-            this.field.displayType = 'textbox';
-        else if (type === 'boolean')
-            this.field.displayType = 'checkbox';
-        else if (type === 'date')
-            this.field.displayType = 'datepicker';
-        else if (type === 'time')
-            this.field.displayType = 'timepicker';
-        else
-            this.field.displayType = undefined;
-        this.fieldChange.emit();
-    }
-    onDisplayTypeChange(displayType) {
-        this.field.displayType = displayType;
-        this.fieldChange.emit();
-    }
-    toggleRequired() {
-        this.field.required = !this.field.required;
-        this.fieldChange.emit();
-    }
-    onLabelChange(label) {
-        this.field.label = label;
-    }
-    onLabelBlur() {
-        this.fieldChange.emit();
-    }
-    addChildField() {
-        if (!this.field.children) {
-            this.field.children = [];
-        }
-        const newField = {
-            id: this.generateId(),
-            name: '',
-            type: 'string',
-            displayType: 'textbox',
-        };
-        this.field.children.push(newField);
-        this.localExpanded.set(true);
-        this.field.expanded = true;
-        this.cdr.detectChanges();
-        this.fieldChange.emit();
-    }
-    deleteField() {
-        this.delete.emit(this.field);
-    }
-    duplicateField() {
-        this.duplicate.emit(this.field);
-    }
-    onChildFieldChange() {
-        // Just propagate the change up - don't force detectChanges as it can reset expanded state
-        this.fieldChange.emit();
-    }
-    onChildDelete(child) {
-        if (this.field.children) {
-            const index = this.field.children.indexOf(child);
-            if (index > -1) {
-                this.field.children.splice(index, 1);
-                this.cdr.detectChanges();
-                this.fieldChange.emit();
-            }
-        }
-    }
-    onChildDuplicate(child) {
-        if (this.field.children) {
-            const index = this.field.children.indexOf(child);
-            if (index > -1) {
-                const clone = {
-                    ...child,
-                    id: this.generateId(),
-                    name: child.name + '_copy',
-                    children: child.children ? this.cloneFields(child.children) : undefined,
-                };
-                this.field.children.splice(index + 1, 0, clone);
-                this.cdr.detectChanges();
-                this.fieldChange.emit();
-            }
-        }
-    }
-    cloneFields(fields) {
-        return fields.map(f => ({
-            ...f,
-            id: this.generateId(),
-            children: f.children ? this.cloneFields(f.children) : undefined,
-        }));
-    }
-    onFieldDrop(event) {
-        if (event.previousIndex !== event.currentIndex && this.field.children) {
-            moveItemInArray(this.field.children, event.previousIndex, event.currentIndex);
-            // Don't emit fieldChange for reorder - array is mutated in place
-            // and emitting causes parent re-render which resets expanded state
-        }
-    }
-    canIndent() {
-        const index = this.parentList.indexOf(this.field);
-        if (index <= 0)
-            return false;
-        const prevSibling = this.parentList[index - 1];
-        return prevSibling.type === 'object' || prevSibling.type === 'array';
-    }
-    indentField() {
-        const index = this.parentList.indexOf(this.field);
-        if (index <= 0)
-            return;
-        const prevSibling = this.parentList[index - 1];
-        if (prevSibling.type !== 'object' && prevSibling.type !== 'array')
-            return;
-        this.parentList.splice(index, 1);
-        if (!prevSibling.children)
-            prevSibling.children = [];
-        prevSibling.children.push(this.field);
-        prevSibling.expanded = true;
-        // Don't emit fieldChange - arrays are mutated in place
-    }
-    canOutdent() {
-        return this.level > 0;
-    }
-    outdentField() {
-        if (this.level <= 0)
-            return;
-        this.outdent.emit(this.field);
-    }
-    onChildOutdent(child) {
-        if (!this.field.children)
-            return;
-        const childIndex = this.field.children.indexOf(child);
-        if (childIndex === -1)
-            return;
-        // Remove child from this field's children
-        this.field.children.splice(childIndex, 1);
-        // Add to parent list after this field
-        const myIndex = this.parentList.indexOf(this.field);
-        this.parentList.splice(myIndex + 1, 0, child);
-        // Don't emit fieldChange - arrays are mutated in place
-    }
-    toggleValuesEditor() {
-        this.field.isEditingValues = !this.field.isEditingValues;
-        if (this.field.isEditingValues) {
-            this.field.isEditingDefault = false;
-            this.field.isEditingValidators = false;
-            if (!this.field.allowedValues)
-                this.field.allowedValues = [];
-        }
-        this.fieldChange.emit();
-    }
-    addAllowedValue(input) {
-        let inputEl = null;
-        if (input instanceof HTMLInputElement) {
-            inputEl = input;
-        }
-        else {
-            const target = input.target;
-            const header = target.closest('.values-header');
-            inputEl = header?.querySelector('.value-input');
-        }
-        if (!inputEl)
-            return;
-        const value = inputEl.value.trim();
-        if (value && !this.field.allowedValues?.includes(value)) {
-            if (!this.field.allowedValues)
-                this.field.allowedValues = [];
-            this.field.allowedValues.push(value);
-            inputEl.value = '';
-            this.fieldChange.emit();
-        }
-    }
-    removeAllowedValue(index) {
-        if (this.field.allowedValues) {
-            this.field.allowedValues.splice(index, 1);
-            if (this.field.allowedValues.length === 0)
-                this.field.allowedValues = undefined;
-            this.fieldChange.emit();
-        }
-    }
-    onAllowedValueKeydown(event, input) {
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            this.addAllowedValue(input);
-        }
-    }
-    toggleDefaultEditor() {
-        this.field.isEditingDefault = !this.field.isEditingDefault;
-        if (this.field.isEditingDefault) {
-            this.field.isEditingValues = false;
-            this.field.isEditingValidators = false;
-        }
-        this.fieldChange.emit();
-    }
-    onDefaultValueChange(value) {
-        if (value === '') {
-            this.field.defaultValue = undefined;
-        }
-        else if (this.field.type === 'number') {
-            const num = parseFloat(value);
-            this.field.defaultValue = isNaN(num) ? undefined : num;
-        }
-        else if (this.field.type === 'boolean') {
-            this.field.defaultValue = value === 'true';
-        }
-        else {
-            this.field.defaultValue = value;
-        }
-        this.fieldChange.emit();
-    }
-    clearDefaultValue() {
-        this.field.defaultValue = undefined;
-        this.field.isEditingDefault = false;
-        this.fieldChange.emit();
-    }
-    onDefaultValueKeydown(event) {
-        if (event.key === 'Enter' || event.key === 'Escape') {
-            this.field.isEditingDefault = false;
-            this.fieldChange.emit();
-        }
-    }
-    toggleValidatorsEditor() {
-        this.field.isEditingValidators = !this.field.isEditingValidators;
-        if (this.field.isEditingValidators) {
-            this.field.isEditingValues = false;
-            this.field.isEditingDefault = false;
-        }
-        this.fieldChange.emit();
-    }
-    hasValidators() {
-        if (this.field.type === 'string') {
-            return !!(this.field.minLength || this.field.maxLength || this.field.pattern || this.field.format);
-        }
-        if (this.field.type === 'number') {
-            return this.field.minimum !== undefined || this.field.maximum !== undefined;
-        }
-        return false;
-    }
-    onFormatChange(format) {
-        this.field.format = format || undefined;
-        if (format)
-            this.field.pattern = undefined;
-        this.fieldChange.emit();
-    }
-    onMinLengthChange(value) {
-        this.field.minLength = value ? parseInt(value, 10) : undefined;
-        this.fieldChange.emit();
-    }
-    onMaxLengthChange(value) {
-        this.field.maxLength = value ? parseInt(value, 10) : undefined;
-        this.fieldChange.emit();
-    }
-    onPatternChange(value) {
-        this.field.pattern = value || undefined;
-        this.fieldChange.emit();
-    }
-    onMinimumChange(value) {
-        this.field.minimum = value ? parseFloat(value) : undefined;
-        this.fieldChange.emit();
-    }
-    onMaximumChange(value) {
-        this.field.maximum = value ? parseFloat(value) : undefined;
-        this.fieldChange.emit();
-    }
-    canAddChildToArray() {
-        return this.field.type === 'array' && (!this.field.children || this.field.children.length === 0);
-    }
-    getEmptyMessage() {
-        return this.field.type === 'array' ? 'No item schema defined' : 'No child fields';
-    }
-    getAddButtonLabel() {
-        return this.field.type === 'array' ? 'Define item schema' : 'Add field';
-    }
-    shouldShowNestedFields() {
-        return (this.field.type === 'object' || this.field.type === 'array') && this.localExpanded();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FieldItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FieldItemComponent, isStandalone: true, selector: "field-item", inputs: { field: "field", parentList: "parentList", level: "level", showDisplayType: "showDisplayType" }, outputs: { fieldChange: "fieldChange", delete: "delete", duplicate: "duplicate", outdent: "outdent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"field-wrapper\">\n  <div\n    class=\"field-item\"\n    [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n  >\n    <!-- Left section: field controls -->\n    <div class=\"field-left\">\n      <!-- Drag Handle (leftmost) -->\n      <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n        <mat-icon>drag_indicator</mat-icon>\n      </div>\n\n      <!-- Indent/Outdent Button (show one or the other) -->\n      <div class=\"indent-buttons\">\n        @if (level > 0) {\n          <button\n            class=\"indent-btn\"\n            (click)=\"outdentField()\"\n            matTooltip=\"Outdent (move to parent level)\"\n          >\n            <mat-icon>format_indent_decrease</mat-icon>\n          </button>\n        } @else {\n          <button\n            class=\"indent-btn\"\n            [disabled]=\"!canIndent()\"\n            (click)=\"indentField()\"\n            matTooltip=\"Indent (make child of previous sibling)\"\n          >\n            <mat-icon>format_indent_increase</mat-icon>\n          </button>\n        }\n      </div>\n\n      <!-- Expand/Collapse -->\n      @if (field.type === 'object' || field.type === 'array') {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"expand-btn\"\n          (click)=\"handleExpandClick()\"\n          [matTooltip]=\"localExpanded() ? 'Collapse' : 'Expand'\"\n        >\n          <mat-icon>{{ localExpanded() ? '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      <input\n        class=\"field-name-input\"\n        [value]=\"field.name\"\n        (input)=\"onFieldNameChange($event)\"\n        (blur)=\"onFieldNameBlur()\"\n        placeholder=\"Field name\"\n        matTooltip=\"Property name in JSON Schema\"\n      />\n      @if (field.type === 'array') {\n        <span class=\"array-indicator\">[]</span>\n      }\n\n      <!-- Required Toggle -->\n      <button\n        class=\"required-btn\"\n        [class.is-required]=\"field.required\"\n        (click)=\"toggleRequired()\"\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    </div>\n\n    <!-- Middle section: label (flexible) -->\n    <input\n      class=\"label-input\"\n      [value]=\"field.label || ''\"\n      (input)=\"onLabelChange($any($event.target).value)\"\n      (blur)=\"onLabelBlur()\"\n      placeholder=\"Label...\"\n      matTooltip=\"Display label (stored as title)\"\n    />\n\n    <!-- Right section: type and actions -->\n    <div class=\"field-right\">\n      <!-- Type Selector -->\n      <mat-form-field appearance=\"outline\" class=\"type-selector\" matTooltip=\"Data type\">\n        <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange($event.value)\" panelClass=\"schema-editor-select-panel\">\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      <!-- Display Type Selector -->\n      @if (showDisplayType) {\n        @if (field.type === 'string' || field.type === 'number' || field.type === 'boolean' || field.type === 'date' || field.type === 'time') {\n          <mat-form-field appearance=\"outline\" class=\"display-type-selector\" matTooltip=\"Display Type\">\n            <mat-select [value]=\"field.displayType\" (selectionChange)=\"onDisplayTypeChange($event.value)\" panelClass=\"schema-editor-select-panel\">\n              @for (dt of getDisplayTypes(field.type); track dt.value) {\n                <mat-option [value]=\"dt.value\">\n                  <mat-icon>{{ dt.icon }}</mat-icon>\n                  {{ dt.label }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        } @else {\n          <div class=\"display-type-placeholder\"></div>\n        }\n      }\n\n      <!-- Actions -->\n      <div class=\"field-actions\">\n        @if (field.type === 'object' || canAddChildToArray()) {\n          <button\n            mat-icon-button\n            (click)=\"addChildField()\"\n            [matTooltip]=\"field.type === 'array' ? 'Define item schema' : '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()\"\n            [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values (' + field.allowedValues!.length + ')' : 'Add allowed values'\"\n            [class.has-values]=\"field.allowedValues?.length\"\n          >\n            <mat-icon>list</mat-icon>\n          </button>\n        }\n        @if (field.type !== 'object' && field.type !== 'array') {\n          <button\n            mat-icon-button\n            (click)=\"toggleDefaultEditor()\"\n            [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n            [class.has-default]=\"field.defaultValue !== undefined\"\n          >\n            <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n          </button>\n        }\n        @if (field.type === 'string' || field.type === 'number') {\n          <button\n            mat-icon-button\n            (click)=\"toggleValidatorsEditor()\"\n            [matTooltip]=\"hasValidators() ? 'Edit validators' : 'Add validators'\"\n            [class.has-validators]=\"hasValidators()\"\n          >\n            <mat-icon>rule</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)=\"duplicateField()\">\n            <mat-icon>content_copy</mat-icon>\n            <span>Duplicate</span>\n          </button>\n          <button mat-menu-item (click)=\"deleteField()\" class=\"delete-action\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n  </div>\n\n  <!-- Allowed Values Editor -->\n  @if (field.isEditingValues && (field.type === 'string' || field.type === 'number')) {\n    <div class=\"allowed-values-editor\">\n      <div class=\"values-header\">\n        <span class=\"values-label\">Allowed values:</span>\n        <input\n          #valueInput\n          class=\"value-input\"\n          type=\"text\"\n          placeholder=\"Type value and press Enter\"\n          (keydown)=\"onAllowedValueKeydown($event, valueInput)\"\n        />\n        <button class=\"add-value-btn\" (click)=\"addAllowedValue($event)\" matTooltip=\"Add value\">\n          <mat-icon>add</mat-icon>\n        </button>\n      </div>\n      @if (field.allowedValues && field.allowedValues.length > 0) {\n        <div class=\"values-list\">\n          @for (value of field.allowedValues; track value; let vi = $index) {\n            <span class=\"value-chip\">\n              {{ value }}\n              <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(vi)\" matTooltip=\"Remove\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </span>\n          }\n        </div>\n      } @else {\n        <div class=\"no-values\">No values defined yet</div>\n      }\n    </div>\n  }\n\n  <!-- Default Value Editor -->\n  @if (field.isEditingDefault && field.type !== 'object' && field.type !== 'array') {\n    <div class=\"default-value-editor\">\n      <div class=\"default-header\">\n        <span class=\"default-label\">Default value:</span>\n        @if (field.type === 'boolean') {\n          <select\n            class=\"default-select\"\n            [value]=\"field.defaultValue?.toString() || ''\"\n            (change)=\"onDefaultValueChange($any($event.target).value)\"\n          >\n            <option value=\"\">No default</option>\n            <option value=\"true\">true</option>\n            <option value=\"false\">false</option>\n          </select>\n        } @else {\n          <input\n            class=\"default-input\"\n            [type]=\"field.type === 'number' ? 'number' : 'text'\"\n            [value]=\"field.defaultValue ?? ''\"\n            (input)=\"onDefaultValueChange($any($event.target).value)\"\n            (keydown)=\"onDefaultValueKeydown($event)\"\n            placeholder=\"Enter default value\"\n          />\n        }\n        @if (field.defaultValue !== undefined) {\n          <button class=\"clear-default-btn\" (click)=\"clearDefaultValue()\" matTooltip=\"Clear default\">\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Validators Editor -->\n  @if (field.isEditingValidators && (field.type === 'string' || field.type === 'number')) {\n    <div class=\"validators-editor\">\n      <div class=\"validators-header\">\n        <span class=\"validators-label\">Validators:</span>\n      </div>\n      @if (field.type === 'string') {\n        <div class=\"validators-row\">\n          <div class=\"validator-field\">\n            <label>Format</label>\n            <select\n              class=\"validator-select\"\n              [value]=\"field.format || ''\"\n              (change)=\"onFormatChange($any($event.target).value)\"\n            >\n              @for (fmt of stringFormats; track fmt.value) {\n                <option [value]=\"fmt.value\">{{ fmt.label }}</option>\n              }\n            </select>\n          </div>\n        </div>\n        <div class=\"validators-row\">\n          <div class=\"validator-field\">\n            <label>Min Length</label>\n            <input\n              type=\"number\"\n              class=\"validator-input\"\n              [value]=\"field.minLength ?? ''\"\n              (input)=\"onMinLengthChange($any($event.target).value)\"\n              placeholder=\"0\"\n              min=\"0\"\n            />\n          </div>\n          <div class=\"validator-field\">\n            <label>Max Length</label>\n            <input\n              type=\"number\"\n              class=\"validator-input\"\n              [value]=\"field.maxLength ?? ''\"\n              (input)=\"onMaxLengthChange($any($event.target).value)\"\n              placeholder=\"\u221E\"\n              min=\"0\"\n            />\n          </div>\n          @if (!field.format) {\n            <div class=\"validator-field pattern-field\">\n              <label>Pattern (regex)</label>\n              <input\n                type=\"text\"\n                class=\"validator-input\"\n                [value]=\"field.pattern ?? ''\"\n                (input)=\"onPatternChange($any($event.target).value)\"\n                placeholder=\"^[a-z]+$\"\n              />\n            </div>\n          }\n        </div>\n      }\n      @if (field.type === 'number') {\n        <div class=\"validators-row\">\n          <div class=\"validator-field\">\n            <label>Minimum</label>\n            <input\n              type=\"number\"\n              class=\"validator-input\"\n              [value]=\"field.minimum ?? ''\"\n              (input)=\"onMinimumChange($any($event.target).value)\"\n              placeholder=\"-\u221E\"\n            />\n          </div>\n          <div class=\"validator-field\">\n            <label>Maximum</label>\n            <input\n              type=\"number\"\n              class=\"validator-input\"\n              [value]=\"field.maximum ?? ''\"\n              (input)=\"onMaximumChange($any($event.target).value)\"\n              placeholder=\"\u221E\"\n            />\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Nested Children -->\n  @if ((field.type === 'object' || field.type === 'array') && (localExpanded() || field.expanded)) {\n    <div\n      class=\"nested-fields\"\n      cdkDropList\n      [cdkDropListData]=\"field.children || []\"\n      (cdkDropListDropped)=\"onFieldDrop($event)\"\n    >\n      @if (field.children && field.children.length > 0) {\n        @for (child of field.children; track child.id) {\n          <field-item\n            cdkDrag\n            [field]=\"child\"\n            [parentList]=\"field.children\"\n            [level]=\"level + 1\"\n            [showDisplayType]=\"showDisplayType\"\n            (fieldChange)=\"onChildFieldChange()\"\n            (delete)=\"onChildDelete($event)\"\n            (duplicate)=\"onChildDuplicate($event)\"\n            (outdent)=\"onChildOutdent($event)\"\n          >\n            <!-- Drag Placeholder -->\n            <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n            <!-- Drag Preview -->\n            <div *cdkDragPreview class=\"drag-preview\">\n              <mat-icon>{{ getTypeIcon(child.type) }}</mat-icon>\n              {{ child.name || 'unnamed' }}\n            </div>\n          </field-item>\n        }\n      } @else {\n        <div class=\"empty-nested\">\n          <span>{{ getEmptyMessage() }}</span>\n          <button mat-button (click)=\"addChildField()\" color=\"primary\">\n            <mat-icon>add</mat-icon>\n            {{ getAddButtonLabel() }}\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".field-wrapper{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden;margin-bottom:4px}.field-wrapper ::ng-deep .mat-mdc-icon-button{width:32px!important;height:32px!important;padding:4px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-mdc-button-touch-target{width:32px!important;height:32px!important}.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:50%}.field-wrapper ::ng-deep .mat-mdc-icon-button mat-icon,.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:20px!important;width:20px!important;height:20px!important;line-height:20px!important;overflow:hidden!important}.field-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f8fafc;border-radius:8px;border:1px solid transparent;transition:all .15s ease;box-sizing:border-box}.field-item:hover{background:#f1f5f9;border-color:#e2e8f0}.field-item:focus-within{background:#eff6ff;border-color:#3b82f6}.field-item.is-complex{background:#fefce8}.field-item.is-complex:hover{background:#fef9c3}.field-item.is-complex:focus-within{background:#fef3c7;border-color:#3b82f6}.field-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.field-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:#94a3b8;padding:4px;border-radius:4px;transition:all .15s ease}.drag-handle:hover{background:#e2e8f0;color:#64748b}.drag-handle:active{cursor:grabbing}.drag-handle mat-icon{font-size:20px;width:20px;height:20px}.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:background-color .15s ease,color .15s ease}.expand-btn:hover{background:#e2e8f0;color:#1e293b}.expand-btn mat-icon{font-size:20px;width:20px;height:20px;transition:transform .15s ease}.expand-placeholder{width:28px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.array-indicator{color:#f59e0b;font-weight:600;font-size:14px;margin-left:2px}.field-name-input{flex:0 0 auto;width:120px;font-size:14px;font-weight:500;color:#1e293b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;transition:all .15s ease}.field-name-input:focus{border-color:#3b82f6;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}.label-input{flex:1;font-size:13px;color:#64748b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;min-width:80px;transition:all .15s ease}.label-input:focus{border-color:#3b82f6;background:#fff}.label-input::placeholder{color:#94a3b8;font-style:italic}.type-selector,.display-type-selector{width:130px;flex-shrink:0;margin-right:4px}.type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper,.display-type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.type-selector ::ng-deep .mdc-text-field--outlined,.display-type-selector ::ng-deep .mdc-text-field--outlined{height:32px!important}.type-selector ::ng-deep .mat-mdc-text-field-wrapper,.display-type-selector ::ng-deep .mat-mdc-text-field-wrapper{padding:0 8px!important;height:32px!important}.type-selector ::ng-deep .mat-mdc-form-field-flex,.display-type-selector ::ng-deep .mat-mdc-form-field-flex{height:32px!important}.type-selector ::ng-deep .mat-mdc-form-field-infix,.display-type-selector ::ng-deep .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important;min-height:28px!important;height:28px!important}.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#e2e8f0!important}.type-selector ::ng-deep .mat-mdc-select,.display-type-selector ::ng-deep .mat-mdc-select{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-value-text,.display-type-selector ::ng-deep .mat-mdc-select-value-text{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-arrow-wrapper,.display-type-selector ::ng-deep .mat-mdc-select-arrow-wrapper{transform:scale(.8)}.display-type-selector{width:120px}.display-type-placeholder{width:120px;flex-shrink:0;margin-right:4px}::ng-deep .schema-editor-select-panel .mat-mdc-option{font-size:12px!important;min-height:36px!important;padding:0 12px!important}::ng-deep .schema-editor-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important;display:flex!important;align-items:center!important;gap:8px!important}::ng-deep .schema-editor-select-panel .mat-mdc-option mat-icon{font-size:16px!important;width:16px!important;height:16px!important;margin-right:0!important;color:#64748b}.field-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;width:168px;flex-shrink:0;margin-left:4px;opacity:0;transition:opacity .15s ease}.field-item:hover .field-actions,.field-right:hover .field-actions{opacity:1}.field-actions button[mat-icon-button]{width:32px;height:32px;padding:4px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.field-actions button[mat-icon-button] mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.field-actions button{color:#64748b}.field-actions button:hover{color:#1e293b}.field-actions .has-values,.field-actions .has-default,.field-actions .has-validators{color:#22c55e!important}.delete-action{color:#ef4444!important}.delete-action mat-icon{color:#ef4444}.allowed-values-editor{margin-left:48px;margin-top:12px;margin-bottom:8px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;box-sizing:border-box}.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}.default-value-editor{margin-left:48px;margin-top:12px;margin-bottom:8px;padding:12px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:8px;box-sizing:border-box}.default-value-editor .default-header{display:flex;align-items:center;gap:8px}.default-value-editor .default-label{font-size:12px;font-weight:500;color:#6d28d9}.default-value-editor .default-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;max-width:200px}.default-value-editor .default-input:focus{border-color:#8b5cf6}.default-value-editor .default-input::placeholder{color:#94a3b8}.default-value-editor .default-select{padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;cursor:pointer}.default-value-editor .default-select:focus{border-color:#8b5cf6}.default-value-editor .clear-default-btn{background:none;border:none;padding:4px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.default-value-editor .clear-default-btn:hover{color:#ef4444}.default-value-editor .clear-default-btn mat-icon{font-size:16px;width:16px;height:16px}.validators-editor{margin:12px 12px 8px 48px;padding:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;box-sizing:border-box;overflow:hidden}.validators-editor .validators-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.validators-editor .validators-label{font-size:12px;font-weight:500;color:#1d4ed8}.validators-editor .validators-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px;overflow:hidden;width:100%;box-sizing:border-box}.validators-editor .validators-row:last-child{margin-bottom:0}.validators-editor .validator-field{display:flex;flex-direction:column;gap:4px;flex-shrink:0;box-sizing:border-box}.validators-editor .validator-field label{font-size:11px;font-weight:500;color:#3b82f6}.validators-editor .validator-field.pattern-field{flex:1 1 auto;min-width:80px;overflow:hidden}.validators-editor .validator-input,.validators-editor .validator-select{padding:6px 10px;font-size:13px;border:1px solid #93c5fd;border-radius:4px;outline:none;background:#fff;width:100px;box-sizing:border-box!important}.validators-editor .validator-input:focus,.validators-editor .validator-select:focus{border-color:#3b82f6}.validators-editor .validator-input::placeholder,.validators-editor .validator-select::placeholder{color:#94a3b8}.validators-editor .validator-select{cursor:pointer;width:120px}.validators-editor .pattern-field .validator-input{width:100%;box-sizing:border-box!important}.nested-fields{display:block;min-height:30px;margin-top:8px;margin-bottom:8px;padding-left:32px;box-sizing:border-box}.nested-fields .allowed-values-editor,.nested-fields .default-value-editor,.nested-fields .validators-editor{margin-left:16px;margin-top: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}.drag-placeholder{background:#e2e8f0;border:2px dashed #3b82f6;border-radius:8px;min-height:48px;margin-bottom:4px}::ng-deep .drag-preview{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 16px!important;background:#fff!important;border:2px solid #3b82f6!important;border-radius:8px!important;box-shadow:0 8px 24px #0003!important;font-size:14px!important;font-weight:500!important;color:#1e293b!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important}::ng-deep .drag-preview mat-icon{color:#3b82f6!important;font-size:20px!important;width:20px!important;height:20px!important;flex-shrink:0!important;overflow:hidden!important}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .field-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: FieldItemComponent, selector: "field-item", inputs: ["field", "parentList", "level", "showDisplayType"], outputs: ["fieldChange", "delete", "duplicate", "outdent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i7$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i7$2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i7$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FieldItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'field-item', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatFormFieldModule,
-                        MatSelectModule,
-                        MatTooltipModule,
-                        MatMenuModule,
-                        DragDropModule,
-                        FieldItemComponent,
-                    ], template: "<div class=\"field-wrapper\">\n  <div\n    class=\"field-item\"\n    [class.is-complex]=\"field.type === 'object' || field.type === 'array'\"\n  >\n    <!-- Left section: field controls -->\n    <div class=\"field-left\">\n      <!-- Drag Handle (leftmost) -->\n      <div class=\"drag-handle\" cdkDragHandle matTooltip=\"Drag to reorder\">\n        <mat-icon>drag_indicator</mat-icon>\n      </div>\n\n      <!-- Indent/Outdent Button (show one or the other) -->\n      <div class=\"indent-buttons\">\n        @if (level > 0) {\n          <button\n            class=\"indent-btn\"\n            (click)=\"outdentField()\"\n            matTooltip=\"Outdent (move to parent level)\"\n          >\n            <mat-icon>format_indent_decrease</mat-icon>\n          </button>\n        } @else {\n          <button\n            class=\"indent-btn\"\n            [disabled]=\"!canIndent()\"\n            (click)=\"indentField()\"\n            matTooltip=\"Indent (make child of previous sibling)\"\n          >\n            <mat-icon>format_indent_increase</mat-icon>\n          </button>\n        }\n      </div>\n\n      <!-- Expand/Collapse -->\n      @if (field.type === 'object' || field.type === 'array') {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"expand-btn\"\n          (click)=\"handleExpandClick()\"\n          [matTooltip]=\"localExpanded() ? 'Collapse' : 'Expand'\"\n        >\n          <mat-icon>{{ localExpanded() ? '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      <input\n        class=\"field-name-input\"\n        [value]=\"field.name\"\n        (input)=\"onFieldNameChange($event)\"\n        (blur)=\"onFieldNameBlur()\"\n        placeholder=\"Field name\"\n        matTooltip=\"Property name in JSON Schema\"\n      />\n      @if (field.type === 'array') {\n        <span class=\"array-indicator\">[]</span>\n      }\n\n      <!-- Required Toggle -->\n      <button\n        class=\"required-btn\"\n        [class.is-required]=\"field.required\"\n        (click)=\"toggleRequired()\"\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    </div>\n\n    <!-- Middle section: label (flexible) -->\n    <input\n      class=\"label-input\"\n      [value]=\"field.label || ''\"\n      (input)=\"onLabelChange($any($event.target).value)\"\n      (blur)=\"onLabelBlur()\"\n      placeholder=\"Label...\"\n      matTooltip=\"Display label (stored as title)\"\n    />\n\n    <!-- Right section: type and actions -->\n    <div class=\"field-right\">\n      <!-- Type Selector -->\n      <mat-form-field appearance=\"outline\" class=\"type-selector\" matTooltip=\"Data type\">\n        <mat-select [value]=\"field.type\" (selectionChange)=\"onFieldTypeChange($event.value)\" panelClass=\"schema-editor-select-panel\">\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      <!-- Display Type Selector -->\n      @if (showDisplayType) {\n        @if (field.type === 'string' || field.type === 'number' || field.type === 'boolean' || field.type === 'date' || field.type === 'time') {\n          <mat-form-field appearance=\"outline\" class=\"display-type-selector\" matTooltip=\"Display Type\">\n            <mat-select [value]=\"field.displayType\" (selectionChange)=\"onDisplayTypeChange($event.value)\" panelClass=\"schema-editor-select-panel\">\n              @for (dt of getDisplayTypes(field.type); track dt.value) {\n                <mat-option [value]=\"dt.value\">\n                  <mat-icon>{{ dt.icon }}</mat-icon>\n                  {{ dt.label }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        } @else {\n          <div class=\"display-type-placeholder\"></div>\n        }\n      }\n\n      <!-- Actions -->\n      <div class=\"field-actions\">\n        @if (field.type === 'object' || canAddChildToArray()) {\n          <button\n            mat-icon-button\n            (click)=\"addChildField()\"\n            [matTooltip]=\"field.type === 'array' ? 'Define item schema' : '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()\"\n            [matTooltip]=\"field.allowedValues?.length ? 'Edit allowed values (' + field.allowedValues!.length + ')' : 'Add allowed values'\"\n            [class.has-values]=\"field.allowedValues?.length\"\n          >\n            <mat-icon>list</mat-icon>\n          </button>\n        }\n        @if (field.type !== 'object' && field.type !== 'array') {\n          <button\n            mat-icon-button\n            (click)=\"toggleDefaultEditor()\"\n            [matTooltip]=\"field.defaultValue !== undefined ? 'Default: ' + field.defaultValue : 'Set default value'\"\n            [class.has-default]=\"field.defaultValue !== undefined\"\n          >\n            <mat-icon>{{ field.defaultValue !== undefined ? 'label' : 'label_outline' }}</mat-icon>\n          </button>\n        }\n        @if (field.type === 'string' || field.type === 'number') {\n          <button\n            mat-icon-button\n            (click)=\"toggleValidatorsEditor()\"\n            [matTooltip]=\"hasValidators() ? 'Edit validators' : 'Add validators'\"\n            [class.has-validators]=\"hasValidators()\"\n          >\n            <mat-icon>rule</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)=\"duplicateField()\">\n            <mat-icon>content_copy</mat-icon>\n            <span>Duplicate</span>\n          </button>\n          <button mat-menu-item (click)=\"deleteField()\" class=\"delete-action\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n  </div>\n\n  <!-- Allowed Values Editor -->\n  @if (field.isEditingValues && (field.type === 'string' || field.type === 'number')) {\n    <div class=\"allowed-values-editor\">\n      <div class=\"values-header\">\n        <span class=\"values-label\">Allowed values:</span>\n        <input\n          #valueInput\n          class=\"value-input\"\n          type=\"text\"\n          placeholder=\"Type value and press Enter\"\n          (keydown)=\"onAllowedValueKeydown($event, valueInput)\"\n        />\n        <button class=\"add-value-btn\" (click)=\"addAllowedValue($event)\" matTooltip=\"Add value\">\n          <mat-icon>add</mat-icon>\n        </button>\n      </div>\n      @if (field.allowedValues && field.allowedValues.length > 0) {\n        <div class=\"values-list\">\n          @for (value of field.allowedValues; track value; let vi = $index) {\n            <span class=\"value-chip\">\n              {{ value }}\n              <button class=\"remove-value-btn\" (click)=\"removeAllowedValue(vi)\" matTooltip=\"Remove\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </span>\n          }\n        </div>\n      } @else {\n        <div class=\"no-values\">No values defined yet</div>\n      }\n    </div>\n  }\n\n  <!-- Default Value Editor -->\n  @if (field.isEditingDefault && field.type !== 'object' && field.type !== 'array') {\n    <div class=\"default-value-editor\">\n      <div class=\"default-header\">\n        <span class=\"default-label\">Default value:</span>\n        @if (field.type === 'boolean') {\n          <select\n            class=\"default-select\"\n            [value]=\"field.defaultValue?.toString() || ''\"\n            (change)=\"onDefaultValueChange($any($event.target).value)\"\n          >\n            <option value=\"\">No default</option>\n            <option value=\"true\">true</option>\n            <option value=\"false\">false</option>\n          </select>\n        } @else {\n          <input\n            class=\"default-input\"\n            [type]=\"field.type === 'number' ? 'number' : 'text'\"\n            [value]=\"field.defaultValue ?? ''\"\n            (input)=\"onDefaultValueChange($any($event.target).value)\"\n            (keydown)=\"onDefaultValueKeydown($event)\"\n            placeholder=\"Enter default value\"\n          />\n        }\n        @if (field.defaultValue !== undefined) {\n          <button class=\"clear-default-btn\" (click)=\"clearDefaultValue()\" matTooltip=\"Clear default\">\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Validators Editor -->\n  @if (field.isEditingValidators && (field.type === 'string' || field.type === 'number')) {\n    <div class=\"validators-editor\">\n      <div class=\"validators-header\">\n        <span class=\"validators-label\">Validators:</span>\n      </div>\n      @if (field.type === 'string') {\n        <div class=\"validators-row\">\n          <div class=\"validator-field\">\n            <label>Format</label>\n            <select\n              class=\"validator-select\"\n              [value]=\"field.format || ''\"\n              (change)=\"onFormatChange($any($event.target).value)\"\n            >\n              @for (fmt of stringFormats; track fmt.value) {\n                <option [value]=\"fmt.value\">{{ fmt.label }}</option>\n              }\n            </select>\n          </div>\n        </div>\n        <div class=\"validators-row\">\n          <div class=\"validator-field\">\n            <label>Min Length</label>\n            <input\n              type=\"number\"\n              class=\"validator-input\"\n              [value]=\"field.minLength ?? ''\"\n              (input)=\"onMinLengthChange($any($event.target).value)\"\n              placeholder=\"0\"\n              min=\"0\"\n            />\n          </div>\n          <div class=\"validator-field\">\n            <label>Max Length</label>\n            <input\n              type=\"number\"\n              class=\"validator-input\"\n              [value]=\"field.maxLength ?? ''\"\n              (input)=\"onMaxLengthChange($any($event.target).value)\"\n              placeholder=\"\u221E\"\n              min=\"0\"\n            />\n          </div>\n          @if (!field.format) {\n            <div class=\"validator-field pattern-field\">\n              <label>Pattern (regex)</label>\n              <input\n                type=\"text\"\n                class=\"validator-input\"\n                [value]=\"field.pattern ?? ''\"\n                (input)=\"onPatternChange($any($event.target).value)\"\n                placeholder=\"^[a-z]+$\"\n              />\n            </div>\n          }\n        </div>\n      }\n      @if (field.type === 'number') {\n        <div class=\"validators-row\">\n          <div class=\"validator-field\">\n            <label>Minimum</label>\n            <input\n              type=\"number\"\n              class=\"validator-input\"\n              [value]=\"field.minimum ?? ''\"\n              (input)=\"onMinimumChange($any($event.target).value)\"\n              placeholder=\"-\u221E\"\n            />\n          </div>\n          <div class=\"validator-field\">\n            <label>Maximum</label>\n            <input\n              type=\"number\"\n              class=\"validator-input\"\n              [value]=\"field.maximum ?? ''\"\n              (input)=\"onMaximumChange($any($event.target).value)\"\n              placeholder=\"\u221E\"\n            />\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Nested Children -->\n  @if ((field.type === 'object' || field.type === 'array') && (localExpanded() || field.expanded)) {\n    <div\n      class=\"nested-fields\"\n      cdkDropList\n      [cdkDropListData]=\"field.children || []\"\n      (cdkDropListDropped)=\"onFieldDrop($event)\"\n    >\n      @if (field.children && field.children.length > 0) {\n        @for (child of field.children; track child.id) {\n          <field-item\n            cdkDrag\n            [field]=\"child\"\n            [parentList]=\"field.children\"\n            [level]=\"level + 1\"\n            [showDisplayType]=\"showDisplayType\"\n            (fieldChange)=\"onChildFieldChange()\"\n            (delete)=\"onChildDelete($event)\"\n            (duplicate)=\"onChildDuplicate($event)\"\n            (outdent)=\"onChildOutdent($event)\"\n          >\n            <!-- Drag Placeholder -->\n            <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n            <!-- Drag Preview -->\n            <div *cdkDragPreview class=\"drag-preview\">\n              <mat-icon>{{ getTypeIcon(child.type) }}</mat-icon>\n              {{ child.name || 'unnamed' }}\n            </div>\n          </field-item>\n        }\n      } @else {\n        <div class=\"empty-nested\">\n          <span>{{ getEmptyMessage() }}</span>\n          <button mat-button (click)=\"addChildField()\" color=\"primary\">\n            <mat-icon>add</mat-icon>\n            {{ getAddButtonLabel() }}\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".field-wrapper{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden;margin-bottom:4px}.field-wrapper ::ng-deep .mat-mdc-icon-button{width:32px!important;height:32px!important;padding:4px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-mdc-button-touch-target{width:32px!important;height:32px!important}.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:50%}.field-wrapper ::ng-deep .mat-mdc-icon-button mat-icon,.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:20px!important;width:20px!important;height:20px!important;line-height:20px!important;overflow:hidden!important}.field-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f8fafc;border-radius:8px;border:1px solid transparent;transition:all .15s ease;box-sizing:border-box}.field-item:hover{background:#f1f5f9;border-color:#e2e8f0}.field-item:focus-within{background:#eff6ff;border-color:#3b82f6}.field-item.is-complex{background:#fefce8}.field-item.is-complex:hover{background:#fef9c3}.field-item.is-complex:focus-within{background:#fef3c7;border-color:#3b82f6}.field-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.field-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:#94a3b8;padding:4px;border-radius:4px;transition:all .15s ease}.drag-handle:hover{background:#e2e8f0;color:#64748b}.drag-handle:active{cursor:grabbing}.drag-handle mat-icon{font-size:20px;width:20px;height:20px}.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:background-color .15s ease,color .15s ease}.expand-btn:hover{background:#e2e8f0;color:#1e293b}.expand-btn mat-icon{font-size:20px;width:20px;height:20px;transition:transform .15s ease}.expand-placeholder{width:28px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.array-indicator{color:#f59e0b;font-weight:600;font-size:14px;margin-left:2px}.field-name-input{flex:0 0 auto;width:120px;font-size:14px;font-weight:500;color:#1e293b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;transition:all .15s ease}.field-name-input:focus{border-color:#3b82f6;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}.label-input{flex:1;font-size:13px;color:#64748b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;min-width:80px;transition:all .15s ease}.label-input:focus{border-color:#3b82f6;background:#fff}.label-input::placeholder{color:#94a3b8;font-style:italic}.type-selector,.display-type-selector{width:130px;flex-shrink:0;margin-right:4px}.type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper,.display-type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.type-selector ::ng-deep .mdc-text-field--outlined,.display-type-selector ::ng-deep .mdc-text-field--outlined{height:32px!important}.type-selector ::ng-deep .mat-mdc-text-field-wrapper,.display-type-selector ::ng-deep .mat-mdc-text-field-wrapper{padding:0 8px!important;height:32px!important}.type-selector ::ng-deep .mat-mdc-form-field-flex,.display-type-selector ::ng-deep .mat-mdc-form-field-flex{height:32px!important}.type-selector ::ng-deep .mat-mdc-form-field-infix,.display-type-selector ::ng-deep .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important;min-height:28px!important;height:28px!important}.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#e2e8f0!important}.type-selector ::ng-deep .mat-mdc-select,.display-type-selector ::ng-deep .mat-mdc-select{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-value-text,.display-type-selector ::ng-deep .mat-mdc-select-value-text{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-arrow-wrapper,.display-type-selector ::ng-deep .mat-mdc-select-arrow-wrapper{transform:scale(.8)}.display-type-selector{width:120px}.display-type-placeholder{width:120px;flex-shrink:0;margin-right:4px}::ng-deep .schema-editor-select-panel .mat-mdc-option{font-size:12px!important;min-height:36px!important;padding:0 12px!important}::ng-deep .schema-editor-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important;display:flex!important;align-items:center!important;gap:8px!important}::ng-deep .schema-editor-select-panel .mat-mdc-option mat-icon{font-size:16px!important;width:16px!important;height:16px!important;margin-right:0!important;color:#64748b}.field-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;width:168px;flex-shrink:0;margin-left:4px;opacity:0;transition:opacity .15s ease}.field-item:hover .field-actions,.field-right:hover .field-actions{opacity:1}.field-actions button[mat-icon-button]{width:32px;height:32px;padding:4px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.field-actions button[mat-icon-button] mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.field-actions button{color:#64748b}.field-actions button:hover{color:#1e293b}.field-actions .has-values,.field-actions .has-default,.field-actions .has-validators{color:#22c55e!important}.delete-action{color:#ef4444!important}.delete-action mat-icon{color:#ef4444}.allowed-values-editor{margin-left:48px;margin-top:12px;margin-bottom:8px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;box-sizing:border-box}.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}.default-value-editor{margin-left:48px;margin-top:12px;margin-bottom:8px;padding:12px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:8px;box-sizing:border-box}.default-value-editor .default-header{display:flex;align-items:center;gap:8px}.default-value-editor .default-label{font-size:12px;font-weight:500;color:#6d28d9}.default-value-editor .default-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;max-width:200px}.default-value-editor .default-input:focus{border-color:#8b5cf6}.default-value-editor .default-input::placeholder{color:#94a3b8}.default-value-editor .default-select{padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;cursor:pointer}.default-value-editor .default-select:focus{border-color:#8b5cf6}.default-value-editor .clear-default-btn{background:none;border:none;padding:4px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.default-value-editor .clear-default-btn:hover{color:#ef4444}.default-value-editor .clear-default-btn mat-icon{font-size:16px;width:16px;height:16px}.validators-editor{margin:12px 12px 8px 48px;padding:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;box-sizing:border-box;overflow:hidden}.validators-editor .validators-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.validators-editor .validators-label{font-size:12px;font-weight:500;color:#1d4ed8}.validators-editor .validators-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px;overflow:hidden;width:100%;box-sizing:border-box}.validators-editor .validators-row:last-child{margin-bottom:0}.validators-editor .validator-field{display:flex;flex-direction:column;gap:4px;flex-shrink:0;box-sizing:border-box}.validators-editor .validator-field label{font-size:11px;font-weight:500;color:#3b82f6}.validators-editor .validator-field.pattern-field{flex:1 1 auto;min-width:80px;overflow:hidden}.validators-editor .validator-input,.validators-editor .validator-select{padding:6px 10px;font-size:13px;border:1px solid #93c5fd;border-radius:4px;outline:none;background:#fff;width:100px;box-sizing:border-box!important}.validators-editor .validator-input:focus,.validators-editor .validator-select:focus{border-color:#3b82f6}.validators-editor .validator-input::placeholder,.validators-editor .validator-select::placeholder{color:#94a3b8}.validators-editor .validator-select{cursor:pointer;width:120px}.validators-editor .pattern-field .validator-input{width:100%;box-sizing:border-box!important}.nested-fields{display:block;min-height:30px;margin-top:8px;margin-bottom:8px;padding-left:32px;box-sizing:border-box}.nested-fields .allowed-values-editor,.nested-fields .default-value-editor,.nested-fields .validators-editor{margin-left:16px;margin-top: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}.drag-placeholder{background:#e2e8f0;border:2px dashed #3b82f6;border-radius:8px;min-height:48px;margin-bottom:4px}::ng-deep .drag-preview{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 16px!important;background:#fff!important;border:2px solid #3b82f6!important;border-radius:8px!important;box-shadow:0 8px 24px #0003!important;font-size:14px!important;font-weight:500!important;color:#1e293b!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important}::ng-deep .drag-preview mat-icon{color:#3b82f6!important;font-size:20px!important;width:20px!important;height:20px!important;flex-shrink:0!important;overflow:hidden!important}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .field-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}\n"] }]
-        }], propDecorators: { field: [{
-                type: Input
-            }], parentList: [{
-                type: Input
-            }], level: [{
-                type: Input
-            }], showDisplayType: [{
-                type: Input
-            }], fieldChange: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }], duplicate: [{
-                type: Output
-            }], outdent: [{
-                type: Output
-            }] } });
-
-class SchemaEditorComponent {
-    appRef = inject(ApplicationRef);
-    set schema(value) {
-        if (value) {
-            // Don't overwrite fields if we have uncommitted changes (fields with editors open or empty names)
-            const hasUncommittedChanges = this.fields().some(f => f.isEditingDefault || f.isEditingValues || f.isEditingValidators || !f.name) || this.hasUncommittedChildFields(this.fields());
-            this.schemaName.set(value.title || 'New Schema');
-            if (!hasUncommittedChanges) {
-                this.fields.set(this.jsonSchemaToEditorFields(value));
-            }
-        }
-    }
-    hasUncommittedChildFields(fields) {
-        for (const field of fields) {
-            if (field.children) {
-                if (field.children.some(c => c.isEditingDefault || c.isEditingValues || c.isEditingValidators || !c.name)) {
-                    return true;
-                }
-                if (this.hasUncommittedChildFields(field.children)) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    showJsonToggle = true;
-    showSchemaName = true;
-    showDisplayType = false;
-    schemaChange = new EventEmitter();
-    save = new EventEmitter();
-    schemaName = signal('New Schema', ...(ngDevMode ? [{ debugName: "schemaName" }] : []));
-    fields = signal([], ...(ngDevMode ? [{ debugName: "fields" }] : []));
-    // View mode: 'visual' or 'json'
-    viewMode = signal('visual', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
-    jsonText = signal('', ...(ngDevMode ? [{ debugName: "jsonText" }] : []));
-    jsonError = signal(null, ...(ngDevMode ? [{ debugName: "jsonError" }] : []));
-    fieldTypes = [
-        { value: 'string', label: 'String', icon: 'text_fields' },
-        { value: 'number', label: 'Number', icon: 'pin' },
-        { value: 'boolean', label: 'Boolean', icon: 'toggle_on' },
-        { value: 'date', label: 'Date', icon: 'calendar_today' },
-        { value: 'time', label: 'Time', icon: 'schedule' },
-        { value: 'object', label: 'Object', icon: 'data_object' },
-        { value: 'array', label: 'Array', icon: 'data_array' },
-    ];
-    stringDisplayTypes = [
-        { value: 'textbox', label: 'Textbox', icon: 'edit' },
-        { value: 'dropdown', label: 'Dropdown', icon: 'arrow_drop_down_circle' },
-        { value: 'textarea', label: 'Textarea', icon: 'notes' },
-        { value: 'richtext', label: 'Rich Text', icon: 'format_color_text' },
-    ];
-    dateDisplayTypes = [
-        { value: 'datepicker', label: 'Date Picker', icon: 'calendar_today' },
-        { value: 'datetimepicker', label: 'DateTime Picker', icon: 'schedule' },
-        { value: 'textbox', label: 'Textbox', icon: 'edit' },
-    ];
-    timeDisplayTypes = [
-        { value: 'timepicker', label: 'Time Picker', icon: 'schedule' },
-        { value: 'textbox', label: 'Textbox', icon: 'edit' },
-    ];
-    numberDisplayTypes = [
-        { value: 'textbox', label: 'Textbox', icon: 'edit' },
-        { value: 'stepper', label: 'Stepper', icon: 'unfold_more' },
-    ];
-    booleanDisplayTypes = [
-        { value: 'checkbox', label: 'Checkbox', icon: 'check_box' },
-        { value: 'toggle', label: 'Toggle', icon: 'toggle_on' },
-    ];
-    stringFormats = [
-        { value: '', label: '(none)' },
-        { value: 'email', label: 'Email' },
-        { value: 'uri', label: 'URI (URL)' },
-        { value: 'uuid', label: 'UUID' },
-    ];
-    getDisplayTypes(fieldType) {
-        if (fieldType === 'date')
-            return this.dateDisplayTypes;
-        if (fieldType === 'time')
-            return this.timeDisplayTypes;
-        if (fieldType === 'number')
-            return this.numberDisplayTypes;
-        if (fieldType === 'boolean')
-            return this.booleanDisplayTypes;
-        return this.stringDisplayTypes;
-    }
-    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',
-            displayType: 'textbox',
-            expanded: false,
-        };
-        this.fields.update(fields => [...fields, newField]);
-    }
-    // Add a child field to an object or array
-    addChildField(parent) {
-        if (!parent.children) {
-            parent.children = [];
-        }
-        const newField = {
-            id: this.generateId(),
-            name: '',
-            type: 'string',
-            displayType: 'textbox',
-        };
-        parent.children.push(newField);
-        parent.expanded = true;
-        this.fields.update(fields => [...fields]);
-    }
-    // Handle field change from FieldItemComponent
-    onFieldChange() {
-        // Just emit the change - field objects are mutated in place
-        // Don't recreate array or force tick as it causes expanded state to reset
-        this.emitChange();
-    }
-    // Handle field delete from FieldItemComponent
-    onFieldDelete(field) {
-        const index = this.fields().indexOf(field);
-        if (index > -1) {
-            this.fields.update(fields => {
-                const newFields = [...fields];
-                newFields.splice(index, 1);
-                return newFields;
-            });
-            this.emitChange();
-        }
-    }
-    // Handle field duplicate from FieldItemComponent
-    onFieldDuplicate(field) {
-        const index = this.fields().indexOf(field);
-        if (index > -1) {
-            const clone = {
-                ...field,
-                id: this.generateId(),
-                name: field.name + '_copy',
-                children: field.children ? this.cloneFields(field.children) : undefined,
-            };
-            this.fields.update(fields => {
-                const newFields = [...fields];
-                newFields.splice(index + 1, 0, clone);
-                return newFields;
-            });
-            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,
-            };
-            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]);
-    }
-    // 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 name blur - ensure name is valid and emit change
-    onFieldNameBlur(field) {
-        if (!field.name.trim()) {
-            field.name = 'unnamed';
-        }
-        this.fields.update(fields => [...fields]);
-        this.emitChange();
-    }
-    // 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 = [];
-        }
-        // Set default display type based on field type
-        if (type === 'string') {
-            field.displayType = 'textbox';
-        }
-        else if (type === 'number') {
-            field.displayType = 'textbox';
-        }
-        else if (type === 'boolean') {
-            field.displayType = 'checkbox';
-        }
-        else if (type === 'date') {
-            field.displayType = 'datepicker';
-        }
-        else if (type === 'time') {
-            field.displayType = 'timepicker';
-        }
-        else {
-            field.displayType = undefined;
-        }
-        this.fields.update(fields => [...fields]);
-        this.emitChange();
-    }
-    // Handle display type change
-    onDisplayTypeChange(field, displayType) {
-        field.displayType = displayType;
-        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 label (only update the field, don't trigger re-render)
-    onLabelChange(field, label) {
-        field.label = label;
-    }
-    // Emit change when label input loses focus
-    onLabelBlur() {
-        this.emitChange();
-    }
-    // Toggle allowed values editor
-    toggleValuesEditor(field) {
-        field.isEditingValues = !field.isEditingValues;
-        if (field.isEditingValues) {
-            // Close other editors
-            field.isEditingDefault = false;
-            field.isEditingValidators = false;
-            if (!field.allowedValues) {
-                field.allowedValues = [];
-            }
-        }
-        this.fields.update(fields => [...fields]);
-    }
-    // Add allowed value
-    addAllowedValue(field, input) {
-        // Handle both direct input reference and event from button click
-        let inputEl = null;
-        if (input instanceof HTMLInputElement) {
-            inputEl = input;
-        }
-        else {
-            // Find the input by traversing up to .values-header and then querying for .value-input
-            const target = input.target;
-            const header = target.closest('.values-header');
-            inputEl = header?.querySelector('.value-input');
-        }
-        if (!inputEl)
-            return;
-        const value = inputEl.value.trim();
-        if (value && !field.allowedValues?.includes(value)) {
-            if (!field.allowedValues) {
-                field.allowedValues = [];
-            }
-            field.allowedValues.push(value);
-            inputEl.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);
-        }
-    }
-    // Toggle default value editor
-    toggleDefaultEditor(field) {
-        field.isEditingDefault = !field.isEditingDefault;
-        if (field.isEditingDefault) {
-            // Close other editors
-            field.isEditingValues = false;
-            field.isEditingValidators = false;
-        }
-        this.fields.update(fields => [...fields]);
-    }
-    // Update default value
-    onDefaultValueChange(field, value) {
-        if (value === '') {
-            field.defaultValue = undefined;
-        }
-        else if (field.type === 'number') {
-            const num = parseFloat(value);
-            field.defaultValue = isNaN(num) ? undefined : num;
-        }
-        else if (field.type === 'boolean') {
-            field.defaultValue = value === 'true';
-        }
-        else {
-            field.defaultValue = value;
-        }
-        this.fields.update(fields => [...fields]);
-        this.emitChange();
-    }
-    // Clear default value
-    clearDefaultValue(field) {
-        field.defaultValue = undefined;
-        field.isEditingDefault = false;
-        this.fields.update(fields => [...fields]);
-        this.emitChange();
-    }
-    // Handle Enter key in default value input
-    onDefaultValueKeydown(event, field) {
-        if (event.key === 'Enter' || event.key === 'Escape') {
-            field.isEditingDefault = false;
-            this.fields.update(fields => [...fields]);
-        }
-    }
-    // Toggle validators editor
-    toggleValidatorsEditor(field) {
-        field.isEditingValidators = !field.isEditingValidators;
-        if (field.isEditingValidators) {
-            // Close other editors
-            field.isEditingValues = false;
-            field.isEditingDefault = false;
-        }
-        this.fields.update(fields => [...fields]);
-    }
-    // Check if field has any validators set
-    hasValidators(field) {
-        if (field.type === 'string') {
-            return !!(field.minLength || field.maxLength || field.pattern || field.format);
-        }
-        if (field.type === 'number') {
-            return field.minimum !== undefined || field.maximum !== undefined;
-        }
-        return false;
-    }
-    // Update string format
-    onFormatChange(field, format) {
-        field.format = format || undefined;
-        // Clear pattern when format is set (they're mutually exclusive)
-        if (format) {
-            field.pattern = undefined;
-        }
-        this.fields.update(fields => [...fields]);
-        this.emitChange();
-    }
-    // Update minLength
-    onMinLengthChange(field, value) {
-        field.minLength = value ? parseInt(value, 10) : undefined;
-        this.fields.update(fields => [...fields]);
-        this.emitChange();
-    }
-    // Update maxLength
-    onMaxLengthChange(field, value) {
-        field.maxLength = value ? parseInt(value, 10) : undefined;
-        this.fields.update(fields => [...fields]);
-        this.emitChange();
-    }
-    // Update pattern
-    onPatternChange(field, value) {
-        field.pattern = value || undefined;
-        this.fields.update(fields => [...fields]);
-        this.emitChange();
-    }
-    // Update minimum
-    onMinimumChange(field, value) {
-        field.minimum = value ? parseFloat(value) : undefined;
-        this.fields.update(fields => [...fields]);
-        this.emitChange();
-    }
-    // Update maximum
-    onMaximumChange(field, value) {
-        field.maximum = value ? parseFloat(value) : undefined;
-        this.fields.update(fields => [...fields]);
-        this.emitChange();
-    }
-    // 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();
-        }
-    }
-    // Handle drag and drop reorder
-    onFieldDrop(event) {
-        if (event.previousIndex !== event.currentIndex) {
-            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-            this.fields.update(fields => [...fields]);
-            // Don't emit change here - it causes parent to reset expanded state
-            // Order change will be captured on next edit or save
-        }
-    }
-    // Check if field can be indented (previous sibling must be object/array)
-    canIndent(field, parentList) {
-        const index = parentList.indexOf(field);
-        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);
-        // Always expand the target (keep open if already open, open if closed)
-        prevSibling.expanded = true;
-        this.fields.update(fields => [...fields]);
-        // Don't emit change here - it causes parent to reset expanded state
-        // Structure change will be captured on next edit or save
-    }
-    // Outdent field - move out of parent to grandparent level
-    outdentField(field, parentList, level) {
-        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]);
-        // Don't emit change here - it causes parent to reset expanded state
-        // Structure change will be captured on next edit or save
-    }
-    // Find the parent field that contains a given list
-    findParentOfList(searchIn, targetList) {
-        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(this.toJsonSchema());
-    }
-    // Save the schema
-    onSave() {
-        this.save.emit(this.toJsonSchema());
-    }
-    // Convert JSON Schema to internal EditorField format
-    jsonSchemaToEditorFields(schema, requiredFields = []) {
-        const fields = [];
-        if (schema.type === 'object' && schema.properties) {
-            const required = schema.required || requiredFields;
-            for (const [name, propSchema] of Object.entries(schema.properties)) {
-                fields.push(this.jsonSchemaPropertyToEditorField(name, propSchema, required.includes(name)));
-            }
-        }
-        return fields;
-    }
-    jsonSchemaPropertyToEditorField(name, schema, isRequired) {
-        const fieldType = this.jsonSchemaTypeToEditorType(schema);
-        // Set displayType for string, number, boolean, date, and time fields
-        let displayType;
-        if (fieldType === 'string') {
-            displayType = schema['x-display-type'] || 'textbox';
-        }
-        else if (fieldType === 'number') {
-            displayType = schema['x-display-type'] || 'textbox';
-        }
-        else if (fieldType === 'boolean') {
-            displayType = schema['x-display-type'] || 'checkbox';
-        }
-        else if (fieldType === 'date') {
-            displayType = schema['x-display-type'] || 'datepicker';
-        }
-        else if (fieldType === 'time') {
-            displayType = schema['x-display-type'] || 'timepicker';
-        }
-        // Preserve format for string types and date types
-        let format;
-        if (fieldType === 'string' && schema.format) {
-            format = schema.format;
-        }
-        else if (fieldType === 'date' && schema.format) {
-            format = schema.format; // Preserve 'date' vs 'date-time'
-        }
-        const field = {
-            id: this.generateId(),
-            name,
-            type: fieldType,
-            format,
-            displayType,
-            label: schema.title,
-            required: isRequired,
-            allowedValues: schema.enum,
-            defaultValue: schema.default,
-            // Validators
-            minLength: schema.minLength,
-            maxLength: schema.maxLength,
-            pattern: schema.pattern,
-            minimum: schema.minimum,
-            maximum: schema.maximum,
-            expanded: false,
-        };
-        if (schema.type === 'object' && schema.properties) {
-            field.children = this.jsonSchemaToEditorFields(schema, schema.required);
-        }
-        else if (schema.type === 'array' && schema.items) {
-            if (schema.items.type === 'object' && schema.items.properties) {
-                field.children = this.jsonSchemaToEditorFields(schema.items, schema.items.required);
-            }
-        }
-        return field;
-    }
-    jsonSchemaTypeToEditorType(schema) {
-        if (schema.format === 'date' || schema.format === 'date-time') {
-            return 'date';
-        }
-        if (schema.format === 'time') {
-            return 'time';
-        }
-        const type = Array.isArray(schema.type) ? schema.type[0] : schema.type;
-        switch (type) {
-            case 'string': return 'string';
-            case 'number':
-            case 'integer': return 'number';
-            case 'boolean': return 'boolean';
-            case 'object': return 'object';
-            case 'array': return 'array';
-            default: return 'string';
-        }
-    }
-    // Convert to internal JSON format
-    toJson() {
-        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'] = field.format || 'date-time'; // Use preserved format or default
-        }
-        else if (field.type === 'time') {
-            schema['type'] = 'string';
-            schema['format'] = '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;
-            // Preserve format for string types (email, uri, uuid, etc.)
-            if (field.type === 'string' && field.format) {
-                schema['format'] = field.format;
-            }
-        }
-        // Add label as title
-        if (field.label) {
-            schema['title'] = field.label;
-        }
-        // Add enum for allowed values
-        if (field.allowedValues && field.allowedValues.length > 0) {
-            schema['enum'] = field.allowedValues;
-        }
-        // Add default value
-        if (field.defaultValue !== undefined) {
-            schema['default'] = field.defaultValue;
-        }
-        // Add validators
-        if (field.minLength !== undefined) {
-            schema['minLength'] = field.minLength;
-        }
-        if (field.maxLength !== undefined) {
-            schema['maxLength'] = field.maxLength;
-        }
-        if (field.pattern) {
-            schema['pattern'] = field.pattern;
-        }
-        if (field.minimum !== undefined) {
-            schema['minimum'] = field.minimum;
-        }
-        if (field.maximum !== undefined) {
-            schema['maximum'] = field.maximum;
-        }
-        // Add display type (custom extension)
-        if (field.displayType) {
-            schema['x-display-type'] = field.displayType;
-        }
-        return schema;
-    }
-    stripEditingState(fields) {
-        return fields.map(f => {
-            const { isEditingValues, isEditingDefault, isEditingValidators, ...rest } = f;
-            return {
-                ...rest,
-                children: f.children ? this.stripEditingState(f.children) : undefined,
-            };
-        });
-    }
-    // Track by function for ngFor
-    trackByFieldId(index, field) {
-        return field.id;
-    }
-    // --- JSON View Methods ---
-    setViewMode(mode) {
-        if (mode === 'json') {
-            // Sync JSON text from current schema state
-            this.jsonText.set(JSON.stringify(this.toJsonSchema(), null, 2));
-            this.jsonError.set(null);
-        }
-        this.viewMode.set(mode);
-    }
-    onJsonTextChange(text) {
-        this.jsonText.set(text);
-        try {
-            JSON.parse(text);
-            this.jsonError.set(null);
-        }
-        catch (e) {
-            this.jsonError.set(e.message);
-        }
-    }
-    applyJsonChanges() {
-        try {
-            const parsed = JSON.parse(this.jsonText());
-            // Update internal state from JSON
-            this.schemaName.set(parsed.title || 'New Schema');
-            this.fields.set(this.jsonSchemaToEditorFields(parsed));
-            this.jsonError.set(null);
-            this.emitChange();
-        }
-        catch (e) {
-            this.jsonError.set(e.message);
-        }
-    }
-    formatJson() {
-        try {
-            const parsed = JSON.parse(this.jsonText());
-            this.jsonText.set(JSON.stringify(parsed, null, 2));
-            this.jsonError.set(null);
-        }
-        catch (e) {
-            this.jsonError.set(e.message);
-        }
-    }
-    copyJson() {
-        const text = this.jsonText();
-        navigator.clipboard.writeText(text).catch(err => {
-            console.error('Failed to copy JSON to clipboard:', err);
-        });
-    }
-    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", showJsonToggle: "showJsonToggle", showSchemaName: "showSchemaName", showDisplayType: "showDisplayType" }, outputs: { schemaChange: "schemaChange", save: "save" }, ngImport: i0, template: "<div class=\"schema-editor\">\n  <!-- Schema Header -->\n  <div class=\"editor-header\">\n    @if (showSchemaName) {\n      <div class=\"schema-name-section\">\n        <mat-form-field appearance=\"outline\" class=\"schema-name-field\">\n          <mat-label>Schema Name</mat-label>\n          <input\n            #schemaNameInput\n            matInput\n            [value]=\"schemaName()\"\n            (input)=\"onSchemaNameChange($any($event.target).value, schemaNameInput)\"\n            placeholder=\"Enter schema name\"\n          />\n        </mat-form-field>\n      </div>\n    }\n\n    @if (showJsonToggle) {\n      <mat-button-toggle-group [value]=\"viewMode()\" (change)=\"setViewMode($event.value)\" class=\"view-toggle\">\n        <mat-button-toggle value=\"visual\">Visual</mat-button-toggle>\n        <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n      </mat-button-toggle-group>\n    }\n\n    <div class=\"header-actions\">\n      @if (viewMode() === 'visual') {\n        <button mat-flat-button color=\"primary\" (click)=\"addField()\">\n          <mat-icon>add</mat-icon>\n          Add Field\n        </button>\n      } @else {\n        <button mat-stroked-button (click)=\"copyJson()\" matTooltip=\"Copy JSON to clipboard\">\n          <mat-icon>content_copy</mat-icon>\n          Copy\n        </button>\n        <button mat-stroked-button (click)=\"formatJson()\">\n          <mat-icon>auto_fix_high</mat-icon>\n          Format\n        </button>\n        <button mat-flat-button color=\"primary\" (click)=\"applyJsonChanges()\" [disabled]=\"jsonError()\">\n          <mat-icon>check</mat-icon>\n          Apply\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- JSON View -->\n  @if (viewMode() === 'json') {\n    <div class=\"json-view\">\n      @if (jsonError()) {\n        <div class=\"json-error\">\n          <mat-icon>error</mat-icon>\n          {{ jsonError() }}\n        </div>\n      }\n      <textarea\n        class=\"json-textarea\"\n        [value]=\"jsonText()\"\n        (input)=\"onJsonTextChange($any($event.target).value)\"\n        spellcheck=\"false\"\n      ></textarea>\n    </div>\n  }\n\n  <!-- Fields List (Visual View) -->\n  <div class=\"fields-container\" [class.hidden]=\"viewMode() === 'json'\">\n    @if (fields().length === 0) {\n      <div class=\"empty-state\">\n        <mat-icon>schema</mat-icon>\n        <p>No fields yet. Click \"Add Field\" to get started.</p>\n      </div>\n    } @else {\n      <div\n        class=\"fields-list\"\n        cdkDropList\n        [cdkDropListData]=\"fields()\"\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\n      >\n        @for (field of fields(); track field.id) {\n          <field-item\n            cdkDrag\n            [field]=\"field\"\n            [parentList]=\"fields()\"\n            [level]=\"0\"\n            [showDisplayType]=\"showDisplayType\"\n            (fieldChange)=\"onFieldChange()\"\n            (delete)=\"onFieldDelete($event)\"\n            (duplicate)=\"onFieldDuplicate($event)\"\n          >\n            <!-- Drag Placeholder -->\n            <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n            <!-- Drag Preview -->\n            <div *cdkDragPreview class=\"drag-preview\">\n              <mat-icon>{{ getTypeIcon(field.type) }}</mat-icon>\n              {{ field.name || 'unnamed' }}\n            </div>\n          </field-item>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--schema-editor-bg: white;--schema-editor-border-radius: 12px;--schema-editor-shadow: 0 4px 20px rgba(0, 0, 0, .08);--schema-editor-border-color: #e2e8f0;--schema-editor-header-bg: white;--schema-editor-header-border: #e2e8f0;--schema-editor-field-bg: #f8fafc;--schema-editor-field-bg-hover: #f1f5f9;--schema-editor-field-bg-editing: #eff6ff;--schema-editor-field-bg-complex: #fefce8;--schema-editor-field-border-radius: 8px;--schema-editor-text-primary: #1e293b;--schema-editor-text-secondary: #64748b;--schema-editor-text-muted: #94a3b8;--schema-editor-accent-primary: #3b82f6;--schema-editor-accent-success: #22c55e;--schema-editor-accent-warning: #f59e0b;--schema-editor-accent-danger: #ef4444;--schema-editor-spacing-sm: 8px;--schema-editor-spacing-md: 16px;--schema-editor-spacing-lg: 24px;--schema-editor-font-size-sm: 12px;--schema-editor-font-size-md: 14px;--schema-editor-font-size-lg: 16px}.schema-editor{background:var(--schema-editor-bg);border-radius:var(--schema-editor-border-radius);box-shadow:var(--schema-editor-shadow);height:100%;display:flex;flex-direction:column;overflow:hidden}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--schema-editor-spacing-md) var(--schema-editor-spacing-lg);border-bottom:1px solid var(--schema-editor-border-color);gap:var(--schema-editor-spacing-md);flex-shrink:0;background:var(--schema-editor-bg)}.editor-header .schema-name-section{flex:1;max-width:400px}.editor-header .schema-name-field{width:100%}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.editor-header .schema-name-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:36px}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__leading,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__trailing{border-color:var(--schema-editor-border-color)!important}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch{border-right:none}.editor-header .schema-name-field ::ng-deep input.mat-mdc-input-element{font-size:14px}.editor-header .schema-name-field ::ng-deep .mat-mdc-floating-label{font-size:13px}.editor-header .header-actions{display:flex;gap:12px}.editor-header .header-actions button{display:flex;align-items:center;gap:6px}.editor-header .view-toggle{border:1px solid var(--schema-editor-border-color);border-radius:8px;overflow:hidden}.editor-header .view-toggle ::ng-deep .mat-button-toggle{background:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle.mat-button-toggle-checked{background:var(--schema-editor-accent-primary);color:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle .mat-button-toggle-label-content{padding:0 16px;font-size:13px;font-weight:500;line-height:32px}.json-view{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.json-error{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fef2f2;border-bottom:1px solid #fecaca;color:#dc2626;font-size:12px;flex-shrink:0}.json-error mat-icon{font-size:16px;width:16px;height:16px}.json-textarea{flex:1;width:100%;padding:16px;border:none;outline:none;resize:none;font-family:SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;line-height:1.6;color:var(--schema-editor-text-primary);background:var(--schema-editor-bg);tab-size:2;box-sizing:border-box}.json-textarea:focus{outline:none}.hidden{display:none!important}.fields-container{flex:1;overflow-y:auto;padding:16px;min-height:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;color:#94a3b8;text-align:center}.empty-state mat-icon{font-size:64px;width:64px;height:64px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:16px;margin:0}.fields-list{display:block;width:100%;min-height:50px}.fields-list .field-wrapper{margin-bottom:4px}.field-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--schema-editor-field-bg);border-radius:var(--schema-editor-field-border-radius);border:1px solid transparent;transition:all .15s ease;box-sizing:border-box}.field-item:hover{background:var(--schema-editor-field-bg-hover);border-color:var(--schema-editor-border-color)}.field-item:focus-within{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.is-complex:focus-within{background:#fef3c7;border-color:var(--schema-editor-accent-primary)}.field-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.field-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:#94a3b8;padding:4px;border-radius:4px;transition:all .15s ease}.drag-handle:hover{background:#e2e8f0;color:#64748b}.drag-handle:active{cursor:grabbing}.drag-handle mat-icon{font-size:20px;width:20px;height:20px}.field-wrapper{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.field-wrapper ::ng-deep .mat-mdc-icon-button{width:32px!important;height:32px!important;padding:4px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-mdc-button-touch-target{width:32px!important;height:32px!important}.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:50%}.field-wrapper ::ng-deep .mat-mdc-icon-button mat-icon,.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:20px!important;width:20px!important;height:20px!important;line-height:20px!important;overflow:hidden!important}::ng-deep .drag-preview{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 16px!important;background:#fff!important;border:2px solid #3b82f6!important;border-radius:8px!important;box-shadow:0 8px 24px #0003!important;font-size:14px!important;font-weight:500!important;color:#1e293b!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important}::ng-deep .drag-preview mat-icon{color:#3b82f6!important;font-size:20px!important;width:20px!important;height:20px!important;flex-shrink:0!important;overflow:hidden!important}.drag-placeholder{background:#e2e8f0;border:2px dashed var(--schema-editor-accent-primary);border-radius:var(--schema-editor-field-border-radius);min-height:48px;margin-bottom:4px}.drag-placeholder .placeholder-content{height:100%;min-height:48px}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .field-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.indent-buttons{display:flex;flex-direction:row;gap:2px}.indent-buttons .indent-btn{background:none;border:none;padding:2px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;transition:all .15s ease}.indent-buttons .indent-btn:hover:not(:disabled){background:#dbeafe;color:#2563eb}.indent-buttons .indent-btn:disabled{opacity:.3;cursor:default}.indent-buttons .indent-btn mat-icon{font-size:16px;width:16px;height:16px}.expand-btn{background:none;border:none;padding:4px;cursor:pointer;color:#64748b;border-radius:4px;display:flex;align-items:center;transition:all .15s ease}.expand-btn:hover{background:#e2e8f0;color:#1e293b}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:28px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.array-indicator{color:#f59e0b;font-weight:600;font-size:14px;margin-left:2px}.field-name-input{flex:0 0 auto;width:120px;font-size:14px;font-weight:500;color:#1e293b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;transition:all .15s ease}.field-name-input:focus{border-color:#3b82f6;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}.label-input{flex:1;font-size:13px;color:#64748b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;min-width:80px;transition:all .15s ease}.label-input:focus{border-color:#3b82f6;background:#fff}.label-input::placeholder{color:#94a3b8;font-style:italic}.type-selector,.display-type-selector{width:130px;flex-shrink:0;margin-right:4px}.type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper,.display-type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.type-selector ::ng-deep .mdc-text-field--outlined,.display-type-selector ::ng-deep .mdc-text-field--outlined{height:32px!important}.type-selector ::ng-deep .mat-mdc-text-field-wrapper,.display-type-selector ::ng-deep .mat-mdc-text-field-wrapper{padding:0 8px!important;height:32px!important}.type-selector ::ng-deep .mat-mdc-form-field-flex,.display-type-selector ::ng-deep .mat-mdc-form-field-flex{height:32px!important}.type-selector ::ng-deep .mat-mdc-form-field-infix,.display-type-selector ::ng-deep .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important;min-height:28px!important;height:28px!important}.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#e2e8f0!important}.type-selector ::ng-deep .mat-mdc-select,.display-type-selector ::ng-deep .mat-mdc-select{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-value-text,.display-type-selector ::ng-deep .mat-mdc-select-value-text{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-arrow-wrapper,.display-type-selector ::ng-deep .mat-mdc-select-arrow-wrapper{transform:scale(.8)}.display-type-selector{width:120px}.display-type-placeholder{width:120px;flex-shrink:0;margin-right:4px}::ng-deep .schema-editor-select-panel .mat-mdc-option{font-size:12px!important;min-height:36px!important;padding:0 12px!important}::ng-deep .schema-editor-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important;display:flex!important;align-items:center!important;gap:8px!important}::ng-deep .schema-editor-select-panel .mat-mdc-option mat-icon{font-size:16px!important;width:16px!important;height:16px!important;margin-right:0!important;color:#64748b}.field-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;width:168px;flex-shrink:0;margin-left:4px;opacity:0;transition:opacity .15s ease}.field-item:hover .field-actions,.field-right: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{display:block;min-height:30px;margin-top:8px;margin-bottom:8px;padding-left:32px;box-sizing:border-box}.nested-fields .field-wrapper{margin-bottom:4px}.nested-fields .allowed-values-editor,.nested-fields .default-value-editor,.nested-fields .validators-editor{margin-left:16px;margin-top: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:48px;margin-top:12px;margin-bottom:8px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;box-sizing:border-box}.allowed-values-editor .values-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.allowed-values-editor .values-label{font-size:12px;font-weight:500;color:#166534}.allowed-values-editor .value-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #86efac;border-radius:4px;outline:none;background:#fff}.allowed-values-editor .value-input:focus{border-color:#22c55e}.allowed-values-editor .value-input::placeholder{color:#94a3b8}.allowed-values-editor .add-value-btn{background:#22c55e;border:none;color:#fff;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.allowed-values-editor .add-value-btn:hover{background:#16a34a}.allowed-values-editor .add-value-btn mat-icon{font-size:18px;width:18px;height:18px}.allowed-values-editor .values-list{display:flex;flex-wrap:wrap;gap:6px}.allowed-values-editor .value-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#fff;border:1px solid #86efac;border-radius:4px;font-size:12px;color:#166534}.allowed-values-editor .value-chip .remove-value-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.allowed-values-editor .value-chip .remove-value-btn:hover{color:#ef4444}.allowed-values-editor .value-chip .remove-value-btn mat-icon{font-size:14px;width:14px;height:14px}.allowed-values-editor .no-values{font-size:12px;color:#94a3b8;font-style:italic}.field-actions .has-values{color:#22c55e!important}.field-actions .has-default{color:#8b5cf6!important}.field-actions .has-validators{color:#3b82f6!important}.validators-editor{margin:12px 12px 8px 48px;padding:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;box-sizing:border-box;overflow:hidden;width:calc(100% - 60px)}.validators-editor .validators-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.validators-editor .validators-label{font-size:12px;font-weight:500;color:#1d4ed8}.validators-editor .validators-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px;overflow:hidden;width:100%;box-sizing:border-box}.validators-editor .validators-row:last-child{margin-bottom:0}.validators-editor .validator-field{display:flex;flex-direction:column;gap:4px;flex-shrink:0;box-sizing:border-box}.validators-editor .validator-field label{font-size:11px;font-weight:500;color:#3b82f6}.validators-editor .validator-field.pattern-field{flex:1 1 auto;min-width:80px;overflow:hidden}.validators-editor .validator-input,.validators-editor .validator-select{padding:6px 10px;font-size:13px;border:1px solid #93c5fd;border-radius:4px;outline:none;background:#fff;width:100px;box-sizing:border-box!important}.validators-editor .validator-input:focus,.validators-editor .validator-select:focus{border-color:#3b82f6}.validators-editor .validator-input::placeholder,.validators-editor .validator-select::placeholder{color:#94a3b8}.validators-editor .validator-select{cursor:pointer;width:120px}.validators-editor .pattern-field .validator-input{width:100%;box-sizing:border-box!important}.default-value-editor{margin-left:48px;margin-top:12px;margin-bottom:8px;padding:12px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:8px;box-sizing:border-box}.default-value-editor .default-header{display:flex;align-items:center;gap:8px}.default-value-editor .default-label{font-size:12px;font-weight:500;color:#6d28d9}.default-value-editor .default-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;max-width:200px}.default-value-editor .default-input:focus{border-color:#8b5cf6}.default-value-editor .default-input::placeholder{color:#94a3b8}.default-value-editor .default-select{padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;cursor:pointer}.default-value-editor .default-select:focus{border-color:#8b5cf6}.default-value-editor .clear-default-btn{background:none;border:none;padding:4px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.default-value-editor .clear-default-btn:hover{color:#ef4444}.default-value-editor .clear-default-btn mat-icon{font-size:16px;width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i6$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i7$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7$2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i7$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: FieldItemComponent, selector: "field-item", inputs: ["field", "parentList", "level", "showDisplayType"], outputs: ["fieldChange", "delete", "duplicate", "outdent"] }] });
-}
-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,
-                        MatButtonToggleModule,
-                        DragDropModule,
-                        FieldItemComponent,
-                    ], template: "<div class=\"schema-editor\">\n  <!-- Schema Header -->\n  <div class=\"editor-header\">\n    @if (showSchemaName) {\n      <div class=\"schema-name-section\">\n        <mat-form-field appearance=\"outline\" class=\"schema-name-field\">\n          <mat-label>Schema Name</mat-label>\n          <input\n            #schemaNameInput\n            matInput\n            [value]=\"schemaName()\"\n            (input)=\"onSchemaNameChange($any($event.target).value, schemaNameInput)\"\n            placeholder=\"Enter schema name\"\n          />\n        </mat-form-field>\n      </div>\n    }\n\n    @if (showJsonToggle) {\n      <mat-button-toggle-group [value]=\"viewMode()\" (change)=\"setViewMode($event.value)\" class=\"view-toggle\">\n        <mat-button-toggle value=\"visual\">Visual</mat-button-toggle>\n        <mat-button-toggle value=\"json\">JSON</mat-button-toggle>\n      </mat-button-toggle-group>\n    }\n\n    <div class=\"header-actions\">\n      @if (viewMode() === 'visual') {\n        <button mat-flat-button color=\"primary\" (click)=\"addField()\">\n          <mat-icon>add</mat-icon>\n          Add Field\n        </button>\n      } @else {\n        <button mat-stroked-button (click)=\"copyJson()\" matTooltip=\"Copy JSON to clipboard\">\n          <mat-icon>content_copy</mat-icon>\n          Copy\n        </button>\n        <button mat-stroked-button (click)=\"formatJson()\">\n          <mat-icon>auto_fix_high</mat-icon>\n          Format\n        </button>\n        <button mat-flat-button color=\"primary\" (click)=\"applyJsonChanges()\" [disabled]=\"jsonError()\">\n          <mat-icon>check</mat-icon>\n          Apply\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- JSON View -->\n  @if (viewMode() === 'json') {\n    <div class=\"json-view\">\n      @if (jsonError()) {\n        <div class=\"json-error\">\n          <mat-icon>error</mat-icon>\n          {{ jsonError() }}\n        </div>\n      }\n      <textarea\n        class=\"json-textarea\"\n        [value]=\"jsonText()\"\n        (input)=\"onJsonTextChange($any($event.target).value)\"\n        spellcheck=\"false\"\n      ></textarea>\n    </div>\n  }\n\n  <!-- Fields List (Visual View) -->\n  <div class=\"fields-container\" [class.hidden]=\"viewMode() === 'json'\">\n    @if (fields().length === 0) {\n      <div class=\"empty-state\">\n        <mat-icon>schema</mat-icon>\n        <p>No fields yet. Click \"Add Field\" to get started.</p>\n      </div>\n    } @else {\n      <div\n        class=\"fields-list\"\n        cdkDropList\n        [cdkDropListData]=\"fields()\"\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\n      >\n        @for (field of fields(); track field.id) {\n          <field-item\n            cdkDrag\n            [field]=\"field\"\n            [parentList]=\"fields()\"\n            [level]=\"0\"\n            [showDisplayType]=\"showDisplayType\"\n            (fieldChange)=\"onFieldChange()\"\n            (delete)=\"onFieldDelete($event)\"\n            (duplicate)=\"onFieldDuplicate($event)\"\n          >\n            <!-- Drag Placeholder -->\n            <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n            <!-- Drag Preview -->\n            <div *cdkDragPreview class=\"drag-preview\">\n              <mat-icon>{{ getTypeIcon(field.type) }}</mat-icon>\n              {{ field.name || 'unnamed' }}\n            </div>\n          </field-item>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--schema-editor-bg: white;--schema-editor-border-radius: 12px;--schema-editor-shadow: 0 4px 20px rgba(0, 0, 0, .08);--schema-editor-border-color: #e2e8f0;--schema-editor-header-bg: white;--schema-editor-header-border: #e2e8f0;--schema-editor-field-bg: #f8fafc;--schema-editor-field-bg-hover: #f1f5f9;--schema-editor-field-bg-editing: #eff6ff;--schema-editor-field-bg-complex: #fefce8;--schema-editor-field-border-radius: 8px;--schema-editor-text-primary: #1e293b;--schema-editor-text-secondary: #64748b;--schema-editor-text-muted: #94a3b8;--schema-editor-accent-primary: #3b82f6;--schema-editor-accent-success: #22c55e;--schema-editor-accent-warning: #f59e0b;--schema-editor-accent-danger: #ef4444;--schema-editor-spacing-sm: 8px;--schema-editor-spacing-md: 16px;--schema-editor-spacing-lg: 24px;--schema-editor-font-size-sm: 12px;--schema-editor-font-size-md: 14px;--schema-editor-font-size-lg: 16px}.schema-editor{background:var(--schema-editor-bg);border-radius:var(--schema-editor-border-radius);box-shadow:var(--schema-editor-shadow);height:100%;display:flex;flex-direction:column;overflow:hidden}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--schema-editor-spacing-md) var(--schema-editor-spacing-lg);border-bottom:1px solid var(--schema-editor-border-color);gap:var(--schema-editor-spacing-md);flex-shrink:0;background:var(--schema-editor-bg)}.editor-header .schema-name-section{flex:1;max-width:400px}.editor-header .schema-name-field{width:100%}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.editor-header .schema-name-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.editor-header .schema-name-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:36px}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__leading,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch,.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__trailing{border-color:var(--schema-editor-border-color)!important}.editor-header .schema-name-field ::ng-deep .mdc-notched-outline__notch{border-right:none}.editor-header .schema-name-field ::ng-deep input.mat-mdc-input-element{font-size:14px}.editor-header .schema-name-field ::ng-deep .mat-mdc-floating-label{font-size:13px}.editor-header .header-actions{display:flex;gap:12px}.editor-header .header-actions button{display:flex;align-items:center;gap:6px}.editor-header .view-toggle{border:1px solid var(--schema-editor-border-color);border-radius:8px;overflow:hidden}.editor-header .view-toggle ::ng-deep .mat-button-toggle{background:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle.mat-button-toggle-checked{background:var(--schema-editor-accent-primary);color:#fff}.editor-header .view-toggle ::ng-deep .mat-button-toggle .mat-button-toggle-label-content{padding:0 16px;font-size:13px;font-weight:500;line-height:32px}.json-view{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.json-error{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fef2f2;border-bottom:1px solid #fecaca;color:#dc2626;font-size:12px;flex-shrink:0}.json-error mat-icon{font-size:16px;width:16px;height:16px}.json-textarea{flex:1;width:100%;padding:16px;border:none;outline:none;resize:none;font-family:SF Mono,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;line-height:1.6;color:var(--schema-editor-text-primary);background:var(--schema-editor-bg);tab-size:2;box-sizing:border-box}.json-textarea:focus{outline:none}.hidden{display:none!important}.fields-container{flex:1;overflow-y:auto;padding:16px;min-height:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;color:#94a3b8;text-align:center}.empty-state mat-icon{font-size:64px;width:64px;height:64px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:16px;margin:0}.fields-list{display:block;width:100%;min-height:50px}.fields-list .field-wrapper{margin-bottom:4px}.field-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--schema-editor-field-bg);border-radius:var(--schema-editor-field-border-radius);border:1px solid transparent;transition:all .15s ease;box-sizing:border-box}.field-item:hover{background:var(--schema-editor-field-bg-hover);border-color:var(--schema-editor-border-color)}.field-item:focus-within{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.is-complex:focus-within{background:#fef3c7;border-color:var(--schema-editor-accent-primary)}.field-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.field-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:#94a3b8;padding:4px;border-radius:4px;transition:all .15s ease}.drag-handle:hover{background:#e2e8f0;color:#64748b}.drag-handle:active{cursor:grabbing}.drag-handle mat-icon{font-size:20px;width:20px;height:20px}.field-wrapper{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.field-wrapper ::ng-deep .mat-mdc-icon-button{width:32px!important;height:32px!important;padding:4px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-mdc-button-touch-target{width:32px!important;height:32px!important}.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:50%}.field-wrapper ::ng-deep .mat-mdc-icon-button mat-icon,.field-wrapper ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:20px!important;width:20px!important;height:20px!important;line-height:20px!important;overflow:hidden!important}::ng-deep .drag-preview{display:flex!important;align-items:center!important;gap:8px!important;padding:12px 16px!important;background:#fff!important;border:2px solid #3b82f6!important;border-radius:8px!important;box-shadow:0 8px 24px #0003!important;font-size:14px!important;font-weight:500!important;color:#1e293b!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important}::ng-deep .drag-preview mat-icon{color:#3b82f6!important;font-size:20px!important;width:20px!important;height:20px!important;flex-shrink:0!important;overflow:hidden!important}.drag-placeholder{background:#e2e8f0;border:2px dashed var(--schema-editor-accent-primary);border-radius:var(--schema-editor-field-border-radius);min-height:48px;margin-bottom:4px}.drag-placeholder .placeholder-content{height:100%;min-height:48px}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .field-wrapper:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.indent-buttons{display:flex;flex-direction:row;gap:2px}.indent-buttons .indent-btn{background:none;border:none;padding:2px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;transition:all .15s ease}.indent-buttons .indent-btn:hover:not(:disabled){background:#dbeafe;color:#2563eb}.indent-buttons .indent-btn:disabled{opacity:.3;cursor:default}.indent-buttons .indent-btn mat-icon{font-size:16px;width:16px;height:16px}.expand-btn{background:none;border:none;padding:4px;cursor:pointer;color:#64748b;border-radius:4px;display:flex;align-items:center;transition:all .15s ease}.expand-btn:hover{background:#e2e8f0;color:#1e293b}.expand-btn mat-icon{font-size:20px;width:20px;height:20px}.expand-placeholder{width:28px;flex-shrink:0}.type-icon{font-size:18px;width:18px;height:18px;color:#64748b;flex-shrink:0}.array-indicator{color:#f59e0b;font-weight:600;font-size:14px;margin-left:2px}.field-name-input{flex:0 0 auto;width:120px;font-size:14px;font-weight:500;color:#1e293b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;transition:all .15s ease}.field-name-input:focus{border-color:#3b82f6;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}.label-input{flex:1;font-size:13px;color:#64748b;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;outline:none;background:#f8fafc;min-width:80px;transition:all .15s ease}.label-input:focus{border-color:#3b82f6;background:#fff}.label-input::placeholder{color:#94a3b8;font-style:italic}.type-selector,.display-type-selector{width:130px;flex-shrink:0;margin-right:4px}.type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper,.display-type-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.type-selector ::ng-deep .mdc-text-field--outlined,.display-type-selector ::ng-deep .mdc-text-field--outlined{height:32px!important}.type-selector ::ng-deep .mat-mdc-text-field-wrapper,.display-type-selector ::ng-deep .mat-mdc-text-field-wrapper{padding:0 8px!important;height:32px!important}.type-selector ::ng-deep .mat-mdc-form-field-flex,.display-type-selector ::ng-deep .mat-mdc-form-field-flex{height:32px!important}.type-selector ::ng-deep .mat-mdc-form-field-infix,.display-type-selector ::ng-deep .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important;min-height:28px!important;height:28px!important}.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.display-type-selector ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#e2e8f0!important}.type-selector ::ng-deep .mat-mdc-select,.display-type-selector ::ng-deep .mat-mdc-select{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-value-text,.display-type-selector ::ng-deep .mat-mdc-select-value-text{font-size:12px!important}.type-selector ::ng-deep .mat-mdc-select-arrow-wrapper,.display-type-selector ::ng-deep .mat-mdc-select-arrow-wrapper{transform:scale(.8)}.display-type-selector{width:120px}.display-type-placeholder{width:120px;flex-shrink:0;margin-right:4px}::ng-deep .schema-editor-select-panel .mat-mdc-option{font-size:12px!important;min-height:36px!important;padding:0 12px!important}::ng-deep .schema-editor-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important;display:flex!important;align-items:center!important;gap:8px!important}::ng-deep .schema-editor-select-panel .mat-mdc-option mat-icon{font-size:16px!important;width:16px!important;height:16px!important;margin-right:0!important;color:#64748b}.field-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;width:168px;flex-shrink:0;margin-left:4px;opacity:0;transition:opacity .15s ease}.field-item:hover .field-actions,.field-right: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{display:block;min-height:30px;margin-top:8px;margin-bottom:8px;padding-left:32px;box-sizing:border-box}.nested-fields .field-wrapper{margin-bottom:4px}.nested-fields .allowed-values-editor,.nested-fields .default-value-editor,.nested-fields .validators-editor{margin-left:16px;margin-top: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:48px;margin-top:12px;margin-bottom:8px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;box-sizing:border-box}.allowed-values-editor .values-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.allowed-values-editor .values-label{font-size:12px;font-weight:500;color:#166534}.allowed-values-editor .value-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #86efac;border-radius:4px;outline:none;background:#fff}.allowed-values-editor .value-input:focus{border-color:#22c55e}.allowed-values-editor .value-input::placeholder{color:#94a3b8}.allowed-values-editor .add-value-btn{background:#22c55e;border:none;color:#fff;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.allowed-values-editor .add-value-btn:hover{background:#16a34a}.allowed-values-editor .add-value-btn mat-icon{font-size:18px;width:18px;height:18px}.allowed-values-editor .values-list{display:flex;flex-wrap:wrap;gap:6px}.allowed-values-editor .value-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#fff;border:1px solid #86efac;border-radius:4px;font-size:12px;color:#166534}.allowed-values-editor .value-chip .remove-value-btn{background:none;border:none;padding:0;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.allowed-values-editor .value-chip .remove-value-btn:hover{color:#ef4444}.allowed-values-editor .value-chip .remove-value-btn mat-icon{font-size:14px;width:14px;height:14px}.allowed-values-editor .no-values{font-size:12px;color:#94a3b8;font-style:italic}.field-actions .has-values{color:#22c55e!important}.field-actions .has-default{color:#8b5cf6!important}.field-actions .has-validators{color:#3b82f6!important}.validators-editor{margin:12px 12px 8px 48px;padding:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;box-sizing:border-box;overflow:hidden;width:calc(100% - 60px)}.validators-editor .validators-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.validators-editor .validators-label{font-size:12px;font-weight:500;color:#1d4ed8}.validators-editor .validators-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px;overflow:hidden;width:100%;box-sizing:border-box}.validators-editor .validators-row:last-child{margin-bottom:0}.validators-editor .validator-field{display:flex;flex-direction:column;gap:4px;flex-shrink:0;box-sizing:border-box}.validators-editor .validator-field label{font-size:11px;font-weight:500;color:#3b82f6}.validators-editor .validator-field.pattern-field{flex:1 1 auto;min-width:80px;overflow:hidden}.validators-editor .validator-input,.validators-editor .validator-select{padding:6px 10px;font-size:13px;border:1px solid #93c5fd;border-radius:4px;outline:none;background:#fff;width:100px;box-sizing:border-box!important}.validators-editor .validator-input:focus,.validators-editor .validator-select:focus{border-color:#3b82f6}.validators-editor .validator-input::placeholder,.validators-editor .validator-select::placeholder{color:#94a3b8}.validators-editor .validator-select{cursor:pointer;width:120px}.validators-editor .pattern-field .validator-input{width:100%;box-sizing:border-box!important}.default-value-editor{margin-left:48px;margin-top:12px;margin-bottom:8px;padding:12px;background:#f5f3ff;border:1px solid #c4b5fd;border-radius:8px;box-sizing:border-box}.default-value-editor .default-header{display:flex;align-items:center;gap:8px}.default-value-editor .default-label{font-size:12px;font-weight:500;color:#6d28d9}.default-value-editor .default-input{flex:1;padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;max-width:200px}.default-value-editor .default-input:focus{border-color:#8b5cf6}.default-value-editor .default-input::placeholder{color:#94a3b8}.default-value-editor .default-select{padding:6px 10px;font-size:13px;border:1px solid #a78bfa;border-radius:4px;outline:none;background:#fff;cursor:pointer}.default-value-editor .default-select:focus{border-color:#8b5cf6}.default-value-editor .clear-default-btn{background:none;border:none;padding:4px;cursor:pointer;color:#94a3b8;display:flex;align-items:center;transition:color .15s ease}.default-value-editor .clear-default-btn:hover{color:#ef4444}.default-value-editor .clear-default-btn mat-icon{font-size:16px;width:16px;height:16px}\n"] }]
-        }], propDecorators: { schema: [{
-                type: Input
-            }], showJsonToggle: [{
-                type: Input
-            }], showSchemaName: [{
-                type: Input
-            }], showDisplayType: [{
-                type: Input
-            }], schemaChange: [{
-                type: Output
-            }], save: [{
-                type: Output
-            }] } });
-
 /*
  * Public API Surface of ngx-data-mapper
  */
-// Models
+// Main Component
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayFilterModalComponent, ArraySelectorModalComponent, DataMapperComponent, DefaultValuePopoverComponent, MappingService, SchemaEditorComponent, SchemaParserService, SchemaTreeComponent, SvgConnectorService, TransformationPopoverComponent, TransformationService, addProperty, createEmptySchema, getSchemaType, removeProperty, schemaToFields };
+export { DataMapperComponent };
 //# sourceMappingURL=expeed-ngx-data-mapper.mjs.map