@snteam/amplify-angular-core 1.0.42 → 1.0.43

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

@@ -5156,6 +5156,7 @@ class ConfigurationsComponent {
     hasFormView = false;
     hasListView = false;
     hasFieldConfig = false;
+    hasRelationshipConfig = false;
     // Relationship configuration management
     relationshipConfigs = [];
     showAddRelationshipConfig = false;
@@ -5190,11 +5191,13 @@ class ConfigurationsComponent {
         this.hasFormView = 'FormView' in models;
         this.hasListView = 'ListView' in models;
         this.hasFieldConfig = 'FieldConfig' in models;
+        this.hasRelationshipConfig = 'RelationshipConfig' in models;
         console.log('ConfigurationsComponent: Model availability:', {
             TableConfig: this.hasTableConfig,
             FormView: this.hasFormView,
             ListView: this.hasListView,
-            FieldConfig: this.hasFieldConfig
+            FieldConfig: this.hasFieldConfig,
+            RelationshipConfig: this.hasRelationshipConfig
         });
     }
     async populateDefaultFieldConfigs() {
@@ -5507,7 +5510,41 @@ return fields;
         console.log('ConfigurationsComponent: Available relationship fields for', modelName, ':', this.availableFields);
     }
     loadRelationshipConfigs() {
-        // Load from localStorage for now (could be extended to use Amplify model later)
+        if (!this.hasRelationshipConfig) {
+            console.warn('ConfigurationsComponent: RelationshipConfig model not available, falling back to localStorage');
+            this.loadRelationshipConfigsFromLocalStorage();
+            return;
+        }
+        // Load from Amplify RelationshipConfig model
+        const observable = this.ams.listItemsForModel('RelationshipConfig');
+        if (!observable) {
+            console.error('ConfigurationsComponent: Failed to get RelationshipConfig observable');
+            this.loadRelationshipConfigsFromLocalStorage();
+            return;
+        }
+        observable.subscribe({
+            next: ({ items }) => {
+                this.relationshipConfigs = items
+                    .filter((item) => item.isActive !== false)
+                    .map((item) => ({
+                    id: item.id,
+                    relationshipModel: item.relationshipModel,
+                    fieldName: item.fieldName,
+                    selectionSet: item.selectionSet || [],
+                    description: item.description
+                }));
+                console.log('ConfigurationsComponent: Loaded relationship configs from Amplify:', 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 {
@@ -5516,10 +5553,10 @@ return fields;
                     ...rel,
                     id: rel.id || this.generateId()
                 }));
-                console.log('ConfigurationsComponent: Loaded relationship configs:', this.relationshipConfigs);
+                console.log('ConfigurationsComponent: Loaded relationship configs from localStorage:', this.relationshipConfigs);
             }
             catch (error) {
-                console.error('ConfigurationsComponent: Error loading relationship configs:', error);
+                console.error('ConfigurationsComponent: Error loading relationship configs from localStorage:', error);
                 this.relationshipConfigs = [];
             }
         }
@@ -5528,6 +5565,7 @@ return fields;
         }
     }
     saveRelationshipConfigsToStorage() {
+        // Always update localStorage for backward compatibility
         const config = {
             relationships: this.relationshipConfigs.map(({ id, ...config }) => config),
             defaultSelectionSet: ['id'],
@@ -5535,10 +5573,19 @@ return fields;
         };
         localStorage.setItem('snteam-relationship-configs', JSON.stringify(config));
         // Update the AmplifyModelService with the new configuration
-        this.ams.setRelationshipConfig(config);
+        this.updateAmplifyModelService();
         console.log('ConfigurationsComponent: Saved relationship configs to storage and updated service');
     }
