@snteam/amplify-angular-core 1.0.44 → 1.0.46

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

@@ -5518,15 +5518,15 @@ return fields;
     }
     loadRelationshipConfigs() {
         if (!this.hasRelationshipConfig) {
-            console.warn('ConfigurationsComponent: RelationshipConfig model not available, falling back to localStorage');
-            this.loadRelationshipConfigsFromLocalStorage();
+            console.warn('ConfigurationsComponent: RelationshipConfig model not available in schema');
+            this.relationshipConfigs = [];
             return;
         }
-        // Load from Amplify RelationshipConfig model
+        // Load from Amplify RelationshipConfig model only (database-only mode)
         const observable = this.ams.listItemsForModel('RelationshipConfig');
         if (!observable) {
             console.error('ConfigurationsComponent: Failed to get RelationshipConfig observable');
-            this.loadRelationshipConfigsFromLocalStorage();
+            this.relationshipConfigs = [];
             return;
         }
         observable.subscribe({
@@ -5540,48 +5540,20 @@ return fields;
                     selectionSet: item.selectionSet || [],
                     description: item.description
                 }));
-                console.log('ConfigurationsComponent: Loaded relationship configs from Amplify:', this.relationshipConfigs);
+                console.log('ConfigurationsComponent: Loaded relationship configs from database:', this.relationshipConfigs);
                 // Update the AmplifyModelService with loaded configurations
                 this.updateAmplifyModelService();
             },
             error: (error) => {
-                console.error('ConfigurationsComponent: Error loading relationship configs from Amplify:', error);
-                this.loadRelationshipConfigsFromLocalStorage();
-            }
-        });
-    }
-    loadRelationshipConfigsFromLocalStorage() {
-        // Fallback to localStorage for backward compatibility
-        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 from localStorage:', this.relationshipConfigs);
-            }
-            catch (error) {
-                console.error('ConfigurationsComponent: Error loading relationship configs from localStorage:', error);
+                console.error('ConfigurationsComponent: Error loading relationship configs from database:', error);
                 this.relationshipConfigs = [];
             }
