@snteam/amplify-angular-core 1.0.0

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

@@ -0,0 +1,1764 @@
+import * as i0 from '@angular/core';
+import { Component, Injectable, Pipe, inject, Input, ChangeDetectionStrategy, model, signal, EventEmitter, Output } from '@angular/core';
+import * as i3$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormGroup, Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i6 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import * as i3$2 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i2 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i3$3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5$1 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+
+class AmplifyAngularCore {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmplifyAngularCore, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AmplifyAngularCore, isStandalone: true, selector: "snteam-amplify-angular-core", ngImport: i0, template: `
+    <p>
+      amplify-angular-core works!
+    </p>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmplifyAngularCore, decorators: [{
+            type: Component,
+            args: [{ selector: 'snteam-amplify-angular-core', imports: [], template: `
+    <p>
+      amplify-angular-core works!
+    </p>
+  ` }]
+        }] });
+
+class AmplifyFormBuilderService {
+    fb;
+    skipFields = ['createdAt', 'updatedAt'];
+    materialInputs = [
+        'textbox',
+        'int',
+        'number',
+        'color',
+        'email',
+        'month',
+        'number',
+        'password',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'url',
+        'week'
+    ];
+    switchInputs = ['dropdown'];
+    refInputs = ['async-dropdown'];
+    formGroupInputs = ['formgroup']; // we skip these and handle them in the form
+    datePickerInputs = ['date', 'datepicker', 'datetime-local'];
+    outputs;
+    constructor(fb) {
+        this.fb = fb;
+    }
+    /**
+     * Initialize the service with Amplify outputs
+     * This should be called by the consuming application after Amplify.configure()
+     */
+    initializeOutputs(outputs) {
+        this.outputs = outputs;
+    }
+    getInputTypeFromFieldType(type) {
+        if (this.materialInputs.includes(type))
+            return 'materialInputs';
+        if (this.switchInputs.includes(type))
+            return 'switchInputs';
+        if (this.refInputs.includes(type))
+            return 'refInputs';
+        if (this.formGroupInputs.includes(type))
+            return 'formGroupInputs';
+        if (this.datePickerInputs.includes(type))
+            return 'datePickerInputs';
+        return undefined;
+    }
+    getMaterialInputs() {
+        return this.materialInputs;
+    }
+    getSwitchInputs() {
+        return this.switchInputs;
+    }
+    getRefInputs() {
+        return this.refInputs;
+    }
+    getErrorStrForControl(ctrl, label) {
+        const errorMap = {
+            email: 'Please enter a valid email address',
+            invalidPhoneNumber: 'Please enter a phone number in (111) 222-3333 format.',
+            required: (label || 'This field') + ' is required.'
+        };
+        if (!ctrl.errors)
+            return '';
+        let errStrs = [];
+        let keys = Object.keys(ctrl.errors);
+        for (let err of keys) {
+            if (errorMap[err]) {
+                errStrs.push(errorMap[err]);
+            }
+            else {
+                errStrs.push(`Invalid ${err}`);
+            }
+        }
+        return errStrs.join(', ');
+    }
+    /** Shared Methods for FormControls **/
+    getPathFromRoot(searchKey, controls, pathArr) {
+        if (!pathArr)
+            pathArr = [];
+        const isInControls = Object.keys(controls).find(name => name === searchKey);
+        if (isInControls) {
+            pathArr.push(searchKey);
+            return pathArr.join('.');
+        }
+        else {
+            const tempArr = [];
+            const entries = Object.entries(controls);
+            for (let e of entries) {
+                let controlName = e[0];
+                let controlObj = e[1];
+                if (controlObj instanceof FormGroup) {
+                    console.log('getPathFromRoot controlName', typeof controlName, controlName, 'controlObj', controlObj);
+                    tempArr.push(controlName);
+                    console.log('getPathFromRoot', controlName, 'is a FormGroup in path tempArr', tempArr);
+                    const childControls = controls[controlName].controls;
+                    console.log('getPathFromRoot childControls', childControls);
+                    let childPath = this.getPathFromRoot(searchKey, childControls, [...pathArr, ...tempArr]);
+                    if (childPath !== '')
+                        return childPath;
+                }
+            }
+            return '';
+        }
+    }
+    /** FormBuilder Methods **/
+    _getFormGroupFromFieldsArr(fields) {
+        if (!this.outputs) {
+            console.error('AmplifyFormBuilderService: Outputs not initialized. Call initializeOutputs() first.');
+            return this.fb.group({});
+        }
+        console.log('_getFormGroupFromFieldsArr fields', fields);
+        const formGroup = this.fb.group({});
+        const fieldsArr = Object.values(fields);
+        fieldsArr.forEach((field) => {
+            if (this.skipFields.indexOf(field.name) > -1)
+                return;
+            if (typeof field.type === 'object') {
+                if (field.type.model) {
+                    formGroup.addControl(field.name, this._getControlForField(field));
+                }
+                if (field.type.nonModel) {
+                    formGroup.addControl(field.name, this._getGroupControlForNonModel(field));
+                }
+            }
+            else {
+                formGroup.addControl(field.name, this._getControlForField(field));
+            }
+        });
+        return formGroup;
+    }
+    _getGroupControlForNonModel(field) {
+        if (!this.outputs) {
+            console.error('AmplifyFormBuilderService: Outputs not initialized. Call initializeOutputs() first.');
+            return this.fb.group({});
+        }
+        const nonModel = field.type.nonModel;
+        const fields = this.outputs.data.model_introspection.nonModels[nonModel].fields;
+        return this._getFormGroupFromFieldsArr(fields);
+    }
+    _getControlForField(field) {
+        const validators = field.required ? [Validators.required] : [];
+        return new FormControl(field.value || '', validators);
+    }
+    buildFormForModel(model) {
+        if (!this.outputs) {
+            console.error('AmplifyFormBuilderService: Outputs not initialized. Call initializeOutputs() first.');
+            return this.fb.group({});
+        }
+        const config = this.outputs.data.model_introspection.models[model].fields;
+        const formGroup = this._getFormGroupFromFieldsArr(config);
+        return formGroup;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmplifyFormBuilderService, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmplifyFormBuilderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmplifyFormBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
+
+class ValToTitlePipe {
+    transform(value) {
+        if (!value) {
+            return '';
+        }
+        let fixed = value.replace(new RegExp('_', 'g'), ' ').split(' ')
+            .map(w => w.length > 0 ? w[0].toUpperCase() + w.substring(1).toLowerCase() : '')
+            .join(' ');
+        return fixed;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValToTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ValToTitlePipe, isStandalone: true, name: "valToTitle" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValToTitlePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'valToTitle',
+                    standalone: true
+                }]
+        }] });
+
+class AmplifyModelService {
+    client;
+    constructor() {
+        // Client will be initialized when Amplify is configured by the consuming application
+    }
+    /**
+     * Initialize the service with the Amplify client
+     * This should be called by the consuming application after Amplify.configure()
+     */
+    initializeClient(schema) {
+        // Dynamic import to avoid build-time dependency
+        try {
+            // This will be provided by the consuming application
+            this.client = globalThis.amplifyClient;
+            if (!this.client) {
+                console.warn('AmplifyModelService: No client provided. Call with generateClient result.');
+            }
+        }
+        catch (error) {
+            console.error('Failed to initialize Amplify client:', error);
+        }
+    }
+    /**
+     * Set the client directly (for consuming applications)
+     */
+    setClient(client) {
+        this.client = client;
+    }
+    getMenuLinksFromModels(outputs, config) {
+        const defaultConfig = { skipModels: ['ServiceCustomer', 'ServiceProduct', 'Todo'] };
+        const finalConfig = { ...defaultConfig, ...config };
+        let pageButtons = [{ label: 'Home', route: '/' }];
+        let models = outputs.data.model_introspection.models;
+        Object.values(models).forEach((model) => {
+            if (finalConfig.skipModels.includes(model.name))
+                return;
+            console.log('model', model);
+            pageButtons.push({ label: model.name, route: '/list/' + model.name });
+        });
+        console.log('models', models);
+        return pageButtons;
+    }
+    /**
+     * TODO: Make this generate dynamically using refModel Names and types
+     * TODO: Bring the refModel generation in here.
+     * Edit this function with form fields...
+     *
+     * ... probably don't need this...
+     */
+    getEmptyObjectForModel(model) {
+        switch (model) {
+            case 'Customer':
+                return {
+                    name: '',
+                    contact: {},
+                    services: [],
+                    contact_preference: '',
+                    notes: [],
+                };
+            case 'Service':
+                return {
+                    cost: 0.00,
+                    price: 0.00,
+                    customers: [],
+                    products: [],
+                    id: '',
+                    title: ''
+                };
+            default:
+                return {};
+        }
+    }
+    getRelationshipChoices(config, selectedOptions) {
+        if (!this.client) {
+            console.error('AmplifyModelService: Client not initialized. Call initializeClient() first.');
+            return null;
+        }
+        let filter = {};
+        /*if (selectedOptions){ //TODO: FILTER OUT SELECTED ITEMS
+          filter = {id: {nin: [...selectedOptions]}};
+        }*/
+        console.log('getRelationshipChoices filter', filter);
+        try {
+            const modelName = config.partnerModelName;
+            if (this.client.models[modelName]) {
+                return this.client.models[modelName].observeQuery({ filter: filter });
+            }
+            else {
+                console.error(`Model ${modelName} not found in client`);
+                return null;
+            }
+        }
+        catch (error) {
+            console.error('error fetching ' + config.partnerModelName + 'items', error);
+            return null;
+        }
+    }
+    getRefChoices(config, itemId, selectedOptions) {
+        if (!this.client) {
+            console.error('AmplifyModelService: Client not initialized. Call initializeClient() first.');
+            return null;
+        }
+        let filter = this.getRelationshipFilter(config, itemId, selectedOptions);
+        console.log('getRefChoices getRelationshipFilter model', config.partnerModelName, 'filter', filter);
+        try {
+            const modelName = config.partnerModelName;
+            if (this.client.models[modelName]) {
+                return this.client.models[modelName].observeQuery({ filter: filter });
+            }
+            else {
+                console.error(`Model ${modelName} not found in client`);
+                return null;
+            }
+        }
+        catch (error) {
+            console.error('error fetching ' + config.partnerModelName + 'items', error);
+            return null;
+        }
+    }
+    async deleteRelationship(relModel, relId) {
+        if (!this.client) {
+            console.error('AmplifyModelService: Client not initialized. Call initializeClient() first.');
+            return null;
+        }
+        let obj = { id: relId };
+        if (this.client.models[relModel]) {
+            return this.client.models[relModel].delete(obj);
+        }
+        else {
+            console.error(`Relationship model ${relModel} not found in client`);
+            return null;
+        }
+    }
+    createRelationship(relModel, relItem) {
+        if (!this.client) {
+            console.error('AmplifyModelService: Client not initialized. Call initializeClient() first.');
+            return null;
+        }
+        console.log('createRelationship starting for relModel', relModel, 'relItem', relItem);
+        if (this.client.models[relModel]) {
+            return this.client.models[relModel].create(relItem);
+        }
+        else {
+            console.error(`Relationship model ${relModel} not found in client`);
+            return null;
+        }
+    }
+    getRelationshipFilter(config, baseId, removeIds) {
+        let condition = {};
+        condition[config.associatedWith] = { eq: baseId };
+        if (removeIds && removeIds.length > 0) {
+            let conditionArr = [
+                condition,
+                { id: { ne: removeIds } }
+            ];
+            let andCondition = { and: conditionArr };
+            console.log('getRelationshipFilter has andCondition', andCondition);
+            return andCondition;
+        }
+        else {
+            condition[config.associatedWith] = { eq: baseId };
+            console.log('getRelationshipFilter config', config, 'condition', condition);
+            return condition;
+        }
+    }
+    getAmplifySelectionSet(config, baseId) {
+        switch (config.fieldName) {
+            case 'service':
+                return ['id', 'service.title', 'service.price', 'service.id'];
+            case 'customer':
+                return ['id', 'customer.*'];
+            default:
+                return [];
+        }
+    }
+    setRelatedSub(config, baseId) {
+        if (!this.client) {
+            console.error('AmplifyModelService: Client not initialized. Call initializeClient() first.');
+            return null;
+        }
+        let filter = this.getRelationshipFilter(config, baseId);
+        const modelName = config.relationshipModelName;
+        if (this.client.models[modelName]) {
+            return this.client.models[modelName].onCreate({ filter: filter });
+        }
+        else {
+            console.error(`Relationship model ${modelName} not found in client`);
+            return null;
+        }
+    }
+    /**
+     * @param config {object} - see dynamic-relationship-builder.component getDetailsForManyToMany() for example of building config
+     */
+    getRelatedItems(config, baseId) {
+        if (!this.client) {
+            console.error('AmplifyModelService: Client not initialized. Call initializeClient() first.');
+            return null;
+        }
+        let filter = this.getRelationshipFilter(config, baseId);
+        let selectionSet = this.getAmplifySelectionSet(config, baseId);
+        const modelName = config.relationshipModelName;
+        if (this.client.models[modelName]) {
+            return this.client.models[modelName].observeQuery({
+                filter: filter,
+                selectionSet: [...selectionSet]
+            });
+        }
+        else {
+            console.error(`Relationship model ${modelName} not found in client`);
+            return null;
+        }
+    }
+    createItemPromise(model, payload) {
+        if (!this.client) {
+            console.error('AmplifyModelService: Client not initialized. Call initializeClient() first.');
+            return null;
+        }
+        if (this.client.models[model]) {
+            return this.client.models[model].create(payload);
+        }
+        else {
+            console.error(`Model ${model} not found in client`);
+            return null;
+        }
+    }
+    updateItemForModel(model, payload) {
+        if (!this.client) {
+            console.error('AmplifyModelService: Client not initialized. Call initializeClient() first.');
+            return null;
+        }
+        if (this.client.models[model]) {
+            return this.client.models[model].update(payload);
+        }
+        else {
+            console.error(`Model ${model} not found in client`);
+            return null;
+        }
+    }
+    getItemForModel(model, id) {
+        if (!this.client) {
+            console.error('AmplifyModelService: Client not initialized. Call initializeClient() first.');
+            return null;
+        }
+        if (this.client.models[model]) {
+            return this.client.models[model].get({ id: id });
+        }
+        else {
+            console.error(`Model ${model} not found in client`);
+            return null;
+        }
+    }
+    listItemsForModel(model) {
+        if (!this.client) {
+            console.error('AmplifyModelService: Client not initialized. Call initializeClient() first.');
+            return null;
+        }
+        console.log('this.listItems starting');
+        try {
+            if (this.client.models[model]) {
+                return this.client.models[model].observeQuery();
+            }
+            else {
+                console.error(`Model ${model} not found in client`);
+                return null;
+            }
+        }
+        catch (error) {
+            console.error('error fetching ' + model, error);
+            return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmplifyModelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmplifyModelService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AmplifyModelService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class DynamicFormQuestionComponent {
+    rootFormGroup;
+    ams;
+    question; //QuestionBase<string>;
+    formGroup;
+    formControlPath = '';
+    materialInputs = [];
+    switchInputs = [];
+    refInputs = [];
+    form;
+    ctrl;
+    items$;
+    afbs = inject(AmplifyFormBuilderService);
+    constructor(rootFormGroup, ams) {
+        this.rootFormGroup = rootFormGroup;
+        this.ams = ams;
+    }
+    ngOnInit() {
+        console.log('DynamicFormQuestionComponent question', this.question);
+        this.form = this.rootFormGroup.control;
+        this.ctrl = this.rootFormGroup.control.get(this.question.key);
+        if (this.question.controlType == 'async-dropdown') {
+            console.log('DynamicFormQuestionComponent has async-dropdown!');
+            //this.items$ = this.ams.getRefChoices(this.question.targetModel);
+        }
+    }
+    showError() {
+        return this.afbs.getErrorStrForControl(this.ctrl, this.question.label);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormQuestionComponent, deps: [{ token: i1.FormGroupDirective }, { token: AmplifyModelService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormQuestionComponent, isStandalone: true, selector: "snteam-dynamic-form-question", inputs: { question: "question", formGroup: "formGroup" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "<form [formGroup]=\"form\">\n  @switch (afbs.getInputTypeFromFieldType(question.controlType)) {\n  @case ('materialInputs'){\n  <mat-form-field class=\"full-width\" appearance=\"outline\">\n    <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n    <input matInput [formControlName]=\"question.key\" [id]=\"question.key\" [type]=\"question.type\">\n    @if (ctrl.errors) {\n    <mat-error>{{showError()}}</mat-error>\n    }\n  </mat-form-field>\n  }\n\n  @case ('datePickerInputs') {\n  <mat-form-field class=\"full-width\" appearance=\"outline\">\n    <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n    <input matInput [matDatepicker]=\"picker\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    @if (ctrl.errors) {\n    <mat-error>{{showError()}}</mat-error>\n    }\n  </mat-form-field>\n  }\n\n  @case ('switchInputs') {\n  <mat-form-field class=\"full-width\" appearance=\"outline\">\n    <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n    <mat-select [id]=\"question.key\" [formControlName]=\"question.key\">\n      @for (opt of question.options; track opt) {\n      <mat-option [value]=\"opt.key\">{{opt.value | valToTitle}}</mat-option>\n      }\n    </mat-select>\n    @if (ctrl.errors) {\n    <mat-error>{{showError()}}</mat-error>\n    }\n  </mat-form-field>\n  }\n\n  @case ('refInputs') {\n  @if (question.multiple){\n  <mat-form-field class=\"full-width\" appearance=\"outline\">\n    <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n    <mat-select [id]=\"question.key\" [formControlName]=\"question.key\" multiple>\n      @if (items$ | async; as items) {\n      @for (item of items.items; track item?.id) {\n      <mat-option [value]=\"item\">{{item.title | valToTitle}}</mat-option>\n      }\n      } @else {\n      <p>Loading Items...</p>\n      }\n    </mat-select>\n    @if (ctrl.errors) {\n    <mat-error>{{showError()}}</mat-error>\n    }\n  </mat-form-field>\n  }\n  @else {\n  <mat-form-field class=\"full-width\" appearance=\"outline\">\n    <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n    <mat-select [id]=\"question.key\" [formControlName]=\"question.key\">\n      @if (items$ | async; as items) {\n      @for (item of items.items; track item?.id) {\n      <mat-option [value]=\"item\">{{item.title | valToTitle}}</mat-option>\n      }\n      } @else {\n      <p>Loading Items...</p>\n      }\n    </mat-select>\n    @if (ctrl.errors) {\n    <mat-error>{{showError()}}</mat-error>\n    }\n  </mat-form-field>\n  }\n  }\n  }\n</form>", styles: ["form,.full-width{width:100%}\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: 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ValToTitlePipe, name: "valToTitle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormQuestionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'snteam-dynamic-form-question', standalone: true, providers: [provideNativeDateAdapter()], imports: [CommonModule, ReactiveFormsModule, ValToTitlePipe, MatFormFieldModule, MatInputModule, MatSelectModule, MatDatepickerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\">\n  @switch (afbs.getInputTypeFromFieldType(question.controlType)) {\n  @case ('materialInputs'){\n  <mat-form-field class=\"full-width\" appearance=\"outline\">\n    <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n    <input matInput [formControlName]=\"question.key\" [id]=\"question.key\" [type]=\"question.type\">\n    @if (ctrl.errors) {\n    <mat-error>{{showError()}}</mat-error>\n    }\n  </mat-form-field>\n  }\n\n  @case ('datePickerInputs') {\n  <mat-form-field class=\"full-width\" appearance=\"outline\">\n    <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n    <input matInput [matDatepicker]=\"picker\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    @if (ctrl.errors) {\n    <mat-error>{{showError()}}</mat-error>\n    }\n  </mat-form-field>\n  }\n\n  @case ('switchInputs') {\n  <mat-form-field class=\"full-width\" appearance=\"outline\">\n    <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n    <mat-select [id]=\"question.key\" [formControlName]=\"question.key\">\n      @for (opt of question.options; track opt) {\n      <mat-option [value]=\"opt.key\">{{opt.value | valToTitle}}</mat-option>\n      }\n    </mat-select>\n    @if (ctrl.errors) {\n    <mat-error>{{showError()}}</mat-error>\n    }\n  </mat-form-field>\n  }\n\n  @case ('refInputs') {\n  @if (question.multiple){\n  <mat-form-field class=\"full-width\" appearance=\"outline\">\n    <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n    <mat-select [id]=\"question.key\" [formControlName]=\"question.key\" multiple>\n      @if (items$ | async; as items) {\n      @for (item of items.items; track item?.id) {\n      <mat-option [value]=\"item\">{{item.title | valToTitle}}</mat-option>\n      }\n      } @else {\n      <p>Loading Items...</p>\n      }\n    </mat-select>\n    @if (ctrl.errors) {\n    <mat-error>{{showError()}}</mat-error>\n    }\n  </mat-form-field>\n  }\n  @else {\n  <mat-form-field class=\"full-width\" appearance=\"outline\">\n    <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n    <mat-select [id]=\"question.key\" [formControlName]=\"question.key\">\n      @if (items$ | async; as items) {\n      @for (item of items.items; track item?.id) {\n      <mat-option [value]=\"item\">{{item.title | valToTitle}}</mat-option>\n      }\n      } @else {\n      <p>Loading Items...</p>\n      }\n    </mat-select>\n    @if (ctrl.errors) {\n    <mat-error>{{showError()}}</mat-error>\n    }\n  </mat-form-field>\n  }\n  }\n  }\n</form>", styles: ["form,.full-width{width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormGroupDirective }, { type: AmplifyModelService }], propDecorators: { question: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }] } });
+
+class DynamicNestedFormQuestionComponent {
+    rootFormGroup;
+    groupName;
+    question; //QuestionBase<string>;
+    formGroup;
+    formControlPath = '';
+    form;
+    ctrl;
+    items$;
+    afbs = inject(AmplifyFormBuilderService);
+    constructor(rootFormGroup) {
+        this.rootFormGroup = rootFormGroup;
+    }
+    ngOnInit() {
+        console.log('DynamicNestedFormQuestionComponent question', this.question);
+        var searchKey = this.groupName;
+        var controls = this.rootFormGroup.control.controls;
+        var pathStr = this.afbs.getPathFromRoot(searchKey, controls); //this.getPathFromRoot();
+        this.form = this.rootFormGroup.control;
+        this.formControlPath = pathStr + '.' + this.question.key;
+        this.ctrl = this.rootFormGroup.control.get(this.formControlPath);
+        if (this.question.key == 'services')
+            console.log('DynamicNestedFormQuestionComponent has services');
+    }
+    showError() {
+        return this.afbs.getErrorStrForControl(this.ctrl, this.question.label);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicNestedFormQuestionComponent, deps: [{ token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicNestedFormQuestionComponent, isStandalone: true, selector: "snteam-dynamic-nested-form-question", inputs: { groupName: "groupName", question: "question", formGroup: "formGroup" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"formGroup\">\n  <div [formGroupName]=\"groupName\">\n\n    @switch (afbs.getInputTypeFromFieldType(question.controlType)) {\n    @case ('materialInputs'){\n    <mat-form-field class=\"full-width\" appearance=\"outline\">\n      <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n      <input matInput [formControlName]=\"question.key\" [id]=\"question.key\" [type]=\"question.type\">\n      @if (ctrl.errors) {\n      <mat-error>{{showError()}}</mat-error>\n      }\n    </mat-form-field>\n    }\n\n    @case ('datePickerInputs') {\n    <mat-form-field class=\"full-width\" appearance=\"outline\">\n      <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n      <input matInput [matDatepicker]=\"picker\">\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      @if (ctrl.errors) {\n      <mat-error>{{showError()}}</mat-error>\n      }\n    </mat-form-field>\n    }\n\n    @case ('switchInputs') {\n    <mat-form-field class=\"full-width\" appearance=\"outline\">\n      <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n      <mat-select [id]=\"question.key\" [formControlName]=\"question.key\">\n        @for (opt of question.options; track opt) {\n        <mat-option [value]=\"opt.key\">{{opt.value | valToTitle}}</mat-option>\n        }\n      </mat-select>\n      @if (ctrl.errors) {\n      <mat-error>{{showError()}}</mat-error>\n      }\n    </mat-form-field>\n    }\n\n    @case ('refInputs') {\n    @if (question.multiple){\n    <mat-form-field class=\"full-width\" appearance=\"outline\">\n      <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n      <mat-select [id]=\"question.key\" [formControlName]=\"question.key\" multiple>\n        @if (items$ | async; as items) {\n        @for (item of items.items; track item?.id) {\n        <mat-option [value]=\"item\">{{item.title | valToTitle}}</mat-option>\n        }\n        } @else {\n        <p>Loading Items...</p>\n        }\n      </mat-select>\n      @if (ctrl.errors) {\n      <mat-error>{{showError()}}</mat-error>\n      }\n    </mat-form-field>\n    }\n    @else {\n    <mat-form-field class=\"full-width\" appearance=\"outline\">\n      <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n      <mat-select [id]=\"question.key\" [formControlName]=\"question.key\">\n        @if (items$ | async; as items) {\n        @for (item of items.items; track item?.id) {\n        <mat-option [value]=\"item\">{{item.title | valToTitle}}</mat-option>\n        }\n        } @else {\n        <p>Loading Items...</p>\n        }\n      </mat-select>\n      @if (ctrl.errors) {\n      <mat-error>{{showError()}}</mat-error>\n      }\n    </mat-form-field>\n    }\n    }\n    }\n\n\n  </div>\n</form>", styles: [".full-width{width:100%}\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: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ValToTitlePipe, name: "valToTitle" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicNestedFormQuestionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'snteam-dynamic-nested-form-question', standalone: true, providers: [provideNativeDateAdapter()], imports: [CommonModule, ReactiveFormsModule, ValToTitlePipe, MatFormFieldModule, MatInputModule, MatSelectModule, MatDatepickerModule], template: "<form autocomplete=\"off\" [formGroup]=\"formGroup\">\n  <div [formGroupName]=\"groupName\">\n\n    @switch (afbs.getInputTypeFromFieldType(question.controlType)) {\n    @case ('materialInputs'){\n    <mat-form-field class=\"full-width\" appearance=\"outline\">\n      <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n      <input matInput [formControlName]=\"question.key\" [id]=\"question.key\" [type]=\"question.type\">\n      @if (ctrl.errors) {\n      <mat-error>{{showError()}}</mat-error>\n      }\n    </mat-form-field>\n    }\n\n    @case ('datePickerInputs') {\n    <mat-form-field class=\"full-width\" appearance=\"outline\">\n      <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n      <input matInput [matDatepicker]=\"picker\">\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      @if (ctrl.errors) {\n      <mat-error>{{showError()}}</mat-error>\n      }\n    </mat-form-field>\n    }\n\n    @case ('switchInputs') {\n    <mat-form-field class=\"full-width\" appearance=\"outline\">\n      <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n      <mat-select [id]=\"question.key\" [formControlName]=\"question.key\">\n        @for (opt of question.options; track opt) {\n        <mat-option [value]=\"opt.key\">{{opt.value | valToTitle}}</mat-option>\n        }\n      </mat-select>\n      @if (ctrl.errors) {\n      <mat-error>{{showError()}}</mat-error>\n      }\n    </mat-form-field>\n    }\n\n    @case ('refInputs') {\n    @if (question.multiple){\n    <mat-form-field class=\"full-width\" appearance=\"outline\">\n      <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n      <mat-select [id]=\"question.key\" [formControlName]=\"question.key\" multiple>\n        @if (items$ | async; as items) {\n        @for (item of items.items; track item?.id) {\n        <mat-option [value]=\"item\">{{item.title | valToTitle}}</mat-option>\n        }\n        } @else {\n        <p>Loading Items...</p>\n        }\n      </mat-select>\n      @if (ctrl.errors) {\n      <mat-error>{{showError()}}</mat-error>\n      }\n    </mat-form-field>\n    }\n    @else {\n    <mat-form-field class=\"full-width\" appearance=\"outline\">\n      <mat-label [attr.for]=\"question.key\">{{ question.label }}</mat-label>\n      <mat-select [id]=\"question.key\" [formControlName]=\"question.key\">\n        @if (items$ | async; as items) {\n        @for (item of items.items; track item?.id) {\n        <mat-option [value]=\"item\">{{item.title | valToTitle}}</mat-option>\n        }\n        } @else {\n        <p>Loading Items...</p>\n        }\n      </mat-select>\n      @if (ctrl.errors) {\n      <mat-error>{{showError()}}</mat-error>\n      }\n    </mat-form-field>\n    }\n    }\n    }\n\n\n  </div>\n</form>", styles: [".full-width{width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormGroupDirective }], propDecorators: { groupName: [{
+                type: Input
+            }], question: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }] } });
+
+class DynamicFormGroupComponent {
+    rootFormGroup;
+    afbs;
+    formGroupName;
+    question; //QuestionBase<string>;
+    formGroup;
+    materialInputs = [];
+    switchInputs = [];
+    refInputs = [];
+    formGroupInputs = ['formgroup'];
+    form;
+    ctrl;
+    constructor(rootFormGroup, afbs) {
+        this.rootFormGroup = rootFormGroup;
+        this.afbs = afbs;
+    }
+    getControlName(c) {
+        if (c.parent) {
+            const formGroup = c.parent.controls;
+            return Object.keys(formGroup).find(name => c === formGroup[name]) || null;
+        }
+        return null;
+    }
+    getPathFromRoot(controls, pathArr) {
+        if (!controls)
+            controls = this.rootFormGroup.control.controls;
+        if (!pathArr)
+            pathArr = [];
+        var isInControls = Object.keys(controls).find(name => name === this.question.key);
+        if (isInControls) {
+            pathArr.push(this.question.key);
+            return pathArr.join('.');
+        }
+        else {
+            var tempArr = [];
+            var entries = Object.entries(controls);
+            for (let e of entries) {
+                let controlName = e[0];
+                let controlObj = e[1];
+                if (controlObj instanceof FormGroup) {
+                    //if (tempArr.length > 10) return '';
+                    tempArr.push(controlName);
+                    var childControls = controls[controlName].controls;
+                    let childPath = this.getPathFromRoot(childControls, tempArr);
+                    if (childPath != '')
+                        return childPath;
+                }
+                ;
+            }
+            return '';
+        }
+        return '';
+    }
+    ngOnInit() {
+        //console.log('DynamicFormGroupComponent key starting:', this.question.key);
+        this.materialInputs = this.afbs.getMaterialInputs();
+        this.switchInputs = this.afbs.getSwitchInputs();
+        this.refInputs = this.afbs.getRefInputs();
+        if (this.formGroupName) {
+            var searchKey = this.question.key;
+            var controls = this.rootFormGroup.control.controls;
+            var pathStr = this.afbs.getPathFromRoot(searchKey, controls); //this.getPathFromRoot();
+            this.form = this.rootFormGroup.control.get(pathStr);
+            var controlName = this.getControlName(this.form);
+            this.ctrl = this.rootFormGroup.control.get(this.question.key);
+            console.log('DynamicFormGroupComponent init vals:', {
+                formGroupName: this.formGroupName,
+                question: this.question,
+                key: this.question.key,
+                searchKey: searchKey,
+                controls: controls,
+                pathStr: pathStr,
+                controlName: controlName,
+                ctrl: this.ctrl
+            });
+        }
+        else {
+            //console.log('DynamicFormGroupComponent will get main control form');
+            this.form = this.rootFormGroup.control;
+        }
+        //console.log('DynamicFormGroupComponent question', this.question, 'form', this.form, 'formGroupName', typeof this.formGroupName, this.formGroupName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormGroupComponent, deps: [{ token: i1.FormGroupDirective }, { token: AmplifyFormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormGroupComponent, isStandalone: true, selector: "snteam-dynamic-form-group", inputs: { formGroupName: "formGroupName", question: "question", formGroup: "formGroup" }, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"form\">\n  <h2>{{question.key | valToTitle}}</h2>\n  <mat-divider></mat-divider>\n  @for (q of $any(question).questions; track q) {\n  @if (q.controlType != 'formgroup') {\n  <div class=\"form-row\">\n    <snteam-dynamic-nested-form-question [question]=\"q\" [formGroup]=\"formGroup\" [groupName]=\"question.key\"></snteam-dynamic-nested-form-question>\n  </div>\n  }\n  @if (q.controlType == 'formgroup') {\n  <div class=\"group-row\">\n    <snteam-dynamic-form-group [question]=\"q\" [formGroup]=\"form\" [formGroupName]=\"q.key\"></snteam-dynamic-form-group>\n  </div>\n  }\n  }\n  <mat-divider></mat-divider>\n</form>", styles: [".form-row{margin-top:20px}\n"], dependencies: [{ kind: "component", type: DynamicFormGroupComponent, selector: "snteam-dynamic-form-group", inputs: ["formGroupName", "question", "formGroup"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DynamicNestedFormQuestionComponent, selector: "snteam-dynamic-nested-form-question", inputs: ["groupName", "question", "formGroup"] }, { kind: "pipe", type: ValToTitlePipe, name: "valToTitle" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'snteam-dynamic-form-group', standalone: true, imports: [CommonModule, ReactiveFormsModule,
+                        MatDividerModule,
+                        ValToTitlePipe, DynamicNestedFormQuestionComponent], template: "<form autocomplete=\"off\" [formGroup]=\"form\">\n  <h2>{{question.key | valToTitle}}</h2>\n  <mat-divider></mat-divider>\n  @for (q of $any(question).questions; track q) {\n  @if (q.controlType != 'formgroup') {\n  <div class=\"form-row\">\n    <snteam-dynamic-nested-form-question [question]=\"q\" [formGroup]=\"formGroup\" [groupName]=\"question.key\"></snteam-dynamic-nested-form-question>\n  </div>\n  }\n  @if (q.controlType == 'formgroup') {\n  <div class=\"group-row\">\n    <snteam-dynamic-form-group [question]=\"q\" [formGroup]=\"form\" [formGroupName]=\"q.key\"></snteam-dynamic-form-group>\n  </div>\n  }\n  }\n  <mat-divider></mat-divider>\n</form>", styles: [".form-row{margin-top:20px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormGroupDirective }, { type: AmplifyFormBuilderService }], propDecorators: { formGroupName: [{
+                type: Input
+            }], question: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }] } });
+
+class AddRelationshipDialogComponent {
+    dialogRef = inject((MatDialogRef));
+    data = inject(MAT_DIALOG_DATA);
+    modelItem = model(this.data.modelItem, ...(ngDevMode ? [{ debugName: "modelItem" }] : []));
+    ams = inject(AmplifyModelService);
+    items$;
+    ngOnInit() {
+        console.log('AddRelationshipDialogComponent init this.data', this.data);
+        let selectedIdsArr = [];
+        if (this.data.selectedItems && this.data.selectedItems.length > 0) {
+            this.data.selectedItems.forEach(item => {
+                console.log('item', item, 'this.data.rel', this.data.rel);
+                selectedIdsArr.push(item[this.data.rel.fieldName].id);
+            });
+        }
+        console.log('AddRelationshipDialogComponent selectedIdsArr', selectedIdsArr);
+        const relationshipChoices = this.ams.getRelationshipChoices(this.data.rel, selectedIdsArr);
+        if (relationshipChoices) {
+            this.items$ = relationshipChoices;
+        }
+        console.log('AddRelationshipDialogComponent this.items$', this.items$);
+    }
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddRelationshipDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AddRelationshipDialogComponent, isStandalone: true, selector: "snteam-add-relationship-dialog", inputs: { modelItem: { classPropertyName: "modelItem", publicName: "modelItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelItem: "modelItemChange" }, ngImport: i0, template: "<h2 mat-dialog-title>Add New {{data.rel.partnerModelName}}</h2>\n<mat-dialog-content>\n  <mat-select [(ngModel)]=\"modelItem\">\n    @if (items$ | async; as items) {\n    @for (item of items.items; track item?.id) {\n    <mat-option [value]=\"item\">{{item.title}}</mat-option>\n    }\n    } @else {\n    <p>Loading Items...</p>\n    }\n  </mat-select>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button (click)=\"onNoClick()\">Cancel</button>\n  <button mat-button [mat-dialog-close]=\"modelItem()\" cdkFocusInitial>Add</button>\n</mat-dialog-actions>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: 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: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AddRelationshipDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'snteam-add-relationship-dialog', standalone: true, imports: [
+                        CommonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        MatSelectModule,
+                        MatButtonModule,
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatDialogClose,
+                    ], template: "<h2 mat-dialog-title>Add New {{data.rel.partnerModelName}}</h2>\n<mat-dialog-content>\n  <mat-select [(ngModel)]=\"modelItem\">\n    @if (items$ | async; as items) {\n    @for (item of items.items; track item?.id) {\n    <mat-option [value]=\"item\">{{item.title}}</mat-option>\n    }\n    } @else {\n    <p>Loading Items...</p>\n    }\n  </mat-select>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button (click)=\"onNoClick()\">Cancel</button>\n  <button mat-button [mat-dialog-close]=\"modelItem()\" cdkFocusInitial>Add</button>\n</mat-dialog-actions>" }]
+        }], propDecorators: { modelItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelItem", required: false }] }, { type: i0.Output, args: ["modelItemChange"] }] } });
+
+// Note: These imports will need to be updated based on the actual Amplify setup in the consuming application
+// import type { Schema } from '../../../../amplify/data/resource';
+// import outputs from '../../../../amplify_outputs.json';
+class DynamicRelationshipBuilderComponent {
+    ams;
+    m2m;
+    item;
+    model;
+    m2mItems;
+    constructor(ams) {
+        this.ams = ams;
+    }
+    modelItem; // = signal('');
+    dialog = inject(MatDialog);
+    ngOnInit() {
+        console.log('DynamicRelationshipBuilderComponent model', this.m2m);
+        this.listItems();
+        this.setCreateSubscription();
+    }
+    async perhapsAddM2MItem(item) {
+        let m2mItem = { id: item.id };
+        const { data: retItem } = await item[this.m2m.fieldName]();
+        m2mItem[this.m2m.fieldName] = retItem;
+        let existingInd = this.m2mItems.findIndex((x) => x.id == item.id);
+        if (existingInd > -1) {
+            if (!this.m2mItems[existingInd][this.m2m.fieldName]) {
+                console.log('would delete existing', this.m2mItems[existingInd]);
+                this.m2mItems.splice(existingInd, 1);
+            }
+        }
+        this.m2mItems.push(m2mItem);
+        //console.log('perhapsAddM2MItem', item, 'm2m', this.m2m);
+    }
+    setCreateSubscription() {
+        this.ams.setRelatedSub(this.m2m, this.item.id)?.subscribe({
+            next: (data) => this.perhapsAddM2MItem(data), //(console.log('setRelatedSub m2mItems', this.m2mItems, 'data', data),
+            error: (error) => console.warn(error),
+        });
+    }
+    listItems() {
+        this.ams.getRelatedItems(this.m2m, this.item.id)?.subscribe({
+            next: ({ items, isSynced }) => {
+                this.m2mItems = items;
+            },
+        });
+    }
+    /**
+    Customize this function to include all desired models from your file
+    */
+    setModelItem(model) {
+        let mdl = model || this.model;
+        console.log('setModelItem mdl', mdl);
+        this.modelItem = signal(this.ams.getEmptyObjectForModel(mdl), ...(ngDevMode ? [{ debugName: "modelItem" }] : []));
+    }
+    async deleteRelatedItem(item) {
+        console.log('deleteRelatedItem for item', item, 'm2m', this.m2m);
+        //this.ams.deleteRelationship(this.m2m.relationshipModelName, item.id);
+        await this.ams.deleteRelationship(this.m2m.relationshipModelName, item.id);
+    }
+    openDialog(rel) {
+        console.log('openDialog clicked for rel', rel);
+        this.setModelItem(rel.partnerModelName);
+        const dialogRef = this.dialog.open(AddRelationshipDialogComponent, {
+            data: { rel: rel, modelItem: this.modelItem(), selectedItems: this.m2mItems },
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result)
+                this.handleDialogResult(result, rel);
+        });
+    }
+    handleDialogResult(result, rel) {
+        if (!result)
+            return;
+        console.log('handleDialogResult', result, 'rel', rel);
+        if (result !== undefined) {
+            this.modelItem.set(result);
+        }
+        let relIdName = rel.partnerModelName.toLowerCase() + 'Id';
+        let thisIdName = rel.baseModelName.toLowerCase() + 'Id';
+        let newRelObj = {};
+        newRelObj[relIdName] = result.id;
+        newRelObj[thisIdName] = this.item.id;
+        this.ams.createRelationship(rel.relationshipModelName, newRelObj);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicRelationshipBuilderComponent, deps: [{ token: AmplifyModelService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicRelationshipBuilderComponent, isStandalone: true, selector: "snteam-dynamic-relationship-builder", inputs: { m2m: "m2m", item: "item", model: "model" }, ngImport: i0, template: "<div class=\"record-relationship-holder\">\n  <div class=\"relationship-type\">\n    <mat-toolbar>\n      <span>{{m2m.partnerModelName}} Management</span>\n      <span class=\"rel-title-spacer\"></span>\n      <button mat-icon-button attr.aria-label=\"Add {{m2m.name}}\" (click)=\"openDialog(m2m)\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </mat-toolbar>\n    @if(m2mItems && m2mItems.length > 0){\n    <mat-list>\n      @for (item of m2mItems; track item?.id) {\n      @if(item[m2m.fieldName]){\n      <mat-list-item>\n        <span matListItemTitle>{{item[m2m.fieldName].name || item[m2m.fieldName].title}}</span>\n        <button mat-icon-button (click)=\"deleteRelatedItem(item)\" matListItemMeta>\n          <mat-icon>delete</mat-icon>\n        </button>\n      </mat-list-item>\n      }\n      }\n    </mat-list>\n    }\n    @else {\n    Add your first {{m2m.partnerModelName}}\n    }\n  </div>\n</div>", styles: [".relationship-type{margin-top:20px}.rel-title-spacer{flex:1 1 auto}mat-toolbar button{background:transparent;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonModule }, { 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: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5$1.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicRelationshipBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'snteam-dynamic-relationship-builder', standalone: true, imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatListModule,
+                        FormsModule,
+                        CommonModule], template: "<div class=\"record-relationship-holder\">\n  <div class=\"relationship-type\">\n    <mat-toolbar>\n      <span>{{m2m.partnerModelName}} Management</span>\n      <span class=\"rel-title-spacer\"></span>\n      <button mat-icon-button attr.aria-label=\"Add {{m2m.name}}\" (click)=\"openDialog(m2m)\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </mat-toolbar>\n    @if(m2mItems && m2mItems.length > 0){\n    <mat-list>\n      @for (item of m2mItems; track item?.id) {\n      @if(item[m2m.fieldName]){\n      <mat-list-item>\n        <span matListItemTitle>{{item[m2m.fieldName].name || item[m2m.fieldName].title}}</span>\n        <button mat-icon-button (click)=\"deleteRelatedItem(item)\" matListItemMeta>\n          <mat-icon>delete</mat-icon>\n        </button>\n      </mat-list-item>\n      }\n      }\n    </mat-list>\n    }\n    @else {\n    Add your first {{m2m.partnerModelName}}\n    }\n  </div>\n</div>", styles: [".relationship-type{margin-top:20px}.rel-title-spacer{flex:1 1 auto}mat-toolbar button{background:transparent;color:#000}\n"] }]
+        }], ctorParameters: () => [{ type: AmplifyModelService }], propDecorators: { m2m: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }] } });
+
+// Note: These imports will need to be updated based on the actual Amplify setup in the consuming application
+// import type { Schema } from '../../../../amplify/data/resource';
+// import outputs from '../../../../amplify_outputs.json';
+class RecordRelationshipsComponent {
+    ams;
+    model = '';
+    id;
+    item;
+    amplifyOutputs; // Allow injection of amplify outputs
+    constructor(ams) {
+        this.ams = ams;
+    }
+    m2mDetailArrays = [];
+    //readonly animal = signal('');
+    modelItem; // = signal('');
+    dialog = inject(MatDialog);
+    ngOnInit() {
+        console.log('DynamicRelationshipBuilderComponent model', this.model, 'id', this.id, 'item', this.item);
+        //this.setModelItem();
+        if (!this.amplifyOutputs) {
+            console.warn('RecordRelationshipsComponent: amplifyOutputs not provided. Component may not function correctly.');
+            return;
+        }
+        console.log('DynamicRelationshipBuilderComponent outputs.data.model_introspection.models', this.amplifyOutputs.data.model_introspection.models);
+        var fields = this.amplifyOutputs.data.model_introspection.models[this.model].fields;
+        var values = Object.values(fields);
+        for (var v in values) {
+            var fieldObj = values[v];
+            if (typeof fieldObj.type != 'object')
+                continue;
+            if (!fieldObj.type.model)
+                continue;
+            let m2mDetails = this.getDetailsForManyToMany(fieldObj, this.model);
+            if (m2mDetails) {
+                this.m2mDetailArrays.push(m2mDetails);
+            }
+            console.log('DynamicRelationshipBuilderComponent ref field', fieldObj);
+            console.log('DynamicRelationshipBuilderComponent m2mDetails', m2mDetails);
+        }
+        console.log('DynamicRelationshipBuilderComponent m2mDetailArrays', this.m2mDetailArrays);
+    }
+    /**
+    Customize this function to include all desired models from your file
+    */
+    setModelItem(model) {
+        let mdl = model || this.model;
+        console.log('setModelItem mdl', mdl);
+        signal(this.ams.getEmptyObjectForModel(mdl));
+    }
+    getFieldNameForAssociatedWithModel(relationshipModelName, associatedWith) {
+        if (!this.amplifyOutputs)
+            return;
+        var relationshipModel = this.amplifyOutputs.data.model_introspection.models[relationshipModelName].fields;
+        console.log('getFieldNameForAssociatedWithModel relationshipModel', relationshipModel);
+        var fieldVals = Object.values(relationshipModel);
+        for (let field of fieldVals) {
+            const fieldAny = field;
+            console.log('getFieldNameForAssociatedWithModel field', field);
+            if (!fieldAny.association)
+                continue;
+            if (fieldAny.association.targetNames.indexOf(associatedWith) > -1)
+                continue;
+            // there should only be two fields with associations.
+            // if we get here we are in the field we want
+            return fieldAny.name;
+        }
+    }
+    getDetailsForManyToMany(fieldObj, baseModelName) {
+        if (!this.amplifyOutputs)
+            return null;
+        let relationshipModelName = fieldObj.type.model;
+        let associatedWith = fieldObj.association.associatedWith[0]; //TODO this may not work for more complex Schemas!!!
+        console.log('getDetailsForManyToMany relationshipModelName', relationshipModelName, 'baseModelName', baseModelName);
+        this.getFieldNameForAssociatedWithModel(relationshipModelName, associatedWith);
+        // TODO: MAKE THIS AUTO REFRESH... maybe make this a signal?
+        let ret = {
+            relationshipModelName: relationshipModelName,
+            baseModelName: baseModelName,
+            fieldName: this.getFieldNameForAssociatedWithModel(relationshipModelName, associatedWith),
+            associatedWith: associatedWith
+        };
+        var relationshipModel = this.amplifyOutputs.data.model_introspection.models[relationshipModelName].fields;
+        var vals = Object.values(relationshipModel);
+        for (var i in vals) {
+            const val = vals[i];
+            if (typeof val.type != 'object')
+                continue;
+            if (!val.type.model)
+                continue;
+            if (val.type.model == baseModelName)
+                continue;
+            console.log('vals[i]', vals[i]);
+            var modelName = val.type.model;
+            let refModel = this.amplifyOutputs.data.model_introspection.models[modelName].fields;
+            ret.partnerModelName = modelName;
+            //this.ams.getRelatedItems(ret, this.item.id);
+        }
+        console.log('getDetailsForManyToMany ret', ret);
+        return ret;
+    }
+    deleteRelatedItem(item) {
+        console.log('deleteRelatedItem for item', item);
+    }
+    openDialog(rel) {
+        console.log('openDialog clicked for rel', rel);
+        this.setModelItem(rel.partnerModelName);
+        const dialogRef = this.dialog.open(AddRelationshipDialogComponent, {
+            data: { rel: rel, modelItem: this.modelItem() },
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            console.log('The dialog was closed');
+            this.handleDialogResult(result, rel);
+        });
+    }
+    handleDialogResult(result, rel) {
+        console.log('handleDialogResult', result, 'rel', rel);
+        if (result !== undefined) {
+            this.modelItem.set(result);
+        }
+        let relIdName = rel.partnerModelName.toLowerCase() + 'Id';
+        let thisIdName = rel.baseModelName.toLowerCase() + 'Id';
+        let newRelObj = {};
+        newRelObj[relIdName] = result.id;
+        newRelObj[thisIdName] = this.id || this.item.id;
+        this.ams.createRelationship(rel.relationshipModelName, newRelObj);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RecordRelationshipsComponent, deps: [{ token: AmplifyModelService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RecordRelationshipsComponent, isStandalone: true, selector: "snteam-record-relationships", inputs: { model: "model", id: "id", item: "item", amplifyOutputs: "amplifyOutputs" }, ngImport: i0, template: "<div class=\"relationship-builder-holder\">\n  @if(item){\n  <div class=\"relationship-builder\">\n    @for (m2m of m2mDetailArrays; track m2m) {\n    <snteam-dynamic-relationship-builder [m2m]=\"m2m\" [item]=\"item\" [model]=\"model\"></snteam-dynamic-relationship-builder>\n    }\n  </div>\n  }\n  @else {\n  <div class=\"blank-relationship-builder\">Create the {{model}} first, then add relationships</div>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: DynamicRelationshipBuilderComponent, selector: "snteam-dynamic-relationship-builder", inputs: ["m2m", "item", "model"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RecordRelationshipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'snteam-record-relationships', standalone: true, imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatListModule,
+                        DynamicRelationshipBuilderComponent,
+                        FormsModule,
+                        CommonModule], template: "<div class=\"relationship-builder-holder\">\n  @if(item){\n  <div class=\"relationship-builder\">\n    @for (m2m of m2mDetailArrays; track m2m) {\n    <snteam-dynamic-relationship-builder [m2m]=\"m2m\" [item]=\"item\" [model]=\"model\"></snteam-dynamic-relationship-builder>\n    }\n  </div>\n  }\n  @else {\n  <div class=\"blank-relationship-builder\">Create the {{model}} first, then add relationships</div>\n  }\n</div>" }]
+        }], ctorParameters: () => [{ type: AmplifyModelService }], propDecorators: { model: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], amplifyOutputs: [{
+                type: Input
+            }] } });
+
+class QuestionBase {
+    model;
+    value;
+    key;
+    label;
+    required;
+    order;
+    controlType;
+    type;
+    options;
+    tooltip;
+    validators;
+    constructor(options = {}) {
+        this.model = options.model || '';
+        this.value = options.value;
+        this.key = options.key || '';
+        this.label = options.label || '';
+        this.required = !!options.required;
+        this.order = options.order === undefined ? 1 : options.order;
+        this.controlType = options.controlType || '';
+        this.type = options.type || '';
+        this.options = options.options || [];
+        this.tooltip = options.tooltip || '';
+        this.validators = options.validators;
+    }
+}
+class TimePickerQuestion extends QuestionBase {
+    controlType = 'time';
+    constructor(options = {}) {
+        super(options);
+    }
+}
+class DatePickerQuestion extends QuestionBase {
+    controlType = 'date';
+    min;
+    max;
+    startDate;
+    constructor(options = {}) {
+        super(options);
+        this.min = new Date(options['min']) ?? new Date('January 01, 1900 00:00:00');
+        var thisYear = new Date().getUTCFullYear;
+        this.max = new Date(options['max']) ?? new Date('December 31 ' + thisYear + ' 23:59:59');
+        this.startDate = new Date(options['startDate']) ?? new Date();
+    }
+}
+class DateTimePickerQuestion extends QuestionBase {
+    controlType = 'date-time';
+    min;
+    max;
+    startDate;
+    constructor(options = {}) {
+        super(options);
+        this.min = new Date(options['min']) ?? new Date('January 01, 1900 00:00:00');
+        var thisYear = new Date().getUTCFullYear;
+        this.max = new Date(options['max']) ?? new Date('December 31 ' + thisYear + ' 23:59:59');
+        this.startDate = new Date(options['startDate']) ?? new Date();
+    }
+}
+class SliderQuestion extends QuestionBase {
+    controlType = 'slider';
+    min;
+    max;
+    constructor(options = {}) {
+        super(options);
+        this.min = options['min'] || 0;
+        this.max = options['max'] || 100;
+    }
+}
+class NumberQuestion extends QuestionBase {
+    controlType = 'number';
+}
+class TextboxQuestion extends QuestionBase {
+    controlType = 'textbox';
+}
+class EmailQuestion extends QuestionBase {
+    controlType = 'email';
+}
+class PhoneQuestion extends QuestionBase {
+    controlType = 'tel';
+}
+class DropdownQuestion extends QuestionBase {
+    controlType = 'dropdown';
+}
+class AsyncDropdownQuestion extends QuestionBase {
+    controlType = 'async-dropdown';
+    targetModel;
+    multiple;
+    ddbKey;
+    constructor(options = {}) {
+        super(options);
+        this.targetModel = options['targetModel'];
+        this.multiple = options['multiple'];
+        this.ddbKey = options['ddbKey'];
+    }
+}
+class FormGroupQuestion extends QuestionBase {
+    controlType = 'formgroup';
+    formGroup;
+    questions = [];
+    constructor(options = {}) {
+        super(options);
+        this.formGroup = options['formGroup'];
+        this.questions = options['questions'];
+    }
+}
+
+// Simple phone number validator (can be customized further)
+function phoneNumberValidator() {
+    return (control) => {
+        const phoneNumber = control.value;
+        // Use a regular expression to validate the phone number format
+        const regex = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
+        if (!phoneNumber || regex.test(phoneNumber)) {
+            return null; // Valid phone number
+        }
+        else {
+            return { invalidPhoneNumber: true }; // Invalid phone number
+        }
+    };
+}
+
+class QuestionControlService {
+    ams;
+    outputs;
+    constructor(ams) {
+        this.ams = ams;
+    }
+    /**
+     * Initialize the service with Amplify outputs
+     * This should be called by the consuming application after Amplify.configure()
+     */
+    initializeOutputs(outputs) {
+        this.outputs = outputs;
+    }
+    getFieldForFieldObj(fieldObj, model) {
+        if (!this.outputs) {
+            console.error('QuestionControlService: Outputs not initialized. Call initializeOutputs() first.');
+            return null;
+        }
+        console.log('getFieldForFieldObj starting for type', fieldObj.type, 'fieldObj', fieldObj);
+        switch (fieldObj.type) {
+            case 'String':
+                return this._addStringQuestion(fieldObj, model);
+            case 'Int':
+            case 'Float':
+                return this._addNumberQuestion(fieldObj, model);
+            case 'AWSDate':
+            case 'AWSDateTime':
+                return this._addDatePickerQuestion(fieldObj, model);
+            case 'AWSEmail':
+                return this._addEmailQuestion(fieldObj, model);
+            case 'AWSPhone':
+                return this._addPhoneQuestion(fieldObj, model);
+        }
+        if (typeof fieldObj.type === 'object') {
+            if (fieldObj.type.model) {
+                return this.getRefModel(fieldObj, model);
+            }
+            if (fieldObj.type.nonModel) {
+                let groupQuestions = this.getNonModelQuestions(fieldObj, model);
+                var formGroup = this.toFormGroup(groupQuestions);
+                return this._addFormGroupQuestion(fieldObj, formGroup, groupQuestions);
+            }
+            if (fieldObj.type.enum) {
+                return this.getEnumQuestion(fieldObj, model);
+            }
+        }
+        return null;
+    }
+    getLabelForFieldName(name) {
+        return name.toLowerCase().split('_').map((word) => {
+            return word.charAt(0).toUpperCase() + word.slice(1);
+        }).join(' ');
+    }
+    getQuestionsForModelFields(model) {
+        if (!this.outputs) {
+            console.error('QuestionControlService: Outputs not initialized. Call initializeOutputs() first.');
+            return [];
+        }
+        console.log('outputs.data.model_introspection', this.outputs.data.model_introspection);
+        const fields = this.outputs.data.model_introspection.models[model].fields;
+        const questions = [];
+        const values = Object.values(fields);
+        const skipFields = ['createdAt', 'updatedAt', 'id'];
+        for (const fieldObj of values) {
+            if (skipFields.indexOf(fieldObj.name) > -1)
+                continue;
+            if (typeof fieldObj.type === 'object' && fieldObj.type.model) {
+                continue; // skip model relationship fields
+            }
+            const q = this.getFieldForFieldObj(fieldObj, model);
+            if (q) {
+                questions.push(q);
+            }
+            else {
+                console.log('no question returned for fieldObj', fieldObj, 'model', model);
+            }
+        }
+        console.log('getQuestionsForModelFields questions', questions);
+        return questions;
+    }
+    /** nonModel, form section Methods **/
+    getNonModelQuestions(fieldObj, model) {
+        if (!this.outputs) {
+            console.error('QuestionControlService: Outputs not initialized. Call initializeOutputs() first.');
+            return [];
+        }
+        const nonModel = fieldObj.type.nonModel;
+        const fields = this.outputs.data.model_introspection.nonModels[nonModel].fields;
+        const questions = [];
+        const values = Object.values(fields);
+        const skipFields = ['createdAt', 'updatedAt'];
+        for (const nestedFieldObj of values) {
+            const question = this.getFieldForFieldObj(nestedFieldObj, model);
+            if (question) {
+                questions.push(question);
+            }
+        }
+        console.log('getNonModelQuestions questions', questions);
+        return questions;
+    }
+    getEnumQuestion(fieldObj, model) {
+        if (!this.outputs) {
+            console.error('QuestionControlService: Outputs not initialized. Call initializeOutputs() first.');
+            return null;
+        }
+        const enumName = fieldObj.type.enum;
+        const e = this.outputs.data.model_introspection.enums[enumName];
+        console.log('getEnumQuestion e', e);
+        const choices = [];
+        e.values.forEach((val) => {
+            choices.push({ key: val, value: val });
+        });
+        return this._addDropdownQuestion(fieldObj, choices, model);
+    }
+    /** Reference Field Methods **/
+    getRefModel(fieldObj, callingModel) {
+        if (!this.outputs) {
+            console.error('QuestionControlService: Outputs not initialized. Call initializeOutputs() first.');
+            return null;
+        }
+        console.log('getRefModel starting for fieldObj', fieldObj);
+        const referenceModel = fieldObj.type.model;
+        const relModel = this.outputs.data.model_introspection.models[referenceModel].fields;
+        const vals = Object.values(relModel);
+        for (const val of vals) {
+            const fieldVal = val;
+            if (typeof fieldVal.type !== 'object')
+                continue;
+            if (!fieldVal.type.model)
+                continue;
+            if (fieldVal.type.model === callingModel)
+                continue;
+            const modelName = fieldVal.type.model;
+            return this._addRefDropdownQuestion(fieldObj, callingModel, modelName);
+        }
+        return null;
+    }
+    _addFormGroupQuestion(fieldObj, formGroup, questions) {
+        const name = fieldObj.name.toString();
+        return new FormGroupQuestion({
+            key: name,
+            label: this.getLabelForFieldName(fieldObj.name),
+            required: fieldObj.isRequired,
+            type: 'formgroup',
+            formGroup: formGroup,
+            questions: questions
+        });
+    }
+    _addDropdownQuestion(fieldObj, items, model) {
+        console.log('_addDropdownQuestion for fieldObj', fieldObj, 'items', items);
+        const name = fieldObj.name.toString();
+        return new DropdownQuestion({
+            key: name,
+            label: this.getLabelForFieldName(fieldObj.name),
+            required: fieldObj.isRequired,
+            options: items,
+            type: 'dropdown',
+            model: model
+        });
+    }
+    _addRefDropdownQuestion(fieldObj, model, targetModel) {
+        console.log('_addRefDropdownQuestion for fieldObj', fieldObj);
+        const name = fieldObj.name.toString();
+        return new AsyncDropdownQuestion({
+            key: name,
+            label: this.getLabelForFieldName(fieldObj.name),
+            required: fieldObj.isRequired,
+            type: 'dropdown',
+            model: model,
+            targetModel: targetModel,
+            multiple: fieldObj.association?.connectionType === "HAS_MANY"
+        });
+    }
+    _addDatePickerQuestion(fieldObj, model) {
+        const name = fieldObj.name.toString();
+        return new DatePickerQuestion({
+            key: name,
+            label: this.getLabelForFieldName(fieldObj.name),
+            required: fieldObj.isRequired,
+            type: 'date',
+            model: model
+        });
+    }
+    _addNumberQuestion(fieldObj, model) {
+        const name = fieldObj.name.toString();
+        return new NumberQuestion({
+            key: name,
+            label: this.getLabelForFieldName(fieldObj.name),
+            required: fieldObj.isRequired,
+            type: 'number',
+            model: model
+        });
+    }
+    _addStringQuestion(fieldObj, model) {
+        const name = fieldObj.name.toString();
+        return new TextboxQuestion({
+            key: name,
+            label: this.getLabelForFieldName(fieldObj.name),
+            required: fieldObj.isRequired,
+            type: 'textbox',
+            model: model
+        });
+    }
+    _addEmailQuestion(fieldObj, model) {
+        const name = fieldObj.name.toString();
+        return new EmailQuestion({
+            key: name,
+            label: this.getLabelForFieldName(fieldObj.name),
+            required: fieldObj.isRequired,
+            type: 'email',
+            validators: [Validators.email],
+            model: model
+        });
+    }
+    _addPhoneQuestion(fieldObj, model) {
+        const name = fieldObj.name.toString();
+        return new PhoneQuestion({
+            key: name,
+            label: this.getLabelForFieldName(fieldObj.name),
+            required: fieldObj.isRequired,
+            type: 'tel',
+            validators: [phoneNumberValidator()],
+            model: model
+        });
+    }
+    toFormGroup(questions) {
+        const group = {};
+        questions.forEach(question => {
+            if (!question)
+                return;
+            if ('questions' in question && question.questions) {
+                group[question.key] = this.toFormGroup(question.questions);
+            }
+            else {
+                const validators = [];
+                if (question.required) {
+                    validators.push(Validators.required);
+                }
+                if (question.validators) {
+                    validators.push(...question.validators);
+                }
+                group[question.key] = new FormControl(question.value || '', validators);
+            }
+        });
+        return new FormGroup(group);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuestionControlService, deps: [{ token: AmplifyModelService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuestionControlService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuestionControlService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: AmplifyModelService }] });
+
+/** Error when invalid control is dirty, touched, or submitted. */
+class MyErrorStateMatcher {
+    isErrorState(control, form) {
+        const isSubmitted = form && form.submitted;
+        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+    }
+}
+class DynamicFormComponent {
+    qcs;
+    afb;
+    location;
+    model = "";
+    itemId = "";
+    valueMap;
+    hideRelationships = false;
+    hideSaveButton = false;
+    itemOutput = new EventEmitter();
+    submitOutput = new EventEmitter();
+    formLoaded = new EventEmitter();
+    mdl = '';
+    id = '';
+    item;
+    payLoad;
+    form;
+    questions = [];
+    materialInputs = [];
+    switchInputs = [];
+    formGroupInputs = ['formgroup'];
+    refInputs = [];
+    ams = inject(AmplifyModelService);
+    _snackBar = inject(MatSnackBar);
+    constructor(qcs, afb, location) {
+        this.qcs = qcs;
+        this.afb = afb;
+        this.location = location;
+    }
+    ngOnInit() {
+        this.materialInputs = this.afb.getMaterialInputs();
+        this.switchInputs = this.afb.getSwitchInputs();
+        this.refInputs = this.afb.getRefInputs();
+        // Use inputs instead of route params
+        this.mdl = this.model;
+        this.id = this.itemId;
+        if (this.id == '-1' || !this.id) {
+            this.setQuestionsAndForm();
+        }
+        else {
+            this.getItem();
+        }
+    }
+    setFormBuilderForm() {
+        this.form = this.afb.buildFormForModel(this.mdl);
+    }
+    async getItem() {
+        const { data: item } = await this.ams.getItemForModel(this.mdl, this.id);
+        this.item = item;
+        this.itemOutput.emit(this.item);
+        this.setQuestionsAndForm();
+    }
+    setQuestionsAndForm() {
+        if (!this.questions || this.questions.length == 0) {
+            this.questions = this.qcs.getQuestionsForModelFields(this.mdl);
+        }
+        if (this.item) {
+            for (let question of this.questions) {
+                this.setQuestionValueFromItem(question);
+            }
+        }
+        // Apply valueMap if provided
+        if (this.valueMap) {
+            for (let question of this.questions) {
+                this.setQuestionValueFromValueMap(question, this.valueMap);
+            }
+        }
+        this.form = this.qcs.toFormGroup(this.questions);
+        this.formLoaded.emit(this.form);
+        console.log('this.item', this.item);
+    }
+    setQuestionValueFromItem(question, item) {
+        if (!item)
+            item = this.item;
+        if (question.controlType == 'formgroup') {
+            for (let q of question.questions) {
+                this.setQuestionValueFromItem(q, item[question.key]);
+            }
+        }
+        else if (item[question.key]) {
+            question.value = item[question.key];
+        }
+        else {
+            console.log('setQuestionValueFromItem no item found and not formgroup');
+        }
+    }
+    setQuestionValueFromValueMap(question, valueMap) {
+        if (question.controlType == 'formgroup') {
+            for (let q of question.questions) {
+                this.setQuestionValueFromValueMap(q, valueMap);
+            }
+        }
+        else if (valueMap[question.key] !== undefined) {
+            question.value = valueMap[question.key];
+        }
+    }
+    getValueForKey(obj, key) {
+        if (obj === null || typeof obj !== 'object') {
+            return null;
+        }
+        if (key in obj) {
+            return obj[key];
+        }
+        for (const k in obj) {
+            const result = this.getValueForKey(obj[k], key);
+            if (result !== null) {
+                return result;
+            }
+        }
+        return null;
+    }
+    setValueForKey(obj, key, val) {
+        if (obj === null || typeof obj !== 'object') {
+            return;
+        }
+        if (key in obj) {
+            obj[key] = val;
+        }
+        for (const k in obj) {
+            if (typeof obj[k] == 'object') {
+                this.setValueForKey(obj[k], key, val);
+            }
+        }
+    }
+    setRefQuestionValuesInPayload(questions, payLoadObj) {
+        let qs = questions || this.questions;
+        let refQs = qs.filter((x) => x.controlType == 'async-dropdown');
+        if (refQs) {
+            refQs.forEach((refQ) => {
+                let keyVal = this.getValueForKey(this.payLoad, refQ.key);
+                if (Array.isArray(keyVal)) {
+                    let relArr = [];
+                    for (var v in keyVal) {
+                        let valObj = {};
+                        valObj[refQ.targetModel.toLowerCase() + 'Id'] = keyVal[v];
+                        valObj[this.mdl.toLowerCase() + 'Id'] = this.id;
+                        relArr.push(valObj);
+                    }
+                    this.setValueForKey(this.payLoad, refQ.key, relArr);
+                }
+                else {
+                    console.log('qs keyVal is not array');
+                }
+            });
+        }
+        let groupQs = qs.filter((x) => x.controlType == 'formgroup');
+        if (groupQs) {
+            for (let groupQ of groupQs) {
+                console.log('qs checking groupQ', groupQ);
+                this.setRefQuestionValuesInPayload(groupQ.questions);
+            }
+        }
+        console.log('qs payload', this.payLoad);
+    }
+    questionsIncludesRefType(questions) {
+        let qs = questions || this.questions;
+        let refQ = qs.find((x) => x.controlType == 'async-dropdown');
+        if (refQ)
+            return true;
+        let groupQs = qs.filter((x) => x.controlType == 'formgroup');
+        if (groupQs) {
+            for (let groupQ of groupQs) {
+                if (this.questionsIncludesRefType(groupQ.questions)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    formHasRelationshipQuestions() {
+        return this.questionsIncludesRefType();
+    }
+    onSubmit() {
+        this.payLoad = this.form.getRawValue();
+        if (this.item && this.item.id) {
+            this.payLoad.id = this.item.id;
+            console.log('will update because this.item.id', this.item.id);
+            this.updateItem();
+        }
+        else {
+            console.log('will create because !this.item.id', this.item);
+            this.createItem();
+        }
+        this.submitOutput.emit(this.payLoad);
+        console.log('onSubmit payload', this.payLoad, 'this.item', this.item, 'this.form', this.form);
+    }
+    async updateItem() {
+        const { data: item } = await this.ams.updateItemForModel(this.mdl, this.payLoad);
+        this.item = item;
+        this.itemOutput.emit(this.item);
+        this.setQuestionsAndForm();
+    }
+    getQuestionForKey(key, questions) {
+        let searchQs = questions || this.questions;
+        let q = searchQs.find((x) => x.key == key);
+        if (q)
+            return q;
+        let groupQs = searchQs.filter((x) => x.controlType == 'formgroup');
+        if (groupQs) {
+            for (let groupQ of groupQs) {
+                console.log('searchQs checking groupQ', groupQ);
+                q = this.getQuestionForKey(key, groupQ.questions);
+                if (q)
+                    return q;
+            }
+        }
+        return;
+    }
+    prepPayloadObj(obj) {
+        let prepObj = obj || this.payLoad;
+        console.log('prepPayloadObj starting for prepObj', prepObj);
+        for (let prop in prepObj) {
+            let q = this.getQuestionForKey(prop);
+            if (q) {
+                console.log('q', q);
+                if (q.controlType == "formgroup") {
+                    this.prepPayloadObj(prepObj[prop]);
+                }
+                else {
+                    if (!q.required && prepObj[prop] == '') {
+                        delete prepObj[prop];
+                    }
+                }
+            }
+            else {
+                console.log('prepPayloadObj no q for prop', prop);
+            }
+        }
+    }
+    async createItem() {
+        this.prepPayloadObj();
+        console.log('createItem prepped payload', this.payLoad);
+        try {
+            let res = await this.ams.createItemPromise(this.mdl, this.payLoad);
+            console.log('createItem finished res', res);
+            if (!res) {
+                this._snackBar.open('Error creating ' + this.mdl, 'Dismiss');
+                return;
+            }
+            if (res.errors && res.errors.length > 0) {
+                let messages = [];
+                res.errors.forEach((err) => {
+                    messages.push(err.message);
+                });
+                this._snackBar.open(messages.join('\n'), 'Dismiss');
+            }
+            else {
+                this.item = res.data;
+                this.itemOutput.emit(this.item);
+                this.setQuestionsAndForm();
+            }
+        }
+        catch (error) {
+            console.error('error in createItem', error);
+        }
+    }
+    changePathIdParam(newParamValue) {
+        const currentUrl = this.location.path();
+        let paramValArr = currentUrl.split('/');
+        let currentId = paramValArr[paramValArr.length - 1];
+        const newUrl = currentUrl.replace(currentId, newParamValue);
+        this.location.replaceState(newUrl);
+    }
+    isValid(question, q, q2) {
+        if (question && q && q2)
+            return this.form.get(question.key + '.' + q.key + '.' + q2.key);
+        if (question && q && !q2)
+            return this.form.get(question.key + '.' + q.key);
+        if (question && !q && !q2)
+            return this.form.get(question.key);
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, deps: [{ token: QuestionControlService }, { token: AmplifyFormBuilderService }, { token: i3$1.Location }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "snteam-dynamic-form", inputs: { model: "model", itemId: "itemId", valueMap: "valueMap", hideRelationships: "hideRelationships", hideSaveButton: "hideSaveButton" }, outputs: { itemOutput: "itemOutput", submitOutput: "submitOutput", formLoaded: "formLoaded" }, ngImport: i0, template: "<div class=\"dynamic-form-holder\">\n  @if (form && questions) {\n  <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n    @for (question of questions; track question) {\n    @if (this.switchInputs.includes(question.controlType) || this.materialInputs.includes(question.controlType) || this.refInputs.includes(question.controlType)) {\n    <div class=\"form-row\">\n      <snteam-dynamic-form-question [question]=\"question\" [formGroup]=\"form\"></snteam-dynamic-form-question>\n    </div>\n    }\n    @if (this.formGroupInputs.includes(question.controlType)) {\n    <div class=\"group-row\">\n      <snteam-dynamic-form-group [question]=\"question\" [formGroup]=\"form\" [formGroupName]=\"question.key\"></snteam-dynamic-form-group>\n    </div>\n    }\n    }\n    @if (!hideSaveButton) {\n    <div class=\"form-row\">\n      <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"!form.valid\">Save</button>\n    </div>\n    }\n  </form>\n  } @else {\n  <div class=\"loading\">Loading...</div>\n  }\n\n  @if(item && !hideRelationships){\n  <div class=\"relationship-holder\">\n    <snteam-record-relationships [model]=\"mdl\" [id]=\"id\" [item]=\"item\"></snteam-record-relationships>\n  </div>\n  }\n</div>", styles: [".dynamic-form-holder{padding:20px;width:100%;display:flex;justify-content:space-between;gap:20px}form{width:100%;flex-basis:40%}.relationship-holder{flex-basis:40%}.full-width{width:100%}.form-row,.group-row{margin-top:20px}.loading{padding:20px;text-align:center;color:#666}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicFormQuestionComponent, selector: "snteam-dynamic-form-question", inputs: ["question", "formGroup"] }, { kind: "component", type: DynamicFormGroupComponent, selector: "snteam-dynamic-form-group", inputs: ["formGroupName", "question", "formGroup"] }, { kind: "component", type: RecordRelationshipsComponent, selector: "snteam-record-relationships", inputs: ["model", "id", "item", "amplifyOutputs"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatDividerModule }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'snteam-dynamic-form', imports: [
+                        CommonModule,
+                        DynamicFormQuestionComponent,
+                        DynamicNestedFormQuestionComponent,
+                        DynamicFormGroupComponent,
+                        RecordRelationshipsComponent,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatSnackBarModule,
+                        MatDividerModule,
+                        MatButtonModule
+                    ], template: "<div class=\"dynamic-form-holder\">\n  @if (form && questions) {\n  <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n    @for (question of questions; track question) {\n    @if (this.switchInputs.includes(question.controlType) || this.materialInputs.includes(question.controlType) || this.refInputs.includes(question.controlType)) {\n    <div class=\"form-row\">\n      <snteam-dynamic-form-question [question]=\"question\" [formGroup]=\"form\"></snteam-dynamic-form-question>\n    </div>\n    }\n    @if (this.formGroupInputs.includes(question.controlType)) {\n    <div class=\"group-row\">\n      <snteam-dynamic-form-group [question]=\"question\" [formGroup]=\"form\" [formGroupName]=\"question.key\"></snteam-dynamic-form-group>\n    </div>\n    }\n    }\n    @if (!hideSaveButton) {\n    <div class=\"form-row\">\n      <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"!form.valid\">Save</button>\n    </div>\n    }\n  </form>\n  } @else {\n  <div class=\"loading\">Loading...</div>\n  }\n\n  @if(item && !hideRelationships){\n  <div class=\"relationship-holder\">\n    <snteam-record-relationships [model]=\"mdl\" [id]=\"id\" [item]=\"item\"></snteam-record-relationships>\n  </div>\n  }\n</div>", styles: [".dynamic-form-holder{padding:20px;width:100%;display:flex;justify-content:space-between;gap:20px}form{width:100%;flex-basis:40%}.relationship-holder{flex-basis:40%}.full-width{width:100%}.form-row,.group-row{margin-top:20px}.loading{padding:20px;text-align:center;color:#666}\n"] }]
+        }], ctorParameters: () => [{ type: QuestionControlService }, { type: AmplifyFormBuilderService }, { type: i3$1.Location }], propDecorators: { model: [{
+                type: Input
+            }], itemId: [{
+                type: Input
+            }], valueMap: [{
+                type: Input
+            }], hideRelationships: [{
+                type: Input
+            }], hideSaveButton: [{
+                type: Input
+            }], itemOutput: [{
+                type: Output
+            }], submitOutput: [{
+                type: Output
+            }], formLoaded: [{
+                type: Output
+            }] } });
+
+class ListViewComponent {
+    ams = inject(AmplifyModelService);
+    modelName = '';
+    customItemTemplate;
+    hideNewButton = false;
+    title;
+    itemClick = new EventEmitter();
+    newClick = new EventEmitter();
+    itemsLoaded = new EventEmitter();
+    itemsArr = [];
+    loading = true;
+    error = null;
+    ngOnInit() {
+        if (this.modelName) {
+            this.listItems();
+        }
+    }
+    listItems() {
+        console.log('ListViewComponent listItems starting for model:', this.modelName);
+        if (this.modelName) {
+            this.loading = true;
+            this.error = null;
+            const observable = this.ams.listItemsForModel(this.modelName);
+            if (observable) {
+                observable.subscribe({
+                    next: ({ items, isSynced }) => {
+                        this.itemsArr = items;
+                        this.loading = false;
+                        this.itemsLoaded.emit(this.itemsArr);
+                        console.log('ListViewComponent items loaded:', this.itemsArr);
+                    },
+                    error: (err) => {
+                        console.error('Error loading items:', err);
+                        this.error = 'Failed to load items';
+                        this.loading = false;
+                    }
+                });
+            }
+            else {
+                this.error = 'Service not initialized';
+                this.loading = false;
+            }
+        }
+    }
+    onItemClick(item) {
+        console.log('ListViewComponent itemClick', item);
+        this.itemClick.emit(item);
+    }
+    onNewClick() {
+        console.log('ListViewComponent newClick');
+        this.newClick.emit();
+    }
+    getDisplayText(item) {
+        // Try common display fields
+        return item.name || item.title || item.label || item.id || 'Unnamed Item';
+    }
+    refresh() {
+        this.listItems();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ListViewComponent, isStandalone: true, selector: "snteam-list-view", inputs: { modelName: "modelName", customItemTemplate: "customItemTemplate", hideNewButton: "hideNewButton", title: "title" }, outputs: { itemClick: "itemClick", newClick: "newClick", itemsLoaded: "itemsLoaded" }, ngImport: i0, template: "<div class=\"list-view-container\">\n  <div class=\"header\">\n    <h2>{{ title || modelName }}</h2>\n    @if (!hideNewButton) {\n    <button mat-raised-button color=\"primary\" (click)=\"onNewClick()\">\n      <mat-icon>add</mat-icon>\n      New {{ modelName }}\n    </button>\n    }\n  </div>\n\n  @if (loading) {\n  <div class=\"loading\">Loading {{ modelName }}...</div>\n  }\n\n  @if (error) {\n  <div class=\"error\">\n    {{ error }}\n    <button mat-button (click)=\"refresh()\">Retry</button>\n  </div>\n  }\n\n  @if (!loading && !error && itemsArr.length === 0) {\n  <div class=\"empty-state\">\n    <p>No {{ modelName }} found</p>\n    @if (!hideNewButton) {\n    <button mat-raised-button color=\"primary\" (click)=\"onNewClick()\">\n      Create First {{ modelName }}\n    </button>\n    }\n  </div>\n  }\n\n  @if (!loading && !error && itemsArr.length > 0) {\n  <mat-list class=\"items-list\">\n    @for (item of itemsArr; track item.id) {\n    <mat-list-item (click)=\"onItemClick(item)\" class=\"clickable-item\">\n      @if (customItemTemplate) {\n      <ng-container [ngTemplateOutlet]=\"customItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n      } @else {\n      <span matListItemTitle>{{ getDisplayText(item) }}</span>\n      <span matListItemLine>{{ item.description || item.createdAt | date }}</span>\n      }\n    </mat-list-item>\n    }\n  </mat-list>\n  }\n</div>", styles: [".list-view-container{padding:20px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.header h2{margin:0;color:#333}.loading,.error,.empty-state{padding:40px 20px;text-align:center;color:#666}.error{color:#d32f2f}.empty-state p{margin-bottom:20px;font-size:16px}.items-list{border:1px solid #e0e0e0;border-radius:4px}.clickable-item{cursor:pointer;transition:background-color .2s}.clickable-item:hover{background-color:#f5f5f5}.clickable-item:not(:last-child){border-bottom:1px solid #e0e0e0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i5$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'snteam-list-view', standalone: true, imports: [CommonModule, MatListModule, MatButtonModule, MatIconModule], template: "<div class=\"list-view-container\">\n  <div class=\"header\">\n    <h2>{{ title || modelName }}</h2>\n    @if (!hideNewButton) {\n    <button mat-raised-button color=\"primary\" (click)=\"onNewClick()\">\n      <mat-icon>add</mat-icon>\n      New {{ modelName }}\n    </button>\n    }\n  </div>\n\n  @if (loading) {\n  <div class=\"loading\">Loading {{ modelName }}...</div>\n  }\n\n  @if (error) {\n  <div class=\"error\">\n    {{ error }}\n    <button mat-button (click)=\"refresh()\">Retry</button>\n  </div>\n  }\n\n  @if (!loading && !error && itemsArr.length === 0) {\n  <div class=\"empty-state\">\n    <p>No {{ modelName }} found</p>\n    @if (!hideNewButton) {\n    <button mat-raised-button color=\"primary\" (click)=\"onNewClick()\">\n      Create First {{ modelName }}\n    </button>\n    }\n  </div>\n  }\n\n  @if (!loading && !error && itemsArr.length > 0) {\n  <mat-list class=\"items-list\">\n    @for (item of itemsArr; track item.id) {\n    <mat-list-item (click)=\"onItemClick(item)\" class=\"clickable-item\">\n      @if (customItemTemplate) {\n      <ng-container [ngTemplateOutlet]=\"customItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n      } @else {\n      <span matListItemTitle>{{ getDisplayText(item) }}</span>\n      <span matListItemLine>{{ item.description || item.createdAt | date }}</span>\n      }\n    </mat-list-item>\n    }\n  </mat-list>\n  }\n</div>", styles: [".list-view-container{padding:20px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.header h2{margin:0;color:#333}.loading,.error,.empty-state{padding:40px 20px;text-align:center;color:#666}.error{color:#d32f2f}.empty-state p{margin-bottom:20px;font-size:16px}.items-list{border:1px solid #e0e0e0;border-radius:4px}.clickable-item{cursor:pointer;transition:background-color .2s}.clickable-item:hover{background-color:#f5f5f5}.clickable-item:not(:last-child){border-bottom:1px solid #e0e0e0}\n"] }]
+        }], propDecorators: { modelName: [{
+                type: Input
+            }], customItemTemplate: [{
+                type: Input
+            }], hideNewButton: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], newClick: [{
+                type: Output
+            }], itemsLoaded: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of @snteam/amplify-angular-core
+ */
+// Legacy exports for backward compatibility
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AddRelationshipDialogComponent, AmplifyAngularCore, AmplifyFormBuilderService, AmplifyModelService, AsyncDropdownQuestion, DatePickerQuestion, DateTimePickerQuestion, DropdownQuestion, DynamicFormComponent, DynamicFormGroupComponent, DynamicFormQuestionComponent, DynamicNestedFormQuestionComponent, DynamicRelationshipBuilderComponent, EmailQuestion, FormGroupQuestion, ListViewComponent, MyErrorStateMatcher, NumberQuestion, PhoneQuestion, QuestionBase, QuestionControlService, RecordRelationshipsComponent, SliderQuestion, TextboxQuestion, TimePickerQuestion, ValToTitlePipe, phoneNumberValidator };
+//# sourceMappingURL=snteam-amplify-angular-core.mjs.map