-    saveRelationshipConfig() {
+    updateAmplifyModelService() {
+        const config = {
+            relationships: this.relationshipConfigs.map(({ id, ...config }) => config),
+            defaultSelectionSet: ['id'],
+            enableFallback: true
+        };
+        this.ams.setRelationshipConfig(config);
+        console.log('ConfigurationsComponent: Updated AmplifyModelService with relationship configs');
+    }
+    async saveRelationshipConfig() {
         if (!this.relationshipConfigForm.valid) {
             this.snackBar.open('Please fill in all required fields', 'Dismiss', { duration: 3000 });
             return;
@@ -5549,35 +5596,98 @@ return fields;
             .split('\n')
             .map((line) => line.trim())
             .filter((line) => line.length > 0);
-        const config = {
-            relationshipModel: formValue.relationshipModel,
-            fieldName: formValue.fieldName,
-            selectionSet: selectionSet,
-            description: formValue.description || undefined,
-            id: this.editingRelationshipConfig?.id || this.generateId()
-        };
-        if (this.editingRelationshipConfig) {
-            // Update existing configuration
-            const index = this.relationshipConfigs.findIndex(c => c.id === this.editingRelationshipConfig.id);
-            if (index >= 0) {
-                this.relationshipConfigs[index] = config;
+        try {
+            if (this.editingRelationshipConfig) {
+                // Update existing configuration
+                await this.updateRelationshipConfig(this.editingRelationshipConfig.id, {
+                    relationshipModel: formValue.relationshipModel,
+                    fieldName: formValue.fieldName,
+                    selectionSet: selectionSet,
+                    description: formValue.description || undefined
+                });
                 this.snackBar.open('Relationship configuration updated successfully', 'Dismiss', { duration: 3000 });
             }
+            else {
+                // Check for duplicate configuration
+                const existing = this.relationshipConfigs.find(c => c.relationshipModel === formValue.relationshipModel &&
+                    c.fieldName === formValue.fieldName);
+                if (existing) {
+                    this.snackBar.open('Configuration for this relationship already exists', 'Dismiss', { duration: 3000 });
+                    return;
+                }
+                // Create new configuration
+                await this.createRelationshipConfig({
+                    relationshipModel: formValue.relationshipModel,
+                    fieldName: formValue.fieldName,
+                    selectionSet: selectionSet,
+                    description: formValue.description || undefined
+                });
+                this.snackBar.open('Relationship configuration added successfully', 'Dismiss', { duration: 3000 });
+            }
+            this.cancelRelationshipConfigEdit();
+        }
+        catch (error) {
+            console.error('ConfigurationsComponent: Error saving relationship config:', error);
+            this.snackBar.open('Error saving configuration: ' + error, 'Dismiss', { duration: 5000 });
+        }
+    }
+    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;
+        }
+        const amplifyConfig = {
+            relationshipModel: config.relationshipModel,
+            fieldName: config.fieldName,
+            selectionSet: config.selectionSet,
+            description: config.description,
+            isActive: true,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString()
+        };
+        const result = await this.ams.createItemPromise('RelationshipConfig', amplifyConfig);
+        if (result && result.data) {
+            console.log('ConfigurationsComponent: Created RelationshipConfig in Amplify:', result.data);
+            // Reload configurations to get the updated list
+            this.loadRelationshipConfigs();
         }
         else {
-            // Check for duplicate configuration
-            const existing = this.relationshipConfigs.find(c => c.relationshipModel === config.relationshipModel &&
-                c.fieldName === config.fieldName);
-            if (existing) {
-                this.snackBar.open('Configuration for this relationship already exists', 'Dismiss', { duration: 3000 });
-                return;
+            throw new Error('Failed to create RelationshipConfig in Amplify');
+        }
+    }
+    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();
             }
-            // Add new configuration
-            this.relationshipConfigs.push(config);
-            this.snackBar.open('Relationship configuration added successfully', 'Dismiss', { duration: 3000 });
+            return;
+        }
+        const amplifyConfig = {
+            id: id,
+            relationshipModel: config.relationshipModel,
+            fieldName: config.fieldName,
+            selectionSet: config.selectionSet,
+            description: config.description,
+            updatedAt: new Date().toISOString()
+        };
+        const result = await this.ams.updateItemForModel('RelationshipConfig', amplifyConfig);
+        if (result && result.data) {
+            console.log('ConfigurationsComponent: Updated RelationshipConfig in Amplify:', result.data);
+            // Reload configurations to get the updated list
+            this.loadRelationshipConfigs();
+        }
+        else {
+            throw new Error('Failed to update RelationshipConfig in Amplify');
         }
-        this.saveRelationshipConfigsToStorage();
-        this.cancelRelationshipConfigEdit();
     }
     editRelationshipConfig(config) {
         this.editingRelationshipConfig = config;
@@ -5592,12 +5702,32 @@ return fields;
             description: config.description || ''
         });
     }
-    deleteRelationshipConfig(config) {
-        const index = this.relationshipConfigs.findIndex(c => c.id === config.id);
-        if (index >= 0) {
-            this.relationshipConfigs.splice(index, 1);
-            this.saveRelationshipConfigsToStorage();
-            this.snackBar.open('Relationship configuration deleted', 'Dismiss', { duration: 3000 });
+    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;
+            }
+            const result = await this.ams.deleteItemForModel('RelationshipConfig', config.id);
+            if (result && result.data) {
+                console.log('ConfigurationsComponent: Deleted RelationshipConfig from Amplify:', result.data);
+                // Reload configurations to get the updated list
+                this.loadRelationshipConfigs();
+                this.snackBar.open('Relationship configuration deleted', 'Dismiss', { duration: 3000 });
+            }
+            else {
+                throw new Error('Failed to delete RelationshipConfig from Amplify');
+            }
+        }
+        catch (error) {
+            console.error('ConfigurationsComponent: Error deleting relationship config:', error);
+            this.snackBar.open('Error deleting configuration: ' + error, 'Dismiss', { duration: 5000 });
         }
     }
     generateId() {
@@ -5609,11 +5739,10 @@ return fields;
         this.relationshipConfigForm.reset();
         this.availableFields = [];
     }
