@piserve-tech/form-submission 1.2.7 → 1.2.8

package/fesm2022/piserve-tech-form-submission.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
+import { Injectable, Component, Input, ViewChild, EventEmitter, Output, Inject, NgModule } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
@@ -22,6 +22,8 @@ import * as i3$2 from '@kolkov/angular-editor';
 import { AngularEditorModule } from '@kolkov/angular-editor';
 import * as i3$3 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
+import * as i1$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
 import { FilePreviewModule } from '@piserve-tech/file-preview';
 import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserModule } from '@angular/platform-browser';
@@ -170,10 +172,26 @@ function mapLogicToModel(apiLogic) {
 function mapSubFormToModel(apiSubForm) {
     return {
         id: apiSubForm.id,
+        count: apiSubForm.count,
         title: apiSubForm.title,
         description: apiSubForm.description,
         subFormStructure: apiSubForm.subFormStructure,
         formElements: apiSubForm.formElements.map((element) => mapFormElementTypeToModel(element)),
+        submissions: apiSubForm?.submissions?.map((submission) => mapSubmissionToModel(submission)),
+    };
+}
+function mapSubmissionToModel(apiSubmission) {
+    return {
+        submissionId: apiSubmission.submissionId,
+        answers: apiSubmission?.answers?.map((answer) => mapAnswerToModel(answer)),
+    };
+}
+function mapAnswerToModel(apiAnswer) {
+    return {
+        questionId: apiAnswer.questionId,
+        answer: apiAnswer?.answer,
+        answerId: apiAnswer?.answerId,
+        attachments: apiAnswer?.attachments?.map((attachment) => mapAttachmentToModel(attachment)),
     };
 }
 function mapFormElementTypeToModel(apiFormElementType) {
@@ -2150,7 +2168,7 @@ class SliderFieldsComponent {
         if (this.changeSliderColor) {
             this.sliderColor = this.question.formElement.appearance.sliderColor;
         }
-        if (this.question.answer) {
+        if (this.question.answer && Object.keys(this.question.answer).length > 0) {
             this.selectedValue = this.question?.answer;
         }
         else {
@@ -2570,18 +2588,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+class SubmissionModalComponent {
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+    }
+    ngOnInit() {
+        this.subForm = this.data.subForm;
+    }
+    closeModal() {
+        this.dialogRef.close();
+    }
+    saveSubmission() {
+        this.dialogRef.close(this.subForm);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmissionModalComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubmissionModalComponent, selector: "lib-submission-modal", ngImport: i0, template: "<div class=\"mb-5\">\n    <div class=\"modalHeader mb-4\">\n        <div class=\"title-div\">\n            <p class=\"title\">{{subForm.title}}</p>\n        </div>\n        <div class=\"header-btn\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"closeModal()\">\n                <path d=\"M8 8L16 16\" stroke=\"#1D252D\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M16 8L8 16\" stroke=\"#1D252D\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>    \n        </div>\n    </div>\n\n    <div class=\"px-3\" *ngFor=\"let formElement of subForm.formElements\">\n        <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n          <lib-check-box-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n            [question]=\"formElement.element\"\n          ></lib-check-box-fields>\n          <lib-date-time-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n            [question]=\"formElement.element\"\n          ></lib-date-time-fields>\n          <lib-drop-down-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n            [question]=\"formElement.element\"\n          ></lib-drop-down-fields>\n          <lib-file-picker-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'FILE_PICKER'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-file-picker-fields>\n          <lib-location-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n            [question]=\"formElement.element\"\n          ></lib-location-fields>\n\n          <lib-mail-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-mail-fields>\n          <lib-mobile-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-mobile-fields>\n          <lib-number-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-number-fields>\n          <lib-password-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-password-fields>\n          <lib-radio-button-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'RADIO_BUTTON'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-radio-button-fields>\n          <lib-rich-text-editor-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-rich-text-editor-fields>\n          <lib-selection-matrix-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'SELECTION_MATRIX'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-selection-matrix-fields>\n          <lib-signature-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n            [question]=\"formElement.element\"\n          ></lib-signature-fields>\n          <lib-slider-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n            [question]=\"formElement.element\"\n          ></lib-slider-fields>\n          <lib-terms-and-condition-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType ===\n              'TERMS_AND_CONDITION'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-terms-and-condition-fields>\n          <lib-text-area-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n            [question]=\"formElement.element\"\n          ></lib-text-area-fields>\n          <lib-text-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n            [question]=\"formElement.element\"\n          ></lib-text-fields>\n          <lib-toggle-switch-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-toggle-switch-fields>\n          <lib-url-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n            [question]=\"formElement.element\"\n          ></lib-url-fields>\n          <lib-first-child\n            *ngIf=\"formElement.element.childLogics\"\n            [childLogics]=\"formElement.element.childLogics\"\n          ></lib-first-child>\n        </div>\n        <div *ngIf=\"formElement.entityType === 'SECTION'\">\n          <lib-section-fields\n            [section]=\"formElement.element\"\n          ></lib-section-fields>\n        </div>\n      </div>\n\n    <div class=\"okBtn me-4\">\n        <button\n          class=\"submitBtn me-md-2 rounded-pill\"\n          type=\"button\"\n          (click)=\"saveSubmission()\">\n          Ok\n        </button>\n    </div>\n</div>\n", styles: [".modalHeader{width:100%;display:flex;flex-direction:row}.modalHeader .title-div{width:90%;display:flex;justify-content:center;margin-top:5%}.modalHeader .title-div .title{height:24px;font-style:normal;font-weight:600;font-size:24px;font-weight:550;line-height:24px;text-align:center;color:#1d252d;letter-spacing:.5px}.modalHeader .header-btn{width:10%;margin-top:4%;display:flex;justify-content:center}.modalHeader .header-btn svg{font-size:20px;cursor:pointer}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.okBtn{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: FirstChildComponent, selector: "lib-first-child", inputs: ["childLogics"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmissionModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-submission-modal', template: "<div class=\"mb-5\">\n    <div class=\"modalHeader mb-4\">\n        <div class=\"title-div\">\n            <p class=\"title\">{{subForm.title}}</p>\n        </div>\n        <div class=\"header-btn\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"closeModal()\">\n                <path d=\"M8 8L16 16\" stroke=\"#1D252D\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M16 8L8 16\" stroke=\"#1D252D\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>    \n        </div>\n    </div>\n\n    <div class=\"px-3\" *ngFor=\"let formElement of subForm.formElements\">\n        <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n          <lib-check-box-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n            [question]=\"formElement.element\"\n          ></lib-check-box-fields>\n          <lib-date-time-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n            [question]=\"formElement.element\"\n          ></lib-date-time-fields>\n          <lib-drop-down-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n            [question]=\"formElement.element\"\n          ></lib-drop-down-fields>\n          <lib-file-picker-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'FILE_PICKER'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-file-picker-fields>\n          <lib-location-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n            [question]=\"formElement.element\"\n          ></lib-location-fields>\n\n          <lib-mail-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-mail-fields>\n          <lib-mobile-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-mobile-fields>\n          <lib-number-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-number-fields>\n          <lib-password-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-password-fields>\n          <lib-radio-button-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'RADIO_BUTTON'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-radio-button-fields>\n          <lib-rich-text-editor-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-rich-text-editor-fields>\n          <lib-selection-matrix-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'SELECTION_MATRIX'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-selection-matrix-fields>\n          <lib-signature-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n            [question]=\"formElement.element\"\n          ></lib-signature-fields>\n          <lib-slider-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n            [question]=\"formElement.element\"\n          ></lib-slider-fields>\n          <lib-terms-and-condition-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType ===\n              'TERMS_AND_CONDITION'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-terms-and-condition-fields>\n          <lib-text-area-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n            [question]=\"formElement.element\"\n          ></lib-text-area-fields>\n          <lib-text-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n            [question]=\"formElement.element\"\n          ></lib-text-fields>\n          <lib-toggle-switch-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-toggle-switch-fields>\n          <lib-url-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n            [question]=\"formElement.element\"\n          ></lib-url-fields>\n          <lib-first-child\n            *ngIf=\"formElement.element.childLogics\"\n            [childLogics]=\"formElement.element.childLogics\"\n          ></lib-first-child>\n        </div>\n        <div *ngIf=\"formElement.entityType === 'SECTION'\">\n          <lib-section-fields\n            [section]=\"formElement.element\"\n          ></lib-section-fields>\n        </div>\n      </div>\n\n    <div class=\"okBtn me-4\">\n        <button\n          class=\"submitBtn me-md-2 rounded-pill\"\n          type=\"button\"\n          (click)=\"saveSubmission()\">\n          Ok\n        </button>\n    </div>\n</div>\n", styles: [".modalHeader{width:100%;display:flex;flex-direction:row}.modalHeader .title-div{width:90%;display:flex;justify-content:center;margin-top:5%}.modalHeader .title-div .title{height:24px;font-style:normal;font-weight:600;font-size:24px;font-weight:550;line-height:24px;text-align:center;color:#1d252d;letter-spacing:.5px}.modalHeader .header-btn{width:10%;margin-top:4%;display:flex;justify-content:center}.modalHeader .header-btn svg{font-size:20px;cursor:pointer}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.okBtn{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$2.MatDialogRef }]; } });
+
+class MultipleSubformComponent {
+    constructor(dialog) {
+        this.dialog = dialog;
+        this.subForm = {};
+        this.subFormChange = new EventEmitter();
+        this.submissions = [];
+        this.deletedSubmissions = [];
+    }
+    ngOnInit() {
+        if (this.subForm?.submissions) {
+            this.submissions = this.subForm.submissions;
+            this.subForm.deletedSubmissions = [];
+        }
+    }
+    subFormSubmission(subForm) {
+        const answers = [];
+        subForm.formElements.forEach((formElement) => {
+            const answer = {
+                questionId: formElement.element.id,
+                answer: formElement.element?.answer || '',
+                attachments: formElement.element.attachments,
+            };
+            answers.push(answer);
+            formElement.element.answer = {};
+        });
+        const submission = {
+            submissionId: '',
+            answers: answers,
+        };
+        this.submissions.push(submission);
+        this.updateSubFormWithSubmissions();
+    }
+    editSubFormSubmission(index, submission) {
+        const subForm = this.bindAnswers(this.subForm, submission);
+        const dialogConfig = new MatDialogConfig();
+        dialogConfig.position = { top: '5%' };
+        dialogConfig.width = '100%';
+        dialogConfig.data = {
+            subForm: subForm,
+        };
+        dialogConfig.hasBackdrop = true;
+        dialogConfig.disableClose = true;
+        dialogConfig.maxHeight = '80vh';
+        const dialogRef = this.dialog.open(SubmissionModalComponent, dialogConfig);
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.updateSubmission(result, index);
+            }
+        });
+    }
+    bindAnswers(subForm, submission) {
+        const updatedSubForm = { ...subForm };
+        updatedSubForm.formElements.forEach((formElement) => {
+            const answer = submission.answers.find(a => a.questionId === formElement.element.id);
+            if (answer) {
+                formElement.element.answer = answer.answer;
+                formElement.element.answerId = answer.answerId;
+                formElement.element.attachments = answer.attachments;
+            }
+        });
+        return updatedSubForm;
+    }
+    deleteSubForm(index) {
+        const submission = this.submissions[index];
+        if (submission.submissionId) {
+            this.deletedSubmissions.push(submission.submissionId);
+        }
+        this.submissions.splice(index, 1);
+        this.updateSubFormWithSubmissions();
+    }
+    addNewSubmission() {
+        const dialogConfig = new MatDialogConfig();
+        dialogConfig.position = { top: '5%' };
+        dialogConfig.width = '100%';
+        dialogConfig.data = {
+            subForm: this.subForm,
+        };
+        dialogConfig.hasBackdrop = true;
+        dialogConfig.disableClose = true;
+        dialogConfig.maxHeight = '80vh';
+        const dialogRef = this.dialog.open(SubmissionModalComponent, dialogConfig);
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.subForm = result;
+                this.subFormSubmission(result);
+            }
+        });
+    }
+    updateSubmission(result, index) {
+        this.submissions[index].answers = [];
+        result.formElements.forEach((formElement) => {
+            const answer = {
+                questionId: formElement.element.id,
+                answer: formElement.element?.answer || '',
+                answerId: formElement.element?.answerId || '',
+                attachments: formElement.element.attachments,
+            };
+            formElement.element.answer = {};
+            this.submissions[index].answers.push(answer);
+        });
+        this.updateSubFormWithSubmissions();
+    }
+    updateSubFormWithSubmissions() {
+        this.subForm.submissions = this.submissions;
+        this.subForm.deletedSubmissions = this.deletedSubmissions;
+        this.subFormChange.emit(this.subForm);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultipleSubformComponent, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultipleSubformComponent, selector: "lib-multiple-subform", inputs: { subForm: "subForm" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"mb-4\">\n  <table class=\"table table-bordered border border-2\">\n    <tr>\n      <th\n        class=\"border border-1\"\n        *ngFor=\"let formElement of subForm.formElements\"\n      >\n        {{ formElement.element.question }}\n      </th>\n      <th></th>\n    </tr>\n    <tr *ngFor=\"let submission of submissions; let i = index\">\n      <td class=\"border border-1\" *ngFor=\"let answer of submission.answers\">{{answer.answer}}</td>\n      <td class=\"text-center\">\n        <button class=\"border border-0 p-0 me-2\" (click)=\"editSubFormSubmission(i,submission)\">\n            <svg width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"0.5\" y=\"0.5\" width=\"28\" height=\"26.4737\" rx=\"5.5\" fill=\"white\" stroke=\"#D8D8D8\"/>\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.0009 19.0787H9.1582V16.2361C9.1582 15.9447 9.2739 15.6653 9.47999 15.4593L16.2224 8.71686C16.4284 8.5105 16.708 8.39453 16.9995 8.39453C17.2911 8.39453 17.5707 8.5105 17.7767 8.71686L19.5201 10.4603C19.7264 10.6663 19.8424 10.9458 19.8424 11.2374C19.8424 11.529 19.7264 11.8086 19.5201 12.0145L12.7777 18.757C12.5715 18.9628 12.2922 19.0785 12.0009 19.0787Z\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M15.1704 10.3984L17.8415 13.0695\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>   \n        </button>\n        <button class=\"border border-0 p-0\" (click) = \"deleteSubForm(i)\" >\n            <svg width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"0.5\" y=\"0.5\" width=\"27.6402\" height=\"26.1328\" rx=\"5.5\" fill=\"white\" stroke=\"#D8D8D8\"/>\n                <path d=\"M8.60449 9.20637H20.0354\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M19.2189 9.20703V17.7863C19.2189 18.6482 18.4881 19.3462 17.5859 19.3462H11.0539C10.1517 19.3462 9.4209 18.6482 9.4209 17.7863V9.20703\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M16.7696 6.67122H11.8706\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M12.6871 12.3242V16.2239\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M15.9532 12.3242V16.2239\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n                \n        </button>\n      </td>\n    </tr>\n  </table>\n  <div class=\"footer\">\n    <div class=\"addNewBtn\" (click)=\"addNewSubmission()\">\n      <svg\n        width=\"15\"\n        height=\"14\"\n        viewBox=\"0 0 15 14\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M12.5556 13.2778H2.44444C1.64639 13.2778 1 12.6673 1 11.9136V2.3642C1 1.61048 1.64639 1 2.44444 1H12.5556C13.3536 1 14 1.61048 14 2.3642V11.9136C14 12.6673 13.3536 13.2778 12.5556 13.2778Z\"\n          stroke=\"#D8D8D8\"\n          stroke-width=\"0.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M5.3335 7.50347H9.66683\"\n          stroke=\"#084FFF\"\n          stroke-width=\"0.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M7.50005 5.33594V9.66927\"\n          stroke=\"#084FFF\"\n          stroke-width=\"0.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg> \n      <a class=\"ms-2 text-decoration-none\">Add New</a>\n    </div>\n  </div>\n  \n \n</div>\n", styles: [".footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultipleSubformComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-multiple-subform', template: "<div class=\"mb-4\">\n  <table class=\"table table-bordered border border-2\">\n    <tr>\n      <th\n        class=\"border border-1\"\n        *ngFor=\"let formElement of subForm.formElements\"\n      >\n        {{ formElement.element.question }}\n      </th>\n      <th></th>\n    </tr>\n    <tr *ngFor=\"let submission of submissions; let i = index\">\n      <td class=\"border border-1\" *ngFor=\"let answer of submission.answers\">{{answer.answer}}</td>\n      <td class=\"text-center\">\n        <button class=\"border border-0 p-0 me-2\" (click)=\"editSubFormSubmission(i,submission)\">\n            <svg width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"0.5\" y=\"0.5\" width=\"28\" height=\"26.4737\" rx=\"5.5\" fill=\"white\" stroke=\"#D8D8D8\"/>\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.0009 19.0787H9.1582V16.2361C9.1582 15.9447 9.2739 15.6653 9.47999 15.4593L16.2224 8.71686C16.4284 8.5105 16.708 8.39453 16.9995 8.39453C17.2911 8.39453 17.5707 8.5105 17.7767 8.71686L19.5201 10.4603C19.7264 10.6663 19.8424 10.9458 19.8424 11.2374C19.8424 11.529 19.7264 11.8086 19.5201 12.0145L12.7777 18.757C12.5715 18.9628 12.2922 19.0785 12.0009 19.0787Z\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M15.1704 10.3984L17.8415 13.0695\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>   \n        </button>\n        <button class=\"border border-0 p-0\" (click) = \"deleteSubForm(i)\" >\n            <svg width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"0.5\" y=\"0.5\" width=\"27.6402\" height=\"26.1328\" rx=\"5.5\" fill=\"white\" stroke=\"#D8D8D8\"/>\n                <path d=\"M8.60449 9.20637H20.0354\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M19.2189 9.20703V17.7863C19.2189 18.6482 18.4881 19.3462 17.5859 19.3462H11.0539C10.1517 19.3462 9.4209 18.6482 9.4209 17.7863V9.20703\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M16.7696 6.67122H11.8706\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M12.6871 12.3242V16.2239\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M15.9532 12.3242V16.2239\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n                \n        </button>\n      </td>\n    </tr>\n  </table>\n  <div class=\"footer\">\n    <div class=\"addNewBtn\" (click)=\"addNewSubmission()\">\n      <svg\n        width=\"15\"\n        height=\"14\"\n        viewBox=\"0 0 15 14\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M12.5556 13.2778H2.44444C1.64639 13.2778 1 12.6673 1 11.9136V2.3642C1 1.61048 1.64639 1 2.44444 1H12.5556C13.3536 1 14 1.61048 14 2.3642V11.9136C14 12.6673 13.3536 13.2778 12.5556 13.2778Z\"\n          stroke=\"#D8D8D8\"\n          stroke-width=\"0.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M5.3335 7.50347H9.66683\"\n          stroke=\"#084FFF\"\n          stroke-width=\"0.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M7.50005 5.33594V9.66927\"\n          stroke=\"#084FFF\"\n          stroke-width=\"0.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg> \n      <a class=\"ms-2 text-decoration-none\">Add New</a>\n    </div>\n  </div>\n  \n \n</div>\n", styles: [".footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialog }]; }, propDecorators: { subForm: [{
+                type: Input
+            }], subFormChange: [{
+                type: Output
+            }] } });
+
 class SubFormComponent {
     constructor() {
         this.subForm = {};
+        this.edit = false;
+        this.subFormChange = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.subForm.subFormStructure == 'single') {
+            this.bindAnswersToFormElements();
+        }
+    }
+    bindAnswersToFormElements() {
+        if (this.subForm && this.subForm.formElements && this.subForm.submissions) {
+            this.subForm.formElements.forEach((formElement) => {
+                if (formElement.entityType === 'QUESTION') {
+                    const submission = this.subForm.submissions.find((sub) => sub.answers.some((ans) => ans.questionId === formElement.element.id));
+                    if (submission) {
+                        const answer = submission.answers.find((ans) => ans.questionId === formElement.element.id);
+                        if (answer) {
+                            formElement.element.answer = answer.answer;
+                            formElement.element.answerId = answer.answerId;
+                            formElement.element.validation = true;
+                            formElement.element.attachments = answer.attachments;
+                            this.subForm.submissionId = submission.submissionId;
+                        }
+                    }
+                }
+            });
+        }
+    }
+    updateSubFormWithSubmissions(event) {
+        this.subForm = event;
+        this.subFormChange.emit(this.subForm);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubFormComponent, selector: "lib-sub-form", inputs: { subForm: "subForm" }, ngImport: i0, template: "<div class=\"outer-container mb-4 px-3\">\n  <div class=\"body container pt-3 pb-3 px-3\">\n    <div class=\"tab-content pt-4 pb-3 px-3\">\n      <p class=\"sectionTitle\">{{subForm.title}}</p>\n      <p [innerHTML]=\"subForm.description\" class=\"description mb-5\"></p>\n\n            <div *ngFor=\"let formElement of subForm.formElements\">\n              <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n                <lib-check-box-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n                [question]=\"formElement.element\"\n                ></lib-check-box-fields>\n              <lib-date-time-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n                [question]=\"formElement.element\"\n                ></lib-date-time-fields>\n              <lib-drop-down-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n                [question]=\"formElement.element\"\n                ></lib-drop-down-fields>\n              <lib-file-picker-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n                [question]=\"formElement.element\"\n                ></lib-file-picker-fields>\n              <lib-location-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n                [question]=\"formElement.element\"\n                ></lib-location-fields>\n            \n              <lib-mail-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-mail-fields>\n              <lib-mobile-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-mobile-fields>\n              <lib-number-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-number-fields>\n              <lib-password-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-password-fields>\n              <lib-radio-button-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n                [question]=\"formElement.element\"\n                ></lib-radio-button-fields>\n              <lib-rich-text-editor-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n                [question]=\"formElement.element\"\n                ></lib-rich-text-editor-fields>\n              <lib-selection-matrix-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n                [question]=\"formElement.element\"\n                ></lib-selection-matrix-fields>\n              <lib-signature-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n                [question]=\"formElement.element\"\n                ></lib-signature-fields>\n              <lib-slider-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n                [question]=\"formElement.element\"\n                ></lib-slider-fields>\n              <lib-terms-and-condition-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n                [question]=\"formElement.element\"\n                ></lib-terms-and-condition-fields>\n              <lib-text-area-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n                [question]=\"formElement.element\"\n                ></lib-text-area-fields>\n              <lib-text-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n                [question]=\"formElement.element\"\n                ></lib-text-fields>\n              <lib-toggle-switch-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n                [question]=\"formElement.element\"\n                ></lib-toggle-switch-fields>\n              <lib-url-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n                [question]=\"formElement.element\"\n                ></lib-url-fields>\n                <lib-first-child *ngIf=\"formElement.element.childLogics\"\n                [childLogics]=\"formElement.element.childLogics\"></lib-first-child>\n              </div>\n              <div *ngIf=\"formElement.entityType === 'SECTION'\">\n                <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n              </div>\n            </div>\n          \n        \n          \n\n          </div>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:15px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: FirstChildComponent, selector: "lib-first-child", inputs: ["childLogics"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubFormComponent, selector: "lib-sub-form", inputs: { subForm: "subForm", edit: "edit" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"outer-container mb-4 px-3\">\n  <div class=\"body container pt-3 pb-3 px-3\">\n    <div class=\"tab-content pt-4 pb-3 px-3\">\n      <p class=\"sectionTitle\">{{ subForm.title }}</p>\n      <p [innerHTML]=\"subForm.description\" class=\"description mb-5\"></p>\n\n      <div *ngIf=\"subForm.subFormStructure == 'multiple'\">\n        <lib-multiple-subform\n        [subForm]=\"subForm\"\n        (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n        ></lib-multiple-subform>\n      </div>\n    <div *ngIf=\"subForm.subFormStructure == 'single'\">\n      <div *ngFor=\"let formElement of subForm.formElements\">\n        <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n          <lib-check-box-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n            [question]=\"formElement.element\"\n          ></lib-check-box-fields>\n          <lib-date-time-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n            [question]=\"formElement.element\"\n          ></lib-date-time-fields>\n          <lib-drop-down-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n            [question]=\"formElement.element\"\n          ></lib-drop-down-fields>\n          <lib-file-picker-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'FILE_PICKER'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-file-picker-fields>\n          <lib-location-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n            [question]=\"formElement.element\"\n          ></lib-location-fields>\n\n          <lib-mail-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-mail-fields>\n          <lib-mobile-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-mobile-fields>\n          <lib-number-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-number-fields>\n          <lib-password-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-password-fields>\n          <lib-radio-button-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'RADIO_BUTTON'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-radio-button-fields>\n          <lib-rich-text-editor-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-rich-text-editor-fields>\n          <lib-selection-matrix-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'SELECTION_MATRIX'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-selection-matrix-fields>\n          <lib-signature-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n            [question]=\"formElement.element\"\n          ></lib-signature-fields>\n          <lib-slider-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n            [question]=\"formElement.element\"\n          ></lib-slider-fields>\n          <lib-terms-and-condition-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType ===\n              'TERMS_AND_CONDITION'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-terms-and-condition-fields>\n          <lib-text-area-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n            [question]=\"formElement.element\"\n          ></lib-text-area-fields>\n          <lib-text-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n            [question]=\"formElement.element\"\n          ></lib-text-fields>\n          <lib-toggle-switch-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-toggle-switch-fields>\n          <lib-url-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n            [question]=\"formElement.element\"\n          ></lib-url-fields>\n          <lib-first-child\n            *ngIf=\"formElement.element.childLogics\"\n            [childLogics]=\"formElement.element.childLogics\"\n          ></lib-first-child>\n        </div>\n        <div *ngIf=\"formElement.entityType === 'SECTION'\">\n          <lib-section-fields\n            [section]=\"formElement.element\"\n          ></lib-section-fields>\n        </div>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:15px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: FirstChildComponent, selector: "lib-first-child", inputs: ["childLogics"] }, { kind: "component", type: MultipleSubformComponent, selector: "lib-multiple-subform", inputs: ["subForm"], outputs: ["subFormChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sub-form', template: "<div class=\"outer-container mb-4 px-3\">\n  <div class=\"body container pt-3 pb-3 px-3\">\n    <div class=\"tab-content pt-4 pb-3 px-3\">\n      <p class=\"sectionTitle\">{{subForm.title}}</p>\n      <p [innerHTML]=\"subForm.description\" class=\"description mb-5\"></p>\n\n            <div *ngFor=\"let formElement of subForm.formElements\">\n              <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n                <lib-check-box-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n                [question]=\"formElement.element\"\n                ></lib-check-box-fields>\n              <lib-date-time-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n                [question]=\"formElement.element\"\n                ></lib-date-time-fields>\n              <lib-drop-down-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n                [question]=\"formElement.element\"\n                ></lib-drop-down-fields>\n              <lib-file-picker-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n                [question]=\"formElement.element\"\n                ></lib-file-picker-fields>\n              <lib-location-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n                [question]=\"formElement.element\"\n                ></lib-location-fields>\n            \n              <lib-mail-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-mail-fields>\n              <lib-mobile-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-mobile-fields>\n              <lib-number-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-number-fields>\n              <lib-password-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-password-fields>\n              <lib-radio-button-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n                [question]=\"formElement.element\"\n                ></lib-radio-button-fields>\n              <lib-rich-text-editor-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n                [question]=\"formElement.element\"\n                ></lib-rich-text-editor-fields>\n              <lib-selection-matrix-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n                [question]=\"formElement.element\"\n                ></lib-selection-matrix-fields>\n              <lib-signature-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n                [question]=\"formElement.element\"\n                ></lib-signature-fields>\n              <lib-slider-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n                [question]=\"formElement.element\"\n                ></lib-slider-fields>\n              <lib-terms-and-condition-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n                [question]=\"formElement.element\"\n                ></lib-terms-and-condition-fields>\n              <lib-text-area-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n                [question]=\"formElement.element\"\n                ></lib-text-area-fields>\n              <lib-text-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n                [question]=\"formElement.element\"\n                ></lib-text-fields>\n              <lib-toggle-switch-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n                [question]=\"formElement.element\"\n                ></lib-toggle-switch-fields>\n              <lib-url-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n                [question]=\"formElement.element\"\n                ></lib-url-fields>\n                <lib-first-child *ngIf=\"formElement.element.childLogics\"\n                [childLogics]=\"formElement.element.childLogics\"></lib-first-child>\n              </div>\n              <div *ngIf=\"formElement.entityType === 'SECTION'\">\n                <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n              </div>\n            </div>\n          \n        \n          \n\n          </div>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:15px;font-weight:500}\n"] }]
+            args: [{ selector: 'lib-sub-form', template: "<div class=\"outer-container mb-4 px-3\">\n  <div class=\"body container pt-3 pb-3 px-3\">\n    <div class=\"tab-content pt-4 pb-3 px-3\">\n      <p class=\"sectionTitle\">{{ subForm.title }}</p>\n      <p [innerHTML]=\"subForm.description\" class=\"description mb-5\"></p>\n\n      <div *ngIf=\"subForm.subFormStructure == 'multiple'\">\n        <lib-multiple-subform\n        [subForm]=\"subForm\"\n        (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n        ></lib-multiple-subform>\n      </div>\n    <div *ngIf=\"subForm.subFormStructure == 'single'\">\n      <div *ngFor=\"let formElement of subForm.formElements\">\n        <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n          <lib-check-box-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n            [question]=\"formElement.element\"\n          ></lib-check-box-fields>\n          <lib-date-time-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n            [question]=\"formElement.element\"\n          ></lib-date-time-fields>\n          <lib-drop-down-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n            [question]=\"formElement.element\"\n          ></lib-drop-down-fields>\n          <lib-file-picker-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'FILE_PICKER'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-file-picker-fields>\n          <lib-location-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n            [question]=\"formElement.element\"\n          ></lib-location-fields>\n\n          <lib-mail-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-mail-fields>\n          <lib-mobile-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-mobile-fields>\n          <lib-number-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-number-fields>\n          <lib-password-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n            [question]=\"formElement.element\"\n          >\n          </lib-password-fields>\n          <lib-radio-button-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'RADIO_BUTTON'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-radio-button-fields>\n          <lib-rich-text-editor-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-rich-text-editor-fields>\n          <lib-selection-matrix-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'SELECTION_MATRIX'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-selection-matrix-fields>\n          <lib-signature-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n            [question]=\"formElement.element\"\n          ></lib-signature-fields>\n          <lib-slider-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n            [question]=\"formElement.element\"\n          ></lib-slider-fields>\n          <lib-terms-and-condition-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType ===\n              'TERMS_AND_CONDITION'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-terms-and-condition-fields>\n          <lib-text-area-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n            [question]=\"formElement.element\"\n          ></lib-text-area-fields>\n          <lib-text-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n            [question]=\"formElement.element\"\n          ></lib-text-fields>\n          <lib-toggle-switch-fields\n            *ngIf=\"\n              formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\n            \"\n            [question]=\"formElement.element\"\n          ></lib-toggle-switch-fields>\n          <lib-url-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n            [question]=\"formElement.element\"\n          ></lib-url-fields>\n          <lib-first-child\n            *ngIf=\"formElement.element.childLogics\"\n            [childLogics]=\"formElement.element.childLogics\"\n          ></lib-first-child>\n        </div>\n        <div *ngIf=\"formElement.entityType === 'SECTION'\">\n          <lib-section-fields\n            [section]=\"formElement.element\"\n          ></lib-section-fields>\n        </div>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:15px;font-weight:500}\n"] }]
         }], propDecorators: { subForm: [{
                 type: Input
+            }], edit: [{
+                type: Input
+            }], subFormChange: [{
+                type: Output
             }] } });
 
 class FormElementsComponent {
@@ -2589,19 +2785,25 @@ class FormElementsComponent {
         this.grid = {};
         this.currentPageIndex = 0;
         this.edit = false;
+        this.subFormChange = new EventEmitter();
+    }
+    updateSubFormWithSubmissions(event) {
+        this.subFormChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormElementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormElementsComponent, selector: "lib-form-elements", inputs: { grid: "grid", currentPageIndex: "currentPageIndex", edit: "edit" }, ngImport: i0, template: "<div *ngIf=\"grid.entityType === 'QUESTION'\">\n  <lib-question [question]=\"grid?.element\"\n  [currentPageIndex]=\"currentPageIndex\"\n  [edit]=\"edit\"\n  ></lib-question>\n</div>\n<div *ngIf=\"grid.entityType === 'SECTION'\">\n  <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\n</div>\n<div *ngIf=\"grid.entityType === 'SUBFORM'\">\n  <lib-sub-form [subForm]=\"grid.element\"></lib-sub-form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionComponent, selector: "lib-question", inputs: ["question", "edit", "currentPageIndex"], outputs: ["emitValidations"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: SubFormComponent, selector: "lib-sub-form", inputs: ["subForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormElementsComponent, selector: "lib-form-elements", inputs: { grid: "grid", currentPageIndex: "currentPageIndex", edit: "edit" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div *ngIf=\"grid.entityType === 'QUESTION'\">\n  <lib-question [question]=\"grid?.element\"\n  [currentPageIndex]=\"currentPageIndex\"\n  [edit]=\"edit\"\n  ></lib-question>\n</div>\n<div *ngIf=\"grid.entityType === 'SECTION'\">\n  <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\n</div>\n<div *ngIf=\"grid.entityType === 'SUBFORM'\">\n  <lib-sub-form [subForm]=\"grid.element\"\n  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n  ></lib-sub-form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionComponent, selector: "lib-question", inputs: ["question", "edit", "currentPageIndex"], outputs: ["emitValidations"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: SubFormComponent, selector: "lib-sub-form", inputs: ["subForm", "edit"], outputs: ["subFormChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormElementsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-elements', template: "<div *ngIf=\"grid.entityType === 'QUESTION'\">\n  <lib-question [question]=\"grid?.element\"\n  [currentPageIndex]=\"currentPageIndex\"\n  [edit]=\"edit\"\n  ></lib-question>\n</div>\n<div *ngIf=\"grid.entityType === 'SECTION'\">\n  <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\n</div>\n<div *ngIf=\"grid.entityType === 'SUBFORM'\">\n  <lib-sub-form [subForm]=\"grid.element\"></lib-sub-form>\n</div>\n" }]
+            args: [{ selector: 'lib-form-elements', template: "<div *ngIf=\"grid.entityType === 'QUESTION'\">\n  <lib-question [question]=\"grid?.element\"\n  [currentPageIndex]=\"currentPageIndex\"\n  [edit]=\"edit\"\n  ></lib-question>\n</div>\n<div *ngIf=\"grid.entityType === 'SECTION'\">\n  <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\n</div>\n<div *ngIf=\"grid.entityType === 'SUBFORM'\">\n  <lib-sub-form [subForm]=\"grid.element\"\n  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n  ></lib-sub-form>\n</div>\n" }]
         }], propDecorators: { grid: [{
                 type: Input
             }], currentPageIndex: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], subFormChange: [{
+                type: Output
             }] } });
 
 class NavigationTabsComponent {
@@ -2611,6 +2813,10 @@ class NavigationTabsComponent {
         this.pageChanged = new EventEmitter();
         this.submitEmit = new EventEmitter();
         this.edit = false;
+        this.subFormChange = new EventEmitter();
+    }
+    updateSubFormWithSubmissions(event) {
+        this.subFormChange.emit(event);
     }
     setCurrentPage(index) {
         this.pageChanged.emit(index);
@@ -2619,11 +2825,11 @@ class NavigationTabsComponent {
         this.submitEmit.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: { pages: "pages", currentPageIndex: "currentPageIndex", edit: "edit" }, outputs: { pageChanged: "pageChanged", submitEmit: "submitEmit" }, ngImport: i0, template: "<div class=\"tab-inner-container\">\n  <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\n    <li\n      class=\"nav-item\"\n      role=\"presentation\"\n      *ngFor=\"let page of pages; let i = index\"\n    >\n      <button\n        class=\"nav-link\"\n        [class.active]=\"i === currentPageIndex\"\n        id=\"tab-{{ i }}\"\n        [attr.data-bs-toggle]=\"'tab'\"\n        [attr.data-bs-target]=\"'#content-' + i\"\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-controls]=\"'content-' + i\"\n        [attr.aria-selected]=\"i === 0\"\n        (click)=\"setCurrentPage(i)\"\n      >\n        {{ page.title }}\n      </button>\n    </li>\n  </ul>\n\n  <div class=\"tab-content pt-5 pb-3 px-1\">\n    <div\n      *ngFor=\"let page of pages; let i = index\"\n      class=\"tab-pane fade\"\n      [class.show]=\"i === 0\"\n      [class.active]=\"i === 0\"\n      id=\"content-{{ i }}\"\n      role=\"tabpanel\"\n      [attr.aria-labelledby]=\"'tab-' + i\"\n    >\n      <div *ngFor=\"let row of page.rows\">\n        <div class=\"margin\">\n          <div *ngFor=\"let grid of row.grid\">\n            <lib-form-elements\n              [grid]=\"grid\"\n              [edit]=\"edit\"\n            ></lib-form-elements>\n          </div>\n        </div>\n      </div>\n      <div\n        *ngIf=\"currentPageIndex == pages.length - 1\"\n        class=\"footerButton d-flex justify-content-end\"\n      >\n        <button\n          class=\"btn btn-primary me-md-2 rounded-pill\"\n          type=\"button\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important}.nav-item{background-color:#fff;border-radius:5px;margin-right:.5%}.nav-link{position:relative;margin-bottom:-2px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["grid", "currentPageIndex", "edit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: { pages: "pages", currentPageIndex: "currentPageIndex", edit: "edit" }, outputs: { pageChanged: "pageChanged", submitEmit: "submitEmit", subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"tab-inner-container\">\n  <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\n    <li\n      class=\"nav-item\"\n      role=\"presentation\"\n      *ngFor=\"let page of pages; let i = index\"\n    >\n      <button\n        class=\"nav-link\"\n        [class.active]=\"i === currentPageIndex\"\n        id=\"tab-{{ i }}\"\n        [attr.data-bs-toggle]=\"'tab'\"\n        [attr.data-bs-target]=\"'#content-' + i\"\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-controls]=\"'content-' + i\"\n        [attr.aria-selected]=\"i === 0\"\n        (click)=\"setCurrentPage(i)\"\n      >\n        {{ page.title }}\n      </button>\n    </li>\n  </ul>\n\n  <div class=\"tab-content pt-5 pb-3 px-1\">\n    <div\n      *ngFor=\"let page of pages; let i = index\"\n      class=\"tab-pane fade\"\n      [class.show]=\"i === 0\"\n      [class.active]=\"i === 0\"\n      id=\"content-{{ i }}\"\n      role=\"tabpanel\"\n      [attr.aria-labelledby]=\"'tab-' + i\"\n    >\n      <div *ngFor=\"let row of page.rows\">\n        <div class=\"margin\">\n          <div *ngFor=\"let grid of row.grid\">\n            <lib-form-elements\n              [grid]=\"grid\"\n              [edit]=\"edit\"\n              (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n            ></lib-form-elements>\n          </div>\n        </div>\n      </div>\n      <div\n        *ngIf=\"currentPageIndex == pages.length - 1\"\n        class=\"footerButton d-flex justify-content-end\"\n      >\n        <button\n          class=\"btn btn-primary me-md-2 rounded-pill\"\n          type=\"button\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important}.nav-item{background-color:#fff;border-radius:5px;margin-right:.5%}.nav-link{position:relative;margin-bottom:-2px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["grid", "currentPageIndex", "edit"], outputs: ["subFormChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-navigation-tabs', template: "<div class=\"tab-inner-container\">\n  <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\n    <li\n      class=\"nav-item\"\n      role=\"presentation\"\n      *ngFor=\"let page of pages; let i = index\"\n    >\n      <button\n        class=\"nav-link\"\n        [class.active]=\"i === currentPageIndex\"\n        id=\"tab-{{ i }}\"\n        [attr.data-bs-toggle]=\"'tab'\"\n        [attr.data-bs-target]=\"'#content-' + i\"\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-controls]=\"'content-' + i\"\n        [attr.aria-selected]=\"i === 0\"\n        (click)=\"setCurrentPage(i)\"\n      >\n        {{ page.title }}\n      </button>\n    </li>\n  </ul>\n\n  <div class=\"tab-content pt-5 pb-3 px-1\">\n    <div\n      *ngFor=\"let page of pages; let i = index\"\n      class=\"tab-pane fade\"\n      [class.show]=\"i === 0\"\n      [class.active]=\"i === 0\"\n      id=\"content-{{ i }}\"\n      role=\"tabpanel\"\n      [attr.aria-labelledby]=\"'tab-' + i\"\n    >\n      <div *ngFor=\"let row of page.rows\">\n        <div class=\"margin\">\n          <div *ngFor=\"let grid of row.grid\">\n            <lib-form-elements\n              [grid]=\"grid\"\n              [edit]=\"edit\"\n            ></lib-form-elements>\n          </div>\n        </div>\n      </div>\n      <div\n        *ngIf=\"currentPageIndex == pages.length - 1\"\n        class=\"footerButton d-flex justify-content-end\"\n      >\n        <button\n          class=\"btn btn-primary me-md-2 rounded-pill\"\n          type=\"button\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important}.nav-item{background-color:#fff;border-radius:5px;margin-right:.5%}.nav-link{position:relative;margin-bottom:-2px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}\n"] }]
+            args: [{ selector: 'lib-navigation-tabs', template: "<div class=\"tab-inner-container\">\n  <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\n    <li\n      class=\"nav-item\"\n      role=\"presentation\"\n      *ngFor=\"let page of pages; let i = index\"\n    >\n      <button\n        class=\"nav-link\"\n        [class.active]=\"i === currentPageIndex\"\n        id=\"tab-{{ i }}\"\n        [attr.data-bs-toggle]=\"'tab'\"\n        [attr.data-bs-target]=\"'#content-' + i\"\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-controls]=\"'content-' + i\"\n        [attr.aria-selected]=\"i === 0\"\n        (click)=\"setCurrentPage(i)\"\n      >\n        {{ page.title }}\n      </button>\n    </li>\n  </ul>\n\n  <div class=\"tab-content pt-5 pb-3 px-1\">\n    <div\n      *ngFor=\"let page of pages; let i = index\"\n      class=\"tab-pane fade\"\n      [class.show]=\"i === 0\"\n      [class.active]=\"i === 0\"\n      id=\"content-{{ i }}\"\n      role=\"tabpanel\"\n      [attr.aria-labelledby]=\"'tab-' + i\"\n    >\n      <div *ngFor=\"let row of page.rows\">\n        <div class=\"margin\">\n          <div *ngFor=\"let grid of row.grid\">\n            <lib-form-elements\n              [grid]=\"grid\"\n              [edit]=\"edit\"\n              (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n            ></lib-form-elements>\n          </div>\n        </div>\n      </div>\n      <div\n        *ngIf=\"currentPageIndex == pages.length - 1\"\n        class=\"footerButton d-flex justify-content-end\"\n      >\n        <button\n          class=\"btn btn-primary me-md-2 rounded-pill\"\n          type=\"button\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important}.nav-item{background-color:#fff;border-radius:5px;margin-right:.5%}.nav-link{position:relative;margin-bottom:-2px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}\n"] }]
         }], propDecorators: { pages: [{
                 type: Input
             }], currentPageIndex: [{
@@ -2634,6 +2840,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], edit: [{
                 type: Input
+            }], subFormChange: [{
+                type: Output
             }] } });
 
 class NextPrevNavigationComponent {
@@ -2647,6 +2855,10 @@ class NextPrevNavigationComponent {
         this.navigatePrevious = new EventEmitter();
         this.submitEmit = new EventEmitter();
         this.edit = false;
+        this.subFormChange = new EventEmitter();
+    }
+    updateSubFormWithSubmissions(event) {
+        this.subFormChange.emit(event);
     }
     onNavigateNext() {
         this.navigateNext.emit();
@@ -2658,11 +2870,11 @@ class NextPrevNavigationComponent {
         this.submitEmit.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextPrevNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: { currentPageIndex: "currentPageIndex", pages: "pages", previousPage: "previousPage", nextPage: "nextPage", currentPage: "currentPage", edit: "edit" }, outputs: { navigateNext: "navigateNext", navigatePrevious: "navigatePrevious", submitEmit: "submitEmit" }, ngImport: i0, template: "<div class=\"pageTitleDiv\">\n  <p class=\"pageTitle\">{{ currentPage.title }}</p>\n</div>\n<div class=\"button-inner-container rounded\">\n  <div class=\"tab-content pt-5 pb-3 row\">\n    <div *ngFor=\"let row of pages[currentPageIndex].rows\" class=\"marginSize\">\n      <div *ngFor=\"let grid of row.grid\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    <div class=\"footerButton\">\n      <div class=\"prevButtonDiv\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M4.51025 11.9883L19.5003 11.9883\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n          Previous | {{ previousPage.title }}\n        </button>\n      </div>\n      <div class=\"nextButtonDiv\">\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pages.length - 1\"\n        >\n          Next | {{ nextPage.title }}\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19.4897 12.0117L4.49975 12.0117\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n        <button\n          class=\"submitBtn me-md-2 rounded-pill\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pages.length - 1\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}.pageTitleDiv{padding-left:3rem;padding-top:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:0rem 3rem 3rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{background:#084fff;color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}.tab-content,.row{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["grid", "currentPageIndex", "edit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: { currentPageIndex: "currentPageIndex", pages: "pages", previousPage: "previousPage", nextPage: "nextPage", currentPage: "currentPage", edit: "edit" }, outputs: { navigateNext: "navigateNext", navigatePrevious: "navigatePrevious", submitEmit: "submitEmit", subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"pageTitleDiv\">\n  <p class=\"pageTitle\">{{ currentPage.title }}</p>\n</div>\n<div class=\"button-inner-container rounded\">\n  <div class=\"tab-content pt-5 pb-3 row\">\n    <div *ngFor=\"let row of pages[currentPageIndex].rows\" class=\"marginSize\">\n      <div *ngFor=\"let grid of row.grid\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    <div class=\"footerButton\">\n      <div class=\"prevButtonDiv\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M4.51025 11.9883L19.5003 11.9883\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n          Previous | {{ previousPage.title }}\n        </button>\n      </div>\n      <div class=\"nextButtonDiv\">\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pages.length - 1\"\n        >\n          Next | {{ nextPage.title }}\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19.4897 12.0117L4.49975 12.0117\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n        <button\n          class=\"submitBtn me-md-2 rounded-pill\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pages.length - 1\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}.pageTitleDiv{padding-left:3rem;padding-top:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:0rem 3rem 3rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{background:#084fff;color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}.tab-content,.row{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["grid", "currentPageIndex", "edit"], outputs: ["subFormChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextPrevNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-next-prev-navigation', template: "<div class=\"pageTitleDiv\">\n  <p class=\"pageTitle\">{{ currentPage.title }}</p>\n</div>\n<div class=\"button-inner-container rounded\">\n  <div class=\"tab-content pt-5 pb-3 row\">\n    <div *ngFor=\"let row of pages[currentPageIndex].rows\" class=\"marginSize\">\n      <div *ngFor=\"let grid of row.grid\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    <div class=\"footerButton\">\n      <div class=\"prevButtonDiv\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M4.51025 11.9883L19.5003 11.9883\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n          Previous | {{ previousPage.title }}\n        </button>\n      </div>\n      <div class=\"nextButtonDiv\">\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pages.length - 1\"\n        >\n          Next | {{ nextPage.title }}\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19.4897 12.0117L4.49975 12.0117\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n        <button\n          class=\"submitBtn me-md-2 rounded-pill\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pages.length - 1\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}.pageTitleDiv{padding-left:3rem;padding-top:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:0rem 3rem 3rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{background:#084fff;color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}.tab-content,.row{background-color:#fff}\n"] }]
+            args: [{ selector: 'lib-next-prev-navigation', template: "<div class=\"pageTitleDiv\">\n  <p class=\"pageTitle\">{{ currentPage.title }}</p>\n</div>\n<div class=\"button-inner-container rounded\">\n  <div class=\"tab-content pt-5 pb-3 row\">\n    <div *ngFor=\"let row of pages[currentPageIndex].rows\" class=\"marginSize\">\n      <div *ngFor=\"let grid of row.grid\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    <div class=\"footerButton\">\n      <div class=\"prevButtonDiv\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M4.51025 11.9883L19.5003 11.9883\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n          Previous | {{ previousPage.title }}\n        </button>\n      </div>\n      <div class=\"nextButtonDiv\">\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pages.length - 1\"\n        >\n          Next | {{ nextPage.title }}\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19.4897 12.0117L4.49975 12.0117\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n        <button\n          class=\"submitBtn me-md-2 rounded-pill\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pages.length - 1\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}.pageTitleDiv{padding-left:3rem;padding-top:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:0rem 3rem 3rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{background:#084fff;color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}.tab-content,.row{background-color:#fff}\n"] }]
         }], propDecorators: { currentPageIndex: [{
                 type: Input
             }], pages: [{
@@ -2681,6 +2893,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], edit: [{
                 type: Input
+            }], subFormChange: [{
+                type: Output
             }] } });
 
 class SubmitFormComponent {
@@ -2716,7 +2930,90 @@ class SubmitFormComponent {
         this.lastTab = false;
         this.questionAnswers = { answers: [], forms: [] };
         this.files = [];
-        this.submission = {};
+        this.submission = {
+            "id": "d7056b98-b099-4a32-85a9-a0b69db67fcb",
+            "module": "backend",
+            "formId": "0d810a16-6f8b-45a1-98d1-6b3b7433dbe5",
+            "formName": "submisson view ",
+            "createdBy": "anish",
+            "modifiedBy": "anish",
+            "createdOn": "08/07/2024 07:00 PM",
+            "modifiedOn": "08/07/2024 07:00 PM",
+            "status": "PUBLISHED",
+            "answers": [],
+            "answerMap": {},
+            "questionAnswers": [
+                {
+                    "question": "profile",
+                    "elementType": "FILE_PICKER",
+                    "attachments": [
+                        {
+                            "fileId": "14ab669f-9f68-43a0-83f9-37375ad1d853",
+                            "fileName": "Screenshot from 2023-07-20 09-23-23.png",
+                            "fileUrl": "http://192.168.1.150:9000/employee/Screenshot%20from%202023-07-20%2009-23-23.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=lIwtLyjUWs2TXosWpXW4%2F20240710%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240710T051502Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=62f4d05f5075fe2f44abc406e6ada08357764c0c339179abfe16f462ec9deb78"
+                        },
+                        {
+                            "fileId": "ff5600a6-eb8a-481b-aa5d-2f7006bb34cb",
+                            "fileName": "Abhiram V.pdf",
+                            "fileUrl": "http://192.168.1.150:9000/employee/Abhiram%20V.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=lIwtLyjUWs2TXosWpXW4%2F20240710%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240710T052831Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=45ef3945c96233669d714dc20aab27d8af463cab120c1ae88e38007cfdf76442"
+                        },
+                        {
+                            "fileId": "c2c0e8fc-5510-4bf9-acb3-c5b5aa5ed4ac",
+                            "fileName": "Angular-code-format.doc",
+                            "fileUrl": "http://192.168.1.150:9000/employee/Angular-code-format.doc?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=lIwtLyjUWs2TXosWpXW4%2F20240710%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240710T052831Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=d25e754418f7feba444482b572925b4eb36551fe55e0e68b0dd41632b7932bfe"
+                        }
+                    ]
+                },
+                {
+                    "question": "Name",
+                    "elementType": "TEXT_BOX",
+                    "values": "amrutha"
+                },
+                {
+                    "question": "Age",
+                    "elementType": "TEXT_BOX",
+                    "values": "28"
+                },
+                {
+                    "question": "Select",
+                    "elementType": "DROP_DOWN",
+                    "values": ["28", "29"]
+                },
+                {
+                    "question": "Selection matrix",
+                    "elementType": "SELECTION_MATRIX",
+                    "values": ["qq_ww", "ee_rr", "tt_yy"]
+                },
+                {
+                    "question": "Rich text",
+                    "elementType": "RICH_TEXT_EDITOR",
+                    "values": "<font face=\"Arial\">this is a sample text <u>in rich text&#160;</u></font>"
+                }
+            ],
+        };
+        this.updateSubForm = (pages, updatedSubForm) => {
+            pages.forEach(page => {
+                page.rows.forEach((row) => {
+                    row.grid.forEach((element) => {
+                        if (element.entityType === 'SUBFORM' && element.element.id === updatedSubForm.formId) {
+                            // Update the existing subform with the new data
+                            element.element = updatedSubForm;
+                        }
+                        else if (element.entityType === 'SUBFORM' && element.element.id !== updatedSubForm.formId) {
+                            // Handle multiple subforms logic here if needed
+                        }
+                        else if (element.entityType === 'QUESTION' && element.element.childLogics) {
+                            // Recursively update child logics
+                            element.element.childLogics.forEach((logic) => {
+                                if (logic.showLogic) {
+                                    this.updateSubForm(logic.formElements, updatedSubForm);
+                                }
+                            });
+                        }
+                    });
+                });
+            });
+        };
         const navigation = this.router.getCurrentNavigation();
         this.submission = navigation?.extras.state?.['submission'];
     }
@@ -2878,16 +3175,29 @@ class SubmitFormComponent {
                 }
                 else if (element.entityType === 'SUBFORM') {
                     const subformId = element.element.id;
-                    const subformQuestions = extractQuestions(element.element.formElements, subformId, true, forms.length);
-                    const subform = {
-                        formId: subformId,
-                        deletedSubmissions: [],
-                        submissions: [{
-                                submissionId: '',
-                                answers: subformQuestions.answers
-                            }]
-                    };
-                    forms.push(subform);
+                    const submissionId = element.element.submissionId;
+                    if (element.element.subFormStructure === 'single') {
+                        const subformQuestions = extractQuestions(element.element.formElements, subformId, true, forms.length);
+                        const subform = {
+                            formId: subformId,
+                            deletedSubmissions: [],
+                            submissions: [{
+                                    submissionId: submissionId,
+                                    answers: subformQuestions.answers
+                                }]
+                        };
+                        forms.push(subform);
+                    }
+                    else if (element.element.subFormStructure === 'multiple') {
+                        const subformQuestions = extractQuestions(element.element.formElements, subformId, true, forms.length);
+                        const existingSubform = forms.find(form => form.formId === subformId);
+                        const subform = {
+                            formId: subformId,
+                            deletedSubmissions: element.element.deletedSubmissions,
+                            submissions: element.element.submissions
+                        };
+                        forms.push(subform);
+                    }
                 }
             });
             return { answers: questions, forms: forms };
