@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/question/multiple-subform/multiple-subform.component.ts

@@ -0,0 +1,481 @@
+import { SubformProperty } from './../../models/subformPropery.model';
+import { add } from 'ngx-bootstrap/chronos';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { SubmissionModalComponent } from '../../sub-form/submission-modal/submission-modal.component';
+import { Attachment } from '../../models/attachment.model';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { ScoreCalculationService } from '../../services/score.service';
+import { Submission } from '../../models/submission.model';
+import { Answer } from '../../models/answer.model';
+import { WhenClauseService } from '../../services/whenClause.service';
+
+
+@Component({
+  selector: 'lib-multiple-subform',
+  templateUrl: './multiple-subform.component.html',
+  styleUrls: ['./multiple-subform.component.scss'],
+})
+export class MultipleSubformComponent {
+  @Input() subForm: any = {};
+  @Output() subFormChange = new EventEmitter<any>();
+  @Input() acceptedLanguage: string = '';
+
+  submissions: Submission[] = [];
+  deletedSubmissions: string[] = [];
+  displayedColumns: string[] = [];
+  addButtonLabel: string = 'Add New Submission';
+  maxPossibleGoodScore!:number;
+  maxPossibleBadScore!:number
+
+  constructor(
+    public dialog: MatDialog, 
+    private sanitizer: DomSanitizer,
+    private scoreCalcService: ScoreCalculationService,
+    private whenClauseService:WhenClauseService
+  ) {}
+
+  ngOnInit() {
+    const { goodMax, badMax } = this.scoreCalcService.getMaxPossibleScore(this.subForm);
+    this.maxPossibleGoodScore = goodMax;
+    this.maxPossibleBadScore = badMax;
+    if (this.subForm?.submissions) {
+      this.submissions = this.subForm.submissions;
+      this.subForm.deletedSubmissions = [];
+    }
+    if(this.subForm?.property?.addButtonLabel) {
+      this.addButtonLabel = this.subForm.property.addButtonLabel;
+        }
+    this.initializeDisplayedColumns();
+    this.whenClauseService.addGridsFromSubform(this.subForm);
+  }
+
+  initializeDisplayedColumns() {
+    this.displayedColumns = this.subForm.rows.flatMap((item: any) =>
+      item.grid
+        .filter((gridItem: any) => gridItem.element?.formElement?.elementType !== 'HIDDEN_FIELD')
+        .map((gridItem: any) => gridItem.element.question)
+    );
+  
+    this.displayedColumns.push('actions');
+  }
+
+  getAnswerByQuestionId(submission: Submission, question: any) {
+    const questionId = question.element.id;
+    const answerObj = submission.answers.find(
+      (answer) => answer.questionId === questionId
+    );
+
+    if (!answerObj) {
+      return null;
+    }
+
+    let content: string = '';
+    
+    if (answerObj.answer) {
+      if (Array.isArray(answerObj.answer)) {
+        const processedItems = answerObj.answer.map((item: any) => {
+          if (typeof item === 'string' && item.includes('|')) {
+            return item.split('|')[0];
+          }
+          return item;
+        });
+        content = processedItems.join(', ');
+      } else if (typeof answerObj.answer === 'string') {
+        content = answerObj.answer.includes('|')
+          ? answerObj.answer.split('|')[0]
+          : answerObj.answer;
+      }
+    }
+    let currencySymbol = '';
+    if(question.element.formElement.elementType === 'CURRENCY'){
+      currencySymbol = this.fetchCurrencySymbol(question.element);
+      answerObj['htmlContent'] = this.sanitizer.bypassSecurityTrustHtml(currencySymbol + ' ' +content);
+    } else{
+      answerObj['htmlContent'] = this.sanitizer.bypassSecurityTrustHtml(content);
+    }
+    return answerObj;
+  }
+
+  fetchCurrencySymbol(question:any){
+    let currencySymbol = '';
+    if (question.formElement?.appearance?.currency) {
+      let userLocaleCureency = question.formElement?.appearance?.currency;
+      if (question.formElement.appearance.currencyOption) {
+        let currencyOption =
+          question.formElement.appearance.currencyOption;
+        if (currencyOption == 'auto') {
+          if (
+            question.formElement.appearance.limitCurrencySymbol &&
+            question.formElement.appearance.limitCurrencySymbol.length > 0
+          ) {
+            currencySymbol =
+              question.formElement.appearance.limitCurrencySymbol.includes(
+                userLocaleCureency
+              )
+                ? userLocaleCureency
+                : question.formElement?.appearance?.currencySymbol;
+          } else {
+            currencySymbol = userLocaleCureency;
+          }
+        } else if (currencyOption == 'specific') {
+          currencySymbol =
+            question.formElement?.appearance?.specificCurrencySymbol;
+        }
+      }
+    }
+    if (
+      !currencySymbol &&
+      question.formElement?.appearance?.currencySymbol
+    ) {
+      currencySymbol =
+        question.formElement?.appearance?.currencySymbol;
+    }
+    return currencySymbol;
+  }
+
+  subFormSubmission(subForm: any) {
+    const processFormElements = (
+      rows: any[],
+      isChild: boolean = false
+    ): Answer[] => {
+      const answers: Answer[] = [];
+
+      rows.flatMap((item: any) =>
+        item.grid.forEach((formElement: any) => {
+          const answer: Answer = {
+            questionId: formElement.element.id,
+            answer: formElement.element?.answer || '',
+            files:
+              formElement.element.formElement.elementType == 'FILE_PICKER' &&
+              formElement.element.answer
+                ? formElement.element.answer
+                : undefined,
+            isChild: isChild,
+            amountInWords: formElement.element.amountInWords
+          };
+
+          if (
+            formElement.element.formElement.elementType == 'FILE_PICKER' &&
+            formElement.element.answer
+          ) {
+            const fileNames = formElement.element.answer.map(
+              (file: any) => file?._file.name
+            );
+            answer.answer = fileNames;
+          }
+          answers.push(answer);
+          if(
+            formElement.element.formElement &&
+            (formElement.element.formElement.elementType === 'DROP_DOWN' ||
+            formElement.element.formElement.elementType === 'RADIO_BUTTON' ||
+            formElement.element.formElement.elementType === 'CHECKBOX') &&
+            formElement.element.formElement.scoring &&
+            formElement.element.formElement.scoring.enableScoring
+          ){
+            answers.forEach((ans) => {
+              if(formElement.element.id === ans.questionId){
+                const scoreResult = this.scoreCalcService.calculateScoreFromAnswer(ans.answer, formElement.element);
+                // Save total score and individual scores
+                // ans.score = scoreResult?.totalScore ?? 1;
+                ans.scores = scoreResult?.scores;
+              }
+            });
+          }
+          if (formElement.element.childLogics) {
+            formElement.element.childLogics.forEach((logic: any) => {
+              if (logic.showLogic) {
+                answers.push(...processFormElements(logic.rows, true));
+                logic.showLogic = false;
+              }
+            });
+          }
+        })
+      );
+      return answers;
+    };
+
+    const answers = processFormElements(subForm.rows);
+
+    if (answers.length > 0) {
+      const submission: Submission = {
+        submissionId: '',
+        answers: answers,
+      };
+      if (this.scoreCalcService.shouldCalculateScore(this.subForm, submission)) {
+        // Mark that this submission had all scoring questions answered at least once
+        submission.hasAllScoringAnsweredOnce = true;
+      }
+
+      if (submission.hasAllScoringAnsweredOnce) {
+        // Recalculate score always after once satisfied
+        submission.scores = this.scoreCalcService.calculateSubmissionScore(submission.answers);
+      }
+      this.submissions.push(submission);
+      this.submissions = [...this.submissions];
+      this.updateSubFormWithSubmissions();
+    }
+    // this.subForm.score = this.scoreCalcService.calculateFinalScore(this.submissions,this.maxPossibleScore);
+  }
+
+  editSubFormSubmission(index: number, submission: Submission) {
+    const subForm = this.bindAnswers(this.subForm, submission);
+    const dialogConfig = new MatDialogConfig();
+    dialogConfig.position = { top: '5%' };
+    dialogConfig.width = '100%';
+    dialogConfig.data = {
+      subForm: subForm,
+      acceptedLanguage: this.acceptedLanguage,
+    };
+    dialogConfig.hasBackdrop = true;
+    dialogConfig.disableClose = true;
+    dialogConfig.maxHeight = '80vh';
+    const dialogRef = this.dialog.open(SubmissionModalComponent, dialogConfig);
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result) {
+        this.updateSubmission(result, index);
+      }
+    });
+  }
+
+  bindAnswers(subForm: any, submission: Submission): any {
+    const bindElementAnswers = (rows: any[], answers: Answer[]) => {
+      rows.forEach((row: any) => {
+        row.grid.forEach((grid: any) => {
+          const answer = answers.find((a) => a.questionId === grid.element.id);
+          if (answer) {
+            grid.element.answer =
+              grid.element.formElement.elementType == 'FILE_PICKER'
+                ? answer?.files
+                : answer.answer;
+            grid.element.amountInWords = answer?.amountInWords;
+            grid.element.answerId = answer.answerId;
+            grid.element.attachments = answer.attachments;
+          }
+          if (grid.element.childLogics) {
+            grid.element.childLogics.forEach((logic: any) => {
+              bindElementAnswers(logic.rows, answers);
+            });
+          }
+        });
+      });
+    };
+
+    const updatedSubForm = { ...subForm };
+    bindElementAnswers(updatedSubForm.rows, submission.answers);
+    return updatedSubForm;
+  }
+
+  deleteSubForm(index: number) {
+    const submission = this.submissions[index];
+    if (submission.submissionId) {
+      this.deletedSubmissions.push(submission.submissionId);
+    }
+    this.submissions.splice(index, 1);
+    this.submissions = [...this.submissions];
+    this.subForm.scores = this.scoreCalcService.calculateFinalScore(this.submissions,this.maxPossibleGoodScore,this.maxPossibleBadScore);
+    this.updateSubFormWithSubmissions();
+  }
+
+  addNewSubmission() {
+    const subForm = this.cleanCircularReferences(this.subForm);
+    subForm.rows.forEach((row: any) => {
+      row.grid.forEach((grid: any) => {
+        grid.element.answer = grid.element.formElement.elementType === 'FILE_PICKER' ? [] : '';
+        grid.element.attachments = [];
+        grid.element.answerId = null;
+      });
+    });
+
+    const dialogConfig = new MatDialogConfig();
+    dialogConfig.position = { top: '5%' };
+    dialogConfig.width = '100%';
+    dialogConfig.data = {
+      subForm: subForm,
+      acceptedLanguage: this.acceptedLanguage,
+    };
+    dialogConfig.hasBackdrop = true;
+    dialogConfig.disableClose = true;
+    dialogConfig.maxHeight = '80vh';
+    dialogConfig.autoFocus = false;
+    const dialogRef = this.dialog.open(SubmissionModalComponent, dialogConfig);
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result) {
+        const hasData = result.rows.flatMap((item: any) =>
+          item.grid.some(
+            (formElement: any) =>
+              formElement.element.answer &&
+              formElement.element.answer.length > 0
+          )
+        );
+
+        if (hasData) {
+          this.subFormSubmission(result);
+        }
+      }
+    });
+  }
+
+  cleanCircularReferences(obj: any, seen = new WeakSet()) {
+    if (obj === null || typeof obj !== 'object') {
+      return obj;
+    }
+
+    if (seen.has(obj)) {
+      return;
+    }
+
+    seen.add(obj);
+
+    const cleanedObj: any = Array.isArray(obj) ? [] : {};
+
+    for (const key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        cleanedObj[key] = this.cleanCircularReferences(obj[key], seen);
+      }
+    }
+
+    return cleanedObj;
+  }
+
+  updateSubmission(result: any, index: number) {
+    const processFormElements = (rows: any[], answers: Answer[]) => {
+      rows.forEach((row: any) => {
+        row.grid.forEach((grid: any) => {
+          let answer: Answer = {
+            questionId: grid.element.id,
+            answerId: grid.element?.answerId || '',
+            attachments: grid.element.attachments || [],
+            answer: [],
+            files: [],
+            deleteFiles: [],
+          };
+
+          if (answer.attachments) {
+            answer.answer = answer.attachments.map(
+              (attachment: Attachment) => attachment.fileName
+            );
+          }
+          if (grid.element.formElement.elementType === 'FILE_PICKER') {
+            if (grid.element?.deleteFiles.length > 0) {
+              answer.answer = []; // Reset answer.answer only once
+              answer.deleteFiles = answer.deleteFiles || [];
+
+              // Collect deleted file IDs
+              grid.element.deleteFiles.forEach((deletedId: string) => {
+                answer.deleteFiles?.push(deletedId);
+              });
+
+              if (answer.attachments) {
+                // Filter out deleted attachments
+                answer.attachments = answer.attachments.filter((attachment: Attachment) => {
+                  if (!grid.element.deleteFiles.includes(attachment.fileId)) {
+                    return true;
+                  }
+                  return false;
+                });
+
+                // Rebuild answer.answer with the remaining attachments
+                answer.answer = answer.attachments.map((attachment) => attachment.fileName);
+              }
+
+            }
+            if (grid.element.answer) {
+              answer.files = grid.element.answer;
+              let fileNamesArray = Array.isArray(answer.answer) ? [...answer.answer] : [];
+
+              grid.element.answer.forEach((file: any) => {
+                const fileName = file._file?.name;
+                if (!fileNamesArray.includes(fileName)) {
+                  fileNamesArray.push(fileName);
+                }
+              });
+
+              answer.answer = fileNamesArray; // Append to existing array instead of overwriting
+            }
+          } else {
+            answer = {
+              questionId: grid.element.id,
+              answerId: grid.element?.answerId || '',
+              attachments: grid.element.attachments,
+              answer: grid.element.answer,
+              maximumPossibleScore: grid.element.maxPossibleScore,
+              amountInWords: grid.element.amountInWords
+            };
+          }
+          grid.element.answer = '';
+          answers.push(answer);
+          if(
+            grid.element.formElement &&
+            (grid.element.formElement.elementType === 'DROP_DOWN' ||
+              grid.element.formElement.elementType === 'RADIO_BUTTON' ||
+              grid.element.formElement.elementType === 'CHECK_BOX') &&
+              grid.element.formElement.scoring &&
+              grid.element.formElement.scoring.enableScoring
+          ){
+            answers.forEach((ans) => {
+              if(grid.element.id === ans.questionId){
+                const scoreResult = this.scoreCalcService.calculateScoreFromAnswer(ans.answer, grid.element);
+                // Save total score and individual scores
+                ans.scores = scoreResult?.scores;
+              }
+            });
+          }
+
+          if (grid.element.childLogics) {
+            grid.element.childLogics.forEach((logic: any) => {
+              if (logic.showLogic) {
+                processFormElements(logic.rows, answers);
+              }
+            });
+          }
+        });
+      });
+    };
+
+    this.submissions[index].answers = [];
+    processFormElements(result.rows, this.submissions[index].answers);
+    this.submissions[index].scores = this.scoreCalcService.calculateSubmissionScore(this.submissions[index].answers);
+    this.submissions = [...this.submissions];
+    const hasAnyScore = this.submissions.some(
+      sub => sub.scores?.some(s => s.score !== null && s.score !== undefined)
+    );
+    
+    if (hasAnyScore) {
+      this.subForm.scores = this.scoreCalcService.calculateFinalScore(this.submissions,this.maxPossibleGoodScore,this.maxPossibleBadScore);
+    } else {
+      this.subForm.scores = null; // or 0, depending on how you want to represent "no score yet"
+    }
+    this.updateSubFormWithSubmissions();
+    this.clearEmptyRows();
+  }
+
+  updateSubFormWithSubmissions() {
+    this.subForm.submissions = this.submissions;
+    this.subForm.maxPossibleScore = {
+      'good': this.maxPossibleGoodScore,
+      'bad': this.maxPossibleBadScore
+    }
+    this.subForm.deletedSubmissions = this.deletedSubmissions;
+    this.subFormChange.emit(this.subForm);
+  }
+
+  clearEmptyRows() {
+    const nonEmptySubmissions: Submission[] = [];
+    const emptySubmissionIds: string[] = [];
+
+    this.submissions.forEach((submission) => {
+      if (submission.answers.some((answer) => answer.answer !== '')) {
+        nonEmptySubmissions.push(submission);
+      } else if (submission.submissionId) {
+        emptySubmissionIds.push(submission.submissionId);
+      }
+    });
+
+    this.submissions = nonEmptySubmissions;
+    this.deletedSubmissions.push(...emptySubmissionIds);
+    this.updateSubFormWithSubmissions();
+  }
+}