-        }
-        else {
-            this.relationshipConfigs = [];
-        }
+        });
     }
     saveRelationshipConfigsToStorage() {
-        // Always update localStorage for backward compatibility
-        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
+        // Database-only mode - no localStorage saving
         this.updateAmplifyModelService();
-        console.log('ConfigurationsComponent: Saved relationship configs to storage and updated service');
+        console.log('ConfigurationsComponent: Updated AmplifyModelService with relationship configs (database-only mode)');
     }
     updateAmplifyModelService() {
         const config = {
@@ -5640,14 +5612,7 @@ return fields;
     }
     async createRelationshipConfig(config) {
         if (!this.hasRelationshipConfig) {
-            // Fallback to localStorage if model not available
-            const newConfig = {
-                ...config,
-                id: this.generateId()
-            };
-            this.relationshipConfigs.push(newConfig);
-            this.saveRelationshipConfigsToStorage();
-            return;
+            throw new Error('RelationshipConfig model not available in schema. Please add it to your Amplify data model.');
         }
         const amplifyConfig = {
             relationshipModel: config.relationshipModel,
@@ -5670,13 +5635,7 @@ return fields;
     }
     async updateRelationshipConfig(id, config) {
         if (!this.hasRelationshipConfig) {
-            // Fallback to localStorage if model not available
-            const index = this.relationshipConfigs.findIndex(c => c.id === id);
-            if (index >= 0) {
-                this.relationshipConfigs[index] = { ...config, id };
-                this.saveRelationshipConfigsToStorage();
-            }
-            return;
+            throw new Error('RelationshipConfig model not available in schema. Please add it to your Amplify data model.');
         }
         const amplifyConfig = {
             id: id,
@@ -5712,14 +5671,7 @@ return fields;
     async deleteRelationshipConfig(config) {
         try {
             if (!this.hasRelationshipConfig) {
-                // Fallback to localStorage if model not available
-                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 });
-                }
-                return;
+                throw new Error('RelationshipConfig model not available in schema. Please add it to your Amplify data model.');
             }
             const result = await this.ams.deleteItemForModel('RelationshipConfig', config.id);
             if (result && result.data) {
@@ -5747,6 +5699,15 @@ return fields;
         this.availableFields = [];
     }
     async loadDefaultRelationshipConfigs() {
+        // This method is deprecated - use populateDefaultRelationshipConfigs instead
+        console.warn('ConfigurationsComponent: loadDefaultRelationshipConfigs is deprecated, use populateDefaultRelationshipConfigs');
+        await this.populateDefaultRelationshipConfigs();
+    }
+    async populateDefaultRelationshipConfigs() {
+        if (!this.hasRelationshipConfig) {
+            this.snackBar.open('RelationshipConfig model not available in schema', 'Dismiss', { duration: 3000 });
+            return;
+        }
         // Load some sensible default configurations
         const defaultConfigs = [
             {
@@ -5757,7 +5718,7 @@ return fields;
                     'table',
                     'table.id',
                     'table.name',
-                    'table.title',
+                    'table.label',
                     'table.description'
                 ],
                 description: 'Configuration for ListView -> Table relationship'
@@ -5769,12 +5730,85 @@ return fields;
                     'id',
                     'formView',
                     'formView.id',
-                    'formView.name',
-                    'formView.title',
-                    'formView.description'
+                    'formView.label',
+                    'formView.tableConfigId'
                 ],
                 description: 'Configuration for FormViewField -> FormView relationship'
             },
+            {
+                relationshipModel: 'FormView',
+                fieldName: 'table',
+                selectionSet: [
+                    'id',
+                    'table',
+                    'table.id',
+                    'table.name',
+                    'table.label',
+                    'table.description'
+                ],
+                description: 'Configuration for FormView -> TableConfig relationship'
+            },
+            {
+                relationshipModel: 'FieldChoice',
+                fieldName: 'fieldConfig',
+                selectionSet: [
+                    'id',
+                    'fieldConfig',
+                    'fieldConfig.id',
+                    'fieldConfig.name',
+                    'fieldConfig.label',
+                    'fieldConfig.field_type'
+                ],
+                description: 'Configuration for FieldChoice -> FieldConfig relationship'
+            },
+            {
+                relationshipModel: 'ListView',
+                fieldName: 'formView',
+                selectionSet: [
+                    'id',
+                    'formView',
+                    'formView.id',
+                    'formView.label',
+                    'formView.tableConfigId'
+                ],
+                description: 'Configuration for ListView -> FormView relationship'
+            },
+            {
+                relationshipModel: 'ListViewField',
+                fieldName: 'listView',
+                selectionSet: [
+                    'id',
+                    'listView',
+                    'listView.id',
+                    'listView.label',
+                    'listView.tableConfigId'
+                ],
+                description: 'Configuration for ListViewField -> ListView relationship'
+            },
+            {
+                relationshipModel: 'TableConfig',
+                fieldName: 'defaultListView',
+                selectionSet: [
+                    'id',
+                    'defaultListView',
+                    'defaultListView.id',
+                    'defaultListView.label',
+                    'defaultListView.tableConfigId'
+                ],
+                description: 'Configuration for TableConfig -> ListView (defaultListView) relationship'
+            },
+            {
+                relationshipModel: 'TableConfig',
+                fieldName: 'defaultFormView',
+                selectionSet: [
+                    'id',
+                    'defaultFormView',
+                    'defaultFormView.id',
+                    'defaultFormView.label',
+                    'defaultFormView.tableConfigId'
+                ],
+                description: 'Configuration for TableConfig -> FormView (defaultFormView) relationship'
+            },
             {
                 relationshipModel: 'ServiceCustomer',
                 fieldName: 'service',
@@ -5816,7 +5850,7 @@ return fields;
                 this.snackBar.open(`Added ${addedCount} default relationship configurations`, 'Dismiss', { duration: 3000 });
             }
             else {
-                this.snackBar.open('All default configurations already exist', 'Dismiss', { duration: 3000 });
+                this.snackBar.open('All default relationship configurations already exist', 'Dismiss', { duration: 3000 });
             }
         }
         catch (error) {
@@ -5824,20 +5858,132 @@ return fields;
             this.snackBar.open('Error loading default configurations: ' + error, 'Dismiss', { duration: 5000 });
         }
     }
+    async createDefaultListViews() {
+        if (!this.hasListView || !this.hasTableConfig) {
+            this.snackBar.open('ListView or TableConfig model not available in schema', 'Dismiss', { duration: 3000 });
+            return;
+        }
+        try {
+            console.log('ConfigurationsComponent: Starting createDefaultListViews');
+            // Get all available models from the schema
+            const models = this.outputs.data.model_introspection.models;
+            const modelNames = Object.keys(models);
+            // Get existing TableConfigs to link ListViews to
+            const tableConfigObservable = this.ams.listItemsForModel('TableConfig');
+            if (!tableConfigObservable) {
+                this.snackBar.open('Failed to get TableConfig records', 'Dismiss', { duration: 3000 });
+                return;
+            }
+            tableConfigObservable.subscribe({
+                next: async ({ items: tableConfigs }) => {
+                    if (tableConfigs.length === 0) {
+                        this.snackBar.open('No TableConfig records found. Please create TableConfigs first.', 'Dismiss', { duration: 3000 });
+                        return;
+                    }
+                    let totalCreated = 0;
+                    let createdListViews = [];
+                    let createdListViewFields = [];
+                    // Create ListView records for each TableConfig
+                    console.log('ConfigurationsComponent: Creating ListView records for', tableConfigs.length, 'TableConfigs');
+                    for (const tableConfig of tableConfigs) {
+                        const modelName = tableConfig.name;
+                        const modelData = models[modelName];
+                        if (!modelData) {
+                            console.warn('ConfigurationsComponent: Model data not found for', modelName);
+                            continue;
+                        }
+                        // Check if ListView already exists for this TableConfig
+                        const existingListViewObservable = this.ams.listItemsForModel('ListView');
+                        if (existingListViewObservable) {
+                            const existingListViews = await new Promise((resolve) => {
+                                existingListViewObservable.subscribe({
+                                    next: ({ items }) => resolve(items.filter((lv) => lv.tableConfigId === tableConfig.id)),
+                                    error: () => resolve([])
+                                });
+                            });
+                            if (existingListViews.length > 0) {
+                                console.log('ConfigurationsComponent: ListView already exists for', modelName);
+                                continue;
+                            }
+                        }
+                        const listView = {
+                            label: `Default ${this.formatModelLabel(modelName)} List`,
+                            tableConfigId: tableConfig.id
+                        };
+                        const listViewResult = await this.ams.createItemPromise('ListView', listView);
+                        if (listViewResult && listViewResult.data) {
+                            createdListViews.push(listViewResult.data);
+                            totalCreated++;
+                            console.log('ConfigurationsComponent: Created ListView for', modelName);
+                            // Create ListViewField records for each field in the model
+                            if (modelData.fields) {
+                                const fields = Object.values(modelData.fields);
+                                const skipFields = ['id', 'createdAt', 'updatedAt']; // Skip system fields
+                                let fieldOrder = 0;
+                                for (const field of fields) {
+                                    const fieldData = field;
+                                    // Skip system fields and relationship fields for list view
+                                    if (skipFields.includes(fieldData.name) ||
+                                        (fieldData.association && fieldData.association.connectionType)) {
+                                        continue;
+                                    }
+                                    const listViewField = {
+                                        field_name: fieldData.name,
+                                        display_label: this.formatFieldLabel(fieldData.name),
+                                        field_type: this.mapFieldType(fieldData.type),
+                                        order: fieldOrder++,
+                                        listViewId: listViewResult.data.id
+                                    };
+                                    const listViewFieldResult = await this.ams.createItemPromise('ListViewField', listViewField);
+                                    if (listViewFieldResult && listViewFieldResult.data) {
+                                        createdListViewFields.push(listViewFieldResult.data);
+                                        totalCreated++;
+                                    }
+                                }
+                                console.log('ConfigurationsComponent: Created ListViewFields for', modelName, 'with', fieldOrder, 'fields');
+                            }
+                            // Update TableConfig to set this as the default ListView if none exists
+                            if (!tableConfig.defaultListViewId) {
+                                const updatedTableConfig = {
+                                    id: tableConfig.id,
+                                    defaultListViewId: listViewResult.data.id
+                                };
+                                await this.ams.updateItemForModel('TableConfig', updatedTableConfig);
+                                console.log('ConfigurationsComponent: Updated TableConfig with default ListView for', modelName);
+                            }
+                        }
+                    }
+                    console.log('ConfigurationsComponent: Successfully created', totalCreated, 'total records');
+                    console.log('ConfigurationsComponent: Created', createdListViews.length, 'ListViews');
+                    console.log('ConfigurationsComponent: Created', createdListViewFields.length, 'ListViewFields');
+                    this.snackBar.open(`Created ${totalCreated} ListView records: ${createdListViews.length} ListViews, ${createdListViewFields.length} ListViewFields`, 'Dismiss', { duration: 5000 });
+                },
+                error: (error) => {
+                    console.error('ConfigurationsComponent: Error getting TableConfig records:', error);
+                    this.snackBar.open('Error getting TableConfig records: ' + error, 'Dismiss', {
+                        duration: 5000
+                    });
+                }
+            });
+        }
+        catch (error) {
+            console.error('ConfigurationsComponent: Error in createDefaultListViews:', error);
+            this.snackBar.open('Error creating default ListView configurations: ' + error, 'Dismiss', {
+                duration: 5000
+            });
+        }
+    }
     async clearAllRelationshipConfigs() {
+        if (!this.hasRelationshipConfig) {
+            this.snackBar.open('RelationshipConfig model not available in schema', 'Dismiss', { duration: 3000 });
+            return;
+        }
         if (this.relationshipConfigs.length === 0) {
             this.snackBar.open('No relationship configurations to clear', 'Dismiss', { duration: 3000 });
             return;
         }
         try {
-            if (!this.hasRelationshipConfig) {
-                // Fallback to localStorage if model not available
-                this.relationshipConfigs = [];
-                this.saveRelationshipConfigsToStorage();
-                this.snackBar.open('All relationship configurations cleared', 'Dismiss', { duration: 3000 });
-                return;
-            }
-            // Delete all configurations from Amplify
+            // Delete all configurations from database
             const deletePromises = this.relationshipConfigs.map(config => this.ams.deleteItemForModel('RelationshipConfig', config.id));
             await Promise.all(deletePromises);
             // Reload configurations to get the updated (empty) list
@@ -5850,7 +5996,7 @@ return fields;
         }
     }
     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    <!-- 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"] }] });
+    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=\"accent\" (click)=\"createDefaultListViews()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Create Default ListViews\n            </button>\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        @if (hasRelationshipConfig) {\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)=\"populateDefaultRelationshipConfigs()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Populate Default Relationship 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        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>RelationshipConfig Model Not Found</h3>\n              <p>The RelationshipConfig model is not available in your Amplify schema. Please add it to your data model to manage relationship 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  </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,
@@ -5867,7 +6013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         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    <!-- 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"] }]
+                    ], 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=\"accent\" (click)=\"createDefaultListViews()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Create Default ListViews\n            </button>\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        @if (hasRelationshipConfig) {\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)=\"populateDefaultRelationshipConfigs()\" class=\"populate-button\">\n              <mat-icon>auto_fix_high</mat-icon>\n              Populate Default Relationship 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        } @else {\n          <mat-card class=\"error-card\">\n            <mat-card-content>\n              <mat-icon class=\"error-icon\">error_outline</mat-icon>\n              <h3>RelationshipConfig Model Not Found</h3>\n              <p>The RelationshipConfig model is not available in your Amplify schema. Please add it to your data model to manage relationship 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  </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
             }] } });