@@ -3083,12 +3393,15 @@ class SubmitFormComponent {
         }
         return { isValid: true, message: 'All required questions are answered.' };
     }
+    updateSubFormWithSubmissions(event) {
+        this.updateSubForm(this.pages, event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitFormComponent, deps: [{ token: FormService }, { token: i2$3.ToastrService }, { token: i3$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubmitFormComponent, selector: "lib-submit-form", inputs: { moduleName: "moduleName", edit: "edit", submissionId: "submissionId" }, outputs: { submit: "submit" }, ngImport: i0, template: "<div class=\"outer-container\">\n  <div class=\"submission-container container mb-2\">\n    <div *ngFor=\"let key of objectKeys(submission?.answerMap)\" class=\"submission-item\">\n      <div class=\"key\">{{ key }}</div>\n      <div class=\"value\">\n        <ng-container *ngIf=\"isImageUrl(submission?.answerMap[key]); else text\">\n          <img [src]=\"submission?.answerMap[key]\" alt=\"{{ key }}\" class=\"image\">\n        </ng-container>\n        <ng-template #text>{{ submission.answerMap[key] }}</ng-template>\n      </div>\n    </div>\n  </div>\n  <div class=\"head container\">\n    <lib-header [name]=\"name\"></lib-header>\n  </div>\n  <div class=\"body container\">\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [currentPage]=\"currentPage\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n    ></lib-next-prev-navigation>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.submission-container{display:flex;flex-wrap:wrap;box-shadow:0 4px 4px #00000040;border-radius:6px}.submission-item{flex:1 0 21%;margin:5px;padding:10px;border-radius:4px;display:flex;flex-direction:column}.key{font-weight:700;margin-bottom:5px}.value{word-break:break-word}.image{max-width:100%;height:auto;max-height:150px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["name"] }, { kind: "component", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: ["pages", "currentPageIndex", "edit"], outputs: ["pageChanged", "submitEmit"] }, { kind: "component", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: ["currentPageIndex", "pages", "previousPage", "nextPage", "currentPage", "edit"], outputs: ["navigateNext", "navigatePrevious", "submitEmit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubmitFormComponent, selector: "lib-submit-form", inputs: { moduleName: "moduleName", edit: "edit", submissionId: "submissionId" }, outputs: { submit: "submit" }, ngImport: i0, template: "<div class=\"outer-container\">\n  <div class=\"submission-container container mb-2\">\n    <div *ngFor=\"let qa of submission?.questionAnswers\" class=\"submission-item\">\n      <div class=\"key\">{{ qa.question }}</div>\n      <div class=\"value\">\n        <ng-container *ngIf=\"qa.elementType === 'FILE_PICKER'; else text\">\n          <div class=\"files\" *ngFor=\"let attachment of qa.attachments\">\n            <ng-container *ngIf=\"isImageUrl(attachment.fileName); else fileLink\">\n              <img [src]=\"attachment.fileUrl\" alt=\"{{ attachment.fileName }}\" class=\"image\">\n            </ng-container>\n            <ng-template #fileLink>\n              <p>{{ attachment.fileName }}</p>\n              <a class=\"fileName\" [href]=\"attachment.fileUrl\" target=\"_blank\">\n                <i class=\"bi bi-file-earmark\"></i>\n              </a>\n            </ng-template>\n          </div>\n        </ng-container>\n        <ng-template #text>\n          <ng-container [ngSwitch]=\"qa.elementType\">\n            <p *ngSwitchCase=\"'RICH_TEXT_EDITOR'\" [innerHTML]=\"qa.values\"></p>\n            <p *ngSwitchCase=\"'DROP_DOWN'\">{{ qa.values.join(', ') }}</p>\n            <p *ngSwitchCase=\"'SELECTION_MATRIX'\">{{ qa.values.join(', ') }}</p>\n            <p *ngSwitchDefault>{{ qa.values }}</p>\n          </ng-container>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  \n  <div class=\"head container\">\n    <lib-header [name]=\"name\"></lib-header>\n  </div>\n  <div class=\"body container\">\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [currentPage]=\"currentPage\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n    ></lib-next-prev-navigation>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.submission-container{display:flex;flex-wrap:wrap;box-shadow:0 4px 4px #00000040;border-radius:6px}.submission-item{flex:1 0 15%;margin:5px;padding:10px;border-radius:4px;display:flex;flex-direction:column}.key{font-weight:700;margin-bottom:5px}.value{word-break:break-word}.image{max-width:100%;height:auto;max-height:100px;margin-top:5px;border:1px solid #ddd;border-radius:4px;margin-bottom:10px}.files{display:flex;flex-direction:row}.fileName{text-decoration:none;margin-left:2%}.fileName i{font-size:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["name"] }, { kind: "component", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: ["pages", "currentPageIndex", "edit"], outputs: ["pageChanged", "submitEmit", "subFormChange"] }, { kind: "component", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: ["currentPageIndex", "pages", "previousPage", "nextPage", "currentPage", "edit"], outputs: ["navigateNext", "navigatePrevious", "submitEmit", "subFormChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-submit-form', template: "<div class=\"outer-container\">\n  <div class=\"submission-container container mb-2\">\n    <div *ngFor=\"let key of objectKeys(submission?.answerMap)\" class=\"submission-item\">\n      <div class=\"key\">{{ key }}</div>\n      <div class=\"value\">\n        <ng-container *ngIf=\"isImageUrl(submission?.answerMap[key]); else text\">\n          <img [src]=\"submission?.answerMap[key]\" alt=\"{{ key }}\" class=\"image\">\n        </ng-container>\n        <ng-template #text>{{ submission.answerMap[key] }}</ng-template>\n      </div>\n    </div>\n  </div>\n  <div class=\"head container\">\n    <lib-header [name]=\"name\"></lib-header>\n  </div>\n  <div class=\"body container\">\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [currentPage]=\"currentPage\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n    ></lib-next-prev-navigation>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.submission-container{display:flex;flex-wrap:wrap;box-shadow:0 4px 4px #00000040;border-radius:6px}.submission-item{flex:1 0 21%;margin:5px;padding:10px;border-radius:4px;display:flex;flex-direction:column}.key{font-weight:700;margin-bottom:5px}.value{word-break:break-word}.image{max-width:100%;height:auto;max-height:150px}\n"] }]
+            args: [{ selector: 'lib-submit-form', template: "<div class=\"outer-container\">\n  <div class=\"submission-container container mb-2\">\n    <div *ngFor=\"let qa of submission?.questionAnswers\" class=\"submission-item\">\n      <div class=\"key\">{{ qa.question }}</div>\n      <div class=\"value\">\n        <ng-container *ngIf=\"qa.elementType === 'FILE_PICKER'; else text\">\n          <div class=\"files\" *ngFor=\"let attachment of qa.attachments\">\n            <ng-container *ngIf=\"isImageUrl(attachment.fileName); else fileLink\">\n              <img [src]=\"attachment.fileUrl\" alt=\"{{ attachment.fileName }}\" class=\"image\">\n            </ng-container>\n            <ng-template #fileLink>\n              <p>{{ attachment.fileName }}</p>\n              <a class=\"fileName\" [href]=\"attachment.fileUrl\" target=\"_blank\">\n                <i class=\"bi bi-file-earmark\"></i>\n              </a>\n            </ng-template>\n          </div>\n        </ng-container>\n        <ng-template #text>\n          <ng-container [ngSwitch]=\"qa.elementType\">\n            <p *ngSwitchCase=\"'RICH_TEXT_EDITOR'\" [innerHTML]=\"qa.values\"></p>\n            <p *ngSwitchCase=\"'DROP_DOWN'\">{{ qa.values.join(', ') }}</p>\n            <p *ngSwitchCase=\"'SELECTION_MATRIX'\">{{ qa.values.join(', ') }}</p>\n            <p *ngSwitchDefault>{{ qa.values }}</p>\n          </ng-container>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  \n  <div class=\"head container\">\n    <lib-header [name]=\"name\"></lib-header>\n  </div>\n  <div class=\"body container\">\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [currentPage]=\"currentPage\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n    ></lib-next-prev-navigation>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.submission-container{display:flex;flex-wrap:wrap;box-shadow:0 4px 4px #00000040;border-radius:6px}.submission-item{flex:1 0 15%;margin:5px;padding:10px;border-radius:4px;display:flex;flex-direction:column}.key{font-weight:700;margin-bottom:5px}.value{word-break:break-word}.image{max-width:100%;height:auto;max-height:100px;margin-top:5px;border:1px solid #ddd;border-radius:4px;margin-bottom:10px}.files{display:flex;flex-direction:row}.fileName{text-decoration:none;margin-left:2%}.fileName i{font-size:20px}\n"] }]
         }], ctorParameters: function () { return [{ type: FormService }, { type: i2$3.ToastrService }, { type: i3$4.Router }]; }, propDecorators: { moduleName: [{
                 type: Input
             }], edit: [{
@@ -3294,21 +3607,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class SubFormModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SubFormModule, declarations: [SubFormComponent], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SubFormModule, declarations: [SubFormComponent, MultipleSubformComponent, SubmissionModalComponent], imports: [CommonModule,
             FormFieldsModule,
-            LogicModule], exports: [SubFormComponent] }); }
+            LogicModule,
+            MatDialogModule], exports: [SubFormComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormModule, imports: [CommonModule,
             FormFieldsModule,
-            LogicModule] }); }
+            LogicModule,
+            MatDialogModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SubFormComponent],
+                    declarations: [SubFormComponent, MultipleSubformComponent, SubmissionModalComponent],
                     imports: [
                         CommonModule,
                         FormFieldsModule,
                         LogicModule,
+                        MatDialogModule
                     ],
                     exports: [SubFormComponent]
                 }]