package/src/question/question/question.component.html

@@ -0,0 +1,51 @@
+<div [ngSwitch]="question.formElement.elementType">
+
+  <lib-check-box-fields *ngSwitchCase="'CHECK_BOX'" [question]="question" (validate)="handleValidation($event)"></lib-check-box-fields>
+  <lib-date-time-fields *ngSwitchCase="'DATE_TIME'" [question]="question" (validate)="handleValidation($event)"></lib-date-time-fields>
+  <lib-drop-down-fields *ngSwitchCase="'DROP_DOWN'" [question]="question" (validate)="handleValidation($event)"></lib-drop-down-fields>
+  <lib-file-picker-fields *ngSwitchCase="'FILE_PICKER'" [question]="question" (validate)="handleValidation($event)"></lib-file-picker-fields>
+  <lib-location-fields *ngSwitchCase="'LOCATION'" [question]="question" (validate)="handleValidation($event)"></lib-location-fields>
+  <lib-mail-fields *ngSwitchCase="'EMAIL'" [question]="question" (validate)="handleValidation($event)"></lib-mail-fields>
+  <lib-mobile-fields *ngSwitchCase="'MOBILE'" [question]="question" (validate)="handleValidation($event)"></lib-mobile-fields>
+  <lib-number-fields *ngSwitchCase="'NUMBER'" [question]="question" (validate)="handleValidation($event)" [rowId]="'0'"></lib-number-fields>
+  <lib-password-fields *ngSwitchCase="'PASSWORD'" [question]="question" (validate)="handleValidation($event)"></lib-password-fields>
+  <lib-radio-button-fields *ngSwitchCase="'RADIO_BUTTON'" [question]="question" (validate)="handleValidation($event)"></lib-radio-button-fields>
+  <lib-rich-text-editor-fields *ngSwitchCase="'RICH_TEXT_EDITOR'" [question]="question" (validate)="handleValidation($event)"></lib-rich-text-editor-fields>
+  <lib-selection-matrix-fields *ngSwitchCase="'SELECTION_MATRIX'" [question]="question" [acceptedLanguage]="acceptedLanguage" (validate)="handleValidation($event)"></lib-selection-matrix-fields>
+  <lib-signature-fields *ngSwitchCase="'SIGNATURE'" [question]="question" (validate)="handleValidation($event)"></lib-signature-fields>
+  <lib-slider-fields *ngSwitchCase="'SLIDER'" [question]="question" (validate)="handleValidation($event)"></lib-slider-fields>
+  <lib-terms-and-condition-fields *ngSwitchCase="'TERMS_AND_CONDITION'" [question]="question" (validate)="handleValidation($event)"></lib-terms-and-condition-fields>
+  <lib-text-area-fields *ngSwitchCase="'TEXT_AREA'" [question]="question" (validate)="handleValidation($event)"></lib-text-area-fields>
+  <lib-text-fields *ngSwitchCase="'TEXT_BOX'" [question]="question" (validate)="handleValidation($event)"></lib-text-fields>
+  <lib-toggle-switch-fields *ngSwitchCase="'TOGGLE_SWITCH'" [question]="question" [acceptedLanguage]="acceptedLanguage" (validate)="handleValidation($event)"></lib-toggle-switch-fields>
+  <lib-url-fields *ngSwitchCase="'URL'" [question]="question" (validate)="handleValidation($event)"></lib-url-fields>
+  <lib-aggregate-function *ngSwitchCase="'AGGREGATE_FUNCTION'" [question]="question" (validate)="handleValidation($event)" [rowId]="'0'"></lib-aggregate-function>
+  <lib-currency-fields *ngSwitchCase="'CURRENCY'" [question]="question" (validate)="handleValidation($event)" [rowId]="'0'"></lib-currency-fields>
+  <lib-hidden-field *ngSwitchCase="'HIDDEN_FIELD'" [question]="question" (validate)="handleValidation($event)"></lib-hidden-field>
+  <lib-iframe-fields *ngSwitchCase="'IFRAME_WIDGET'" [question]="question" ></lib-iframe-fields>
+</div>
+
+<ng-container *ngIf="question.childLogics">
+
+  <!-- <ng-container *ngIf="componentToLoad">
+    <ng-container *ngComponentOutlet="componentToLoad;
+                                      inputs: { grid: question.childLogics,
+                                                answer: question.answer,
+                                                state: 'child' }"></ng-container>
+  </ng-container> -->
+
+  <!-- <ng-container *ngIf="getComponentForChildLogics(question.childLogics, 'child', question.answer) as cached">
+    <ng-container
+      *ngComponentOutlet="cached.component | async; injector: cached.injector">
+    </ng-container>
+  </ng-container> -->
+
+
+  <ng-container *ngIf="componentToLoad">
+
+                      <ng-container *ngComponentOutlet="componentToLoad;
+                                                        inputs: { grid: question.childLogics,
+                                                                  answer: question?.answer,
+                                                                  state: 'child' }"></ng-container>
+                    </ng-container>
+</ng-container>