-    loadDefaultRelationshipConfigs() {
+    async loadDefaultRelationshipConfigs() {
         // Load some sensible default configurations
         const defaultConfigs = [
             {
-                id: this.generateId(),
                 relationshipModel: 'ListView',
                 fieldName: 'table',
                 selectionSet: [
@@ -5627,7 +5756,6 @@ return fields;
                 description: 'Configuration for ListView -> Table relationship'
             },
             {
-                id: this.generateId(),
                 relationshipModel: 'FormViewField',
                 fieldName: 'formView',
                 selectionSet: [
@@ -5641,7 +5769,6 @@ return fields;
                 description: 'Configuration for FormViewField -> FormView relationship'
             },
             {
-                id: this.generateId(),
                 relationshipModel: 'ServiceCustomer',
                 fieldName: 'service',
                 selectionSet: [
@@ -5655,7 +5782,6 @@ return fields;
                 description: 'Configuration for ServiceCustomer -> Service relationship'
             },
             {
-                id: this.generateId(),
                 relationshipModel: 'ServiceCustomer',
                 fieldName: 'customer',
                 selectionSet: [
@@ -5668,32 +5794,53 @@ return fields;
                 description: 'Configuration for ServiceCustomer -> Customer relationship'
             }
         ];
-        // Only add configs that don't already exist
-        let addedCount = 0;
-        for (const defaultConfig of defaultConfigs) {
-            const existing = this.relationshipConfigs.find(c => c.relationshipModel === defaultConfig.relationshipModel &&
-                c.fieldName === defaultConfig.fieldName);
-            if (!existing) {
-                this.relationshipConfigs.push(defaultConfig);
-                addedCount++;
+        try {
+            // Only add configs that don't already exist
+            let addedCount = 0;
+            for (const defaultConfig of defaultConfigs) {
+                const existing = this.relationshipConfigs.find(c => c.relationshipModel === defaultConfig.relationshipModel &&
+                    c.fieldName === defaultConfig.fieldName);
+                if (!existing) {
+                    await this.createRelationshipConfig(defaultConfig);
+                    addedCount++;
+                }
+            }
+            if (addedCount > 0) {
+                this.snackBar.open(`Added ${addedCount} default relationship configurations`, 'Dismiss', { duration: 3000 });
+            }
+            else {
+                this.snackBar.open('All default configurations already exist', 'Dismiss', { duration: 3000 });
             }
         }
-        if (addedCount > 0) {
-            this.saveRelationshipConfigsToStorage();
-            this.snackBar.open(`Added ${addedCount} default relationship configurations`, 'Dismiss', { duration: 3000 });
-        }
-        else {
-            this.snackBar.open('All default configurations already exist', 'Dismiss', { duration: 3000 });
+        catch (error) {
+            console.error('ConfigurationsComponent: Error loading default relationship configs:', error);
+            this.snackBar.open('Error loading default configurations: ' + error, 'Dismiss', { duration: 5000 });
         }
     }
-    clearAllRelationshipConfigs() {
+    async clearAllRelationshipConfigs() {
         if (this.relationshipConfigs.length === 0) {
             this.snackBar.open('No relationship configurations to clear', 'Dismiss', { duration: 3000 });
             return;
         }
-        this.relationshipConfigs = [];
-        this.saveRelationshipConfigsToStorage();
-        this.snackBar.open('All relationship configurations cleared', 'Dismiss', { duration: 3000 });
+        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
+            const deletePromises = this.relationshipConfigs.map(config => this.ams.deleteItemForModel('RelationshipConfig', config.id));
+            await Promise.all(deletePromises);
+            // Reload configurations to get the updated (empty) list
+            this.loadRelationshipConfigs();
+            this.snackBar.open('All relationship configurations cleared', 'Dismiss', { duration: 3000 });
+        }
+        catch (error) {
+            console.error('ConfigurationsComponent: Error clearing relationship configs:', error);
+            this.snackBar.open('Error clearing configurations: ' + error, 'Dismiss', { duration: 5000 });
+        }
     }
     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"] }] });