@snteam/amplify-angular-core 1.0.40 → 1.0.42

package/fesm2022/snteam-amplify-angular-core.mjs

@@ -3,7 +3,7 @@ import { Injectable, Component, Pipe, inject, Input, ChangeDetectionStrategy, mo
 import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
-import { FormGroup, Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { FormGroup, Validators, FormControl, ReactiveFormsModule, FormsModule, FormBuilder } from '@angular/forms';
 import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i3 from '@angular/material/form-field';
@@ -30,9 +30,9 @@ import * as i4$1 from '@angular/router';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as i5$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$1 from '@angular/material/expansion';
+import * as i2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i3$5 from '@angular/material/card';
+import * as i4$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 
 // Dynamic Relationship Loader Interfaces
@@ -2296,11 +2296,29 @@ class AmplifyModelService {
     selectionSetGenerator;
     errorHandler;
     client;
+    relationshipConfig = null;
     constructor(selectionSetGenerator, errorHandler) {
         this.selectionSetGenerator = selectionSetGenerator;
         this.errorHandler = errorHandler;
         // Client will be initialized when Amplify is configured by the consuming application
     }
+    /**
+     * Configure the service with relationship selection sets
+     * This should be called by the consuming application to define how relationships should be queried
+     */
+    configure(config) {
+        if (config.relationshipSelectionSets) {
+            this.relationshipConfig = config.relationshipSelectionSets;
+            console.log('AmplifyModelService: Configured with relationship selection sets:', this.relationshipConfig);
+        }
+    }
+    /**
+     * Set relationship selection set configuration directly
+     */
+    setRelationshipConfig(config) {
+        this.relationshipConfig = config;
+        console.log('AmplifyModelService: Updated relationship selection sets configuration:', this.relationshipConfig);
+    }
     /**
      * Initialize the service with the Amplify client
      * This should be called by the consuming application after Amplify.configure()
@@ -2486,9 +2504,8 @@ class AmplifyModelService {
         }
     }
     /**
-     * Generate dynamic selection set for relationship queries
-     * Replaces hardcoded selection set logic with dynamic generation
-     * Enhanced with comprehensive error handling and logging
+     * Get selection set for relationship queries using configuration
+     * This replaces the complex dynamic generation with simple configuration lookup
      * @param config Relationship configuration object
      * @param baseId Base record ID (for compatibility, not used in generation)
      * @returns Array of GraphQL field selectors
@@ -2496,64 +2513,88 @@ class AmplifyModelService {
     getAmplifySelectionSet(config, baseId) {
         try {
             if (!config) {
-                const error = this.errorHandler.logSelectionSetError(SelectionSetErrorType.INVALID_CONFIGURATION, 'Configuration is null or undefined', config, undefined, {
-                    method: 'getAmplifySelectionSet',
-                    baseId,
-                    clientAvailable: !!this.client
-                });
-                // Return minimal fallback
+                console.warn('AmplifyModelService: Configuration is null or undefined, using minimal fallback');
                 return ['id'];
             }
-            console.log('AmplifyModelService: Generating dynamic selection set for config:', {
+            console.log('AmplifyModelService: Getting selection set for relationship:', {
                 relationshipModel: config.relationshipModelName,
                 fieldName: config.fieldName,
                 baseModelName: config.baseModelName,
                 associatedWith: config.associatedWith,
                 baseId
             });
-            // Use the SelectionSetGenerator to create dynamic selection sets
-            const selectionSet = this.selectionSetGenerator.generateSelectionSet(config);
-            if (!selectionSet || selectionSet.length === 0) {
-                const error = this.errorHandler.logSelectionSetError(SelectionSetErrorType.GRAPHQL_ERROR, 'Selection set generator returned empty or null result', config, selectionSet, {
-                    method: 'getAmplifySelectionSet',
-                    baseId,
-                    generatorAvailable: !!this.selectionSetGenerator
-                });
-                // Return minimal fallback
-                console.warn('AmplifyModelService: Using minimal fallback selection set due to generator failure');
-                return ['id'];
-            }
-            console.log('AmplifyModelService: Generated selection set:', {
-                config: config.fieldName,
-                selectionSetLength: selectionSet.length,
-                selectionSet,
-                detailedConfig: {
-                    relationshipModelName: config.relationshipModelName,
-                    baseModelName: config.baseModelName,
-                    fieldName: config.fieldName,
-                    associatedWith: config.associatedWith
+            // Try to get selection set from configuration first
+            const configuredSelectionSet = this.getConfiguredSelectionSet(config);
+            if (configuredSelectionSet && configuredSelectionSet.length > 0) {
+                console.log('AmplifyModelService: Using configured selection set:', configuredSelectionSet);
+                return configuredSelectionSet;
+            }
+            // Fall back to default selection set if configured
+            if (this.relationshipConfig?.defaultSelectionSet && this.relationshipConfig.defaultSelectionSet.length > 0) {
+                console.log('AmplifyModelService: Using default configured selection set:', this.relationshipConfig.defaultSelectionSet);
+                return this.relationshipConfig.defaultSelectionSet;
+            }
+            // Fall back to dynamic generation if enabled and no configuration found
+            if (this.relationshipConfig?.enableFallback !== false) {
+                console.log('AmplifyModelService: No configuration found, falling back to dynamic generation');
+                const dynamicSelectionSet = this.selectionSetGenerator.generateSelectionSet(config);
+                if (dynamicSelectionSet && dynamicSelectionSet.length > 0) {
+                    console.log('AmplifyModelService: Using dynamic selection set:', dynamicSelectionSet);
+                    return dynamicSelectionSet;
                 }
-            });
-            return selectionSet;
+            }
+            // Final fallback - use a simple, predictable selection set
+            const fallbackSelectionSet = this.generateSimpleFallbackSelectionSet(config);
+            console.log('AmplifyModelService: Using simple fallback selection set:', fallbackSelectionSet);
+            return fallbackSelectionSet;
         }
         catch (error) {
-            const selectionSetError = this.errorHandler.logSelectionSetError(SelectionSetErrorType.GRAPHQL_ERROR, `Unexpected error generating selection set: ${error instanceof Error ? error.message : String(error)}`, config, undefined, {
-                method: 'getAmplifySelectionSet',
-                baseId,
-                originalError: {
-                    message: error instanceof Error ? error.message : String(error),
-                    stack: error instanceof Error ? error.stack : undefined,
-                    type: typeof error
-                },
-                context: {
-                    clientAvailable: !!this.client,
-                    selectionSetGeneratorAvailable: !!this.selectionSetGenerator
-                }
-            });
-            console.error('AmplifyModelService: Error generating selection set, using fallback:', error);
-            // Use fallback selection set generation with retry logic
-            return this.selectionSetGenerator.generateFallbackSelectionSetWithRetry(config?.fieldName || '', [error instanceof Error ? error.message : String(error)]);
+            console.error('AmplifyModelService: Error getting selection set, using minimal fallback:', error);
+            return ['id'];
+        }
+    }
+    /**
+     * Get configured selection set for a specific relationship
+     */
+    getConfiguredSelectionSet(config) {
+        if (!this.relationshipConfig?.relationships) {
+            return null;
+        }
+        // Look for exact match first
+        const exactMatch = this.relationshipConfig.relationships.find(rel => rel.relationshipModel === config.relationshipModelName &&
+            rel.fieldName === config.fieldName);
+        if (exactMatch) {
+            console.log('AmplifyModelService: Found exact configuration match:', exactMatch);
+            return exactMatch.selectionSet;
+        }
+        // Look for relationship model match
+        const modelMatch = this.relationshipConfig.relationships.find(rel => rel.relationshipModel === config.relationshipModelName);
+        if (modelMatch) {
+            console.log('AmplifyModelService: Found relationship model match:', modelMatch);
+            return modelMatch.selectionSet;
+        }
+        // Look for field name match
+        const fieldMatch = this.relationshipConfig.relationships.find(rel => rel.fieldName === config.fieldName);
+        if (fieldMatch) {
+            console.log('AmplifyModelService: Found field name match:', fieldMatch);
+            return fieldMatch.selectionSet;
         }
+        return null;
+    }
+    /**
+     * Generate a simple, predictable fallback selection set
+     */
+    generateSimpleFallbackSelectionSet(config) {
+        const selectionSet = ['id'];
+        if (config.fieldName) {
+            // Add the relationship field itself
+            selectionSet.push(config.fieldName);
+            // Add common nested fields
+            selectionSet.push(`${config.fieldName}.id`);
+            selectionSet.push(`${config.fieldName}.name`);
+            selectionSet.push(`${config.fieldName}.title`);
+        }
+        return selectionSet;
     }
     setRelatedSub(config, baseId) {
         if (!this.client) {
@@ -2757,178 +2798,44 @@ class AmplifyModelService {
     }
     /**
      * Validate that relationship field data is populated in query results
-     * Enhanced with comprehensive error logging and very flexible validation
+     * Simplified validation that's more predictable and easier to debug
      */
     validateRelationshipFieldPopulation(result, config) {
         try {
             if (!result || !result.data) {
-                this.errorHandler.logSelectionSetError(SelectionSetErrorType.GRAPHQL_ERROR, 'Query result is missing or has no data property', config, undefined, {
-                    method: 'validateRelationshipFieldPopulation',
-                    hasResult: !!result,
-                    hasData: !!(result?.data),
-                    resultType: typeof result,
-                    resultKeys: result ? Object.keys(result) : []
-                });
+                console.warn('AmplifyModelService: Query result is missing or has no data property');
                 return false;
             }
-            // Check if any records have the relationship field populated
             const records = Array.isArray(result.data) ? result.data : [result.data];
-            let populatedCount = 0;
-            let partiallyPopulatedCount = 0;
-            let recordsWithAnyRelationshipData = 0;
+            if (records.length === 0) {
+                console.warn('AmplifyModelService: No records returned from query');
+                return false;
+            }
             console.log(`AmplifyModelService: Validating relationship field '${config.fieldName}' in ${records.length} records`);
+            // Simple validation: if we have records, consider it successful
+            // The actual relationship data validation will happen at the UI level
+            let hasAnyData = false;
             for (let i = 0; i < records.length; i++) {
                 const record = records[i];
-                if (!record)
-                    continue;
-                console.log(`AmplifyModelService: Checking record ${i}:`, {
-                    recordKeys: Object.keys(record),
-                    fieldName: config.fieldName,
-                    fieldValue: record[config.fieldName],
-                    fieldType: typeof record[config.fieldName]
-                });
-                const relationshipData = record[config.fieldName];
-                // Strategy 1: Check for fully populated relationship (object with data)
-                if (relationshipData !== undefined && relationshipData !== null) {
-                    console.log(`AmplifyModelService: Record ${i} has relationship data:`, relationshipData);
-                    // If it's an object with properties, consider it populated
-                    if (typeof relationshipData === 'object' && Object.keys(relationshipData).length > 0) {
-                        populatedCount++;
-                        recordsWithAnyRelationshipData++;
-                    }
-                    // If it's a non-null primitive value, also consider it populated
-                    else if (typeof relationshipData !== 'object') {
-                        populatedCount++;
-                        recordsWithAnyRelationshipData++;
-                    }
-                    // If it's an empty object or array, consider it partially populated
-                    else {
-                        partiallyPopulatedCount++;
-                        recordsWithAnyRelationshipData++;
-                    }
-                }
-                // Strategy 2: Check if the record has any nested relationship data
-                // This handles cases where the selection set includes nested fields like "table.id", "table.name"
-                const hasNestedRelationshipData = this.hasNestedRelationshipData(record, config.fieldName);
-                if (hasNestedRelationshipData) {
-                    console.log(`AmplifyModelService: Record ${i} has nested relationship data for field '${config.fieldName}'`);
-                    populatedCount++;
-                    recordsWithAnyRelationshipData++;
-                }
-                // Strategy 3: Check for any field that contains the relationship name
-                // This is a very permissive check for cases where the field structure is different
-                const hasAnyRelatedField = this.hasAnyRelatedField(record, config.fieldName);
-                if (hasAnyRelatedField) {
-                    console.log(`AmplifyModelService: Record ${i} has some related field data for '${config.fieldName}'`);
-                    recordsWithAnyRelationshipData++;
+                if (record && typeof record === 'object' && Object.keys(record).length > 0) {
+                    hasAnyData = true;
+                    console.log(`AmplifyModelService: Record ${i} has data:`, Object.keys(record));
+                    break;
                 }
             }
-            // Strategy 4: Very permissive validation - if we have ANY records with ANY relationship data, consider it valid
-            // This is to handle cases where the relationship structure is different than expected
-            const totalValidRecords = Math.max(populatedCount + partiallyPopulatedCount, recordsWithAnyRelationshipData);
-            console.log(`AmplifyModelService: Relationship validation summary:`, {
-                fieldName: config.fieldName,
-                totalRecords: records.length,
-                populatedCount,
-                partiallyPopulatedCount,
-                recordsWithAnyRelationshipData,
-                totalValidRecords,
-                validationPassed: totalValidRecords > 0
-            });
-            if (totalValidRecords === 0) {
-                // Log very detailed information about what we found
-                const sampleRecord = records[0];
-                const detailedError = {
-                    method: 'validateRelationshipFieldPopulation',
-                    recordCount: records.length,
-                    populatedCount,
-                    partiallyPopulatedCount,
-                    recordsWithAnyRelationshipData,
-                    fieldName: config.fieldName,
-                    sampleRecord: sampleRecord ? {
-                        keys: Object.keys(sampleRecord),
-                        values: sampleRecord,
-                        fieldValue: sampleRecord[config.fieldName],
-                        fieldType: typeof sampleRecord[config.fieldName]
-                    } : null,
-                    allRecordKeys: records.map((r) => r ? Object.keys(r) : []),
-                    config: {
-                        relationshipModelName: config.relationshipModelName,
-                        baseModelName: config.baseModelName,
-                        fieldName: config.fieldName,
-                        associatedWith: config.associatedWith
-                    }
-                };
-                this.errorHandler.logSelectionSetError(SelectionSetErrorType.FIELD_NOT_FOUND, `No records have relationship field '${config.fieldName}' populated - detailed analysis shows no relationship data found`, config, undefined, detailedError);
-                console.error(`AmplifyModelService: DETAILED VALIDATION FAILURE for field '${config.fieldName}':`, detailedError);
-                // TEMPORARY: For debugging, let's be even more permissive and return true if we have any records at all
-                // This will help us see what data is actually being processed
-                if (records.length > 0) {
-                    console.warn(`AmplifyModelService: TEMPORARY DEBUG MODE - Allowing validation to pass despite no relationship data found`);
-                    return true;
-                }
+            if (!hasAnyData) {
+                console.warn('AmplifyModelService: No valid records found in query result');
                 return false;
             }
-            console.log(`AmplifyModelService: Relationship field validation SUCCESSFUL: ${totalValidRecords}/${records.length} records have some form of relationship data for '${config.fieldName}' field`);
+            console.log(`AmplifyModelService: Relationship validation successful - found ${records.length} records with data`);
             return true;
         }
         catch (error) {
-            this.errorHandler.logSelectionSetError(SelectionSetErrorType.GRAPHQL_ERROR, `Error validating relationship field population: ${error instanceof Error ? error.message : String(error)}`, config, undefined, {
-                method: 'validateRelationshipFieldPopulation',
-                originalError: {
-                    message: error instanceof Error ? error.message : String(error),
-                    stack: error instanceof Error ? error.stack : undefined
-                }
-            });
             console.error('AmplifyModelService: Error validating relationship field population:', error);
-            // In case of validation error, be permissive and return true to avoid blocking the UI
-            console.warn('AmplifyModelService: Validation error occurred, allowing relationship to proceed');
+            // Be permissive on validation errors
             return true;
         }
     }
-    /**
-     * Check if a record has nested relationship data based on field patterns
-     * This helps validate cases where selection sets use nested field access like "table.id", "table.name"
-     */
-    hasNestedRelationshipData(record, fieldName) {
-        if (!record || typeof record !== 'object') {
-            return false;
-        }
-        // Look for any fields that start with the relationship field name followed by a dot
-        const nestedFieldPattern = `${fieldName}.`;
-        for (const key of Object.keys(record)) {
-            if (key.startsWith(nestedFieldPattern)) {
-                const value = record[key];
-                if (value !== undefined && value !== null) {
-                    console.log(`AmplifyModelService: Found nested relationship data: ${key} = ${value}`);
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    /**
-     * Check if a record has any field that might be related to the relationship field
-     * This is a very permissive check for debugging purposes
-     */
-    hasAnyRelatedField(record, fieldName) {
-        if (!record || typeof record !== 'object') {
-            return false;
-        }
-        const fieldNameLower = fieldName.toLowerCase();
-        for (const key of Object.keys(record)) {
-            const keyLower = key.toLowerCase();
-            // Check if the key contains the field name or vice versa
-            if (keyLower.includes(fieldNameLower) || fieldNameLower.includes(keyLower)) {
-                const value = record[key];
-                if (value !== undefined && value !== null) {
-                    console.log(`AmplifyModelService: Found potentially related field: ${key} = ${value}`);
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
     /**
      * Log query attempt details
      */
@@ -5243,13 +5150,31 @@ class ConfigurationsComponent {
     qcs = inject(QuestionControlService);
     ams = inject(AmplifyModelService);
     snackBar = inject(MatSnackBar);
+    fb = inject(FormBuilder);
     // Track which models exist in the schema
     hasTableConfig = false;
     hasFormView = false;
     hasListView = false;
     hasFieldConfig = false;
+    // Relationship configuration management
+    relationshipConfigs = [];
+    showAddRelationshipConfig = false;
+    editingRelationshipConfig = null;
+    relationshipConfigForm;
+    availableModels = [];
+    availableFields = [];
+    constructor() {
+        this.relationshipConfigForm = this.fb.group({
+            relationshipModel: ['', Validators.required],
+            fieldName: ['', Validators.required],
+            selectionSet: ['', Validators.required],
+            description: ['']
+        });
+    }
     ngOnInit() {
         this.checkAvailableModels();
+        this.loadRelationshipConfigs();
+        this.loadAvailableModels();
     }
     get outputs() {
         return this.amplifyOutputs || this.qcs.outputs;
@@ -5540,21 +5465,256 @@ return fields;
         }
         return 'text'; // Default fallback
     }
+    // Relationship Configuration Management Methods
+    loadAvailableModels() {
+        if (!this.outputs || !this.outputs.data || !this.outputs.data.model_introspection) {
+            console.warn('ConfigurationsComponent: No model introspection data available for relationship configs');
+            return;
+        }
+        const models = this.outputs.data.model_introspection.models;
+        this.availableModels = Object.keys(models).sort();
+        console.log('ConfigurationsComponent: Available models for relationship configs:', this.availableModels);
+    }
+    onRelationshipModelChange(event) {
+        const selectedModel = event.value;
+        this.loadAvailableFields(selectedModel);
+        // Reset field name when model changes
+        this.relationshipConfigForm.patchValue({ fieldName: '' });
+    }
+    loadAvailableFields(modelName) {
+        if (!this.outputs || !this.outputs.data || !this.outputs.data.model_introspection) {
+            this.availableFields = [];
+            return;
+        }
+        const models = this.outputs.data.model_introspection.models;
+        const modelData = models[modelName];
+        if (!modelData || !modelData.fields) {
+            this.availableFields = [];
+            return;
+        }
+        // Get relationship fields from the selected model
+        this.availableFields = Object.values(modelData.fields)
+            .filter((field) => {
+            // Include relationship fields (fields that reference other models)
+            return field.association && field.association.connectionType;
+        })
+            .map((field) => ({
+            name: field.name,
+            label: this.formatFieldLabel(field.name),
+            type: field.type
+        }))
+            .sort((a, b) => a.label.localeCompare(b.label));
+        console.log('ConfigurationsComponent: Available relationship fields for', modelName, ':', this.availableFields);
+    }
+    loadRelationshipConfigs() {
+        // Load from localStorage for now (could be extended to use Amplify model later)
+        const stored = localStorage.getItem('snteam-relationship-configs');
+        if (stored) {
+            try {
+                const config = JSON.parse(stored);
+                this.relationshipConfigs = (config.relationships || []).map(rel => ({
+                    ...rel,
+                    id: rel.id || this.generateId()
+                }));
+                console.log('ConfigurationsComponent: Loaded relationship configs:', this.relationshipConfigs);
+            }
+            catch (error) {
+                console.error('ConfigurationsComponent: Error loading relationship configs:', error);
+                this.relationshipConfigs = [];
+            }
+        }
+        else {
+            this.relationshipConfigs = [];
+        }
+    }
+    saveRelationshipConfigsToStorage() {
+        const config = {
+            relationships: this.relationshipConfigs.map(({ id, ...config }) => config),
+            defaultSelectionSet: ['id'],
+            enableFallback: true
+        };
+        localStorage.setItem('snteam-relationship-configs', JSON.stringify(config));
+        // Update the AmplifyModelService with the new configuration
+        this.ams.setRelationshipConfig(config);
+        console.log('ConfigurationsComponent: Saved relationship configs to storage and updated service');
+    }
+    saveRelationshipConfig() {
+        if (!this.relationshipConfigForm.valid) {
+            this.snackBar.open('Please fill in all required fields', 'Dismiss', { duration: 3000 });
+            return;
+        }
+        const formValue = this.relationshipConfigForm.value;
+        // Parse selection set from textarea (one field per line)
+        const selectionSet = formValue.selectionSet
+            .split('\n')
+            .map((line) => line.trim())
+            .filter((line) => line.length > 0);
+        const config = {
+            relationshipModel: formValue.relationshipModel,
+            fieldName: formValue.fieldName,
+            selectionSet: selectionSet,
+            description: formValue.description || undefined,
+            id: this.editingRelationshipConfig?.id || this.generateId()
+        };
+        if (this.editingRelationshipConfig) {
+            // Update existing configuration
+            const index = this.relationshipConfigs.findIndex(c => c.id === this.editingRelationshipConfig.id);
+            if (index >= 0) {
+                this.relationshipConfigs[index] = config;
+                this.snackBar.open('Relationship configuration updated successfully', 'Dismiss', { duration: 3000 });
+            }
+        }
+        else {
+            // Check for duplicate configuration
+            const existing = this.relationshipConfigs.find(c => c.relationshipModel === config.relationshipModel &&
+                c.fieldName === config.fieldName);
+            if (existing) {
+                this.snackBar.open('Configuration for this relationship already exists', 'Dismiss', { duration: 3000 });
+                return;
+            }
+            // Add new configuration
+            this.relationshipConfigs.push(config);
+            this.snackBar.open('Relationship configuration added successfully', 'Dismiss', { duration: 3000 });
+        }
+        this.saveRelationshipConfigsToStorage();
+        this.cancelRelationshipConfigEdit();
+    }
+    editRelationshipConfig(config) {
+        this.editingRelationshipConfig = config;
+        this.showAddRelationshipConfig = true;
+        // Load fields for the selected model
+        this.loadAvailableFields(config.relationshipModel);
+        // Populate form with existing values
+        this.relationshipConfigForm.patchValue({
+            relationshipModel: config.relationshipModel,
+            fieldName: config.fieldName,
+            selectionSet: config.selectionSet.join('\n'),
+            description: config.description || ''
+        });
+    }
+    deleteRelationshipConfig(config) {
+        const index = this.relationshipConfigs.findIndex(c => c.id === config.id);
+        if (index >= 0) {
+            this.relationshipConfigs.splice(index, 1);
+            this.saveRelationshipConfigsToStorage();
+            this.snackBar.open('Relationship configuration deleted', 'Dismiss', { duration: 3000 });
+        }
+    }
+    generateId() {
+        return 'config_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+    }
+    cancelRelationshipConfigEdit() {
+        this.showAddRelationshipConfig = false;
+        this.editingRelationshipConfig = null;
+        this.relationshipConfigForm.reset();
+        this.availableFields = [];
+    }
+    loadDefaultRelationshipConfigs() {
+        // Load some sensible default configurations
+        const defaultConfigs = [
+            {
+                id: this.generateId(),
+                relationshipModel: 'ListView',
+                fieldName: 'table',
+                selectionSet: [
+                    'id',
+                    'table',
+                    'table.id',
+                    'table.name',
+                    'table.title',
+                    'table.description'
+                ],
+                description: 'Configuration for ListView -> Table relationship'
+            },
+            {
+                id: this.generateId(),
+                relationshipModel: 'FormViewField',
+                fieldName: 'formView',
+                selectionSet: [
+                    'id',
+                    'formView',
+                    'formView.id',
+                    'formView.name',
+                    'formView.title',
+                    'formView.description'
+                ],
+                description: 'Configuration for FormViewField -> FormView relationship'
+            },
+            {
+                id: this.generateId(),
+                relationshipModel: 'ServiceCustomer',
+                fieldName: 'service',
+                selectionSet: [
+                    'id',
+                    'service',
+                    'service.id',
+                    'service.title',
+                    'service.cost',
+                    'service.price'
+                ],
+                description: 'Configuration for ServiceCustomer -> Service relationship'
+            },
+            {
+                id: this.generateId(),
+                relationshipModel: 'ServiceCustomer',
+                fieldName: 'customer',
+                selectionSet: [
+                    'id',
+                    'customer',
+                    'customer.id',
+                    'customer.name',
+                    'customer.contact_preference'
+                ],
+                description: 'Configuration for ServiceCustomer -> Customer relationship'
+            }
+        ];
+        // Only add configs that don't already exist
+        let addedCount = 0;
+        for (const defaultConfig of defaultConfigs) {
+            const existing = this.relationshipConfigs.find(c => c.relationshipModel === defaultConfig.relationshipModel &&
+                c.fieldName === defaultConfig.fieldName);
+            if (!existing) {
+                this.relationshipConfigs.push(defaultConfig);
+                addedCount++;
+            }
+        }
+        if (addedCount > 0) {
+            this.saveRelationshipConfigsToStorage();
+            this.snackBar.open(`Added ${addedCount} default relationship configurations`, 'Dismiss', { duration: 3000 });
+        }
+        else {
+            this.snackBar.open('All default configurations already exist', 'Dismiss', { duration: 3000 });
+        }
+    }
+    clearAllRelationshipConfigs() {
+        if (this.relationshipConfigs.length === 0) {
+            this.snackBar.open('No relationship configurations to clear', 'Dismiss', { duration: 3000 });
+            return;
+        }
+        this.relationshipConfigs = [];
+        this.saveRelationshipConfigsToStorage();
+        this.snackBar.open('All relationship configurations cleared', 'Dismiss', { duration: 3000 });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigurationsComponent, isStandalone: true, selector: "snteam-configurations", inputs: { amplifyOutputs: "amplifyOutputs" }, ngImport: i0, template: "<div class=\"configurations-container\">\n  <h2>System Configurations</h2>\n  \n  <mat-accordion multi=\"true\">\n    \n    <!-- Table Configs Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>table_chart</mat-icon>\n          <span class=\"panel-title\">Table Configs</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Manage table configurations and settings\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasTableConfig) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"accent\" (click)=\"populateDefaultTableConfigs()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Populate Default Table Configs\n            </button>\n            <button mat-raised-button color=\"warn\" (click)=\"deleteTableConfigs()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Table Configs\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'TableConfig'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>TableConfig Model Not Found</h3>\n              <p>The TableConfig model is not available in your Amplify schema. Please add it to your data model to manage table configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- Form Views Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>dynamic_form</mat-icon>\n          <span class=\"panel-title\">Form Views</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Configure custom form layouts and field selections\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasFormView) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"warn\" (click)=\"deleteFormViews()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Form Views\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'FormView'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>FormView Model Not Found</h3>\n              <p>The FormView model is not available in your Amplify schema. Please add it to your data model to create custom form configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- List Views Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>view_list</mat-icon>\n          <span class=\"panel-title\">List Views</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Customize list displays and column configurations\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasListView) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"warn\" (click)=\"deleteListViews()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All List Views\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'ListView'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>ListView Model Not Found</h3>\n              <p>The ListView model is not available in your Amplify schema. Please add it to your data model to create custom list view configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- Field Configs Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>settings</mat-icon>\n          <span class=\"panel-title\">Field Configs</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Configure field behavior, validation, and choices\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasFieldConfig) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"accent\" (click)=\"populateDefaultFieldConfigs()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Populate Default Field Configs\n            </button>\n            <button mat-raised-button color=\"warn\" (click)=\"deleteFieldConfigs()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Field Configs\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'FieldConfig'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>FieldConfig Model Not Found</h3>\n              <p>The FieldConfig model is not available in your Amplify schema. Please add it to your data model to configure field behavior and validation.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n  </mat-accordion>\n</div>", styles: [".configurations-container{padding:20px;max-width:1200px;margin:0 auto}.configurations-container h2{margin-bottom:24px;color:#333;font-weight:500}.mat-expansion-panel{margin-bottom:16px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.mat-expansion-panel-header{padding:16px 24px}.panel-title{margin-left:12px;font-weight:500;font-size:16px}.mat-panel-description{color:#666;font-size:14px}.panel-content{padding:16px 24px 24px;background-color:#fafafa}.error-card{text-align:center;padding:24px;background-color:#fff;border:2px dashed #ddd;border-radius:8px}.error-card mat-card-content{padding:0}.error-icon{font-size:48px;width:48px;height:48px;color:#ff9800;margin-bottom:16px}.error-card h3{margin:0 0 12px;color:#333;font-weight:500}.error-card p{color:#666;line-height:1.5;max-width:500px;margin:0 auto 20px}.help-button{margin-top:8px}.help-button mat-icon{margin-right:8px}.section-actions{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e0e0e0;display:flex;gap:12px;flex-wrap:wrap}.generate-button{background-color:#2196f3;color:#fff}.generate-button mat-icon{margin-right:8px}.delete-button{background-color:#f44336;color:#fff}.delete-button mat-icon{margin-right:8px}.populate-button mat-icon{margin-right:8px}@media (max-width: 768px){.configurations-container{padding:16px}.panel-content{padding:12px 16px 16px}.error-card{padding:16px}.error-icon{font-size:36px;width:36px;height:36px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i1$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$5.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$3.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: MatSnackBarModule }, { kind: "component", type: ListViewComponent, selector: "snteam-list-view", inputs: ["modelName", "customItemTemplate", "hideNewButton", "title", "useRouter", "showRowActions", "showDeleteAction", "customRowActions"], outputs: ["itemClick", "newClick", "itemsLoaded", "itemDeleted"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigurationsComponent, isStandalone: true, selector: "snteam-configurations", inputs: { amplifyOutputs: "amplifyOutputs" }, ngImport: i0, template: "<div class=\"configurations-container\">\n  <h2>System Configurations</h2>\n  \n  <mat-accordion multi=\"true\">\n    \n    <!-- Table Configs Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>table_chart</mat-icon>\n          <span class=\"panel-title\">Table Configs</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Manage table configurations and settings\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasTableConfig) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"accent\" (click)=\"populateDefaultTableConfigs()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Populate Default Table Configs\n            </button>\n            <button mat-raised-button color=\"warn\" (click)=\"deleteTableConfigs()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Table Configs\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'TableConfig'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>TableConfig Model Not Found</h3>\n              <p>The TableConfig model is not available in your Amplify schema. Please add it to your data model to manage table configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- Form Views Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>dynamic_form</mat-icon>\n          <span class=\"panel-title\">Form Views</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Configure custom form layouts and field selections\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasFormView) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"warn\" (click)=\"deleteFormViews()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Form Views\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'FormView'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>FormView Model Not Found</h3>\n              <p>The FormView model is not available in your Amplify schema. Please add it to your data model to create custom form configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- List Views Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>view_list</mat-icon>\n          <span class=\"panel-title\">List Views</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Customize list displays and column configurations\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasListView) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"warn\" (click)=\"deleteListViews()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All List Views\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'ListView'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>ListView Model Not Found</h3>\n              <p>The ListView model is not available in your Amplify schema. Please add it to your data model to create custom list view configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- Field Configs Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>settings</mat-icon>\n          <span class=\"panel-title\">Field Configs</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Configure field behavior, validation, and choices\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasFieldConfig) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"accent\" (click)=\"populateDefaultFieldConfigs()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Populate Default Field Configs\n            </button>\n            <button mat-raised-button color=\"warn\" (click)=\"deleteFieldConfigs()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Field Configs\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'FieldConfig'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>FieldConfig Model Not Found</h3>\n              <p>The FieldConfig model is not available in your Amplify schema. Please add it to your data model to configure field behavior and validation.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- Relationship Configs Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>link</mat-icon>\n          <span class=\"panel-title\">Relationship Configs</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Configure GraphQL selection sets for relationship queries\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        <div class=\"section-actions\">\n          <button mat-raised-button color=\"primary\" (click)=\"showAddRelationshipConfig = !showAddRelationshipConfig\" class=\"add-button\">\n            <mat-icon>{{ showAddRelationshipConfig ? 'close' : 'add' }}</mat-icon>\n            {{ showAddRelationshipConfig ? 'Cancel' : 'Add Relationship Config' }}\n          </button>\n          <button mat-raised-button color=\"accent\" (click)=\"loadDefaultRelationshipConfigs()\" class=\"populate-button\">\n            <mat-icon>auto_fix_high</mat-icon>\n            Load Default Configs\n          </button>\n          <button mat-raised-button color=\"warn\" (click)=\"clearAllRelationshipConfigs()\" class=\"delete-button\">\n            <mat-icon>delete</mat-icon>\n            Clear All Configs\n          </button>\n        </div>\n\n        <!-- Add/Edit Relationship Config Form -->\n        @if (showAddRelationshipConfig) {\n          <mat-card class=\"config-form-card\">\n            <mat-card-header>\n              <mat-card-title>\n                <mat-icon>{{ editingRelationshipConfig ? 'edit' : 'add' }}</mat-icon>\n                {{ editingRelationshipConfig ? 'Edit' : 'Add' }} Relationship Configuration\n              </mat-card-title>\n            </mat-card-header>\n            <mat-card-content>\n              <form [formGroup]=\"relationshipConfigForm\" (ngSubmit)=\"saveRelationshipConfig()\">\n                <div class=\"form-row\">\n                  <mat-form-field appearance=\"outline\" class=\"full-width\">\n                    <mat-label>Relationship Model</mat-label>\n                    <mat-select formControlName=\"relationshipModel\" (selectionChange)=\"onRelationshipModelChange($event)\">\n                      @for (model of availableModels; track model) {\n                        <mat-option [value]=\"model\">{{ model }}</mat-option>\n                      }\n                    </mat-select>\n                    <mat-hint>The model that contains the relationship field</mat-hint>\n                  </mat-form-field>\n                </div>\n\n                <div class=\"form-row\">\n                  <mat-form-field appearance=\"outline\" class=\"full-width\">\n                    <mat-label>Field Name</mat-label>\n                    <mat-select formControlName=\"fieldName\">\n                      @for (field of availableFields; track field.name) {\n                        <mat-option [value]=\"field.name\">{{ field.label }}</mat-option>\n                      }\n                    </mat-select>\n                    <mat-hint>The relationship field in the selected model</mat-hint>\n                  </mat-form-field>\n                </div>\n\n                <div class=\"form-row\">\n                  <mat-form-field appearance=\"outline\" class=\"full-width\">\n                    <mat-label>Selection Set</mat-label>\n                    <textarea \n                      matInput \n                      formControlName=\"selectionSet\" \n                      rows=\"6\"\n                      placeholder=\"Enter GraphQL selection fields, one per line:&#10;id&#10;table&#10;table.id&#10;table.name&#10;table.title\">\n                    </textarea>\n                    <mat-hint>GraphQL fields to select for this relationship (one per line)</mat-hint>\n                  </mat-form-field>\n                </div>\n\n                <div class=\"form-row\">\n                  <mat-form-field appearance=\"outline\" class=\"full-width\">\n                    <mat-label>Description</mat-label>\n                    <input matInput formControlName=\"description\" placeholder=\"Optional description for this configuration\">\n                    <mat-hint>Optional description to document this configuration</mat-hint>\n                  </mat-form-field>\n                </div>\n\n                <div class=\"form-actions\">\n                  <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"!relationshipConfigForm.valid\">\n                    <mat-icon>save</mat-icon>\n                    {{ editingRelationshipConfig ? 'Update' : 'Save' }} Configuration\n                  </button>\n                  <button mat-button type=\"button\" (click)=\"cancelRelationshipConfigEdit()\">\n                    <mat-icon>cancel</mat-icon>\n                    Cancel\n                  </button>\n                </div>\n              </form>\n            </mat-card-content>\n          </mat-card>\n        }\n\n        <!-- Current Relationship Configurations -->\n        <div class=\"current-configs\">\n          <h3>Current Relationship Configurations</h3>\n          @if (relationshipConfigs.length === 0) {\n            <mat-card class=\"empty-state-card\">\n              <mat-card-content>\n                <mat-icon class=\"empty-icon\">link_off</mat-icon>\n                <h4>No Relationship Configurations</h4>\n                <p>Add relationship configurations to control GraphQL selection sets for relationship queries.</p>\n              </mat-card-content>\n            </mat-card>\n          } @else {\n            <div class=\"configs-list\">\n              @for (config of relationshipConfigs; track config.id) {\n                <mat-card class=\"config-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ config.relationshipModel }} \u2192 {{ config.fieldName }}</mat-card-title>\n                    <mat-card-subtitle>{{ config.description || 'No description' }}</mat-card-subtitle>\n                    <div class=\"card-actions\">\n                      <button mat-icon-button (click)=\"editRelationshipConfig(config)\" matTooltip=\"Edit Configuration\">\n                        <mat-icon>edit</mat-icon>\n                      </button>\n                      <button mat-icon-button color=\"warn\" (click)=\"deleteRelationshipConfig(config)\" matTooltip=\"Delete Configuration\">\n                        <mat-icon>delete</mat-icon>\n                      </button>\n                    </div>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <div class=\"selection-set\">\n                      <strong>Selection Set:</strong>\n                      <div class=\"selection-fields\">\n                        @for (field of config.selectionSet; track field) {\n                          <span class=\"field-chip\">{{ field }}</span>\n                        }\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Configuration Status -->\n        <div class=\"config-status\">\n          <mat-card class=\"status-card\">\n            <mat-card-content>\n              <div class=\"status-info\">\n                <mat-icon class=\"status-icon\">info</mat-icon>\n                <div class=\"status-text\">\n                  <strong>Active Configurations: {{ relationshipConfigs.length }}</strong>\n                  <p>These configurations control how relationship data is queried from your GraphQL API.</p>\n                </div>\n              </div>\n            </mat-card-content>\n          </mat-card>\n        </div>\n      </div>\n    </mat-expansion-panel>\n\n  </mat-accordion>\n</div>", styles: [".configurations-container{padding:20px;max-width:1200px;margin:0 auto}.configurations-container h2{margin-bottom:24px;color:#333;font-weight:500}.mat-expansion-panel{margin-bottom:16px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.mat-expansion-panel-header{padding:16px 24px}.panel-title{margin-left:12px;font-weight:500;font-size:16px}.mat-panel-description{color:#666;font-size:14px}.panel-content{padding:16px 24px 24px;background-color:#fafafa}.error-card{text-align:center;padding:24px;background-color:#fff;border:2px dashed #ddd;border-radius:8px}.error-card mat-card-content{padding:0}.error-icon{font-size:48px;width:48px;height:48px;color:#ff9800;margin-bottom:16px}.error-card h3{margin:0 0 12px;color:#333;font-weight:500}.error-card p{color:#666;line-height:1.5;max-width:500px;margin:0 auto 20px}.help-button{margin-top:8px}.help-button mat-icon{margin-right:8px}.section-actions{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e0e0e0;display:flex;gap:12px;flex-wrap:wrap}.generate-button{background-color:#2196f3;color:#fff}.generate-button mat-icon{margin-right:8px}.delete-button{background-color:#f44336;color:#fff}.delete-button mat-icon{margin-right:8px}.populate-button mat-icon{margin-right:8px}@media (max-width: 768px){.configurations-container{padding:16px}.panel-content{padding:12px 16px 16px}.error-card{padding:16px}.error-icon{font-size:36px;width:36px;height:36px}}.add-button{background-color:#4caf50;color:#fff}.add-button mat-icon{margin-right:8px}.config-form-card{margin:16px 0;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a}.config-form-card mat-card-header{background-color:#f5f5f5;border-radius:8px 8px 0 0;padding:16px 24px}.config-form-card mat-card-title{display:flex;align-items:center;font-size:18px;font-weight:500;color:#333}.config-form-card mat-card-title mat-icon{margin-right:12px;color:#2196f3}.config-form-card mat-card-content{padding:24px}.form-row{margin-bottom:20px}.full-width{width:100%}.form-actions{display:flex;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid #e0e0e0}.form-actions button mat-icon{margin-right:8px}.current-configs{margin-top:24px}.current-configs h3{margin-bottom:16px;color:#333;font-weight:500}.empty-state-card{text-align:center;padding:32px;background-color:#fff;border:2px dashed #ddd;border-radius:8px}.empty-state-card mat-card-content{padding:0}.empty-icon{font-size:48px;width:48px;height:48px;color:#bbb;margin-bottom:16px}.empty-state-card h4{margin:0 0 12px;color:#333;font-weight:500}.empty-state-card p{margin:0;color:#666;line-height:1.5}.configs-list{display:grid;gap:16px}.config-card{background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease}.config-card:hover{box-shadow:0 4px 8px #00000026}.config-card mat-card-header{padding:16px 20px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}.config-card mat-card-title{font-size:16px;font-weight:500;color:#333;margin:0}.config-card mat-card-subtitle{font-size:14px;color:#666;margin:4px 0 0}.card-actions{display:flex;gap:4px}.config-card mat-card-content{padding:16px 20px}.selection-set{margin:0}.selection-set strong{display:block;margin-bottom:8px;color:#333;font-size:14px}.selection-fields{display:flex;flex-wrap:wrap;gap:6px}.field-chip{display:inline-block;padding:4px 8px;background-color:#e3f2fd;color:#1976d2;border-radius:12px;font-size:12px;font-family:Roboto Mono,monospace;border:1px solid #bbdefb}.config-status{margin-top:24px}.status-card{background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.status-card mat-card-content{padding:16px 20px}.status-info{display:flex;align-items:flex-start;gap:12px}.status-icon{color:#2196f3;margin-top:2px}.status-text strong{display:block;margin-bottom:4px;color:#333;font-size:16px}.status-text p{margin:0;color:#666;font-size:14px;line-height:1.5}@media (max-width: 768px){.config-form-card mat-card-content{padding:16px}.form-actions{flex-direction:column}.form-actions button{width:100%}.config-card mat-card-header{flex-direction:column;align-items:flex-start;gap:8px}.card-actions{align-self:flex-end}.selection-fields{gap:4px}.field-chip{font-size:11px;padding:3px 6px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i4$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$3.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: i3$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "component", type: ListViewComponent, selector: "snteam-list-view", inputs: ["modelName", "customItemTemplate", "hideNewButton", "title", "useRouter", "showRowActions", "showDeleteAction", "customRowActions"], outputs: ["itemClick", "newClick", "itemsLoaded", "itemDeleted"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurationsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'snteam-configurations', standalone: true, imports: [
                         CommonModule,
+                        ReactiveFormsModule,
                         MatExpansionModule,
                         MatIconModule,
                         MatCardModule,
                         MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatTooltipModule,
                         MatSnackBarModule,
                         ListViewComponent
-                    ], template: "<div class=\"configurations-container\">\n  <h2>System Configurations</h2>\n  \n  <mat-accordion multi=\"true\">\n    \n    <!-- Table Configs Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>table_chart</mat-icon>\n          <span class=\"panel-title\">Table Configs</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Manage table configurations and settings\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasTableConfig) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"accent\" (click)=\"populateDefaultTableConfigs()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Populate Default Table Configs\n            </button>\n            <button mat-raised-button color=\"warn\" (click)=\"deleteTableConfigs()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Table Configs\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'TableConfig'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>TableConfig Model Not Found</h3>\n              <p>The TableConfig model is not available in your Amplify schema. Please add it to your data model to manage table configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- Form Views Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>dynamic_form</mat-icon>\n          <span class=\"panel-title\">Form Views</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Configure custom form layouts and field selections\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasFormView) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"warn\" (click)=\"deleteFormViews()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Form Views\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'FormView'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>FormView Model Not Found</h3>\n              <p>The FormView model is not available in your Amplify schema. Please add it to your data model to create custom form configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- List Views Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>view_list</mat-icon>\n          <span class=\"panel-title\">List Views</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Customize list displays and column configurations\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasListView) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"warn\" (click)=\"deleteListViews()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All List Views\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'ListView'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>ListView Model Not Found</h3>\n              <p>The ListView model is not available in your Amplify schema. Please add it to your data model to create custom list view configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- Field Configs Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>settings</mat-icon>\n          <span class=\"panel-title\">Field Configs</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Configure field behavior, validation, and choices\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasFieldConfig) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"accent\" (click)=\"populateDefaultFieldConfigs()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Populate Default Field Configs\n            </button>\n            <button mat-raised-button color=\"warn\" (click)=\"deleteFieldConfigs()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Field Configs\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'FieldConfig'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>FieldConfig Model Not Found</h3>\n              <p>The FieldConfig model is not available in your Amplify schema. Please add it to your data model to configure field behavior and validation.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n  </mat-accordion>\n</div>", styles: [".configurations-container{padding:20px;max-width:1200px;margin:0 auto}.configurations-container h2{margin-bottom:24px;color:#333;font-weight:500}.mat-expansion-panel{margin-bottom:16px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.mat-expansion-panel-header{padding:16px 24px}.panel-title{margin-left:12px;font-weight:500;font-size:16px}.mat-panel-description{color:#666;font-size:14px}.panel-content{padding:16px 24px 24px;background-color:#fafafa}.error-card{text-align:center;padding:24px;background-color:#fff;border:2px dashed #ddd;border-radius:8px}.error-card mat-card-content{padding:0}.error-icon{font-size:48px;width:48px;height:48px;color:#ff9800;margin-bottom:16px}.error-card h3{margin:0 0 12px;color:#333;font-weight:500}.error-card p{color:#666;line-height:1.5;max-width:500px;margin:0 auto 20px}.help-button{margin-top:8px}.help-button mat-icon{margin-right:8px}.section-actions{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e0e0e0;display:flex;gap:12px;flex-wrap:wrap}.generate-button{background-color:#2196f3;color:#fff}.generate-button mat-icon{margin-right:8px}.delete-button{background-color:#f44336;color:#fff}.delete-button mat-icon{margin-right:8px}.populate-button mat-icon{margin-right:8px}@media (max-width: 768px){.configurations-container{padding:16px}.panel-content{padding:12px 16px 16px}.error-card{padding:16px}.error-icon{font-size:36px;width:36px;height:36px}}\n"] }]
-        }], propDecorators: { amplifyOutputs: [{
+                    ], template: "<div class=\"configurations-container\">\n  <h2>System Configurations</h2>\n  \n  <mat-accordion multi=\"true\">\n    \n    <!-- Table Configs Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>table_chart</mat-icon>\n          <span class=\"panel-title\">Table Configs</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Manage table configurations and settings\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasTableConfig) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"accent\" (click)=\"populateDefaultTableConfigs()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Populate Default Table Configs\n            </button>\n            <button mat-raised-button color=\"warn\" (click)=\"deleteTableConfigs()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Table Configs\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'TableConfig'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>TableConfig Model Not Found</h3>\n              <p>The TableConfig model is not available in your Amplify schema. Please add it to your data model to manage table configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- Form Views Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>dynamic_form</mat-icon>\n          <span class=\"panel-title\">Form Views</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Configure custom form layouts and field selections\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasFormView) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"warn\" (click)=\"deleteFormViews()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Form Views\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'FormView'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>FormView Model Not Found</h3>\n              <p>The FormView model is not available in your Amplify schema. Please add it to your data model to create custom form configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- List Views Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>view_list</mat-icon>\n          <span class=\"panel-title\">List Views</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Customize list displays and column configurations\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasListView) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"warn\" (click)=\"deleteListViews()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All List Views\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'ListView'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>ListView Model Not Found</h3>\n              <p>The ListView model is not available in your Amplify schema. Please add it to your data model to create custom list view configurations.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- Field Configs Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>settings</mat-icon>\n          <span class=\"panel-title\">Field Configs</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Configure field behavior, validation, and choices\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        @if (hasFieldConfig) {\n          <div class=\"section-actions\">\n            <button mat-raised-button color=\"accent\" (click)=\"populateDefaultFieldConfigs()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Populate Default Field Configs\n            </button>\n            <button mat-raised-button color=\"warn\" (click)=\"deleteFieldConfigs()\" class=\"delete-button\">\n              <mat-icon>delete</mat-icon>\n              Delete All Field Configs\n            </button>\n          </div>\n          <snteam-list-view \n            [modelName]=\"'FieldConfig'\"\n            [useRouter]=\"true\"\n            [showDeleteAction]=\"true\">\n          </snteam-list-view>\n        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>FieldConfig Model Not Found</h3>\n              <p>The FieldConfig model is not available in your Amplify schema. Please add it to your data model to configure field behavior and validation.</p>\n              <button mat-raised-button color=\"primary\" class=\"help-button\">\n                <mat-icon>help</mat-icon>\n                View Documentation\n              </button>\n            </mat-card-content>\n          </mat-card>\n        }\n      </div>\n    </mat-expansion-panel>\n\n    <!-- Relationship Configs Section -->\n    <mat-expansion-panel>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>link</mat-icon>\n          <span class=\"panel-title\">Relationship Configs</span>\n        </mat-panel-title>\n        <mat-panel-description>\n          Configure GraphQL selection sets for relationship queries\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n      \n      <div class=\"panel-content\">\n        <div class=\"section-actions\">\n          <button mat-raised-button color=\"primary\" (click)=\"showAddRelationshipConfig = !showAddRelationshipConfig\" class=\"add-button\">\n            <mat-icon>{{ showAddRelationshipConfig ? 'close' : 'add' }}</mat-icon>\n            {{ showAddRelationshipConfig ? 'Cancel' : 'Add Relationship Config' }}\n          </button>\n          <button mat-raised-button color=\"accent\" (click)=\"loadDefaultRelationshipConfigs()\" class=\"populate-button\">\n            <mat-icon>auto_fix_high</mat-icon>\n            Load Default Configs\n          </button>\n          <button mat-raised-button color=\"warn\" (click)=\"clearAllRelationshipConfigs()\" class=\"delete-button\">\n            <mat-icon>delete</mat-icon>\n            Clear All Configs\n          </button>\n        </div>\n\n        <!-- Add/Edit Relationship Config Form -->\n        @if (showAddRelationshipConfig) {\n          <mat-card class=\"config-form-card\">\n            <mat-card-header>\n              <mat-card-title>\n                <mat-icon>{{ editingRelationshipConfig ? 'edit' : 'add' }}</mat-icon>\n                {{ editingRelationshipConfig ? 'Edit' : 'Add' }} Relationship Configuration\n              </mat-card-title>\n            </mat-card-header>\n            <mat-card-content>\n              <form [formGroup]=\"relationshipConfigForm\" (ngSubmit)=\"saveRelationshipConfig()\">\n                <div class=\"form-row\">\n                  <mat-form-field appearance=\"outline\" class=\"full-width\">\n                    <mat-label>Relationship Model</mat-label>\n                    <mat-select formControlName=\"relationshipModel\" (selectionChange)=\"onRelationshipModelChange($event)\">\n                      @for (model of availableModels; track model) {\n                        <mat-option [value]=\"model\">{{ model }}</mat-option>\n                      }\n                    </mat-select>\n                    <mat-hint>The model that contains the relationship field</mat-hint>\n                  </mat-form-field>\n                </div>\n\n                <div class=\"form-row\">\n                  <mat-form-field appearance=\"outline\" class=\"full-width\">\n                    <mat-label>Field Name</mat-label>\n                    <mat-select formControlName=\"fieldName\">\n                      @for (field of availableFields; track field.name) {\n                        <mat-option [value]=\"field.name\">{{ field.label }}</mat-option>\n                      }\n                    </mat-select>\n                    <mat-hint>The relationship field in the selected model</mat-hint>\n                  </mat-form-field>\n                </div>\n\n                <div class=\"form-row\">\n                  <mat-form-field appearance=\"outline\" class=\"full-width\">\n                    <mat-label>Selection Set</mat-label>\n                    <textarea \n                      matInput \n                      formControlName=\"selectionSet\" \n                      rows=\"6\"\n                      placeholder=\"Enter GraphQL selection fields, one per line:&#10;id&#10;table&#10;table.id&#10;table.name&#10;table.title\">\n                    </textarea>\n                    <mat-hint>GraphQL fields to select for this relationship (one per line)</mat-hint>\n                  </mat-form-field>\n                </div>\n\n                <div class=\"form-row\">\n                  <mat-form-field appearance=\"outline\" class=\"full-width\">\n                    <mat-label>Description</mat-label>\n                    <input matInput formControlName=\"description\" placeholder=\"Optional description for this configuration\">\n                    <mat-hint>Optional description to document this configuration</mat-hint>\n                  </mat-form-field>\n                </div>\n\n                <div class=\"form-actions\">\n                  <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"!relationshipConfigForm.valid\">\n                    <mat-icon>save</mat-icon>\n                    {{ editingRelationshipConfig ? 'Update' : 'Save' }} Configuration\n                  </button>\n                  <button mat-button type=\"button\" (click)=\"cancelRelationshipConfigEdit()\">\n                    <mat-icon>cancel</mat-icon>\n                    Cancel\n                  </button>\n                </div>\n              </form>\n            </mat-card-content>\n          </mat-card>\n        }\n\n        <!-- Current Relationship Configurations -->\n        <div class=\"current-configs\">\n          <h3>Current Relationship Configurations</h3>\n          @if (relationshipConfigs.length === 0) {\n            <mat-card class=\"empty-state-card\">\n              <mat-card-content>\n                <mat-icon class=\"empty-icon\">link_off</mat-icon>\n                <h4>No Relationship Configurations</h4>\n                <p>Add relationship configurations to control GraphQL selection sets for relationship queries.</p>\n              </mat-card-content>\n            </mat-card>\n          } @else {\n            <div class=\"configs-list\">\n              @for (config of relationshipConfigs; track config.id) {\n                <mat-card class=\"config-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ config.relationshipModel }} \u2192 {{ config.fieldName }}</mat-card-title>\n                    <mat-card-subtitle>{{ config.description || 'No description' }}</mat-card-subtitle>\n                    <div class=\"card-actions\">\n                      <button mat-icon-button (click)=\"editRelationshipConfig(config)\" matTooltip=\"Edit Configuration\">\n                        <mat-icon>edit</mat-icon>\n                      </button>\n                      <button mat-icon-button color=\"warn\" (click)=\"deleteRelationshipConfig(config)\" matTooltip=\"Delete Configuration\">\n                        <mat-icon>delete</mat-icon>\n                      </button>\n                    </div>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <div class=\"selection-set\">\n                      <strong>Selection Set:</strong>\n                      <div class=\"selection-fields\">\n                        @for (field of config.selectionSet; track field) {\n                          <span class=\"field-chip\">{{ field }}</span>\n                        }\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Configuration Status -->\n        <div class=\"config-status\">\n          <mat-card class=\"status-card\">\n            <mat-card-content>\n              <div class=\"status-info\">\n                <mat-icon class=\"status-icon\">info</mat-icon>\n                <div class=\"status-text\">\n                  <strong>Active Configurations: {{ relationshipConfigs.length }}</strong>\n                  <p>These configurations control how relationship data is queried from your GraphQL API.</p>\n                </div>\n              </div>\n            </mat-card-content>\n          </mat-card>\n        </div>\n      </div>\n    </mat-expansion-panel>\n\n  </mat-accordion>\n</div>", styles: [".configurations-container{padding:20px;max-width:1200px;margin:0 auto}.configurations-container h2{margin-bottom:24px;color:#333;font-weight:500}.mat-expansion-panel{margin-bottom:16px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.mat-expansion-panel-header{padding:16px 24px}.panel-title{margin-left:12px;font-weight:500;font-size:16px}.mat-panel-description{color:#666;font-size:14px}.panel-content{padding:16px 24px 24px;background-color:#fafafa}.error-card{text-align:center;padding:24px;background-color:#fff;border:2px dashed #ddd;border-radius:8px}.error-card mat-card-content{padding:0}.error-icon{font-size:48px;width:48px;height:48px;color:#ff9800;margin-bottom:16px}.error-card h3{margin:0 0 12px;color:#333;font-weight:500}.error-card p{color:#666;line-height:1.5;max-width:500px;margin:0 auto 20px}.help-button{margin-top:8px}.help-button mat-icon{margin-right:8px}.section-actions{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e0e0e0;display:flex;gap:12px;flex-wrap:wrap}.generate-button{background-color:#2196f3;color:#fff}.generate-button mat-icon{margin-right:8px}.delete-button{background-color:#f44336;color:#fff}.delete-button mat-icon{margin-right:8px}.populate-button mat-icon{margin-right:8px}@media (max-width: 768px){.configurations-container{padding:16px}.panel-content{padding:12px 16px 16px}.error-card{padding:16px}.error-icon{font-size:36px;width:36px;height:36px}}.add-button{background-color:#4caf50;color:#fff}.add-button mat-icon{margin-right:8px}.config-form-card{margin:16px 0;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a}.config-form-card mat-card-header{background-color:#f5f5f5;border-radius:8px 8px 0 0;padding:16px 24px}.config-form-card mat-card-title{display:flex;align-items:center;font-size:18px;font-weight:500;color:#333}.config-form-card mat-card-title mat-icon{margin-right:12px;color:#2196f3}.config-form-card mat-card-content{padding:24px}.form-row{margin-bottom:20px}.full-width{width:100%}.form-actions{display:flex;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid #e0e0e0}.form-actions button mat-icon{margin-right:8px}.current-configs{margin-top:24px}.current-configs h3{margin-bottom:16px;color:#333;font-weight:500}.empty-state-card{text-align:center;padding:32px;background-color:#fff;border:2px dashed #ddd;border-radius:8px}.empty-state-card mat-card-content{padding:0}.empty-icon{font-size:48px;width:48px;height:48px;color:#bbb;margin-bottom:16px}.empty-state-card h4{margin:0 0 12px;color:#333;font-weight:500}.empty-state-card p{margin:0;color:#666;line-height:1.5}.configs-list{display:grid;gap:16px}.config-card{background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease}.config-card:hover{box-shadow:0 4px 8px #00000026}.config-card mat-card-header{padding:16px 20px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}.config-card mat-card-title{font-size:16px;font-weight:500;color:#333;margin:0}.config-card mat-card-subtitle{font-size:14px;color:#666;margin:4px 0 0}.card-actions{display:flex;gap:4px}.config-card mat-card-content{padding:16px 20px}.selection-set{margin:0}.selection-set strong{display:block;margin-bottom:8px;color:#333;font-size:14px}.selection-fields{display:flex;flex-wrap:wrap;gap:6px}.field-chip{display:inline-block;padding:4px 8px;background-color:#e3f2fd;color:#1976d2;border-radius:12px;font-size:12px;font-family:Roboto Mono,monospace;border:1px solid #bbdefb}.config-status{margin-top:24px}.status-card{background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.status-card mat-card-content{padding:16px 20px}.status-info{display:flex;align-items:flex-start;gap:12px}.status-icon{color:#2196f3;margin-top:2px}.status-text strong{display:block;margin-bottom:4px;color:#333;font-size:16px}.status-text p{margin:0;color:#666;font-size:14px;line-height:1.5}@media (max-width: 768px){.config-form-card mat-card-content{padding:16px}.form-actions{flex-direction:column}.form-actions button{width:100%}.config-card mat-card-header{flex-direction:column;align-items:flex-start;gap:8px}.card-actions{align-self:flex-end}.selection-fields{gap:4px}.field-chip{font-size:11px;padding:3px 6px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { amplifyOutputs: [{
                 type: Input
             }] } });