package/src/question/question/question.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionComponent } from './question.component';
+
+describe('QuestionComponent', () => {
+  let component: QuestionComponent;
+  let fixture: ComponentFixture<QuestionComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionComponent]
+    });
+    fixture = TestBed.createComponent(QuestionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/question/question/question.component.ts

@@ -0,0 +1,129 @@
+import { ChangeDetectorRef, Component, EventEmitter, Injector, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'lib-question',
+  templateUrl: './question.component.html',
+  styleUrls: ['./question.component.scss']
+})
+export class QuestionComponent {
+  @Input() question: any = {};
+  @Input() edit: boolean = false;
+  @Input() acceptedLanguage: string = '';
+  @Input() currentPageIndex: number = 0;
+  @Output() emitValidations = new EventEmitter<any>();
+  @Output() subFormChange = new EventEmitter<any>();
+  validations: any = [];
+  componentToLoad: any;
+  injector!: Injector;
+  childLogicCache: { [key: string]: { component: Promise<any>, injector: Injector } } = {};
+
+
+  constructor(private cdr: ChangeDetectorRef) { }
+
+  ngOnInit(): void {
+     this.loadComponent()
+  }
+
+  // private async loadComponent(): Promise<void> {
+  //   this.componentToLoad = await this.loadFormElementsComponent();
+  //   this.injector = this.createInjector();
+  // }
+//  safeStringify(obj: any) {
+//     const seen = new WeakSet();
+//     return JSON.stringify(obj, (key, value) => {
+//       if (typeof value === "object" && value !== null) {
+//         if (seen.has(value)) return;
+//         seen.add(value);
+//       }
+//       return value;
+//     }, 2);
+//   }
+//   getComponentForChildLogics(grid: any, state: string, answer: any): { component: Promise<any>, injector: Injector } {
+//     const key = this.safeStringify({grid, state});
+//     if (!this.childLogicCache[key]) {
+//       const component = this.loadFormElementsComponent();
+//       const injector = this.createInjector(grid, state, answer);
+//       this.childLogicCache[key] = { component, injector };
+//     }
+//     return this.childLogicCache[key];
+//   }
+
+//   private async loadFormElementsComponent() {
+//     const { FormElementsComponent } = await import('../form-elements/form-elements.component');
+//     return FormElementsComponent;
+//   }
+
+//   private createInjector(grid: any, state: string, answer: any): Injector {
+//     return Injector.create({
+//       providers: [
+//         { provide: 'grid', useValue:grid},
+//         { provide: 'edit', useValue: this.edit },
+//         { provide: 'answer', useValue: answer },
+//         { provide: 'state', useValue:state },
+//         { provide: 'acceptedLanguage', useValue: this.acceptedLanguage }
+//       ],
+//     });
+//   }
+
+
+
+ removeCircularReferences(obj: any): any {
+  const seen = new WeakSet();
+
+  function recurse(value: any): any {
+    if (value === null || typeof value !== 'object') {
+      return value;
+    }
+
+    if (seen.has(value)) {
+      return '[Circular]';
+    }
+
+    seen.add(value);
+
+    if (Array.isArray(value)) {
+      return value.map(item => recurse(item));
+    }
+
+    const output: any = {};
+    for (const key of Object.keys(value)) {
+      output[key] = recurse(value[key]);
+    }
+
+    seen.delete(value);
+    return output;
+  }
+
+  return recurse(obj);
+}
+
+private async loadComponent(): Promise<void> {
+  this.componentToLoad = await this.loadFormElementsComponent();
+  this.injector = this.createInjector();
+}
+
+private async loadFormElementsComponent() {
+  const { FormElementsComponent } = await import('../form-elements/form-elements.component');
+  return FormElementsComponent;
+}
+
+createInjector(): Injector {
+  return Injector.create({
+    providers: [
+      { provide: 'grid', useValue: this.question?.childLogics },
+      { provide: 'state', useValue: 'child' },
+    ],
+  });
+}
+
+  updateSubFormWithSubmissions(event: any) {
+    this.subFormChange.emit(event);
+  }
+
+  handleValidation(validation: any) {
+    this.validations.push(validation);
+    this.emitValidations.emit(this.validations);
+    this.cdr.detectChanges();
+  }
+
+}