@piserve-tech/form-submission 1.3.319 → 1.3.320

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

@@ -10,19 +10,19 @@ import * as i2 from '@angular/router';
 import { NavigationEnd } from '@angular/router';
 import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i6 from 'ngx-bootstrap/datepicker';
+import * as i7 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import * as i7 from 'ngx-material-timepicker';
+import * as i8 from 'ngx-material-timepicker';
 import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
-import * as i7$1 from '@piserve-tech/drop-down';
+import * as i8$1 from '@piserve-tech/drop-down';
 import { DropdownModule } from '@piserve-tech/drop-down';
-import * as i7$2 from '@piserve-tech/file-upload';
+import * as i8$2 from '@piserve-tech/file-upload';
 import { DocUploadModule } from '@piserve-tech/file-upload';
 import * as i2$1 from '@angular/google-maps';
 import { GoogleMap, GoogleMapsModule } from '@angular/google-maps';
-import * as i5$1 from 'ngx-quill';
+import * as i6 from 'ngx-quill';
 import { QuillModule } from 'ngx-quill';
-import * as i3 from '@angular/material/slider';
+import * as i4 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import * as i1$2 from '@angular/platform-browser';
 import * as i1$3 from '@angular/material/dialog';
@@ -30,15 +30,15 @@ import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/mate
 import { v4 } from 'uuid';
 import * as i6$1 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i7$3 from '@angular/material/menu';
+import * as i7$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i8 from '@angular/material/icon';
+import * as i8$3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4 from 'ngx-infinite-scroll';
+import * as i4$1 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import * as i1$4 from 'ngx-toastr';
 import { ToastrModule } from 'ngx-toastr';
-import * as i14 from 'ngx-skeleton-loader';
+import * as i15 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { FilePreviewModule } from '@piserve-tech/file-preview';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -248,7 +248,8 @@ function mapHiddenFieldToModel(hiddenField) {
     return {
         value: hiddenField?.value,
         valueSource: hiddenField?.valueSource,
-        key: hiddenField?.key
+        key: hiddenField?.key,
+        updateOn: hiddenField?.updateOn || 'BOTH'
     };
 }
 function mapAggregateFunction(aggregateFunction) {
@@ -1177,11 +1178,11 @@ class SectionFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SectionFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: { section: "section" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4 px-3\" [attr.name]=\"section.testElementName\">\r\n  <p class=\"sectionTitle\">{{ section.title }}</p>\r\n  <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\r\n</div>\r\n", styles: [".sectionTitle{font-size:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: { section: "section" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4 px-3\" [attr.name]=\"section.testElementName\">\n  <p class=\"sectionTitle\">{{ section.title }}</p>\n  <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\n</div>\n", styles: [".sectionTitle{font-size:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SectionFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-section-fields', template: "<div class=\"mb-4 px-3\" [attr.name]=\"section.testElementName\">\r\n  <p class=\"sectionTitle\">{{ section.title }}</p>\r\n  <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\r\n</div>\r\n", styles: [".sectionTitle{font-size:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            args: [{ selector: 'lib-section-fields', template: "<div class=\"mb-4 px-3\" [attr.name]=\"section.testElementName\">\n  <p class=\"sectionTitle\">{{ section.title }}</p>\n  <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\n</div>\n", styles: [".sectionTitle{font-size:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { section: [{
                 type: Input
             }] } });
@@ -1837,13 +1838,170 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+class HiddenFieldService {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.hiddenFieldMap = new Map();
+        this.hiddenFieldResultsSubject = new BehaviorSubject(null);
+        this.hiddenFieldResults$ = this.hiddenFieldResultsSubject.asObservable();
+        this.isEdit = false;
+        this.subformHiddenFieldsMap = new Map();
+        this.user = '';
+        this.dataService.header$.subscribe((data) => {
+            this.user = data.authUser;
+        });
+    }
+    setEditMode(value) {
+        this.isEdit = value;
+    }
+    getEditMode() {
+        return this.isEdit;
+    }
+    setHiddenField(id, field) {
+        this.hiddenFieldMap.set(id, field);
+    }
+    getHiddenField(id) {
+        return this.hiddenFieldMap.get(id);
+    }
+    getAllHiddenFields() {
+        return Array.from(this.hiddenFieldMap.values());
+    }
+    updateHiddenFieldsOnChange() {
+        this.hiddenFieldMap.forEach((hiddenField, id) => {
+            const updateOn = hiddenField.formElement?.hiddenField.updateOn;
+            // ✅ Only process UPDATE / BOTH
+            if (updateOn !== 'UPDATE' && updateOn !== 'BOTH') {
+                return;
+            }
+            // ✅ Recalculate value
+            const result = this.resolveHiddenFieldValue(hiddenField.formElement?.hiddenField);
+            // ✅ Emit result
+            this.hiddenFieldResultsSubject.next({
+                id: id,
+                result: result,
+            });
+        });
+    }
+    resolveHiddenFieldValue(hiddenField) {
+        if (!hiddenField?.valueSource)
+            return null;
+        switch (hiddenField.valueSource) {
+            case 'CUSTOM_INPUT':
+                // Directly return the provided value
+                return hiddenField.value;
+            case 'LOCAL_STORAGE':
+                if (hiddenField.key) {
+                    return localStorage.getItem(hiddenField.key);
+                }
+                return null;
+            case 'SESSION_STORAGE':
+                if (hiddenField.key) {
+                    return sessionStorage.getItem(hiddenField.key);
+                }
+                return null;
+            case 'PREDEFINED_VARIABLE':
+                return this.resolvePredefinedVariable(hiddenField.value);
+            default:
+                return null;
+        }
+    }
+    resolvePredefinedVariable(variable) {
+        if (!variable)
+            return null;
+        const now = new Date();
+        switch (variable) {
+            case 'CURRENT_DATE':
+                return now.toISOString().split('T')[0]; // e.g. "2025-09-29"
+            case 'CURRENT_TIME':
+                return now.toTimeString().split(' ')[0]; // e.g. "15:42:18"
+            case 'CURRENT_DATE_TIME':
+                return now.toLocaleString(); // full ISO datetime
+            case 'EPOCH_TIME':
+                return now.getTime(); // milliseconds since 1970
+            case 'YEAR':
+                return now.getFullYear();
+            case 'MONTH':
+                return now.getMonth() + 1; // 1-12
+            case 'DAY':
+                return now.getDate(); // 1-31
+            case 'SUBMITTED_BY':
+                return this.user ? this.user : 'Unknown';
+            default:
+                return null;
+        }
+    }
+    extractSubformHiddenFields(subForm) {
+        if (!subForm?.rows)
+            return;
+        const hiddenFields = [];
+        subForm.rows.forEach((row) => {
+            row.grid?.forEach((item) => {
+                const element = item?.element;
+                if (element?.formElement?.elementType === 'HIDDEN_FIELD' &&
+                    item?.show) {
+                    hiddenFields.push({
+                        id: element.id,
+                        config: element.formElement.hiddenField
+                    });
+                }
+            });
+        });
+        // Store using subform id
+        this.subformHiddenFieldsMap.set(subForm.id, hiddenFields);
+    }
+    updateSubformHiddenFieldsFromCache(subFormId, submission, trigger) {
+        const hiddenFields = this.subformHiddenFieldsMap.get(subFormId);
+        if (!hiddenFields || !submission?.answers)
+            return submission;
+        hiddenFields.forEach((field) => {
+            const hiddenConfig = field.config;
+            if (!hiddenConfig)
+                return;
+            const updateOn = hiddenConfig.updateOn;
+            const shouldUpdate = updateOn === 'BOTH' ||
+                (updateOn === 'SAVE' && trigger === 'SAVE') ||
+                (updateOn === 'UPDATE' && trigger === 'UPDATE');
+            if (!shouldUpdate)
+                return;
+            // ✅ Resolve value
+            const value = this.resolveHiddenFieldValue(hiddenConfig);
+            // ✅ Find answer
+            const answerObj = submission.answers.find((ans) => ans.questionId === field.id);
+            if (answerObj) {
+                if (answerObj.answer !== value) {
+                    answerObj.answer = value;
+                }
+            }
+            else {
+                submission.answers.push({
+                    questionId: field.id,
+                    answer: value,
+                    maximumPossibleScore: 0,
+                    show: true,
+                    required: false,
+                });
+            }
+        });
+        return submission;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenFieldService, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenFieldService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenFieldService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: DataService }]; } });
+
 class CheckBoxFieldsComponent {
-    constructor(formService, validationService, tracker, scoreCalcService, whenClauseService) {
+    constructor(formService, validationService, tracker, scoreCalcService, whenClauseService, hiddenFieldService) {
         this.formService = formService;
         this.validationService = validationService;
         this.tracker = tracker;
         this.scoreCalcService = scoreCalcService;
         this.whenClauseService = whenClauseService;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -1989,6 +2147,7 @@ class CheckBoxFieldsComponent {
         const answers = Array.isArray(this.question.answer) ? this.question.answer : [];
         const parsedAnswers = answers.map((ans) => ans.split('|')[1]);
         this.whenClauseService.setQuestionAnswer(this.question.id, parsedAnswers);
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     updateChildLogics(question) {
         if (question.childLogics && Array.isArray(question.childLogics)) {
@@ -2280,13 +2439,13 @@ class CheckBoxFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxFieldsComponent, deps: [{ token: FormService }, { token: ValidationService }, { token: ElementTrackerService }, { token: ScoreCalculationService }, { token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", rowId: "rowId", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-3\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"checkboxField-container\"\r\n    [class.two-column]=\"displayOptionsInColumn\"\r\n  >\r\n    <div class=\"form-check\" *ngFor=\"let option of customOptions\">\r\n      <input\r\n        class=\"form-check-input\"\r\n        type=\"checkbox\"\r\n        [id]=\"question.id+'-'+rowId+'-'+option.value\"\r\n        [name]=\"option.value + 'Checkbox'\"\r\n        [value]=\"option.value\"\r\n        (change)=\"onCheckboxChange(option, $event)\"\r\n        [disabled]=\"isOptionDisabled(option)\"\r\n        [checked]=\"selectedOptions.includes(option)\"\r\n        [attr.data-value]=\"selectedOptions.includes(option)\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <label\r\n        class=\"formCheckLabel me-4 mb-2\"\r\n        [for]=\"question.id+'-'+rowId+'-'+option.value\"\r\n        >{{ option.label }}</label\r\n      >\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"isInvalid && (!inLine || selectedOptions.length === 0)\"\r\n    class=\"error-message\"\r\n  >\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-check-input{cursor:pointer}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.formCheckLabel{margin-top:5px;cursor:pointer}.checkboxField-container{display:block}.checkboxField-container.two-column{display:grid;grid-template-columns:repeat(2,1fr)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxFieldsComponent, deps: [{ token: FormService }, { token: ValidationService }, { token: ElementTrackerService }, { token: ScoreCalculationService }, { token: WhenClauseService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", rowId: "rowId", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-3\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div\n    class=\"checkboxField-container\"\n    [class.two-column]=\"displayOptionsInColumn\"\n  >\n    <div class=\"form-check\" *ngFor=\"let option of customOptions\">\n      <input\n        class=\"form-check-input\"\n        type=\"checkbox\"\n        [id]=\"question.id+'-'+rowId+'-'+option.value\"\n        [name]=\"option.value + 'Checkbox'\"\n        [value]=\"option.value\"\n        (change)=\"onCheckboxChange(option, $event)\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [checked]=\"selectedOptions.includes(option)\"\n        [attr.data-value]=\"selectedOptions.includes(option)\"\n        [disabled]=\"disableEdit\"\n      />\n      <label\n        class=\"formCheckLabel me-4 mb-2\"\n        [for]=\"question.id+'-'+rowId+'-'+option.value\"\n        >{{ option.label }}</label\n      >\n    </div>\n  </div>\n  <div\n    *ngIf=\"isInvalid && (!inLine || selectedOptions.length === 0)\"\n    class=\"error-message\"\n  >\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-check-input{cursor:pointer}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.formCheckLabel{margin-top:5px;cursor:pointer}.checkboxField-container{display:block}.checkboxField-container.two-column{display:grid;grid-template-columns:repeat(2,1fr)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-check-box-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-3\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div\r\n    class=\"checkboxField-container\"\r\n    [class.two-column]=\"displayOptionsInColumn\"\r\n  >\r\n    <div class=\"form-check\" *ngFor=\"let option of customOptions\">\r\n      <input\r\n        class=\"form-check-input\"\r\n        type=\"checkbox\"\r\n        [id]=\"question.id+'-'+rowId+'-'+option.value\"\r\n        [name]=\"option.value + 'Checkbox'\"\r\n        [value]=\"option.value\"\r\n        (change)=\"onCheckboxChange(option, $event)\"\r\n        [disabled]=\"isOptionDisabled(option)\"\r\n        [checked]=\"selectedOptions.includes(option)\"\r\n        [attr.data-value]=\"selectedOptions.includes(option)\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <label\r\n        class=\"formCheckLabel me-4 mb-2\"\r\n        [for]=\"question.id+'-'+rowId+'-'+option.value\"\r\n        >{{ option.label }}</label\r\n      >\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"isInvalid && (!inLine || selectedOptions.length === 0)\"\r\n    class=\"error-message\"\r\n  >\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-check-input{cursor:pointer}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.formCheckLabel{margin-top:5px;cursor:pointer}.checkboxField-container{display:block}.checkboxField-container.two-column{display:grid;grid-template-columns:repeat(2,1fr)}\n"] }]
-        }], ctorParameters: function () { return [{ type: FormService }, { type: ValidationService }, { type: ElementTrackerService }, { type: ScoreCalculationService }, { type: WhenClauseService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-check-box-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-3\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div\n    class=\"checkboxField-container\"\n    [class.two-column]=\"displayOptionsInColumn\"\n  >\n    <div class=\"form-check\" *ngFor=\"let option of customOptions\">\n      <input\n        class=\"form-check-input\"\n        type=\"checkbox\"\n        [id]=\"question.id+'-'+rowId+'-'+option.value\"\n        [name]=\"option.value + 'Checkbox'\"\n        [value]=\"option.value\"\n        (change)=\"onCheckboxChange(option, $event)\"\n        [disabled]=\"isOptionDisabled(option)\"\n        [checked]=\"selectedOptions.includes(option)\"\n        [attr.data-value]=\"selectedOptions.includes(option)\"\n        [disabled]=\"disableEdit\"\n      />\n      <label\n        class=\"formCheckLabel me-4 mb-2\"\n        [for]=\"question.id+'-'+rowId+'-'+option.value\"\n        >{{ option.label }}</label\n      >\n    </div>\n  </div>\n  <div\n    *ngIf=\"isInvalid && (!inLine || selectedOptions.length === 0)\"\n    class=\"error-message\"\n  >\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-check-input{cursor:pointer}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.formCheckLabel{margin-top:5px;cursor:pointer}.checkboxField-container{display:block}.checkboxField-container.two-column{display:grid;grid-template-columns:repeat(2,1fr)}\n"] }]
+        }], ctorParameters: function () { return [{ type: FormService }, { type: ValidationService }, { type: ElementTrackerService }, { type: ScoreCalculationService }, { type: WhenClauseService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -2303,11 +2462,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class DateTimeFieldsComponent {
-    constructor(datePipe, router, validationService, tracker) {
+    constructor(datePipe, router, validationService, tracker, hiddenFieldService) {
         this.datePipe = datePipe;
         this.router = router;
         this.validationService = validationService;
         this.tracker = tracker;
+        this.hiddenFieldService = hiddenFieldService;
         this.bsConfig = {
             containerClass: 'theme-custom',
             isAnimated: true,
@@ -2571,6 +2731,7 @@ class DateTimeFieldsComponent {
             this.validateDateRange();
         }
         this.answerChange.emit({ answer: this.question.answer, maxPossibleScore: 0 });
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     formatDate(date, type = 'dateTime') {
         switch (this.dateType) {
@@ -2864,13 +3025,13 @@ class DateTimeFieldsComponent {
     get errorMessage() {
         return this.validationService.getErrorMessage(this.buildElementId());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeFieldsComponent, deps: [{ token: i1$1.DatePipe }, { token: i2.Router }, { token: ValidationService }, { token: ElementTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, providers: [DatePipe], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepickerYMD"], descendants: true }, { propertyName: "dateRangePicker", first: true, predicate: ["daterangepicker"], descendants: true }, { propertyName: "dateAndTimePicker", first: true, predicate: ["dateAndTimePicker"], descendants: true }, { propertyName: "fullTime3", first: true, predicate: ["fullTime3"], descendants: true }, { propertyName: "fullTime4", first: true, predicate: ["fullTime4"], descendants: true }], ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"dateType === 'DATE_ONLY'\">\r\n    <!-- Date only picker -->\r\n    <div class=\"input-container\">\r\n      <input\r\n        class=\"form-control height\"\r\n        #datepickerYMD=\"bsDatepicker\"\r\n        bsDatepicker\r\n        [minDate]=\"minDate ? minDate : undefined\"\r\n        [maxDate]=\"maxDate ? maxDate : undefined\"\r\n        [bsConfig]=\"{ dateInputFormat: format, containerClass: 'theme-custom' }\"\r\n        [(ngModel)]=\"selectedDate\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\r\n        placeholder=\"Select date\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDate)\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <i\r\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\r\n        (click)=\"openDatePicker()\"\r\n      ></i>\r\n    </div>\r\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDate)\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mt-2\">\r\n      {{ validationMessage }}\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"dateType === 'MONTH_YEAR'\">\r\n    <div class=\"input-container\">\r\n      <input\r\n        class=\"form-control height\"\r\n        #datepickerYMD=\"bsDatepicker\"\r\n        bsDatepicker\r\n        [minDate]=\"minDate ? minDate : undefined\"\r\n        [maxDate]=\"maxDate ? maxDate : undefined\"\r\n        [bsConfig]=\"{\r\n          containerClass: 'theme-dark-blue',\r\n          isAnimated: true,\r\n          adaptivePosition: true,\r\n          showWeekNumbers: false,\r\n          minMode: 'month',\r\n          dateInputFormat: format\r\n        }\"\r\n        [(ngModel)]=\"selectedDate\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\r\n        placeholder=\"Select date\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDate)\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <i\r\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\r\n        (click)=\"openDatePicker()\"\r\n      ></i>\r\n    </div>\r\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDate)\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\r\n      {{ validationMessage }}\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\r\n    <!-- Time picker -->\r\n\r\n    <div class=\"input-container\">\r\n      <input\r\n        class=\"form-control height appearanceInput mt-3\"\r\n        aria-label=\"Select time\"\r\n        placeholder=\"Select time\"\r\n        readonly\r\n        [format]=\"timeFormat === '24' ? 24 : 12\"\r\n        [ngxTimepicker]=\"fullTime3\"\r\n        [(ngModel)]=\"selectedTime\"\r\n        [max]=\"maxTime\"\r\n        [min]=\"minTime\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\r\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedTime)\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n\r\n      <i\r\n        id=\"startDateIcon\"\r\n        class=\"fa-solid fa-clock text-primary fs-6 clock-icon\"\r\n        (click)=\"fullTime3.open()\"\r\n        style=\"cursor: pointer\"\r\n      ></i>\r\n      <ngx-material-timepicker #fullTime3></ngx-material-timepicker>\r\n    </div>\r\n    <div *ngIf=\"isInvalid && (!inLine || !selectedTime)\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\r\n      {{ validationMessage }}\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"dateType === 'DATE_AND_TIME'\">\r\n    <!-- Date and time picker -->\r\n    <div class=\"input-container\">\r\n      <input\r\n        #dateAndTimePicker=\"bsDatepicker\"\r\n        type=\"text\"\r\n        class=\"form-control height\"\r\n        [minDate]=\"minDate ? minDate : undefined\"\r\n        [maxDate]=\"maxDate ? maxDate : undefined\"\r\n        [bsConfig]=\"{\r\n          dateInputFormat: format,\r\n          containerClass: 'theme-custom'\r\n        }\"\r\n        placeholder=\"Select date\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        bsDatepicker\r\n        [class.invalid]=\"validationFailed\"\r\n        [(ngModel)]=\"selectedDateAndTime\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid-question]=\"isInvalid\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <i\r\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\r\n        (click)=\"openDateAndTimePicker()\"\r\n      ></i>\r\n    </div>\r\n    <div\r\n      class=\"input-container\"\r\n      *ngIf=\"selectedDateAndTime && selectedDateAndTime != null\"\r\n    >\r\n      <input\r\n        class=\"form-control height appearanceInput mt-3\"\r\n        aria-label=\"Select time\"\r\n        placeholder=\"Select time\"\r\n        readonly\r\n        [format]=\"timeFormat === '24' ? 24 : 12\"\r\n        [ngxTimepicker]=\"fullTime4\"\r\n        [(ngModel)]=\"selectedTime\"\r\n        [max]=\"maxTime\"\r\n        [min]=\"minTime\"\r\n        (ngModelChange)=\"validateField()\"\r\n        (focus)=\"closeDatepicker()\"\r\n        [class.invalid]=\"timeValidationFailed\"\r\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedTime)\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n\r\n      <i\r\n        id=\"startDateIcon\"\r\n        class=\"fa-solid fa-clock text-primary fs-6 clock-icon\"\r\n        (click)=\"fullTime4.open()\"\r\n        style=\"cursor: pointer\"\r\n      ></i>\r\n      <ngx-material-timepicker #fullTime4></ngx-material-timepicker>\r\n    </div>\r\n    <!-- <div *ngIf=\"isInvalid\" class=\"error-message\"> -->\r\n    <div *ngIf=\"isInvalid && (!inLine || !selectedTime)\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n    <div\r\n      *ngIf=\"(validationFailed || timeValidationFailed)  && !isInvalid\"\r\n      class=\"text-danger mt-2\"\r\n    >\r\n      {{ validationMessage }}\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"dateType === 'DATE_RANGE'\">\r\n    <!-- Date range picker -->\r\n    <div class=\"input-container\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control height\"\r\n        #daterangepicker=\"bsDaterangepicker\"\r\n        bsDaterangepicker\r\n        placeholder=\"Select date\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        [bsConfig]=\"{\r\n          rangeInputFormat: format,\r\n          dateInputFormat: format,\r\n          containerClass: 'theme-custom',\r\n          displayOneMonthRange: true\r\n        }\"\r\n        [(ngModel)]=\"selectedDateRange\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\r\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDateRange)\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <i\r\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\r\n        (click)=\"openDateRangePicker()\"\r\n      ></i>\r\n    </div>\r\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDateRange)\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\r\n      {{ validationMessage }}\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon,.clock-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.appearanceInput{background-color:#fff}::ng-deep ngx-material-timepicker-content{--body-background-color: #fff;--button-color: #08bff6 !important;--dial-active-color: #fff;--dial-inactive-color: rgba(255, 255, 255, .5);--dial-background-color: #08bff6 !important;--dial-editable-active-color: #08bff6!important;--dial-editable-background-color: #fff;--clock-face-time-active-color: #fff;--clock-face-time-inactive-color: #6c6c6c;--clock-face-inner-time-inactive-color: #929292;--clock-face-time-disabled-color: #c5c5c5;--clock-face-background-color: #f0f0f0;--clock-hand-color: #08bff6 !important;position:relative;z-index:99999999}::ng-deep ngx-material-timepicker-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:99998}.theme-custom .bs-datepicker-head,.timepicker__header{background-color:#08bff6!important}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{color:#fff!important;background-color:#08bff6!important;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i6.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i6.BsDaterangepickerDirective, selector: "[bsDaterangepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isOpen", "bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "daysDisabled", "datesDisabled", "datesEnabled"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDaterangepicker"] }, { kind: "directive", type: i6.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }, { kind: "component", type: i7.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i7.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeFieldsComponent, deps: [{ token: i1$1.DatePipe }, { token: i2.Router }, { token: ValidationService }, { token: ElementTrackerService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, providers: [DatePipe], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepickerYMD"], descendants: true }, { propertyName: "dateRangePicker", first: true, predicate: ["daterangepicker"], descendants: true }, { propertyName: "dateAndTimePicker", first: true, predicate: ["dateAndTimePicker"], descendants: true }, { propertyName: "fullTime3", first: true, predicate: ["fullTime3"], descendants: true }, { propertyName: "fullTime4", first: true, predicate: ["fullTime4"], descendants: true }], ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <ng-container *ngIf=\"dateType === 'DATE_ONLY'\">\n    <!-- Date only picker -->\n    <div class=\"input-container\">\n      <input\n        class=\"form-control height\"\n        #datepickerYMD=\"bsDatepicker\"\n        bsDatepicker\n        [minDate]=\"minDate ? minDate : undefined\"\n        [maxDate]=\"maxDate ? maxDate : undefined\"\n        [bsConfig]=\"{ dateInputFormat: format, containerClass: 'theme-custom' }\"\n        [(ngModel)]=\"selectedDate\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\n        placeholder=\"Select date\"\n        container=\"body\"\n        placement=\"top\"\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDate)\"\n        [disabled]=\"disableEdit\"\n      />\n      <i\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n        (click)=\"openDatePicker()\"\n      ></i>\n    </div>\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDate)\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mt-2\">\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"dateType === 'MONTH_YEAR'\">\n    <div class=\"input-container\">\n      <input\n        class=\"form-control height\"\n        #datepickerYMD=\"bsDatepicker\"\n        bsDatepicker\n        [minDate]=\"minDate ? minDate : undefined\"\n        [maxDate]=\"maxDate ? maxDate : undefined\"\n        [bsConfig]=\"{\n          containerClass: 'theme-dark-blue',\n          isAnimated: true,\n          adaptivePosition: true,\n          showWeekNumbers: false,\n          minMode: 'month',\n          dateInputFormat: format\n        }\"\n        [(ngModel)]=\"selectedDate\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\n        placeholder=\"Select date\"\n        container=\"body\"\n        placement=\"top\"\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDate)\"\n        [disabled]=\"disableEdit\"\n      />\n      <i\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n        (click)=\"openDatePicker()\"\n      ></i>\n    </div>\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDate)\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\n    <!-- Time picker -->\n\n    <div class=\"input-container\">\n      <input\n        class=\"form-control height appearanceInput mt-3\"\n        aria-label=\"Select time\"\n        placeholder=\"Select time\"\n        readonly\n        [format]=\"timeFormat === '24' ? 24 : 12\"\n        [ngxTimepicker]=\"fullTime3\"\n        [(ngModel)]=\"selectedTime\"\n        [max]=\"maxTime\"\n        [min]=\"minTime\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedTime)\"\n        container=\"body\"\n        placement=\"top\"\n        [disabled]=\"disableEdit\"\n      />\n\n      <i\n        id=\"startDateIcon\"\n        class=\"fa-solid fa-clock text-primary fs-6 clock-icon\"\n        (click)=\"fullTime3.open()\"\n        style=\"cursor: pointer\"\n      ></i>\n      <ngx-material-timepicker #fullTime3></ngx-material-timepicker>\n    </div>\n    <div *ngIf=\"isInvalid && (!inLine || !selectedTime)\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"dateType === 'DATE_AND_TIME'\">\n    <!-- Date and time picker -->\n    <div class=\"input-container\">\n      <input\n        #dateAndTimePicker=\"bsDatepicker\"\n        type=\"text\"\n        class=\"form-control height\"\n        [minDate]=\"minDate ? minDate : undefined\"\n        [maxDate]=\"maxDate ? maxDate : undefined\"\n        [bsConfig]=\"{\n          dateInputFormat: format,\n          containerClass: 'theme-custom'\n        }\"\n        placeholder=\"Select date\"\n        container=\"body\"\n        placement=\"top\"\n        bsDatepicker\n        [class.invalid]=\"validationFailed\"\n        [(ngModel)]=\"selectedDateAndTime\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid-question]=\"isInvalid\"\n        [disabled]=\"disableEdit\"\n      />\n      <i\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n        (click)=\"openDateAndTimePicker()\"\n      ></i>\n    </div>\n    <div\n      class=\"input-container\"\n      *ngIf=\"selectedDateAndTime && selectedDateAndTime != null\"\n    >\n      <input\n        class=\"form-control height appearanceInput mt-3\"\n        aria-label=\"Select time\"\n        placeholder=\"Select time\"\n        readonly\n        [format]=\"timeFormat === '24' ? 24 : 12\"\n        [ngxTimepicker]=\"fullTime4\"\n        [(ngModel)]=\"selectedTime\"\n        [max]=\"maxTime\"\n        [min]=\"minTime\"\n        (ngModelChange)=\"validateField()\"\n        (focus)=\"closeDatepicker()\"\n        [class.invalid]=\"timeValidationFailed\"\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedTime)\"\n        container=\"body\"\n        placement=\"top\"\n        [disabled]=\"disableEdit\"\n      />\n\n      <i\n        id=\"startDateIcon\"\n        class=\"fa-solid fa-clock text-primary fs-6 clock-icon\"\n        (click)=\"fullTime4.open()\"\n        style=\"cursor: pointer\"\n      ></i>\n      <ngx-material-timepicker #fullTime4></ngx-material-timepicker>\n    </div>\n    <!-- <div *ngIf=\"isInvalid\" class=\"error-message\"> -->\n    <div *ngIf=\"isInvalid && (!inLine || !selectedTime)\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n    <div\n      *ngIf=\"(validationFailed || timeValidationFailed)  && !isInvalid\"\n      class=\"text-danger mt-2\"\n    >\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"dateType === 'DATE_RANGE'\">\n    <!-- Date range picker -->\n    <div class=\"input-container\">\n      <input\n        type=\"text\"\n        class=\"form-control height\"\n        #daterangepicker=\"bsDaterangepicker\"\n        bsDaterangepicker\n        placeholder=\"Select date\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [bsConfig]=\"{\n          rangeInputFormat: format,\n          dateInputFormat: format,\n          containerClass: 'theme-custom',\n          displayOneMonthRange: true\n        }\"\n        [(ngModel)]=\"selectedDateRange\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDateRange)\"\n        container=\"body\"\n        placement=\"top\"\n        [disabled]=\"disableEdit\"\n      />\n      <i\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n        (click)=\"openDateRangePicker()\"\n      ></i>\n    </div>\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDateRange)\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon,.clock-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.appearanceInput{background-color:#fff}::ng-deep ngx-material-timepicker-content{--body-background-color: #fff;--button-color: #08bff6 !important;--dial-active-color: #fff;--dial-inactive-color: rgba(255, 255, 255, .5);--dial-background-color: #08bff6 !important;--dial-editable-active-color: #08bff6!important;--dial-editable-background-color: #fff;--clock-face-time-active-color: #fff;--clock-face-time-inactive-color: #6c6c6c;--clock-face-inner-time-inactive-color: #929292;--clock-face-time-disabled-color: #c5c5c5;--clock-face-background-color: #f0f0f0;--clock-hand-color: #08bff6 !important;position:relative;z-index:99999999}::ng-deep ngx-material-timepicker-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:99998}.theme-custom .bs-datepicker-head,.timepicker__header{background-color:#08bff6!important}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{color:#fff!important;background-color:#08bff6!important;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i7.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i7.BsDaterangepickerDirective, selector: "[bsDaterangepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isOpen", "bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "daysDisabled", "datesDisabled", "datesEnabled"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDaterangepicker"] }, { kind: "directive", type: i7.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }, { kind: "component", type: i8.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i8.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-date-time-fields', providers: [DatePipe], encapsulation: ViewEncapsulation.None, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"dateType === 'DATE_ONLY'\">\r\n    <!-- Date only picker -->\r\n    <div class=\"input-container\">\r\n      <input\r\n        class=\"form-control height\"\r\n        #datepickerYMD=\"bsDatepicker\"\r\n        bsDatepicker\r\n        [minDate]=\"minDate ? minDate : undefined\"\r\n        [maxDate]=\"maxDate ? maxDate : undefined\"\r\n        [bsConfig]=\"{ dateInputFormat: format, containerClass: 'theme-custom' }\"\r\n        [(ngModel)]=\"selectedDate\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\r\n        placeholder=\"Select date\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDate)\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <i\r\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\r\n        (click)=\"openDatePicker()\"\r\n      ></i>\r\n    </div>\r\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDate)\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mt-2\">\r\n      {{ validationMessage }}\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"dateType === 'MONTH_YEAR'\">\r\n    <div class=\"input-container\">\r\n      <input\r\n        class=\"form-control height\"\r\n        #datepickerYMD=\"bsDatepicker\"\r\n        bsDatepicker\r\n        [minDate]=\"minDate ? minDate : undefined\"\r\n        [maxDate]=\"maxDate ? maxDate : undefined\"\r\n        [bsConfig]=\"{\r\n          containerClass: 'theme-dark-blue',\r\n          isAnimated: true,\r\n          adaptivePosition: true,\r\n          showWeekNumbers: false,\r\n          minMode: 'month',\r\n          dateInputFormat: format\r\n        }\"\r\n        [(ngModel)]=\"selectedDate\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\r\n        placeholder=\"Select date\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDate)\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <i\r\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\r\n        (click)=\"openDatePicker()\"\r\n      ></i>\r\n    </div>\r\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDate)\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\r\n      {{ validationMessage }}\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\r\n    <!-- Time picker -->\r\n\r\n    <div class=\"input-container\">\r\n      <input\r\n        class=\"form-control height appearanceInput mt-3\"\r\n        aria-label=\"Select time\"\r\n        placeholder=\"Select time\"\r\n        readonly\r\n        [format]=\"timeFormat === '24' ? 24 : 12\"\r\n        [ngxTimepicker]=\"fullTime3\"\r\n        [(ngModel)]=\"selectedTime\"\r\n        [max]=\"maxTime\"\r\n        [min]=\"minTime\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\r\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedTime)\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n\r\n      <i\r\n        id=\"startDateIcon\"\r\n        class=\"fa-solid fa-clock text-primary fs-6 clock-icon\"\r\n        (click)=\"fullTime3.open()\"\r\n        style=\"cursor: pointer\"\r\n      ></i>\r\n      <ngx-material-timepicker #fullTime3></ngx-material-timepicker>\r\n    </div>\r\n    <div *ngIf=\"isInvalid && (!inLine || !selectedTime)\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\r\n      {{ validationMessage }}\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"dateType === 'DATE_AND_TIME'\">\r\n    <!-- Date and time picker -->\r\n    <div class=\"input-container\">\r\n      <input\r\n        #dateAndTimePicker=\"bsDatepicker\"\r\n        type=\"text\"\r\n        class=\"form-control height\"\r\n        [minDate]=\"minDate ? minDate : undefined\"\r\n        [maxDate]=\"maxDate ? maxDate : undefined\"\r\n        [bsConfig]=\"{\r\n          dateInputFormat: format,\r\n          containerClass: 'theme-custom'\r\n        }\"\r\n        placeholder=\"Select date\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        bsDatepicker\r\n        [class.invalid]=\"validationFailed\"\r\n        [(ngModel)]=\"selectedDateAndTime\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid-question]=\"isInvalid\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <i\r\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\r\n        (click)=\"openDateAndTimePicker()\"\r\n      ></i>\r\n    </div>\r\n    <div\r\n      class=\"input-container\"\r\n      *ngIf=\"selectedDateAndTime && selectedDateAndTime != null\"\r\n    >\r\n      <input\r\n        class=\"form-control height appearanceInput mt-3\"\r\n        aria-label=\"Select time\"\r\n        placeholder=\"Select time\"\r\n        readonly\r\n        [format]=\"timeFormat === '24' ? 24 : 12\"\r\n        [ngxTimepicker]=\"fullTime4\"\r\n        [(ngModel)]=\"selectedTime\"\r\n        [max]=\"maxTime\"\r\n        [min]=\"minTime\"\r\n        (ngModelChange)=\"validateField()\"\r\n        (focus)=\"closeDatepicker()\"\r\n        [class.invalid]=\"timeValidationFailed\"\r\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedTime)\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n\r\n      <i\r\n        id=\"startDateIcon\"\r\n        class=\"fa-solid fa-clock text-primary fs-6 clock-icon\"\r\n        (click)=\"fullTime4.open()\"\r\n        style=\"cursor: pointer\"\r\n      ></i>\r\n      <ngx-material-timepicker #fullTime4></ngx-material-timepicker>\r\n    </div>\r\n    <!-- <div *ngIf=\"isInvalid\" class=\"error-message\"> -->\r\n    <div *ngIf=\"isInvalid && (!inLine || !selectedTime)\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n    <div\r\n      *ngIf=\"(validationFailed || timeValidationFailed)  && !isInvalid\"\r\n      class=\"text-danger mt-2\"\r\n    >\r\n      {{ validationMessage }}\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"dateType === 'DATE_RANGE'\">\r\n    <!-- Date range picker -->\r\n    <div class=\"input-container\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control height\"\r\n        #daterangepicker=\"bsDaterangepicker\"\r\n        bsDaterangepicker\r\n        placeholder=\"Select date\"\r\n        [minDate]=\"minDate\"\r\n        [maxDate]=\"maxDate\"\r\n        [bsConfig]=\"{\r\n          rangeInputFormat: format,\r\n          dateInputFormat: format,\r\n          containerClass: 'theme-custom',\r\n          displayOneMonthRange: true\r\n        }\"\r\n        [(ngModel)]=\"selectedDateRange\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\r\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDateRange)\"\r\n        container=\"body\"\r\n        placement=\"top\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <i\r\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\r\n        (click)=\"openDateRangePicker()\"\r\n      ></i>\r\n    </div>\r\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDateRange)\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\r\n      {{ validationMessage }}\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon,.clock-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.appearanceInput{background-color:#fff}::ng-deep ngx-material-timepicker-content{--body-background-color: #fff;--button-color: #08bff6 !important;--dial-active-color: #fff;--dial-inactive-color: rgba(255, 255, 255, .5);--dial-background-color: #08bff6 !important;--dial-editable-active-color: #08bff6!important;--dial-editable-background-color: #fff;--clock-face-time-active-color: #fff;--clock-face-time-inactive-color: #6c6c6c;--clock-face-inner-time-inactive-color: #929292;--clock-face-time-disabled-color: #c5c5c5;--clock-face-background-color: #f0f0f0;--clock-hand-color: #08bff6 !important;position:relative;z-index:99999999}::ng-deep ngx-material-timepicker-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:99998}.theme-custom .bs-datepicker-head,.timepicker__header{background-color:#08bff6!important}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{color:#fff!important;background-color:#08bff6!important;border-radius:50%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DatePipe }, { type: i2.Router }, { type: ValidationService }, { type: ElementTrackerService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-date-time-fields', providers: [DatePipe], encapsulation: ViewEncapsulation.None, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <ng-container *ngIf=\"dateType === 'DATE_ONLY'\">\n    <!-- Date only picker -->\n    <div class=\"input-container\">\n      <input\n        class=\"form-control height\"\n        #datepickerYMD=\"bsDatepicker\"\n        bsDatepicker\n        [minDate]=\"minDate ? minDate : undefined\"\n        [maxDate]=\"maxDate ? maxDate : undefined\"\n        [bsConfig]=\"{ dateInputFormat: format, containerClass: 'theme-custom' }\"\n        [(ngModel)]=\"selectedDate\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\n        placeholder=\"Select date\"\n        container=\"body\"\n        placement=\"top\"\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDate)\"\n        [disabled]=\"disableEdit\"\n      />\n      <i\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n        (click)=\"openDatePicker()\"\n      ></i>\n    </div>\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDate)\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mt-2\">\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"dateType === 'MONTH_YEAR'\">\n    <div class=\"input-container\">\n      <input\n        class=\"form-control height\"\n        #datepickerYMD=\"bsDatepicker\"\n        bsDatepicker\n        [minDate]=\"minDate ? minDate : undefined\"\n        [maxDate]=\"maxDate ? maxDate : undefined\"\n        [bsConfig]=\"{\n          containerClass: 'theme-dark-blue',\n          isAnimated: true,\n          adaptivePosition: true,\n          showWeekNumbers: false,\n          minMode: 'month',\n          dateInputFormat: format\n        }\"\n        [(ngModel)]=\"selectedDate\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\n        placeholder=\"Select date\"\n        container=\"body\"\n        placement=\"top\"\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDate)\"\n        [disabled]=\"disableEdit\"\n      />\n      <i\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n        (click)=\"openDatePicker()\"\n      ></i>\n    </div>\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDate)\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\n    <!-- Time picker -->\n\n    <div class=\"input-container\">\n      <input\n        class=\"form-control height appearanceInput mt-3\"\n        aria-label=\"Select time\"\n        placeholder=\"Select time\"\n        readonly\n        [format]=\"timeFormat === '24' ? 24 : 12\"\n        [ngxTimepicker]=\"fullTime3\"\n        [(ngModel)]=\"selectedTime\"\n        [max]=\"maxTime\"\n        [min]=\"minTime\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedTime)\"\n        container=\"body\"\n        placement=\"top\"\n        [disabled]=\"disableEdit\"\n      />\n\n      <i\n        id=\"startDateIcon\"\n        class=\"fa-solid fa-clock text-primary fs-6 clock-icon\"\n        (click)=\"fullTime3.open()\"\n        style=\"cursor: pointer\"\n      ></i>\n      <ngx-material-timepicker #fullTime3></ngx-material-timepicker>\n    </div>\n    <div *ngIf=\"isInvalid && (!inLine || !selectedTime)\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"dateType === 'DATE_AND_TIME'\">\n    <!-- Date and time picker -->\n    <div class=\"input-container\">\n      <input\n        #dateAndTimePicker=\"bsDatepicker\"\n        type=\"text\"\n        class=\"form-control height\"\n        [minDate]=\"minDate ? minDate : undefined\"\n        [maxDate]=\"maxDate ? maxDate : undefined\"\n        [bsConfig]=\"{\n          dateInputFormat: format,\n          containerClass: 'theme-custom'\n        }\"\n        placeholder=\"Select date\"\n        container=\"body\"\n        placement=\"top\"\n        bsDatepicker\n        [class.invalid]=\"validationFailed\"\n        [(ngModel)]=\"selectedDateAndTime\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid-question]=\"isInvalid\"\n        [disabled]=\"disableEdit\"\n      />\n      <i\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n        (click)=\"openDateAndTimePicker()\"\n      ></i>\n    </div>\n    <div\n      class=\"input-container\"\n      *ngIf=\"selectedDateAndTime && selectedDateAndTime != null\"\n    >\n      <input\n        class=\"form-control height appearanceInput mt-3\"\n        aria-label=\"Select time\"\n        placeholder=\"Select time\"\n        readonly\n        [format]=\"timeFormat === '24' ? 24 : 12\"\n        [ngxTimepicker]=\"fullTime4\"\n        [(ngModel)]=\"selectedTime\"\n        [max]=\"maxTime\"\n        [min]=\"minTime\"\n        (ngModelChange)=\"validateField()\"\n        (focus)=\"closeDatepicker()\"\n        [class.invalid]=\"timeValidationFailed\"\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedTime)\"\n        container=\"body\"\n        placement=\"top\"\n        [disabled]=\"disableEdit\"\n      />\n\n      <i\n        id=\"startDateIcon\"\n        class=\"fa-solid fa-clock text-primary fs-6 clock-icon\"\n        (click)=\"fullTime4.open()\"\n        style=\"cursor: pointer\"\n      ></i>\n      <ngx-material-timepicker #fullTime4></ngx-material-timepicker>\n    </div>\n    <!-- <div *ngIf=\"isInvalid\" class=\"error-message\"> -->\n    <div *ngIf=\"isInvalid && (!inLine || !selectedTime)\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n    <div\n      *ngIf=\"(validationFailed || timeValidationFailed)  && !isInvalid\"\n      class=\"text-danger mt-2\"\n    >\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"dateType === 'DATE_RANGE'\">\n    <!-- Date range picker -->\n    <div class=\"input-container\">\n      <input\n        type=\"text\"\n        class=\"form-control height\"\n        #daterangepicker=\"bsDaterangepicker\"\n        bsDaterangepicker\n        placeholder=\"Select date\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [bsConfig]=\"{\n          rangeInputFormat: format,\n          dateInputFormat: format,\n          containerClass: 'theme-custom',\n          displayOneMonthRange: true\n        }\"\n        [(ngModel)]=\"selectedDateRange\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\n        [class.invalid-question]=\"isInvalid && (!inLine || !selectedDateRange)\"\n        container=\"body\"\n        placement=\"top\"\n        [disabled]=\"disableEdit\"\n      />\n      <i\n        class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n        (click)=\"openDateRangePicker()\"\n      ></i>\n    </div>\n    <div *ngIf=\"isInvalid && (!inLine || !selectedDateRange)\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n    <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mt-2\">\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon,.clock-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.appearanceInput{background-color:#fff}::ng-deep ngx-material-timepicker-content{--body-background-color: #fff;--button-color: #08bff6 !important;--dial-active-color: #fff;--dial-inactive-color: rgba(255, 255, 255, .5);--dial-background-color: #08bff6 !important;--dial-editable-active-color: #08bff6!important;--dial-editable-background-color: #fff;--clock-face-time-active-color: #fff;--clock-face-time-inactive-color: #6c6c6c;--clock-face-inner-time-inactive-color: #929292;--clock-face-time-disabled-color: #c5c5c5;--clock-face-background-color: #f0f0f0;--clock-hand-color: #08bff6 !important;position:relative;z-index:99999999}::ng-deep ngx-material-timepicker-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:99998}.theme-custom .bs-datepicker-head,.timepicker__header{background-color:#08bff6!important}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{color:#fff!important;background-color:#08bff6!important;border-radius:50%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DatePipe }, { type: i2.Router }, { type: ValidationService }, { type: ElementTrackerService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -2900,13 +3061,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class DropDownFieldsComponent {
-    constructor(formService, cdr, validationService, tracker, scoreCalcService, whenClauseService) {
+    constructor(formService, cdr, validationService, tracker, scoreCalcService, whenClauseService, hiddenFieldService) {
         this.formService = formService;
         this.cdr = cdr;
         this.validationService = validationService;
         this.tracker = tracker;
         this.scoreCalcService = scoreCalcService;
         this.whenClauseService = whenClauseService;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -3224,6 +3386,7 @@ class DropDownFieldsComponent {
         const answers = Array.isArray(this.question.answer) ? this.question.answer : [];
         const parsedAnswers = answers.map((ans) => ans.split('|')[1]);
         this.whenClauseService.setQuestionAnswer(this.question.id, parsedAnswers);
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     updateChildLogics(question) {
         if (question.childLogics && Array.isArray(question.childLogics)) {
@@ -3455,13 +3618,13 @@ class DropDownFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownFieldsComponent, deps: [{ token: FormService }, { token: i0.ChangeDetectorRef }, { token: ValidationService }, { token: ElementTrackerService }, { token: ScoreCalculationService }, { token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <!-- <lib-dropdown\r\n    [items]=\"customOptions\"\r\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\r\n    (click)=\"selectItems()\"\r\n    [(selectedItems)]=\"selectedValue\"\r\n  ></lib-dropdown> -->\r\n\r\n  <lib-dropdown\r\n    [placeholder]=\"'select'\"\r\n    [items]=\"customOptions\"\r\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\r\n    [disable]=\"disableEdit\"\r\n    (selectedItemsChange)=\"selectItems($event)\"\r\n    [(selectedItems)]=\"selectedValue\"\r\n    (onDropdownScroll)=\"getNextSetOfItems($event)\"\r\n    (onSearch)=\"search($event)\"\r\n  ></lib-dropdown>\r\n\r\n  <!-- (onDropdownScroll)=\"getNextSetOfItems($event)\"\r\n  (onSearch)=\"search($event)\" -->\r\n  <div\r\n    *ngIf=\"isInvalid && (!inLine || selectedValue.length === 0)\"\r\n    class=\"error-message\"\r\n  >\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mb-2\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "selectedItems", "placeholder", "showCreateNew", "selectedValues", "customButtons", "showBorder", "disable", "showSubLabel", "items"], outputs: ["buttonClick", "selectedItemsChange", "onDropdownScroll", "onCreateNew", "onSearch"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownFieldsComponent, deps: [{ token: FormService }, { token: i0.ChangeDetectorRef }, { token: ValidationService }, { token: ElementTrackerService }, { token: ScoreCalculationService }, { token: WhenClauseService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <!-- <lib-dropdown\n    [items]=\"customOptions\"\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\n    (click)=\"selectItems()\"\n    [(selectedItems)]=\"selectedValue\"\n  ></lib-dropdown> -->\n\n  <lib-dropdown\n    [placeholder]=\"'select'\"\n    [items]=\"customOptions\"\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\n    [disable]=\"disableEdit\"\n    (selectedItemsChange)=\"selectItems($event)\"\n    [(selectedItems)]=\"selectedValue\"\n    (onDropdownScroll)=\"getNextSetOfItems($event)\"\n    (onSearch)=\"search($event)\"\n  ></lib-dropdown>\n\n  <!-- (onDropdownScroll)=\"getNextSetOfItems($event)\"\n  (onSearch)=\"search($event)\" -->\n  <div\n    *ngIf=\"isInvalid && (!inLine || selectedValue.length === 0)\"\n    class=\"error-message\"\n  >\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mb-2\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$1.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "selectedItems", "placeholder", "showCreateNew", "selectedValues", "customButtons", "showBorder", "disable", "showSubLabel", "items"], outputs: ["buttonClick", "selectedItemsChange", "onDropdownScroll", "onCreateNew", "onSearch"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-drop-down-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <!-- <lib-dropdown\r\n    [items]=\"customOptions\"\r\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\r\n    (click)=\"selectItems()\"\r\n    [(selectedItems)]=\"selectedValue\"\r\n  ></lib-dropdown> -->\r\n\r\n  <lib-dropdown\r\n    [placeholder]=\"'select'\"\r\n    [items]=\"customOptions\"\r\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\r\n    [disable]=\"disableEdit\"\r\n    (selectedItemsChange)=\"selectItems($event)\"\r\n    [(selectedItems)]=\"selectedValue\"\r\n    (onDropdownScroll)=\"getNextSetOfItems($event)\"\r\n    (onSearch)=\"search($event)\"\r\n  ></lib-dropdown>\r\n\r\n  <!-- (onDropdownScroll)=\"getNextSetOfItems($event)\"\r\n  (onSearch)=\"search($event)\" -->\r\n  <div\r\n    *ngIf=\"isInvalid && (!inLine || selectedValue.length === 0)\"\r\n    class=\"error-message\"\r\n  >\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mb-2\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: FormService }, { type: i0.ChangeDetectorRef }, { type: ValidationService }, { type: ElementTrackerService }, { type: ScoreCalculationService }, { type: WhenClauseService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-drop-down-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <!-- <lib-dropdown\n    [items]=\"customOptions\"\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\n    (click)=\"selectItems()\"\n    [(selectedItems)]=\"selectedValue\"\n  ></lib-dropdown> -->\n\n  <lib-dropdown\n    [placeholder]=\"'select'\"\n    [items]=\"customOptions\"\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\n    [disable]=\"disableEdit\"\n    (selectedItemsChange)=\"selectItems($event)\"\n    [(selectedItems)]=\"selectedValue\"\n    (onDropdownScroll)=\"getNextSetOfItems($event)\"\n    (onSearch)=\"search($event)\"\n  ></lib-dropdown>\n\n  <!-- (onDropdownScroll)=\"getNextSetOfItems($event)\"\n  (onSearch)=\"search($event)\" -->\n  <div\n    *ngIf=\"isInvalid && (!inLine || selectedValue.length === 0)\"\n    class=\"error-message\"\n  >\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mb-2\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: FormService }, { type: i0.ChangeDetectorRef }, { type: ValidationService }, { type: ElementTrackerService }, { type: ScoreCalculationService }, { type: WhenClauseService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -3476,12 +3639,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class FilePickerFieldsComponent {
-    constructor(validationService, tracker, dataService, whenClauseService, http) {
+    constructor(validationService, tracker, dataService, whenClauseService, http, hiddenFieldService) {
         this.validationService = validationService;
         this.tracker = tracker;
         this.dataService = dataService;
         this.whenClauseService = whenClauseService;
         this.http = http;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -3598,6 +3762,7 @@ class FilePickerFieldsComponent {
         this.selectedFiles.push(this.selectedFile);
         this.question.answer = this.selectedFiles;
         this.answerChange.emit({ answer: this.question.answer, maxPossibleScore: 0 });
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     handleFinalArray(fileType) {
         const extractedData = fileType.map((item) => ({
@@ -3667,13 +3832,13 @@ class FilePickerFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilePickerFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: DataService }, { token: WhenClauseService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange", inlineDeleteFiles: "inlineDeleteFiles" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div\r\n  [ngClass]=\"{'field-disabled':disableEdit}\"\r\n  >\r\n    <lib-docUpload\r\n    [totalSize]=\"totalFileSize\"\r\n    [fileAllowed]=\"fileTypes\"\r\n    [multiple]=\"multiFileUploads\"\r\n    [fileSize]=\"fileSize\"\r\n    [files]=\"files\"\r\n    [avatarPicker]=\"avatarPicker\"\r\n    (fileTypeNotAllowed)=\"handleFileTypeNotAllowed($event)\"\r\n    (fileSizeAllowed)=\"handleFileSize($event)\"\r\n    (finalArray)=\"handleFinalArray($event)\"\r\n    [attachments]=\"attachments\"\r\n    (deleteFiles)=\"deleteFiles($event)\"\r\n  ></lib-docUpload>\r\n  </div>\r\n\r\n  <div *ngIf=\"isInvalid && (!inLine || (!question.answer||!attachments))\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.fileInput{position:relative;height:44px;width:111px;background:#d3d3d3;border-radius:6px;padding:0 16px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fileInput input{opacity:0;position:absolute;left:0;top:0;width:100%;height:inherit}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.field-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$2.DocUploadComponent, selector: "lib-docUpload", inputs: ["totalSize", "fileAllowed", "multiple", "avatarPicker", "attachments", "files", "fileSize"], outputs: ["fileTypeNotAllowed", "fileSizeAllowed", "finalArray", "deleteFiles"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilePickerFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: DataService }, { token: WhenClauseService }, { token: i1.HttpClient }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange", inlineDeleteFiles: "inlineDeleteFiles" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div\n  [ngClass]=\"{'field-disabled':disableEdit}\"\n  >\n    <lib-docUpload\n    [totalSize]=\"totalFileSize\"\n    [fileAllowed]=\"fileTypes\"\n    [multiple]=\"multiFileUploads\"\n    [fileSize]=\"fileSize\"\n    [files]=\"files\"\n    [avatarPicker]=\"avatarPicker\"\n    (fileTypeNotAllowed)=\"handleFileTypeNotAllowed($event)\"\n    (fileSizeAllowed)=\"handleFileSize($event)\"\n    (finalArray)=\"handleFinalArray($event)\"\n    [attachments]=\"attachments\"\n    (deleteFiles)=\"deleteFiles($event)\"\n  ></lib-docUpload>\n  </div>\n\n  <div *ngIf=\"isInvalid && (!inLine || (!question.answer||!attachments))\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.fileInput{position:relative;height:44px;width:111px;background:#d3d3d3;border-radius:6px;padding:0 16px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fileInput input{opacity:0;position:absolute;left:0;top:0;width:100%;height:inherit}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.field-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$2.DocUploadComponent, selector: "lib-docUpload", inputs: ["totalSize", "fileAllowed", "multiple", "avatarPicker", "attachments", "files", "fileSize"], outputs: ["fileTypeNotAllowed", "fileSizeAllowed", "finalArray", "deleteFiles"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilePickerFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-file-picker-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div\r\n  [ngClass]=\"{'field-disabled':disableEdit}\"\r\n  >\r\n    <lib-docUpload\r\n    [totalSize]=\"totalFileSize\"\r\n    [fileAllowed]=\"fileTypes\"\r\n    [multiple]=\"multiFileUploads\"\r\n    [fileSize]=\"fileSize\"\r\n    [files]=\"files\"\r\n    [avatarPicker]=\"avatarPicker\"\r\n    (fileTypeNotAllowed)=\"handleFileTypeNotAllowed($event)\"\r\n    (fileSizeAllowed)=\"handleFileSize($event)\"\r\n    (finalArray)=\"handleFinalArray($event)\"\r\n    [attachments]=\"attachments\"\r\n    (deleteFiles)=\"deleteFiles($event)\"\r\n  ></lib-docUpload>\r\n  </div>\r\n\r\n  <div *ngIf=\"isInvalid && (!inLine || (!question.answer||!attachments))\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.fileInput{position:relative;height:44px;width:111px;background:#d3d3d3;border-radius:6px;padding:0 16px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fileInput input{opacity:0;position:absolute;left:0;top:0;width:100%;height:inherit}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.field-disabled{pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: DataService }, { type: WhenClauseService }, { type: i1.HttpClient }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-file-picker-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div\n  [ngClass]=\"{'field-disabled':disableEdit}\"\n  >\n    <lib-docUpload\n    [totalSize]=\"totalFileSize\"\n    [fileAllowed]=\"fileTypes\"\n    [multiple]=\"multiFileUploads\"\n    [fileSize]=\"fileSize\"\n    [files]=\"files\"\n    [avatarPicker]=\"avatarPicker\"\n    (fileTypeNotAllowed)=\"handleFileTypeNotAllowed($event)\"\n    (fileSizeAllowed)=\"handleFileSize($event)\"\n    (finalArray)=\"handleFinalArray($event)\"\n    [attachments]=\"attachments\"\n    (deleteFiles)=\"deleteFiles($event)\"\n  ></lib-docUpload>\n  </div>\n\n  <div *ngIf=\"isInvalid && (!inLine || (!question.answer||!attachments))\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.fileInput{position:relative;height:44px;width:111px;background:#d3d3d3;border-radius:6px;padding:0 16px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fileInput input{opacity:0;position:absolute;left:0;top:0;width:100%;height:inherit}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.field-disabled{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: DataService }, { type: WhenClauseService }, { type: i1.HttpClient }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -3750,11 +3915,11 @@ class LocationFieldsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocationFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: { question: "question", inLine: "inLine" }, outputs: { answerChange: "answerChange" }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["mapSearchField"], descendants: true }, { propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\r\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"input-group\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"form-control location-input\"\r\n      placeholder=\"Enter location\"\r\n      #locationInput\r\n    />\r\n  </div>\r\n\r\n  <input #mapSearchField class=\"my-map-search-field\" type=\"text\" />\r\n  <google-map width=\"100%\" [options]=\"mapConfigurations\"></google-map>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: { question: "question", inLine: "inLine" }, outputs: { answerChange: "answerChange" }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["mapSearchField"], descendants: true }, { propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"input-group\">\n    <input\n      type=\"text\"\n      class=\"form-control location-input\"\n      placeholder=\"Enter location\"\n      #locationInput\n    />\n  </div>\n\n  <input #mapSearchField class=\"my-map-search-field\" type=\"text\" />\n  <google-map width=\"100%\" [options]=\"mapConfigurations\"></google-map>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocationFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-location-fields', template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\r\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"input-group\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"form-control location-input\"\r\n      placeholder=\"Enter location\"\r\n      #locationInput\r\n    />\r\n  </div>\r\n\r\n  <input #mapSearchField class=\"my-map-search-field\" type=\"text\" />\r\n  <google-map width=\"100%\" [options]=\"mapConfigurations\"></google-map>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+            args: [{ selector: 'lib-location-fields', template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"input-group\">\n    <input\n      type=\"text\"\n      class=\"form-control location-input\"\n      placeholder=\"Enter location\"\n      #locationInput\n    />\n  </div>\n\n  <input #mapSearchField class=\"my-map-search-field\" type=\"text\" />\n  <google-map width=\"100%\" [options]=\"mapConfigurations\"></google-map>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }], inLine: [{
@@ -3770,9 +3935,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class MailFieldsComponent {
-    constructor(validationService, tracker) {
+    constructor(validationService, tracker, hiddenFieldService) {
         this.validationService = validationService;
         this.tracker = tracker;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -3840,6 +4006,7 @@ class MailFieldsComponent {
         this.question.answer = event.target.value;
         this.answerChange.emit({ answer: this.question.answer, maxPossibleScore: 0 });
         this.validateEmail();
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     handleValidation(isValid, message = 'This field is required') {
         if (isValid) {
@@ -3874,13 +4041,13 @@ class MailFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MailFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <input\r\n    type=\"email\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"email\"\r\n    (blur)=\"validateEmail()\"\r\n    (input)=\"validateInput($event)\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !email)\"\r\n    [disabled]=\"disableEdit\"\r\n  />\r\n  <!-- <div *ngIf=\"isInvalid\" class=\"error-message\"> -->\r\n  <div *ngIf=\"isInvalid && (!inLine || !email)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MailFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <input\n    type=\"email\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [(ngModel)]=\"email\"\n    (blur)=\"validateEmail()\"\n    (input)=\"validateInput($event)\"\n    [class.invalid]=\"validationFailed\"\n    [class.invalid-question]=\"isInvalid && (!inLine || !email)\"\n    [disabled]=\"disableEdit\"\n  />\n  <!-- <div *ngIf=\"isInvalid\" class=\"error-message\"> -->\n  <div *ngIf=\"isInvalid && (!inLine || !email)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MailFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-mail-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <input\r\n    type=\"email\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"email\"\r\n    (blur)=\"validateEmail()\"\r\n    (input)=\"validateInput($event)\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !email)\"\r\n    [disabled]=\"disableEdit\"\r\n  />\r\n  <!-- <div *ngIf=\"isInvalid\" class=\"error-message\"> -->\r\n  <div *ngIf=\"isInvalid && (!inLine || !email)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-mail-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <input\n    type=\"email\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [(ngModel)]=\"email\"\n    (blur)=\"validateEmail()\"\n    (input)=\"validateInput($event)\"\n    [class.invalid]=\"validationFailed\"\n    [class.invalid-question]=\"isInvalid && (!inLine || !email)\"\n    [disabled]=\"disableEdit\"\n  />\n  <!-- <div *ngIf=\"isInvalid\" class=\"error-message\"> -->\n  <div *ngIf=\"isInvalid && (!inLine || !email)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -3980,10 +4147,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: DataService }]; } });
 
 class MobileFieldsComponent {
-    constructor(countryService, validationService, tracker) {
+    constructor(countryService, validationService, tracker, hiddenFieldService) {
         this.countryService = countryService;
         this.validationService = validationService;
         this.tracker = tracker;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -4111,6 +4279,7 @@ class MobileFieldsComponent {
             this.question.answer = this.mobileNumber;
         }
         this.answerChange.emit({ answer: this.question.answer, maxPossibleScore: 0 });
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     validateMobile() {
         this.validationFailed = false;
@@ -4221,13 +4390,13 @@ class MobileFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileFieldsComponent, deps: [{ token: CountryService }, { token: ValidationService }, { token: ElementTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"input-group mb-2\">\r\n    <ng-container *ngIf=\"displayCountryCode; else fullWidthInput\">\r\n      <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2 ps-2\"\r\n      [ngClass]=\"{'disable':disableEdit}\">\r\n        <lib-dropdown\r\n          [items]=\"countryDetails\"\r\n          [multiple]=\"false\"\r\n          [(selectedItems)]=\"selectedCountry\"\r\n          (selectedItemsChange)=\"onCountryChange()\"\r\n          [disable]=\"disableEdit\"\r\n          (onDropdownScroll)=\"getNextSetOfItems($event)\"\r\n          (onSearch)=\"search($event)\"\r\n        ></lib-dropdown>\r\n      </div>\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control col-xs-7 col-7 col-md-9 height mobileField\"\r\n        [placeholder]=\"placeholder\"\r\n        aria-label=\"Mobile Number\"\r\n        (blur)=\"validateMobile()\"\r\n        [(ngModel)]=\"mobileNumber\"\r\n        (ngModelChange)=\"onMobileNumberChange()\"\r\n        (input)=\"onInput($event)\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n    </ng-container>\r\n\r\n    <!-- Full-width input when displayCountryCode is false -->\r\n    <ng-template #fullWidthInput>\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control col-12 height mobileField\"\r\n        [placeholder]=\"placeholder\"\r\n        aria-label=\"Mobile Number\"\r\n        [class.invalid]=\"validationFailed\"\r\n        [class.invalid-question]=\"isInvalid\"\r\n        (blur)=\"validateMobile()\"\r\n        [(ngModel)]=\"mobileNumber\"\r\n        (ngModelChange)=\"onMobileNumberChange()\"\r\n        (input)=\"onInput($event)\"\r\n      />\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"isInvalid && (!inLine || !mobileNumber)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:80%!important}@media (max-width: 992px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:50%!important}}@media screen and (max-width: 786px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:50%!important}}@media screen and (max-width: 576px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:39%!important}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.disable{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "selectedItems", "placeholder", "showCreateNew", "selectedValues", "customButtons", "showBorder", "disable", "showSubLabel", "items"], outputs: ["buttonClick", "selectedItemsChange", "onDropdownScroll", "onCreateNew", "onSearch"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileFieldsComponent, deps: [{ token: CountryService }, { token: ValidationService }, { token: ElementTrackerService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"input-group mb-2\">\n    <ng-container *ngIf=\"displayCountryCode; else fullWidthInput\">\n      <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2 ps-2\"\n      [ngClass]=\"{'disable':disableEdit}\">\n        <lib-dropdown\n          [items]=\"countryDetails\"\n          [multiple]=\"false\"\n          [(selectedItems)]=\"selectedCountry\"\n          (selectedItemsChange)=\"onCountryChange()\"\n          [disable]=\"disableEdit\"\n          (onDropdownScroll)=\"getNextSetOfItems($event)\"\n          (onSearch)=\"search($event)\"\n        ></lib-dropdown>\n      </div>\n      <input\n        type=\"text\"\n        class=\"form-control col-xs-7 col-7 col-md-9 height mobileField\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Mobile Number\"\n        (blur)=\"validateMobile()\"\n        [(ngModel)]=\"mobileNumber\"\n        (ngModelChange)=\"onMobileNumberChange()\"\n        (input)=\"onInput($event)\"\n        [disabled]=\"disableEdit\"\n      />\n    </ng-container>\n\n    <!-- Full-width input when displayCountryCode is false -->\n    <ng-template #fullWidthInput>\n      <input\n        type=\"text\"\n        class=\"form-control col-12 height mobileField\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Mobile Number\"\n        [class.invalid]=\"validationFailed\"\n        [class.invalid-question]=\"isInvalid\"\n        (blur)=\"validateMobile()\"\n        [(ngModel)]=\"mobileNumber\"\n        (ngModelChange)=\"onMobileNumberChange()\"\n        (input)=\"onInput($event)\"\n      />\n    </ng-template>\n  </div>\n  <div *ngIf=\"isInvalid && (!inLine || !mobileNumber)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:80%!important}@media (max-width: 992px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:50%!important}}@media screen and (max-width: 786px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:50%!important}}@media screen and (max-width: 576px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:39%!important}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.disable{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "selectedItems", "placeholder", "showCreateNew", "selectedValues", "customButtons", "showBorder", "disable", "showSubLabel", "items"], outputs: ["buttonClick", "selectedItemsChange", "onDropdownScroll", "onCreateNew", "onSearch"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-mobile-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"input-group mb-2\">\r\n    <ng-container *ngIf=\"displayCountryCode; else fullWidthInput\">\r\n      <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2 ps-2\"\r\n      [ngClass]=\"{'disable':disableEdit}\">\r\n        <lib-dropdown\r\n          [items]=\"countryDetails\"\r\n          [multiple]=\"false\"\r\n          [(selectedItems)]=\"selectedCountry\"\r\n          (selectedItemsChange)=\"onCountryChange()\"\r\n          [disable]=\"disableEdit\"\r\n          (onDropdownScroll)=\"getNextSetOfItems($event)\"\r\n          (onSearch)=\"search($event)\"\r\n        ></lib-dropdown>\r\n      </div>\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control col-xs-7 col-7 col-md-9 height mobileField\"\r\n        [placeholder]=\"placeholder\"\r\n        aria-label=\"Mobile Number\"\r\n        (blur)=\"validateMobile()\"\r\n        [(ngModel)]=\"mobileNumber\"\r\n        (ngModelChange)=\"onMobileNumberChange()\"\r\n        (input)=\"onInput($event)\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n    </ng-container>\r\n\r\n    <!-- Full-width input when displayCountryCode is false -->\r\n    <ng-template #fullWidthInput>\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control col-12 height mobileField\"\r\n        [placeholder]=\"placeholder\"\r\n        aria-label=\"Mobile Number\"\r\n        [class.invalid]=\"validationFailed\"\r\n        [class.invalid-question]=\"isInvalid\"\r\n        (blur)=\"validateMobile()\"\r\n        [(ngModel)]=\"mobileNumber\"\r\n        (ngModelChange)=\"onMobileNumberChange()\"\r\n        (input)=\"onInput($event)\"\r\n      />\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"isInvalid && (!inLine || !mobileNumber)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:80%!important}@media (max-width: 992px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:50%!important}}@media screen and (max-width: 786px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:50%!important}}@media screen and (max-width: 576px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:39%!important}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.disable{pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: CountryService }, { type: ValidationService }, { type: ElementTrackerService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-mobile-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"input-group mb-2\">\n    <ng-container *ngIf=\"displayCountryCode; else fullWidthInput\">\n      <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2 ps-2\"\n      [ngClass]=\"{'disable':disableEdit}\">\n        <lib-dropdown\n          [items]=\"countryDetails\"\n          [multiple]=\"false\"\n          [(selectedItems)]=\"selectedCountry\"\n          (selectedItemsChange)=\"onCountryChange()\"\n          [disable]=\"disableEdit\"\n          (onDropdownScroll)=\"getNextSetOfItems($event)\"\n          (onSearch)=\"search($event)\"\n        ></lib-dropdown>\n      </div>\n      <input\n        type=\"text\"\n        class=\"form-control col-xs-7 col-7 col-md-9 height mobileField\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Mobile Number\"\n        (blur)=\"validateMobile()\"\n        [(ngModel)]=\"mobileNumber\"\n        (ngModelChange)=\"onMobileNumberChange()\"\n        (input)=\"onInput($event)\"\n        [disabled]=\"disableEdit\"\n      />\n    </ng-container>\n\n    <!-- Full-width input when displayCountryCode is false -->\n    <ng-template #fullWidthInput>\n      <input\n        type=\"text\"\n        class=\"form-control col-12 height mobileField\"\n        [placeholder]=\"placeholder\"\n        aria-label=\"Mobile Number\"\n        [class.invalid]=\"validationFailed\"\n        [class.invalid-question]=\"isInvalid\"\n        (blur)=\"validateMobile()\"\n        [(ngModel)]=\"mobileNumber\"\n        (ngModelChange)=\"onMobileNumberChange()\"\n        (input)=\"onInput($event)\"\n      />\n    </ng-template>\n  </div>\n  <div *ngIf=\"isInvalid && (!inLine || !mobileNumber)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:80%!important}@media (max-width: 992px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:50%!important}}@media screen and (max-width: 786px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:50%!important}}@media screen and (max-width: 576px){::ng-deep .dropdown .dropdown-field .input-field .dropdown_text{height:40px!important;width:39%!important}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.disable{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: CountryService }, { type: ValidationService }, { type: ElementTrackerService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -4378,11 +4547,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return []; } });
 
 class NumberFieldsComponent {
-    constructor(validationService, tracker, aggregateService, whenClauseService) {
+    constructor(validationService, tracker, aggregateService, whenClauseService, hiddenFieldService) {
         this.validationService = validationService;
         this.tracker = tracker;
         this.aggregateService = aggregateService;
         this.whenClauseService = whenClauseService;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -4496,6 +4666,7 @@ class NumberFieldsComponent {
         }
         this.answerChange.emit({ answer: this.question.answer, maxPossibleScore: 0 });
         this.whenClauseService.setQuestionAnswer(this.question.id, this.question.answer);
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     updateChildLogics(question) {
         if (question.childLogics && Array.isArray(question.childLogics)) {
@@ -4589,13 +4760,13 @@ class NumberFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: AggregationFunctionService }, { token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", rowId: "rowId", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <input\r\n    type=\"number\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [class.hide-spin-buttons]=\"!upDown\"\r\n    (blur)=\"validateNumber()\"\r\n    [(ngModel)]=\"enteredNumber\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredNumber)\"\r\n    (input)=\"validateInput($event)\"\r\n    [attr.min]=\"min\"\r\n    [attr.max]=\"max\"\r\n    (wheel)=\"preventNumberScroll($event)\"\r\n    [disabled]=\"disableEdit\"\r\n  />\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredNumber)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: AggregationFunctionService }, { token: WhenClauseService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", rowId: "rowId", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\n    <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <input\n    type=\"number\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [class.hide-spin-buttons]=\"!upDown\"\n    (blur)=\"validateNumber()\"\n    [(ngModel)]=\"enteredNumber\"\n    [class.invalid]=\"validationFailed\"\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredNumber)\"\n    (input)=\"validateInput($event)\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    (wheel)=\"preventNumberScroll($event)\"\n    [disabled]=\"disableEdit\"\n  />\n  <div *ngIf=\"isInvalid && (!inLine || !enteredNumber)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-number-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <input\r\n    type=\"number\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [class.hide-spin-buttons]=\"!upDown\"\r\n    (blur)=\"validateNumber()\"\r\n    [(ngModel)]=\"enteredNumber\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredNumber)\"\r\n    (input)=\"validateInput($event)\"\r\n    [attr.min]=\"min\"\r\n    [attr.max]=\"max\"\r\n    (wheel)=\"preventNumberScroll($event)\"\r\n    [disabled]=\"disableEdit\"\r\n  />\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredNumber)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: AggregationFunctionService }, { type: WhenClauseService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-number-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\n    <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <input\n    type=\"number\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [class.hide-spin-buttons]=\"!upDown\"\n    (blur)=\"validateNumber()\"\n    [(ngModel)]=\"enteredNumber\"\n    [class.invalid]=\"validationFailed\"\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredNumber)\"\n    (input)=\"validateInput($event)\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    (wheel)=\"preventNumberScroll($event)\"\n    [disabled]=\"disableEdit\"\n  />\n  <div *ngIf=\"isInvalid && (!inLine || !enteredNumber)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: AggregationFunctionService }, { type: WhenClauseService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -4612,9 +4783,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class PasswordFieldsComponent {
-    constructor(validationService, tracker) {
+    constructor(validationService, tracker, hiddenFieldService) {
         this.validationService = validationService;
         this.tracker = tracker;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -4795,6 +4967,7 @@ class PasswordFieldsComponent {
         this.question.answer = sanitizedValue;
         this.validatePassword();
         this.answerChange.emit({ answer: this.question.answer, maxPossibleScore: 0 });
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     validateCnfrm(event) {
         const sanitizedValue = event.target.value.replace(/\s+/g, '');
@@ -4842,13 +5015,13 @@ class PasswordFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PasswordFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n    <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n      <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n      <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\r\n      <label [for]=\"'passwordField' + questionId\">{{ question.question }}</label\r\n      >&nbsp;\r\n      <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n      <div\r\n        class=\"svg-wrapper mb-2 hintIcon\"\r\n        [attr.data-title]=\"hint\"\r\n        *ngIf=\"hint\"\r\n      >\r\n        <svg\r\n          class=\"hintSvg\"\r\n          viewBox=\"0 0 30 30\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            fill-rule=\"evenodd\"\r\n            clip-rule=\"evenodd\"\r\n            d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n            stroke=\"#323232\"\r\n            stroke-width=\"1.5\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n            stroke=\"#323232\"\r\n            stroke-width=\"1.5\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n            stroke=\"#323232\"\r\n            stroke-width=\"1.5\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"passwordWrapper\">\r\n      <input\r\n      type=\"password\"\r\n      class=\"form-control mb-2 height\"\r\n      [id]=\"'passwordField' + questionId\"\r\n      (blur)=\"validatePassword()\"\r\n      [(ngModel)]=\"enteredPassword\"\r\n      [class.invalid]=\"validationFailed\"\r\n      [class.invalid-question]=\"isInvalid && (!inLine || !enteredPassword)\"\r\n      (input)=\"validateInput($event)\"\r\n      [disabled]=\"disableEdit\"\r\n    />\r\n    <button\r\n      id=\"togglePasswordBtn\"\r\n      class=\"toggle-password-btn\"\r\n      (click)=\"togglePasswordVisibility()\"\r\n      *ngIf=\"viewButton\"\r\n    >\r\n      <i class=\"bi bi-eye-fill\" [id]=\"'passwordEyeIcon' + questionId\"></i>\r\n    </button>\r\n    </div>\r\n  <div class=\"password-strength-meter\" *ngIf=\"displayStrength\">\r\n    <div class=\"progress\">\r\n      <div\r\n        class=\"progress-bar\"\r\n        role=\"progressbar\"\r\n        [style.width]=\"passwordStrength + '%'\"\r\n        [class.bg-danger]=\"passwordStrength < 30\"\r\n        [class.bg-warning]=\"passwordStrength >= 30 && passwordStrength < 70\"\r\n        [class.bg-success]=\"passwordStrength >= 70\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredPassword)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mb-2\">\r\n    {{ validationMessage }}\r\n  </div>\r\n\r\n  <div class=\"cnfrmPasswordWrapper\" *ngIf=\"confirmPassword\">\r\n    <label for=\"'cnfrmPasswordField'+questionId\">Confirm password</label>\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control mb-2 height\"\r\n      [id]=\"'cnfrmPasswordField' + questionId\"\r\n      (blur)=\"checkPasswordMatch()\"\r\n      [(ngModel)]=\"enteredCnfrmPassword\"\r\n      [class.invalid]=\"validatedCnfrmPassword\"\r\n      (input)=\"validateCnfrm($event)\"\r\n      [disabled]=\"disableEdit\"\r\n    />\r\n    <button\r\n      id=\"toggleCnfrmPasswordBtn\"\r\n      class=\"toggle-password-btn\"\r\n      (click)=\"toggleCnfrmPasswordVisibility()\"\r\n      *ngIf=\"viewButton\"\r\n    >\r\n      <i class=\"bi bi-eye-fill\" [id]=\"'CnfrmPasswordEyeIcon' + questionId\"></i>\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"validatedCnfrmPassword\" class=\"text-danger error-message\">\r\n    {{ cnfrmValidationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-control,.password-input-wrapper{position:relative}.password-input{padding-right:40px}.toggle-password-btn{position:absolute;top:70%;right:15px;transform:translateY(-50%);border:none;background-color:transparent;cursor:pointer}.toggle-password-btn:focus{outline:none}.passwordWrapper,.cnfrmPasswordWrapper{position:relative}.password-strength-meter{width:40%;margin-top:10px;margin-left:auto}.progress{height:10px}.progress-bar{transition:width .3s ease-in-out}.bi{font-size:20px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PasswordFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n    <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n      <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n      <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\n      <label [for]=\"'passwordField' + questionId\">{{ question.question }}</label\n      >&nbsp;\n      <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n      <div\n        class=\"svg-wrapper mb-2 hintIcon\"\n        [attr.data-title]=\"hint\"\n        *ngIf=\"hint\"\n      >\n        <svg\n          class=\"hintSvg\"\n          viewBox=\"0 0 30 30\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n            stroke=\"#323232\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n            stroke=\"#323232\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n            stroke=\"#323232\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </div>\n    </div>\n    <div class=\"passwordWrapper\">\n      <input\n      type=\"password\"\n      class=\"form-control mb-2 height\"\n      [id]=\"'passwordField' + questionId\"\n      (blur)=\"validatePassword()\"\n      [(ngModel)]=\"enteredPassword\"\n      [class.invalid]=\"validationFailed\"\n      [class.invalid-question]=\"isInvalid && (!inLine || !enteredPassword)\"\n      (input)=\"validateInput($event)\"\n      [disabled]=\"disableEdit\"\n    />\n    <button\n      id=\"togglePasswordBtn\"\n      class=\"toggle-password-btn\"\n      (click)=\"togglePasswordVisibility()\"\n      *ngIf=\"viewButton\"\n    >\n      <i class=\"bi bi-eye-fill\" [id]=\"'passwordEyeIcon' + questionId\"></i>\n    </button>\n    </div>\n  <div class=\"password-strength-meter\" *ngIf=\"displayStrength\">\n    <div class=\"progress\">\n      <div\n        class=\"progress-bar\"\n        role=\"progressbar\"\n        [style.width]=\"passwordStrength + '%'\"\n        [class.bg-danger]=\"passwordStrength < 30\"\n        [class.bg-warning]=\"passwordStrength >= 30 && passwordStrength < 70\"\n        [class.bg-success]=\"passwordStrength >= 70\"\n      ></div>\n    </div>\n  </div>\n  <div *ngIf=\"isInvalid && (!inLine || !enteredPassword)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mb-2\">\n    {{ validationMessage }}\n  </div>\n\n  <div class=\"cnfrmPasswordWrapper\" *ngIf=\"confirmPassword\">\n    <label for=\"'cnfrmPasswordField'+questionId\">Confirm password</label>\n    <input\n      type=\"password\"\n      class=\"form-control mb-2 height\"\n      [id]=\"'cnfrmPasswordField' + questionId\"\n      (blur)=\"checkPasswordMatch()\"\n      [(ngModel)]=\"enteredCnfrmPassword\"\n      [class.invalid]=\"validatedCnfrmPassword\"\n      (input)=\"validateCnfrm($event)\"\n      [disabled]=\"disableEdit\"\n    />\n    <button\n      id=\"toggleCnfrmPasswordBtn\"\n      class=\"toggle-password-btn\"\n      (click)=\"toggleCnfrmPasswordVisibility()\"\n      *ngIf=\"viewButton\"\n    >\n      <i class=\"bi bi-eye-fill\" [id]=\"'CnfrmPasswordEyeIcon' + questionId\"></i>\n    </button>\n  </div>\n  <div *ngIf=\"validatedCnfrmPassword\" class=\"text-danger error-message\">\n    {{ cnfrmValidationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-control,.password-input-wrapper{position:relative}.password-input{padding-right:40px}.toggle-password-btn{position:absolute;top:70%;right:15px;transform:translateY(-50%);border:none;background-color:transparent;cursor:pointer}.toggle-password-btn:focus{outline:none}.passwordWrapper,.cnfrmPasswordWrapper{position:relative}.password-strength-meter{width:40%;margin-top:10px;margin-left:auto}.progress{height:10px}.progress-bar{transition:width .3s ease-in-out}.bi{font-size:20px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PasswordFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-password-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n    <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n      <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n      <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\r\n      <label [for]=\"'passwordField' + questionId\">{{ question.question }}</label\r\n      >&nbsp;\r\n      <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n      <div\r\n        class=\"svg-wrapper mb-2 hintIcon\"\r\n        [attr.data-title]=\"hint\"\r\n        *ngIf=\"hint\"\r\n      >\r\n        <svg\r\n          class=\"hintSvg\"\r\n          viewBox=\"0 0 30 30\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            fill-rule=\"evenodd\"\r\n            clip-rule=\"evenodd\"\r\n            d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n            stroke=\"#323232\"\r\n            stroke-width=\"1.5\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n            stroke=\"#323232\"\r\n            stroke-width=\"1.5\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n            stroke=\"#323232\"\r\n            stroke-width=\"1.5\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"passwordWrapper\">\r\n      <input\r\n      type=\"password\"\r\n      class=\"form-control mb-2 height\"\r\n      [id]=\"'passwordField' + questionId\"\r\n      (blur)=\"validatePassword()\"\r\n      [(ngModel)]=\"enteredPassword\"\r\n      [class.invalid]=\"validationFailed\"\r\n      [class.invalid-question]=\"isInvalid && (!inLine || !enteredPassword)\"\r\n      (input)=\"validateInput($event)\"\r\n      [disabled]=\"disableEdit\"\r\n    />\r\n    <button\r\n      id=\"togglePasswordBtn\"\r\n      class=\"toggle-password-btn\"\r\n      (click)=\"togglePasswordVisibility()\"\r\n      *ngIf=\"viewButton\"\r\n    >\r\n      <i class=\"bi bi-eye-fill\" [id]=\"'passwordEyeIcon' + questionId\"></i>\r\n    </button>\r\n    </div>\r\n  <div class=\"password-strength-meter\" *ngIf=\"displayStrength\">\r\n    <div class=\"progress\">\r\n      <div\r\n        class=\"progress-bar\"\r\n        role=\"progressbar\"\r\n        [style.width]=\"passwordStrength + '%'\"\r\n        [class.bg-danger]=\"passwordStrength < 30\"\r\n        [class.bg-warning]=\"passwordStrength >= 30 && passwordStrength < 70\"\r\n        [class.bg-success]=\"passwordStrength >= 70\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredPassword)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mb-2\">\r\n    {{ validationMessage }}\r\n  </div>\r\n\r\n  <div class=\"cnfrmPasswordWrapper\" *ngIf=\"confirmPassword\">\r\n    <label for=\"'cnfrmPasswordField'+questionId\">Confirm password</label>\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control mb-2 height\"\r\n      [id]=\"'cnfrmPasswordField' + questionId\"\r\n      (blur)=\"checkPasswordMatch()\"\r\n      [(ngModel)]=\"enteredCnfrmPassword\"\r\n      [class.invalid]=\"validatedCnfrmPassword\"\r\n      (input)=\"validateCnfrm($event)\"\r\n      [disabled]=\"disableEdit\"\r\n    />\r\n    <button\r\n      id=\"toggleCnfrmPasswordBtn\"\r\n      class=\"toggle-password-btn\"\r\n      (click)=\"toggleCnfrmPasswordVisibility()\"\r\n      *ngIf=\"viewButton\"\r\n    >\r\n      <i class=\"bi bi-eye-fill\" [id]=\"'CnfrmPasswordEyeIcon' + questionId\"></i>\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"validatedCnfrmPassword\" class=\"text-danger error-message\">\r\n    {{ cnfrmValidationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-control,.password-input-wrapper{position:relative}.password-input{padding-right:40px}.toggle-password-btn{position:absolute;top:70%;right:15px;transform:translateY(-50%);border:none;background-color:transparent;cursor:pointer}.toggle-password-btn:focus{outline:none}.passwordWrapper,.cnfrmPasswordWrapper{position:relative}.password-strength-meter{width:40%;margin-top:10px;margin-left:auto}.progress{height:10px}.progress-bar{transition:width .3s ease-in-out}.bi{font-size:20px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-password-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n    <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n      <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n      <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\n      <label [for]=\"'passwordField' + questionId\">{{ question.question }}</label\n      >&nbsp;\n      <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n      <div\n        class=\"svg-wrapper mb-2 hintIcon\"\n        [attr.data-title]=\"hint\"\n        *ngIf=\"hint\"\n      >\n        <svg\n          class=\"hintSvg\"\n          viewBox=\"0 0 30 30\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n            stroke=\"#323232\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n            stroke=\"#323232\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n            stroke=\"#323232\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </div>\n    </div>\n    <div class=\"passwordWrapper\">\n      <input\n      type=\"password\"\n      class=\"form-control mb-2 height\"\n      [id]=\"'passwordField' + questionId\"\n      (blur)=\"validatePassword()\"\n      [(ngModel)]=\"enteredPassword\"\n      [class.invalid]=\"validationFailed\"\n      [class.invalid-question]=\"isInvalid && (!inLine || !enteredPassword)\"\n      (input)=\"validateInput($event)\"\n      [disabled]=\"disableEdit\"\n    />\n    <button\n      id=\"togglePasswordBtn\"\n      class=\"toggle-password-btn\"\n      (click)=\"togglePasswordVisibility()\"\n      *ngIf=\"viewButton\"\n    >\n      <i class=\"bi bi-eye-fill\" [id]=\"'passwordEyeIcon' + questionId\"></i>\n    </button>\n    </div>\n  <div class=\"password-strength-meter\" *ngIf=\"displayStrength\">\n    <div class=\"progress\">\n      <div\n        class=\"progress-bar\"\n        role=\"progressbar\"\n        [style.width]=\"passwordStrength + '%'\"\n        [class.bg-danger]=\"passwordStrength < 30\"\n        [class.bg-warning]=\"passwordStrength >= 30 && passwordStrength < 70\"\n        [class.bg-success]=\"passwordStrength >= 70\"\n      ></div>\n    </div>\n  </div>\n  <div *ngIf=\"isInvalid && (!inLine || !enteredPassword)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger mb-2\">\n    {{ validationMessage }}\n  </div>\n\n  <div class=\"cnfrmPasswordWrapper\" *ngIf=\"confirmPassword\">\n    <label for=\"'cnfrmPasswordField'+questionId\">Confirm password</label>\n    <input\n      type=\"password\"\n      class=\"form-control mb-2 height\"\n      [id]=\"'cnfrmPasswordField' + questionId\"\n      (blur)=\"checkPasswordMatch()\"\n      [(ngModel)]=\"enteredCnfrmPassword\"\n      [class.invalid]=\"validatedCnfrmPassword\"\n      (input)=\"validateCnfrm($event)\"\n      [disabled]=\"disableEdit\"\n    />\n    <button\n      id=\"toggleCnfrmPasswordBtn\"\n      class=\"toggle-password-btn\"\n      (click)=\"toggleCnfrmPasswordVisibility()\"\n      *ngIf=\"viewButton\"\n    >\n      <i class=\"bi bi-eye-fill\" [id]=\"'CnfrmPasswordEyeIcon' + questionId\"></i>\n    </button>\n  </div>\n  <div *ngIf=\"validatedCnfrmPassword\" class=\"text-danger error-message\">\n    {{ cnfrmValidationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-control,.password-input-wrapper{position:relative}.password-input{padding-right:40px}.toggle-password-btn{position:absolute;top:70%;right:15px;transform:translateY(-50%);border:none;background-color:transparent;cursor:pointer}.toggle-password-btn:focus{outline:none}.passwordWrapper,.cnfrmPasswordWrapper{position:relative}.password-strength-meter{width:40%;margin-top:10px;margin-left:auto}.progress{height:10px}.progress-bar{transition:width .3s ease-in-out}.bi{font-size:20px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -4863,12 +5036,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class RadioButtonFieldsComponent {
-    constructor(formService, validationService, tracker, scoreCalcService, whenClauseService) {
+    constructor(formService, validationService, tracker, scoreCalcService, whenClauseService, hiddenFieldService) {
         this.formService = formService;
         this.validationService = validationService;
         this.tracker = tracker;
         this.scoreCalcService = scoreCalcService;
         this.whenClauseService = whenClauseService;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -5081,6 +5255,7 @@ class RadioButtonFieldsComponent {
         });
         const answers = this.question.answer.split('|')[1];
         this.whenClauseService.setQuestionAnswer(this.question.id, answers);
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     updateChildLogics(question) {
         if (question.childLogics && Array.isArray(question.childLogics)) {
@@ -5177,13 +5352,13 @@ class RadioButtonFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonFieldsComponent, deps: [{ token: FormService }, { token: ValidationService }, { token: ElementTrackerService }, { token: ScoreCalculationService }, { token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", rowId: "rowId", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-3\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"checkboxField-container\"\r\n    [class.two-column]=\"displayOptionsInColumn\"\r\n  >\r\n    <div class=\"checkboxField\" *ngFor=\"let option of customOptions\">\r\n      <input\r\n        class=\"formCheckbox mb-2\"\r\n        type=\"radio\"\r\n        [name]=\"question.id+'-'+rowId\"\r\n        [id]=\"question.id+'-'+rowId+'-'+option.value\"\r\n        [value]=\"option.label + '|' + option.value\"\r\n        [style.accent-color]=\"color\"\r\n        (blur)=\"validateInput()\"\r\n        [(ngModel)]=\"selectedOption\"\r\n        (ngModelChange)=\"validateInput()\"\r\n        [attr.data-state]=\"option.label + '|' + option.value\"\r\n        [attr.data-value]=\"selectedOption == option.label + '|' + option.value\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <label class=\"formCheckLabel ms-2 me-2 mb-2\" [for]=\"question.id+'-'+rowId+'-'+option.value\">{{\r\n        option.label\r\n      }}</label>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"isInvalid && (!inLine || !selectedOption)\"\r\n    class=\"error-message\"\r\n  >\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.formCheckbox,.formCheckLabel{cursor:pointer}.formCheckbox{width:15px;height:15px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.checkboxField-container{display:block}.checkboxField-container.two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonFieldsComponent, deps: [{ token: FormService }, { token: ValidationService }, { token: ElementTrackerService }, { token: ScoreCalculationService }, { token: WhenClauseService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", rowId: "rowId", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-3\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <div\n    class=\"checkboxField-container\"\n    [class.two-column]=\"displayOptionsInColumn\"\n  >\n    <div class=\"checkboxField\" *ngFor=\"let option of customOptions\">\n      <input\n        class=\"formCheckbox mb-2\"\n        type=\"radio\"\n        [name]=\"question.id+'-'+rowId\"\n        [id]=\"question.id+'-'+rowId+'-'+option.value\"\n        [value]=\"option.label + '|' + option.value\"\n        [style.accent-color]=\"color\"\n        (blur)=\"validateInput()\"\n        [(ngModel)]=\"selectedOption\"\n        (ngModelChange)=\"validateInput()\"\n        [attr.data-state]=\"option.label + '|' + option.value\"\n        [attr.data-value]=\"selectedOption == option.label + '|' + option.value\"\n        [disabled]=\"disableEdit\"\n      />\n      <label class=\"formCheckLabel ms-2 me-2 mb-2\" [for]=\"question.id+'-'+rowId+'-'+option.value\">{{\n        option.label\n      }}</label>\n    </div>\n  </div>\n  <div\n    *ngIf=\"isInvalid && (!inLine || !selectedOption)\"\n    class=\"error-message\"\n  >\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.formCheckbox,.formCheckLabel{cursor:pointer}.formCheckbox{width:15px;height:15px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.checkboxField-container{display:block}.checkboxField-container.two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-radio-button-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-3\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class=\"checkboxField-container\"\r\n    [class.two-column]=\"displayOptionsInColumn\"\r\n  >\r\n    <div class=\"checkboxField\" *ngFor=\"let option of customOptions\">\r\n      <input\r\n        class=\"formCheckbox mb-2\"\r\n        type=\"radio\"\r\n        [name]=\"question.id+'-'+rowId\"\r\n        [id]=\"question.id+'-'+rowId+'-'+option.value\"\r\n        [value]=\"option.label + '|' + option.value\"\r\n        [style.accent-color]=\"color\"\r\n        (blur)=\"validateInput()\"\r\n        [(ngModel)]=\"selectedOption\"\r\n        (ngModelChange)=\"validateInput()\"\r\n        [attr.data-state]=\"option.label + '|' + option.value\"\r\n        [attr.data-value]=\"selectedOption == option.label + '|' + option.value\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <label class=\"formCheckLabel ms-2 me-2 mb-2\" [for]=\"question.id+'-'+rowId+'-'+option.value\">{{\r\n        option.label\r\n      }}</label>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"isInvalid && (!inLine || !selectedOption)\"\r\n    class=\"error-message\"\r\n  >\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.formCheckbox,.formCheckLabel{cursor:pointer}.formCheckbox{width:15px;height:15px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.checkboxField-container{display:block}.checkboxField-container.two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: FormService }, { type: ValidationService }, { type: ElementTrackerService }, { type: ScoreCalculationService }, { type: WhenClauseService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-radio-button-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-3\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <div\n    class=\"checkboxField-container\"\n    [class.two-column]=\"displayOptionsInColumn\"\n  >\n    <div class=\"checkboxField\" *ngFor=\"let option of customOptions\">\n      <input\n        class=\"formCheckbox mb-2\"\n        type=\"radio\"\n        [name]=\"question.id+'-'+rowId\"\n        [id]=\"question.id+'-'+rowId+'-'+option.value\"\n        [value]=\"option.label + '|' + option.value\"\n        [style.accent-color]=\"color\"\n        (blur)=\"validateInput()\"\n        [(ngModel)]=\"selectedOption\"\n        (ngModelChange)=\"validateInput()\"\n        [attr.data-state]=\"option.label + '|' + option.value\"\n        [attr.data-value]=\"selectedOption == option.label + '|' + option.value\"\n        [disabled]=\"disableEdit\"\n      />\n      <label class=\"formCheckLabel ms-2 me-2 mb-2\" [for]=\"question.id+'-'+rowId+'-'+option.value\">{{\n        option.label\n      }}</label>\n    </div>\n  </div>\n  <div\n    *ngIf=\"isInvalid && (!inLine || !selectedOption)\"\n    class=\"error-message\"\n  >\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.formCheckbox,.formCheckLabel{cursor:pointer}.formCheckbox{width:15px;height:15px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.checkboxField-container{display:block}.checkboxField-container.two-column{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: FormService }, { type: ValidationService }, { type: ElementTrackerService }, { type: ScoreCalculationService }, { type: WhenClauseService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -5200,9 +5375,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class RichTextEditorFieldsComponent {
-    constructor(validationService, tracker) {
+    constructor(validationService, tracker, hiddenFieldService) {
         this.validationService = validationService;
         this.tracker = tracker;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inSubForm = false;
@@ -5284,6 +5460,7 @@ class RichTextEditorFieldsComponent {
         this.question.answer = this.htmlContent;
         this.validateEditor();
         this.answerChange.emit({ answer: this.question.answer, maxPossibleScore: 0 });
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     handleValidation(isValid, message = 'This field is required') {
         if (isValid) {
@@ -5318,13 +5495,13 @@ class RichTextEditorFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextEditorFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: { question: "question", inLine: "inLine", inSubForm: "inSubForm", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <quill-editor\r\n    [(ngModel)]=\"htmlContent\"\r\n    (ngModelChange)=\"updateAnswer($event)\"\r\n    (onEditorCreated)=\"editorCreated($event)\"\r\n    (blur)=\"validateEditor()\"\r\n    class=\"editor\"\r\n    [ngClass]=\"{\r\n      'inSubform': inSubForm && !disableEdit,\r\n      'disable': disableEdit\r\n    }\"\r\n    placeholder=\"\"\r\n    [disabled]=\"disableEdit\"\r\n  ></quill-editor>\r\n  <div *ngIf=\"isInvalid && (!inLine || !htmlContent)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.editor{width:100%}::ng-deep .ql-container{min-height:150px}.inSubform{background:#fff!important}.disable{background:#e9ecef}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.QuillEditorComponent, selector: "quill-editor" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextEditorFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: { question: "question", inLine: "inLine", inSubForm: "inSubForm", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <quill-editor\n    [(ngModel)]=\"htmlContent\"\n    (ngModelChange)=\"updateAnswer($event)\"\n    (onEditorCreated)=\"editorCreated($event)\"\n    (blur)=\"validateEditor()\"\n    class=\"editor\"\n    [ngClass]=\"{\n      'inSubform': inSubForm && !disableEdit,\n      'disable': disableEdit\n    }\"\n    placeholder=\"\"\n    [disabled]=\"disableEdit\"\n  ></quill-editor>\n  <div *ngIf=\"isInvalid && (!inLine || !htmlContent)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.editor{width:100%}::ng-deep .ql-container{min-height:150px}.inSubform{background:#fff!important}.disable{background:#e9ecef}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.QuillEditorComponent, selector: "quill-editor" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextEditorFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-rich-text-editor-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <quill-editor\r\n    [(ngModel)]=\"htmlContent\"\r\n    (ngModelChange)=\"updateAnswer($event)\"\r\n    (onEditorCreated)=\"editorCreated($event)\"\r\n    (blur)=\"validateEditor()\"\r\n    class=\"editor\"\r\n    [ngClass]=\"{\r\n      'inSubform': inSubForm && !disableEdit,\r\n      'disable': disableEdit\r\n    }\"\r\n    placeholder=\"\"\r\n    [disabled]=\"disableEdit\"\r\n  ></quill-editor>\r\n  <div *ngIf=\"isInvalid && (!inLine || !htmlContent)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.editor{width:100%}::ng-deep .ql-container{min-height:150px}.inSubform{background:#fff!important}.disable{background:#e9ecef}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-rich-text-editor-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <quill-editor\n    [(ngModel)]=\"htmlContent\"\n    (ngModelChange)=\"updateAnswer($event)\"\n    (onEditorCreated)=\"editorCreated($event)\"\n    (blur)=\"validateEditor()\"\n    class=\"editor\"\n    [ngClass]=\"{\n      'inSubform': inSubForm && !disableEdit,\n      'disable': disableEdit\n    }\"\n    placeholder=\"\"\n    [disabled]=\"disableEdit\"\n  ></quill-editor>\n  <div *ngIf=\"isInvalid && (!inLine || !htmlContent)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.editor{width:100%}::ng-deep .ql-container{min-height:150px}.inSubform{background:#fff!important}.disable{background:#e9ecef}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -5341,9 +5518,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class SelectionMatrixFieldsComponent {
-    constructor(validationService, tracker) {
+    constructor(validationService, tracker, hiddenFieldService) {
         this.validationService = validationService;
         this.tracker = tracker;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.acceptedLanguage = '';
@@ -5434,6 +5612,7 @@ class SelectionMatrixFieldsComponent {
             this.question.validation = true;
         }
         this.answerChange.emit({ answer: this.question.answer, maxPossibleScore: 0 });
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     handleValidation(isValid, message = 'This field is required') {
         if (isValid) {
@@ -5468,13 +5647,13 @@ class SelectionMatrixFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionMatrixFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: { question: "question", inLine: "inLine", acceptedLanguage: "acceptedLanguage", rowId: "rowId", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{ 'labelBorder-rtl': acceptedLanguage === 'ara' }\">\r\n    <table class=\"selectionMatrix\">\r\n      <thead>\r\n        <tr>\r\n          <th></th>\r\n          <th\r\n            class=\"text-center table-cell-wrap\"\r\n            *ngFor=\"let column of selectionMatrixColumn\"\r\n          >\r\n            {{ column.column }}\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody class=\"table-group-divider\">\r\n        <tr *ngFor=\"let label of selectionMatrixLabel; let rowIndex = index\">\r\n          <td class=\"table-cell-wrap\">{{ label.label }}</td>\r\n          <td\r\n            *ngFor=\"let column of selectionMatrixColumn; let colIndex = index\"\r\n            class=\"text-center\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              [attr.id]=\"'radio-' + rowIndex + '-' + colIndex + '-' + rowId\"\r\n              [name]=\"'radio-' + rowIndex + '-' + colIndex + '-' + rowId\"\r\n              class=\"selectionRadio\"\r\n              [style.accent-color]=\"selectionColor\"\r\n              [value]=\"label.label + '_' + column.column\"\r\n              [(ngModel)]=\"selectedOptions[rowIndex]\"\r\n              (ngModelChange)=\"\r\n                onSelectionChange(rowIndex, label.label + '_' + column.column)\r\n              \"\r\n              [disabled]=\"disableEdit\"\r\n            />\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n    <div *ngIf=\"isInvalid && (!inLine || selectedOptions.length == 0)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mt-2\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.selectionMatrix{border-collapse:collapse;width:100%}.selectionMatrix th,.selectionMatrix td{padding:8px}.selectionMatrix th{border-bottom:2px solid black}.selectionMatrix th:first-child,.selectionMatrix td:first-child,.labelBorder-rtl .selectionMatrix th:first-child{border-right:1px solid #C9C8C8}.table-group-divider{border-top:1px solid #000000}.selectionRadio{cursor:pointer;width:18px;height:18px}.table-cell-wrap{word-wrap:break-word;white-space:normal;max-width:200px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionMatrixFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: { question: "question", inLine: "inLine", acceptedLanguage: "acceptedLanguage", rowId: "rowId", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{ 'labelBorder-rtl': acceptedLanguage === 'ara' }\">\n    <table class=\"selectionMatrix\">\n      <thead>\n        <tr>\n          <th></th>\n          <th\n            class=\"text-center table-cell-wrap\"\n            *ngFor=\"let column of selectionMatrixColumn\"\n          >\n            {{ column.column }}\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"table-group-divider\">\n        <tr *ngFor=\"let label of selectionMatrixLabel; let rowIndex = index\">\n          <td class=\"table-cell-wrap\">{{ label.label }}</td>\n          <td\n            *ngFor=\"let column of selectionMatrixColumn; let colIndex = index\"\n            class=\"text-center\"\n          >\n            <input\n              type=\"radio\"\n              [attr.id]=\"'radio-' + rowIndex + '-' + colIndex + '-' + rowId\"\n              [name]=\"'radio-' + rowIndex + '-' + colIndex + '-' + rowId\"\n              class=\"selectionRadio\"\n              [style.accent-color]=\"selectionColor\"\n              [value]=\"label.label + '_' + column.column\"\n              [(ngModel)]=\"selectedOptions[rowIndex]\"\n              (ngModelChange)=\"\n                onSelectionChange(rowIndex, label.label + '_' + column.column)\n              \"\n              [disabled]=\"disableEdit\"\n            />\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n    <div *ngIf=\"isInvalid && (!inLine || selectedOptions.length == 0)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mt-2\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.selectionMatrix{border-collapse:collapse;width:100%}.selectionMatrix th,.selectionMatrix td{padding:8px}.selectionMatrix th{border-bottom:2px solid black}.selectionMatrix th:first-child,.selectionMatrix td:first-child,.labelBorder-rtl .selectionMatrix th:first-child{border-right:1px solid #C9C8C8}.table-group-divider{border-top:1px solid #000000}.selectionRadio{cursor:pointer;width:18px;height:18px}.table-cell-wrap{word-wrap:break-word;white-space:normal;max-width:200px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionMatrixFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-selection-matrix-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{ 'labelBorder-rtl': acceptedLanguage === 'ara' }\">\r\n    <table class=\"selectionMatrix\">\r\n      <thead>\r\n        <tr>\r\n          <th></th>\r\n          <th\r\n            class=\"text-center table-cell-wrap\"\r\n            *ngFor=\"let column of selectionMatrixColumn\"\r\n          >\r\n            {{ column.column }}\r\n          </th>\r\n        </tr>\r\n      </thead>\r\n      <tbody class=\"table-group-divider\">\r\n        <tr *ngFor=\"let label of selectionMatrixLabel; let rowIndex = index\">\r\n          <td class=\"table-cell-wrap\">{{ label.label }}</td>\r\n          <td\r\n            *ngFor=\"let column of selectionMatrixColumn; let colIndex = index\"\r\n            class=\"text-center\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              [attr.id]=\"'radio-' + rowIndex + '-' + colIndex + '-' + rowId\"\r\n              [name]=\"'radio-' + rowIndex + '-' + colIndex + '-' + rowId\"\r\n              class=\"selectionRadio\"\r\n              [style.accent-color]=\"selectionColor\"\r\n              [value]=\"label.label + '_' + column.column\"\r\n              [(ngModel)]=\"selectedOptions[rowIndex]\"\r\n              (ngModelChange)=\"\r\n                onSelectionChange(rowIndex, label.label + '_' + column.column)\r\n              \"\r\n              [disabled]=\"disableEdit\"\r\n            />\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n    <div *ngIf=\"isInvalid && (!inLine || selectedOptions.length == 0)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mt-2\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.selectionMatrix{border-collapse:collapse;width:100%}.selectionMatrix th,.selectionMatrix td{padding:8px}.selectionMatrix th{border-bottom:2px solid black}.selectionMatrix th:first-child,.selectionMatrix td:first-child,.labelBorder-rtl .selectionMatrix th:first-child{border-right:1px solid #C9C8C8}.table-group-divider{border-top:1px solid #000000}.selectionRadio{cursor:pointer;width:18px;height:18px}.table-cell-wrap{word-wrap:break-word;white-space:normal;max-width:200px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-selection-matrix-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{ 'labelBorder-rtl': acceptedLanguage === 'ara' }\">\n    <table class=\"selectionMatrix\">\n      <thead>\n        <tr>\n          <th></th>\n          <th\n            class=\"text-center table-cell-wrap\"\n            *ngFor=\"let column of selectionMatrixColumn\"\n          >\n            {{ column.column }}\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"table-group-divider\">\n        <tr *ngFor=\"let label of selectionMatrixLabel; let rowIndex = index\">\n          <td class=\"table-cell-wrap\">{{ label.label }}</td>\n          <td\n            *ngFor=\"let column of selectionMatrixColumn; let colIndex = index\"\n            class=\"text-center\"\n          >\n            <input\n              type=\"radio\"\n              [attr.id]=\"'radio-' + rowIndex + '-' + colIndex + '-' + rowId\"\n              [name]=\"'radio-' + rowIndex + '-' + colIndex + '-' + rowId\"\n              class=\"selectionRadio\"\n              [style.accent-color]=\"selectionColor\"\n              [value]=\"label.label + '_' + column.column\"\n              [(ngModel)]=\"selectedOptions[rowIndex]\"\n              (ngModelChange)=\"\n                onSelectionChange(rowIndex, label.label + '_' + column.column)\n              \"\n              [disabled]=\"disableEdit\"\n            />\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n    <div *ngIf=\"isInvalid && (!inLine || selectedOptions.length == 0)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message mt-2\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.selectionMatrix{border-collapse:collapse;width:100%}.selectionMatrix th,.selectionMatrix td{padding:8px}.selectionMatrix th{border-bottom:2px solid black}.selectionMatrix th:first-child,.selectionMatrix td:first-child,.labelBorder-rtl .selectionMatrix th:first-child{border-right:1px solid #C9C8C8}.table-group-divider{border-top:1px solid #000000}.selectionRadio{cursor:pointer;width:18px;height:18px}.table-cell-wrap{word-wrap:break-word;white-space:normal;max-width:200px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -5510,11 +5689,11 @@ class SignatureFieldsComponent {
         this.minFileSize = this.question.formElement.validation.minFileSize;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignatureFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: { question: "question", inLine: "inLine" }, ngImport: i0, template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\r\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: { question: "question", inLine: "inLine" }, ngImport: i0, template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignatureFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-signature-fields', template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\r\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+            args: [{ selector: 'lib-signature-fields', template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }], inLine: [{
@@ -5522,9 +5701,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class SliderFieldsComponent {
-    constructor(renderer, el) {
+    constructor(renderer, el, hiddenFieldService) {
         this.renderer = renderer;
         this.el = el;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -5568,14 +5748,15 @@ class SliderFieldsComponent {
         this.question.answer = String(this.selectedValue);
         this.question.validation = true;
         this.answerChange.emit({ answer: this.question.answer, maxPossibleScore: 0 });
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderFieldsComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\r\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"sliderRow\">\r\n    <div class=\"sliderLeft\">\r\n      <mat-slider\r\n        [min]=\"minValue\"\r\n        [max]=\"maxValue\"\r\n        [step]=\"stepValue\"\r\n        [ngStyle]=\"{\r\n          '--mdc-slider-active-track-color': changeSliderColor\r\n            ? sliderColor\r\n            : ''\r\n        }\"\r\n      >\r\n        <input\r\n          matSliderThumb\r\n          [(ngModel)]=\"selectedValue\"\r\n          (input)=\"validateInput($event)\"\r\n          [disabled]=\"disableEdit\"\r\n        />\r\n      </mat-slider>\r\n    </div>\r\n    <div class=\"sliderRight\">\r\n      <label class=\"selected-count font-weight-bold\">{{ selectedValue }}</label>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.selected-count{font-size:.8rem;color:#000}mat-slider{width:100%}.mat-mdc-slider.mat-primary{--mdc-slider-handle-color: #fcfcfc;--mdc-slider-handle-width: 15px;--mdc-slider-handle-height: 15px;--mat-mdc-slider-focus-ripple-color: none;--mat-mdc-slider-hover-ripple-color: none;--mdc-slider-focus-handle-color: #fcfcfc;--mdc-slider-inactive-track-color: #9e9d9d}.mat-mdc-slider .mdc-slider__thumb-knob{outline:1px solid #ff0000!important}.mat-slider-thumb{background-color:none!important;border:none!important;box-shadow:none;outline:none}.sliderRow{display:flex;align-items:center;gap:32px;width:100%}.sliderLeft{flex:1}.sliderRight label{margin-bottom:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderFieldsComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"sliderRow\">\n    <div class=\"sliderLeft\">\n      <mat-slider\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [step]=\"stepValue\"\n        [ngStyle]=\"{\n          '--mdc-slider-active-track-color': changeSliderColor\n            ? sliderColor\n            : ''\n        }\"\n      >\n        <input\n          matSliderThumb\n          [(ngModel)]=\"selectedValue\"\n          (input)=\"validateInput($event)\"\n          [disabled]=\"disableEdit\"\n        />\n      </mat-slider>\n    </div>\n    <div class=\"sliderRight\">\n      <label class=\"selected-count font-weight-bold\">{{ selectedValue }}</label>\n    </div>\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.selected-count{font-size:.8rem;color:#000}mat-slider{width:100%}.mat-mdc-slider.mat-primary{--mdc-slider-handle-color: #fcfcfc;--mdc-slider-handle-width: 15px;--mdc-slider-handle-height: 15px;--mat-mdc-slider-focus-ripple-color: none;--mat-mdc-slider-hover-ripple-color: none;--mdc-slider-focus-handle-color: #fcfcfc;--mdc-slider-inactive-track-color: #9e9d9d}.mat-mdc-slider .mdc-slider__thumb-knob{outline:1px solid #ff0000!important}.mat-slider-thumb{background-color:none!important;border:none!important;box-shadow:none;outline:none}.sliderRow{display:flex;align-items:center;gap:32px;width:100%}.sliderLeft{flex:1}.sliderRight label{margin-bottom:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i4.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-slider-fields', template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\r\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"sliderRow\">\r\n    <div class=\"sliderLeft\">\r\n      <mat-slider\r\n        [min]=\"minValue\"\r\n        [max]=\"maxValue\"\r\n        [step]=\"stepValue\"\r\n        [ngStyle]=\"{\r\n          '--mdc-slider-active-track-color': changeSliderColor\r\n            ? sliderColor\r\n            : ''\r\n        }\"\r\n      >\r\n        <input\r\n          matSliderThumb\r\n          [(ngModel)]=\"selectedValue\"\r\n          (input)=\"validateInput($event)\"\r\n          [disabled]=\"disableEdit\"\r\n        />\r\n      </mat-slider>\r\n    </div>\r\n    <div class=\"sliderRight\">\r\n      <label class=\"selected-count font-weight-bold\">{{ selectedValue }}</label>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.selected-count{font-size:.8rem;color:#000}mat-slider{width:100%}.mat-mdc-slider.mat-primary{--mdc-slider-handle-color: #fcfcfc;--mdc-slider-handle-width: 15px;--mdc-slider-handle-height: 15px;--mat-mdc-slider-focus-ripple-color: none;--mat-mdc-slider-hover-ripple-color: none;--mdc-slider-focus-handle-color: #fcfcfc;--mdc-slider-inactive-track-color: #9e9d9d}.mat-mdc-slider .mdc-slider__thumb-knob{outline:1px solid #ff0000!important}.mat-slider-thumb{background-color:none!important;border:none!important;box-shadow:none;outline:none}.sliderRow{display:flex;align-items:center;gap:32px;width:100%}.sliderLeft{flex:1}.sliderRight label{margin-bottom:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-slider-fields', template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"sliderRow\">\n    <div class=\"sliderLeft\">\n      <mat-slider\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [step]=\"stepValue\"\n        [ngStyle]=\"{\n          '--mdc-slider-active-track-color': changeSliderColor\n            ? sliderColor\n            : ''\n        }\"\n      >\n        <input\n          matSliderThumb\n          [(ngModel)]=\"selectedValue\"\n          (input)=\"validateInput($event)\"\n          [disabled]=\"disableEdit\"\n        />\n      </mat-slider>\n    </div>\n    <div class=\"sliderRight\">\n      <label class=\"selected-count font-weight-bold\">{{ selectedValue }}</label>\n    </div>\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.selected-count{font-size:.8rem;color:#000}mat-slider{width:100%}.mat-mdc-slider.mat-primary{--mdc-slider-handle-color: #fcfcfc;--mdc-slider-handle-width: 15px;--mdc-slider-handle-height: 15px;--mat-mdc-slider-focus-ripple-color: none;--mat-mdc-slider-hover-ripple-color: none;--mdc-slider-focus-handle-color: #fcfcfc;--mdc-slider-inactive-track-color: #9e9d9d}.mat-mdc-slider .mdc-slider__thumb-knob{outline:1px solid #ff0000!important}.mat-slider-thumb{background-color:none!important;border:none!important;box-shadow:none;outline:none}.sliderRow{display:flex;align-items:center;gap:32px;width:100%}.sliderLeft{flex:1}.sliderRight label{margin-bottom:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -5590,10 +5771,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class TermsAndConditionFieldsComponent {
-    constructor(formService, http, dataService) {
+    constructor(formService, http, dataService, hiddenFieldService) {
         this.formService = formService;
         this.http = http;
         this.dataService = dataService;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.count = 0;
@@ -5636,13 +5818,13 @@ class TermsAndConditionFieldsComponent {
     closeModal() {
         this.visible = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermsAndConditionFieldsComponent, deps: [{ token: FormService }, { token: i1.HttpClient }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: { question: "question", inLine: "inLine" }, ngImport: i0, template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\r\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\" ></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label (click)=\"preview()\">{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"modal1\" *ngIf=\"visible\">\r\n    <div class=\"modal-content1\">\r\n      <span class=\"close\" (click)=\"closeModal()\">&times;</span>\r\n      <div class=\"imgContiner\">\r\n      <img [src]=\"imgUrl\" alt=\"Image\">\r\n    </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}label{color:#084fff}.modal1{display:flex;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#000;background-color:#0006;align-items:center}.modal-content1{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:80%;max-width:877px}.close{color:#aaa;float:right;font-size:28px;font-weight:700;justify-content:flex-end;display:flex;opacity:1}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.imgContiner{height:500px;overflow-y:auto}.imgContiner img{max-width:100%;width:100%}div::-webkit-scrollbar,main::-webkit-scrollbar,ul::-webkit-scrollbar{width:6px;height:8px;visibility:hidden}div::-webkit-scrollbar-thumb,main::-webkit-scrollbar-thumb,ul::-webkit-scrollbar-thumb{background-color:var(--scrollBarThumbColor);border-radius:8px;visibility:hidden}div:hover::-webkit-scrollbar,main:hover::-webkit-scrollbar,ul:hover::-webkit-scrollbar{visibility:unset}div:hover::-webkit-scrollbar-thumb,main:hover::-webkit-scrollbar-thumb,ul:hover::-webkit-scrollbar-thumb{visibility:unset}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermsAndConditionFieldsComponent, deps: [{ token: FormService }, { token: i1.HttpClient }, { token: DataService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: { question: "question", inLine: "inLine" }, ngImport: i0, template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\" ></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label (click)=\"preview()\">{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"modal1\" *ngIf=\"visible\">\n    <div class=\"modal-content1\">\n      <span class=\"close\" (click)=\"closeModal()\">&times;</span>\n      <div class=\"imgContiner\">\n      <img [src]=\"imgUrl\" alt=\"Image\">\n    </div>\n    </div>\n  </div>\n</div>\n\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}label{color:#084fff}.modal1{display:flex;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#000;background-color:#0006;align-items:center}.modal-content1{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:80%;max-width:877px}.close{color:#aaa;float:right;font-size:28px;font-weight:700;justify-content:flex-end;display:flex;opacity:1}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.imgContiner{height:500px;overflow-y:auto}.imgContiner img{max-width:100%;width:100%}div::-webkit-scrollbar,main::-webkit-scrollbar,ul::-webkit-scrollbar{width:6px;height:8px;visibility:hidden}div::-webkit-scrollbar-thumb,main::-webkit-scrollbar-thumb,ul::-webkit-scrollbar-thumb{background-color:var(--scrollBarThumbColor);border-radius:8px;visibility:hidden}div:hover::-webkit-scrollbar,main:hover::-webkit-scrollbar,ul:hover::-webkit-scrollbar{visibility:unset}div:hover::-webkit-scrollbar-thumb,main:hover::-webkit-scrollbar-thumb,ul:hover::-webkit-scrollbar-thumb{visibility:unset}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermsAndConditionFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-terms-and-condition-fields', template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\r\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\" ></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label (click)=\"preview()\">{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"modal1\" *ngIf=\"visible\">\r\n    <div class=\"modal-content1\">\r\n      <span class=\"close\" (click)=\"closeModal()\">&times;</span>\r\n      <div class=\"imgContiner\">\r\n      <img [src]=\"imgUrl\" alt=\"Image\">\r\n    </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}label{color:#084fff}.modal1{display:flex;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#000;background-color:#0006;align-items:center}.modal-content1{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:80%;max-width:877px}.close{color:#aaa;float:right;font-size:28px;font-weight:700;justify-content:flex-end;display:flex;opacity:1}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.imgContiner{height:500px;overflow-y:auto}.imgContiner img{max-width:100%;width:100%}div::-webkit-scrollbar,main::-webkit-scrollbar,ul::-webkit-scrollbar{width:6px;height:8px;visibility:hidden}div::-webkit-scrollbar-thumb,main::-webkit-scrollbar-thumb,ul::-webkit-scrollbar-thumb{background-color:var(--scrollBarThumbColor);border-radius:8px;visibility:hidden}div:hover::-webkit-scrollbar,main:hover::-webkit-scrollbar,ul:hover::-webkit-scrollbar{visibility:unset}div:hover::-webkit-scrollbar-thumb,main:hover::-webkit-scrollbar-thumb,ul:hover::-webkit-scrollbar-thumb{visibility:unset}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: FormService }, { type: i1.HttpClient }, { type: DataService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-terms-and-condition-fields', template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\n  <div  class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\" ></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label (click)=\"preview()\">{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"modal1\" *ngIf=\"visible\">\n    <div class=\"modal-content1\">\n      <span class=\"close\" (click)=\"closeModal()\">&times;</span>\n      <div class=\"imgContiner\">\n      <img [src]=\"imgUrl\" alt=\"Image\">\n    </div>\n    </div>\n  </div>\n</div>\n\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}label{color:#084fff}.modal1{display:flex;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#000;background-color:#0006;align-items:center}.modal-content1{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:80%;max-width:877px}.close{color:#aaa;float:right;font-size:28px;font-weight:700;justify-content:flex-end;display:flex;opacity:1}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.imgContiner{height:500px;overflow-y:auto}.imgContiner img{max-width:100%;width:100%}div::-webkit-scrollbar,main::-webkit-scrollbar,ul::-webkit-scrollbar{width:6px;height:8px;visibility:hidden}div::-webkit-scrollbar-thumb,main::-webkit-scrollbar-thumb,ul::-webkit-scrollbar-thumb{background-color:var(--scrollBarThumbColor);border-radius:8px;visibility:hidden}div:hover::-webkit-scrollbar,main:hover::-webkit-scrollbar,ul:hover::-webkit-scrollbar{visibility:unset}div:hover::-webkit-scrollbar-thumb,main:hover::-webkit-scrollbar-thumb,ul:hover::-webkit-scrollbar-thumb{visibility:unset}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: FormService }, { type: i1.HttpClient }, { type: DataService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -5652,10 +5834,11 @@ class TextAreaFieldsComponent {
     ngOnInit() {
         this.valueAssigned();
     }
-    constructor(validationService, tracker, whenClauseService) {
+    constructor(validationService, tracker, whenClauseService, hiddenFieldService) {
         this.validationService = validationService;
         this.tracker = tracker;
         this.whenClauseService = whenClauseService;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -5732,6 +5915,7 @@ class TextAreaFieldsComponent {
             this.whenClauseService.setQuestionAnswer(this.question.id, this.question.answer, true);
         });
         this.validateTextarea();
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     validateTextarea() {
         this.validationFailed = false;
@@ -5777,13 +5961,13 @@ class TextAreaFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <textarea\r\n    #textarea\r\n    class=\"form-control mb-2\"\r\n    [ngClass]=\"{ 'no-scroll': numberOfRows }\"\r\n    [rows]=\"numberOfRows\"\r\n    wrap=\"hard\"\r\n    (input)=\"validateInput($event)\"\r\n    (blur)=\"validateTextarea()\"\r\n    [(ngModel)]=\"enteredText\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredText)\"\r\n    [maxlength]=\"characterCount\"\r\n    [disabled]=\"disableEdit\"\r\n  ></textarea>\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredText)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.no-scroll{overflow:hidden!important;resize:none;line-height:1.5;padding:5px 10px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: WhenClauseService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <textarea\n    #textarea\n    class=\"form-control mb-2\"\n    [ngClass]=\"{ 'no-scroll': numberOfRows }\"\n    [rows]=\"numberOfRows\"\n    wrap=\"hard\"\n    (input)=\"validateInput($event)\"\n    (blur)=\"validateTextarea()\"\n    [(ngModel)]=\"enteredText\"\n    [class.invalid]=\"validationFailed\"\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredText)\"\n    [maxlength]=\"characterCount\"\n    [disabled]=\"disableEdit\"\n  ></textarea>\n  <div *ngIf=\"isInvalid && (!inLine || !enteredText)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.no-scroll{overflow:hidden!important;resize:none;line-height:1.5;padding:5px 10px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-text-area-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <textarea\r\n    #textarea\r\n    class=\"form-control mb-2\"\r\n    [ngClass]=\"{ 'no-scroll': numberOfRows }\"\r\n    [rows]=\"numberOfRows\"\r\n    wrap=\"hard\"\r\n    (input)=\"validateInput($event)\"\r\n    (blur)=\"validateTextarea()\"\r\n    [(ngModel)]=\"enteredText\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredText)\"\r\n    [maxlength]=\"characterCount\"\r\n    [disabled]=\"disableEdit\"\r\n  ></textarea>\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredText)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.no-scroll{overflow:hidden!important;resize:none;line-height:1.5;padding:5px 10px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: WhenClauseService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-text-area-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <textarea\n    #textarea\n    class=\"form-control mb-2\"\n    [ngClass]=\"{ 'no-scroll': numberOfRows }\"\n    [rows]=\"numberOfRows\"\n    wrap=\"hard\"\n    (input)=\"validateInput($event)\"\n    (blur)=\"validateTextarea()\"\n    [(ngModel)]=\"enteredText\"\n    [class.invalid]=\"validationFailed\"\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredText)\"\n    [maxlength]=\"characterCount\"\n    [disabled]=\"disableEdit\"\n  ></textarea>\n  <div *ngIf=\"isInvalid && (!inLine || !enteredText)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.no-scroll{overflow:hidden!important;resize:none;line-height:1.5;padding:5px 10px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: WhenClauseService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -5801,10 +5985,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class TextFieldsComponent {
-    constructor(validationService, tracker, whenClauseService) {
+    constructor(validationService, tracker, whenClauseService, hiddenFieldService) {
         this.validationService = validationService;
         this.tracker = tracker;
         this.whenClauseService = whenClauseService;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -5915,6 +6100,7 @@ class TextFieldsComponent {
         this.question.answer = event.target.value;
         this.answerChange.emit({ answer: event.target.value, maxPossibleScore: 0 });
         this.whenClauseService.setQuestionAnswer(this.question.id, this.question.answer);
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
         this.validatetextField();
         if (!this.inLine && !this.inCard) {
             setTimeout(() => {
@@ -6018,13 +6204,13 @@ class TextFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextFieldsComponent, selector: "lib-text-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <input\r\n    type=\"text\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"enteredText\"\r\n    (blur)=\"validatetextField()\"\r\n    (input)=\"validateInput($event)\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredText)\"\r\n    [id]=\"question.id\"\r\n    [disabled]=\"disableEdit\"\r\n  />\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredText)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-control:not(:placeholder-shown).bold{font-weight:700}.form-control:not(:placeholder-shown).underline{text-decoration:underline}.form-control:not(:placeholder-shown).italics{font-style:italic}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: WhenClauseService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextFieldsComponent, selector: "lib-text-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <input\n    type=\"text\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [(ngModel)]=\"enteredText\"\n    (blur)=\"validatetextField()\"\n    (input)=\"validateInput($event)\"\n    [class.invalid]=\"validationFailed\"\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredText)\"\n    [id]=\"question.id\"\n    [disabled]=\"disableEdit\"\n  />\n  <div *ngIf=\"isInvalid && (!inLine || !enteredText)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-control:not(:placeholder-shown).bold{font-weight:700}.form-control:not(:placeholder-shown).underline{text-decoration:underline}.form-control:not(:placeholder-shown).italics{font-style:italic}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-text-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <input\r\n    type=\"text\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"enteredText\"\r\n    (blur)=\"validatetextField()\"\r\n    (input)=\"validateInput($event)\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredText)\"\r\n    [id]=\"question.id\"\r\n    [disabled]=\"disableEdit\"\r\n  />\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredText)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-control:not(:placeholder-shown).bold{font-weight:700}.form-control:not(:placeholder-shown).underline{text-decoration:underline}.form-control:not(:placeholder-shown).italics{font-style:italic}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: WhenClauseService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-text-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <input\n    type=\"text\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [(ngModel)]=\"enteredText\"\n    (blur)=\"validatetextField()\"\n    (input)=\"validateInput($event)\"\n    [class.invalid]=\"validationFailed\"\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredText)\"\n    [id]=\"question.id\"\n    [disabled]=\"disableEdit\"\n  />\n  <div *ngIf=\"isInvalid && (!inLine || !enteredText)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-control:not(:placeholder-shown).bold{font-weight:700}.form-control:not(:placeholder-shown).underline{text-decoration:underline}.form-control:not(:placeholder-shown).italics{font-style:italic}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: WhenClauseService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -6039,7 +6225,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class ToggleSwitchFieldsComponent {
-    constructor() {
+    constructor(hiddenFieldService) {
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -6097,14 +6284,15 @@ class ToggleSwitchFieldsComponent {
             ? this.question.formElement.appearance.labelOnColor
             : this.question.formElement.appearance.labelOffColor;
         this.answerChange.emit({ answer: this.question.answer, maxPossibleScore: 0 });
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleSwitchFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", acceptedLanguage: "acceptedLanguage", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"mt-2\">\r\n    <label\r\n      class=\"switch\"\r\n      [ngClass]=\"{\r\n        'direction-rtl': acceptedLanguage === 'ara',\r\n        'direction-ltr': acceptedLanguage !== 'ara'\r\n      }\"\r\n      [attr.name]=\"question.testElementName\"\r\n    >\r\n      <input\r\n        type=\"checkbox\"\r\n        id=\"togBtn\"\r\n        (change)=\"toggleSliderColor($event)\"\r\n        [checked]=\"selectedValue === labelOnValue\"\r\n        [attr.data-state]=\"selectedValue\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <div\r\n        class=\"slider round\"\r\n        [ngClass]=\"getDirectionClass()\"\r\n        [ngStyle]=\"{ 'background-color': toggleBackgroundColor }\"\r\n      >\r\n        <span class=\"on action-btn-text\">{{ labelOnValue }}</span>\r\n        <span class=\"off action-btn-text\">{{ labelOffValue }}</span>\r\n      </div>\r\n    </label>\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.switch{position:relative;display:inline-block;width:auto;height:34px;min-width:120px}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#00c48c}input:not(:checked)+.slider{background-color:#00c48c}input:focus+.slider{box-shadow:0 0 1px #2196f3}.direction-rtl input:checked+.slider:before{transform:translate(-86px)}input:checked+.slider:before{transform:translate(86px)}.on{display:none}.on,.off{color:#fff;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;font-size:13px;font-weight:500}input:checked+.slider .on{display:block}input:checked+.slider .off{display:none}.slider.round{border-radius:28px}.slider.round:before{border-radius:50%}.direction-rtl .slider:before{left:59px;right:4px}.direction-ltr .slider:before{left:4px;right:59px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleSwitchFieldsComponent, deps: [{ token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", acceptedLanguage: "acceptedLanguage", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"mt-2\">\n    <label\n      class=\"switch\"\n      [ngClass]=\"{\n        'direction-rtl': acceptedLanguage === 'ara',\n        'direction-ltr': acceptedLanguage !== 'ara'\n      }\"\n      [attr.name]=\"question.testElementName\"\n    >\n      <input\n        type=\"checkbox\"\n        id=\"togBtn\"\n        (change)=\"toggleSliderColor($event)\"\n        [checked]=\"selectedValue === labelOnValue\"\n        [attr.data-state]=\"selectedValue\"\n        [disabled]=\"disableEdit\"\n      />\n      <div\n        class=\"slider round\"\n        [ngClass]=\"getDirectionClass()\"\n        [ngStyle]=\"{ 'background-color': toggleBackgroundColor }\"\n      >\n        <span class=\"on action-btn-text\">{{ labelOnValue }}</span>\n        <span class=\"off action-btn-text\">{{ labelOffValue }}</span>\n      </div>\n    </label>\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.switch{position:relative;display:inline-block;width:auto;height:34px;min-width:120px}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#00c48c}input:not(:checked)+.slider{background-color:#00c48c}input:focus+.slider{box-shadow:0 0 1px #2196f3}.direction-rtl input:checked+.slider:before{transform:translate(-86px)}input:checked+.slider:before{transform:translate(86px)}.on{display:none}.on,.off{color:#fff;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;font-size:13px;font-weight:500}input:checked+.slider .on{display:block}input:checked+.slider .off{display:none}.slider.round{border-radius:28px}.slider.round:before{border-radius:50%}.direction-rtl .slider:before{left:59px;right:4px}.direction-ltr .slider:before{left:4px;right:59px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleSwitchFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-toggle-switch-fields', template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"mt-2\">\r\n    <label\r\n      class=\"switch\"\r\n      [ngClass]=\"{\r\n        'direction-rtl': acceptedLanguage === 'ara',\r\n        'direction-ltr': acceptedLanguage !== 'ara'\r\n      }\"\r\n      [attr.name]=\"question.testElementName\"\r\n    >\r\n      <input\r\n        type=\"checkbox\"\r\n        id=\"togBtn\"\r\n        (change)=\"toggleSliderColor($event)\"\r\n        [checked]=\"selectedValue === labelOnValue\"\r\n        [attr.data-state]=\"selectedValue\"\r\n        [disabled]=\"disableEdit\"\r\n      />\r\n      <div\r\n        class=\"slider round\"\r\n        [ngClass]=\"getDirectionClass()\"\r\n        [ngStyle]=\"{ 'background-color': toggleBackgroundColor }\"\r\n      >\r\n        <span class=\"on action-btn-text\">{{ labelOnValue }}</span>\r\n        <span class=\"off action-btn-text\">{{ labelOffValue }}</span>\r\n      </div>\r\n    </label>\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.switch{position:relative;display:inline-block;width:auto;height:34px;min-width:120px}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#00c48c}input:not(:checked)+.slider{background-color:#00c48c}input:focus+.slider{box-shadow:0 0 1px #2196f3}.direction-rtl input:checked+.slider:before{transform:translate(-86px)}input:checked+.slider:before{transform:translate(86px)}.on{display:none}.on,.off{color:#fff;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;font-size:13px;font-weight:500}input:checked+.slider .on{display:block}input:checked+.slider .off{display:none}.slider.round{border-radius:28px}.slider.round:before{border-radius:50%}.direction-rtl .slider:before{left:59px;right:4px}.direction-ltr .slider:before{left:4px;right:59px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
-        }], propDecorators: { question: [{
+            args: [{ selector: 'lib-toggle-switch-fields', template: "<div [ngClass]=\"{ 'mb-4': !inLine }\" class=\"px-3\" [attr.name]=\"question.testElementName\">\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"mt-2\">\n    <label\n      class=\"switch\"\n      [ngClass]=\"{\n        'direction-rtl': acceptedLanguage === 'ara',\n        'direction-ltr': acceptedLanguage !== 'ara'\n      }\"\n      [attr.name]=\"question.testElementName\"\n    >\n      <input\n        type=\"checkbox\"\n        id=\"togBtn\"\n        (change)=\"toggleSliderColor($event)\"\n        [checked]=\"selectedValue === labelOnValue\"\n        [attr.data-state]=\"selectedValue\"\n        [disabled]=\"disableEdit\"\n      />\n      <div\n        class=\"slider round\"\n        [ngClass]=\"getDirectionClass()\"\n        [ngStyle]=\"{ 'background-color': toggleBackgroundColor }\"\n      >\n        <span class=\"on action-btn-text\">{{ labelOnValue }}</span>\n        <span class=\"off action-btn-text\">{{ labelOffValue }}</span>\n      </div>\n    </label>\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.switch{position:relative;display:inline-block;width:auto;height:34px;min-width:120px}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#00c48c}input:not(:checked)+.slider{background-color:#00c48c}input:focus+.slider{box-shadow:0 0 1px #2196f3}.direction-rtl input:checked+.slider:before{transform:translate(-86px)}input:checked+.slider:before{transform:translate(86px)}.on{display:none}.on,.off{color:#fff;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;font-size:13px;font-weight:500}input:checked+.slider .on{display:block}input:checked+.slider .off{display:none}.slider.round{border-radius:28px}.slider.round:before{border-radius:50%}.direction-rtl .slider:before{left:59px;right:4px}.direction-ltr .slider:before{left:4px;right:59px}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -6121,9 +6309,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class UrlFieldsComponent {
-    constructor(validationService, tracker) {
+    constructor(validationService, tracker, hiddenFieldService) {
         this.validationService = validationService;
         this.tracker = tracker;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -6184,6 +6373,7 @@ class UrlFieldsComponent {
         this.validateUrl();
         this.question.answer = event.target.value;
         this.answerChange.emit({ answer: this.question.answer, maxPossibleScore: 0 });
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     handleValidation(isValid, message = 'This field is required') {
         if (isValid) {
@@ -6218,13 +6408,13 @@ class UrlFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UrlFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"input-group\">\r\n    <input\r\n      [id]=\"question.id\"\r\n      type=\"text\"\r\n      class=\"form-control col-11.5 rounded height\"\r\n      [placeholder]=\"placeholder\"\r\n      [(ngModel)]=\"enteredUrl\"\r\n      (blur)=\"validateUrl()\"\r\n      (input)=\"validateInput($event)\"\r\n      [class.invalid]=\"validationFailed\"\r\n      [class.invalid-question]=\"isInvalid && (!inLine || !enteredUrl)\"\r\n      [disabled]=\"disableEdit\"\r\n    />\r\n    <div class=\"ps-2 pe-2\">\r\n      <button\r\n        *ngIf=\"showPreviewButton\"\r\n        type=\"button\"\r\n        class=\"btn col-.5 custom-button rounded d-flex justify-content-center align-items-center height\"\r\n        (click)=\"handleClick()\"\r\n      >\r\n        <svg\r\n          width=\"30\"\r\n          height=\"30\"\r\n          viewBox=\"0 0 30 30\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            d=\"M4.99561 16.2503C4.99561 21.7754 9.47462 26.2544 14.9998 26.2544C20.5249 26.2544 25.0039 21.7754 25.0039 16.2503C25.0039 10.7251 20.5249 6.24609 14.9998 6.24609H6.24613\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M9.99766 2.49219L6.24609 6.24375\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M9.99766 9.99766L6.24609 6.24609\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M17.7924 14.8125L14.3035 18.3015L12.2051 16.2106\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredUrl)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.custom-button{border:1px solid #ced4da;background-color:transparent;padding:.375rem .75rem;line-height:1.5;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UrlFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"input-group\">\n    <input\n      [id]=\"question.id\"\n      type=\"text\"\n      class=\"form-control col-11.5 rounded height\"\n      [placeholder]=\"placeholder\"\n      [(ngModel)]=\"enteredUrl\"\n      (blur)=\"validateUrl()\"\n      (input)=\"validateInput($event)\"\n      [class.invalid]=\"validationFailed\"\n      [class.invalid-question]=\"isInvalid && (!inLine || !enteredUrl)\"\n      [disabled]=\"disableEdit\"\n    />\n    <div class=\"ps-2 pe-2\">\n      <button\n        *ngIf=\"showPreviewButton\"\n        type=\"button\"\n        class=\"btn col-.5 custom-button rounded d-flex justify-content-center align-items-center height\"\n        (click)=\"handleClick()\"\n      >\n        <svg\n          width=\"30\"\n          height=\"30\"\n          viewBox=\"0 0 30 30\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M4.99561 16.2503C4.99561 21.7754 9.47462 26.2544 14.9998 26.2544C20.5249 26.2544 25.0039 21.7754 25.0039 16.2503C25.0039 10.7251 20.5249 6.24609 14.9998 6.24609H6.24613\"\n            stroke=\"#084FFF\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M9.99766 2.49219L6.24609 6.24375\"\n            stroke=\"#084FFF\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M9.99766 9.99766L6.24609 6.24609\"\n            stroke=\"#084FFF\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M17.7924 14.8125L14.3035 18.3015L12.2051 16.2106\"\n            stroke=\"#084FFF\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"isInvalid && (!inLine || !enteredUrl)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.custom-button{border:1px solid #ced4da;background-color:transparent;padding:.375rem .75rem;line-height:1.5;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UrlFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-url-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"input-group\">\r\n    <input\r\n      [id]=\"question.id\"\r\n      type=\"text\"\r\n      class=\"form-control col-11.5 rounded height\"\r\n      [placeholder]=\"placeholder\"\r\n      [(ngModel)]=\"enteredUrl\"\r\n      (blur)=\"validateUrl()\"\r\n      (input)=\"validateInput($event)\"\r\n      [class.invalid]=\"validationFailed\"\r\n      [class.invalid-question]=\"isInvalid && (!inLine || !enteredUrl)\"\r\n      [disabled]=\"disableEdit\"\r\n    />\r\n    <div class=\"ps-2 pe-2\">\r\n      <button\r\n        *ngIf=\"showPreviewButton\"\r\n        type=\"button\"\r\n        class=\"btn col-.5 custom-button rounded d-flex justify-content-center align-items-center height\"\r\n        (click)=\"handleClick()\"\r\n      >\r\n        <svg\r\n          width=\"30\"\r\n          height=\"30\"\r\n          viewBox=\"0 0 30 30\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            d=\"M4.99561 16.2503C4.99561 21.7754 9.47462 26.2544 14.9998 26.2544C20.5249 26.2544 25.0039 21.7754 25.0039 16.2503C25.0039 10.7251 20.5249 6.24609 14.9998 6.24609H6.24613\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M9.99766 2.49219L6.24609 6.24375\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M9.99766 9.99766L6.24609 6.24609\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M17.7924 14.8125L14.3035 18.3015L12.2051 16.2106\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredUrl)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.custom-button{border:1px solid #ced4da;background-color:transparent;padding:.375rem .75rem;line-height:1.5;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-url-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <div class=\"input-group\">\n    <input\n      [id]=\"question.id\"\n      type=\"text\"\n      class=\"form-control col-11.5 rounded height\"\n      [placeholder]=\"placeholder\"\n      [(ngModel)]=\"enteredUrl\"\n      (blur)=\"validateUrl()\"\n      (input)=\"validateInput($event)\"\n      [class.invalid]=\"validationFailed\"\n      [class.invalid-question]=\"isInvalid && (!inLine || !enteredUrl)\"\n      [disabled]=\"disableEdit\"\n    />\n    <div class=\"ps-2 pe-2\">\n      <button\n        *ngIf=\"showPreviewButton\"\n        type=\"button\"\n        class=\"btn col-.5 custom-button rounded d-flex justify-content-center align-items-center height\"\n        (click)=\"handleClick()\"\n      >\n        <svg\n          width=\"30\"\n          height=\"30\"\n          viewBox=\"0 0 30 30\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M4.99561 16.2503C4.99561 21.7754 9.47462 26.2544 14.9998 26.2544C20.5249 26.2544 25.0039 21.7754 25.0039 16.2503C25.0039 10.7251 20.5249 6.24609 14.9998 6.24609H6.24613\"\n            stroke=\"#084FFF\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M9.99766 2.49219L6.24609 6.24375\"\n            stroke=\"#084FFF\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M9.99766 9.99766L6.24609 6.24609\"\n            stroke=\"#084FFF\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M17.7924 14.8125L14.3035 18.3015L12.2051 16.2106\"\n            stroke=\"#084FFF\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"isInvalid && (!inLine || !enteredUrl)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.custom-button{border:1px solid #ced4da;background-color:transparent;padding:.375rem .75rem;line-height:1.5;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -6356,11 +6546,11 @@ class AggregateFunctionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AggregateFunctionComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: AggregationFunctionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", rowId: "rowId", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <input\r\n    type=\"text\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"result\"\r\n    readonly\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !result)\"\r\n    [id]=\"question.id\"\r\n  />\r\n  <div *ngIf=\"isInvalid && (!inLine || !result)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", rowId: "rowId", disableEdit: "disableEdit" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <input\n    type=\"text\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [(ngModel)]=\"result\"\n    readonly\n    [class.invalid-question]=\"isInvalid && (!inLine || !result)\"\n    [id]=\"question.id\"\n  />\n  <div *ngIf=\"isInvalid && (!inLine || !result)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AggregateFunctionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-aggregate-function', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <input\r\n    type=\"text\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"result\"\r\n    readonly\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !result)\"\r\n    [id]=\"question.id\"\r\n  />\r\n  <div *ngIf=\"isInvalid && (!inLine || !result)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            args: [{ selector: 'lib-aggregate-function', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span> <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n  <input\n    type=\"text\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [(ngModel)]=\"result\"\n    readonly\n    [class.invalid-question]=\"isInvalid && (!inLine || !result)\"\n    [id]=\"question.id\"\n  />\n  <div *ngIf=\"isInvalid && (!inLine || !result)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: AggregationFunctionService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
@@ -6378,10 +6568,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class CurrencyFieldsComponent {
-    constructor(validationService, tracker, aggregateService) {
+    constructor(validationService, tracker, aggregateService, hiddenFieldService) {
         this.validationService = validationService;
         this.tracker = tracker;
         this.aggregateService = aggregateService;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -6630,6 +6821,7 @@ class CurrencyFieldsComponent {
             currency: this.currencySymbol
         });
         this.validateNumber();
+        this.hiddenFieldService.updateHiddenFieldsOnChange();
     }
     // 3) convertAmountToWords using CurrencyMeta typing
     convertAmountToWords(value) {
@@ -6850,13 +7042,13 @@ class CurrencyFieldsComponent {
             this.tracker.unregisterElement(this.elementId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CurrencyFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: AggregationFunctionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit", rowId: "rowId" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"currency-input inside\">\r\n    <span *ngIf=\"symbolPosition === 'Before the value'\" class=\"currency-symbol left\">\r\n      {{ currencySymbol }}\r\n    </span>\r\n\r\n    <input\r\n    type=\"text\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [class.hide-spin-buttons]=\"true\"\r\n    (blur)=\"validateNumber()\"\r\n    [(ngModel)]=\"enteredAmount\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredAmount)\"\r\n    (input)=\"validateInput($event)\"\r\n    [attr.min]=\"min\"\r\n    [attr.max]=\"max\"\r\n    (wheel)=\"preventNumberScroll($event)\"\r\n    [disabled]=\"disableEdit\"\r\n    />\r\n\r\n    <span *ngIf=\"symbolPosition === 'After the value'\" class=\"currency-symbol right\">\r\n        {{ currencySymbol }}\r\n    </span>\r\n\r\n  </div>\r\n  <div *ngIf=\"showAmountInWords && amountInWordsText\" class=\"amount-in-words\">\r\n    {{ amountInWordsText }}\r\n  </div>\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredAmount)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.currency-input.inside{position:relative}.currency-input.inside input{padding-left:.75rem;padding-right:.75rem}.currency-input.inside .currency-symbol{position:absolute;top:50%;transform:translateY(-50%);color:#444;font-weight:700;pointer-events:none;white-space:nowrap}.currency-input.inside .currency-symbol.left{left:1%}.currency-input.inside .currency-symbol.left+input{padding-left:6ch}.currency-input.inside input+.currency-symbol.right{right:10px;padding-right:4ch}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CurrencyFieldsComponent, deps: [{ token: ValidationService }, { token: ElementTrackerService }, { token: AggregationFunctionService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex", disableEdit: "disableEdit", rowId: "rowId" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\n    <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <div class=\"currency-input inside\">\n    <span *ngIf=\"symbolPosition === 'Before the value'\" class=\"currency-symbol left\">\n      {{ currencySymbol }}\n    </span>\n\n    <input\n    type=\"text\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [class.hide-spin-buttons]=\"true\"\n    (blur)=\"validateNumber()\"\n    [(ngModel)]=\"enteredAmount\"\n    [class.invalid]=\"validationFailed\"\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredAmount)\"\n    (input)=\"validateInput($event)\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    (wheel)=\"preventNumberScroll($event)\"\n    [disabled]=\"disableEdit\"\n    />\n\n    <span *ngIf=\"symbolPosition === 'After the value'\" class=\"currency-symbol right\">\n        {{ currencySymbol }}\n    </span>\n\n  </div>\n  <div *ngIf=\"showAmountInWords && amountInWordsText\" class=\"amount-in-words\">\n    {{ amountInWordsText }}\n  </div>\n  <div *ngIf=\"isInvalid && (!inLine || !enteredAmount)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.currency-input.inside{position:relative}.currency-input.inside input{padding-left:.75rem;padding-right:.75rem}.currency-input.inside .currency-symbol{position:absolute;top:50%;transform:translateY(-50%);color:#444;font-weight:700;pointer-events:none;white-space:nowrap}.currency-input.inside .currency-symbol.left{left:1%}.currency-input.inside .currency-symbol.left+input{padding-left:6ch}.currency-input.inside input+.currency-symbol.right{right:10px;padding-right:4ch}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CurrencyFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-currency-fields', template: "<div\r\n  [ngClass]=\"{ 'mb-4': !inLine }\"\r\n  class=\"px-3\"\r\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\r\n  [attr.name]=\"question.testElementName\"\r\n>\r\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\r\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\r\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"currency-input inside\">\r\n    <span *ngIf=\"symbolPosition === 'Before the value'\" class=\"currency-symbol left\">\r\n      {{ currencySymbol }}\r\n    </span>\r\n\r\n    <input\r\n    type=\"text\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [class.hide-spin-buttons]=\"true\"\r\n    (blur)=\"validateNumber()\"\r\n    [(ngModel)]=\"enteredAmount\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredAmount)\"\r\n    (input)=\"validateInput($event)\"\r\n    [attr.min]=\"min\"\r\n    [attr.max]=\"max\"\r\n    (wheel)=\"preventNumberScroll($event)\"\r\n    [disabled]=\"disableEdit\"\r\n    />\r\n\r\n    <span *ngIf=\"symbolPosition === 'After the value'\" class=\"currency-symbol right\">\r\n        {{ currencySymbol }}\r\n    </span>\r\n\r\n  </div>\r\n  <div *ngIf=\"showAmountInWords && amountInWordsText\" class=\"amount-in-words\">\r\n    {{ amountInWordsText }}\r\n  </div>\r\n  <div *ngIf=\"isInvalid && (!inLine || !enteredAmount)\" class=\"error-message\">\r\n    {{ errorMessage }}\r\n  </div>\r\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.currency-input.inside{position:relative}.currency-input.inside input{padding-left:.75rem;padding-right:.75rem}.currency-input.inside .currency-symbol{position:absolute;top:50%;transform:translateY(-50%);color:#444;font-weight:700;pointer-events:none;white-space:nowrap}.currency-input.inside .currency-symbol.left{left:1%}.currency-input.inside .currency-symbol.left+input{padding-left:6ch}.currency-input.inside input+.currency-symbol.right{right:10px;padding-right:4ch}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: AggregationFunctionService }]; }, propDecorators: { question: [{
+            args: [{ selector: 'lib-currency-fields', template: "<div\n  [ngClass]=\"{ 'mb-4': !inLine }\"\n  class=\"px-3\"\n  [id]=\"(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id\"\n  [attr.name]=\"question.testElementName\"\n>\n  <div class=\"input-wrapper mb-2\" *ngIf=\"!inLine\">\n    <div *ngIf=\"question.questionNumber\" [innerHTML]=\"question.questionNumber\"></div>\n    <span *ngIf=\"question.questionNumber\" class=\"space\"></span>\n    <label>{{ question.question }}</label\n    >&nbsp;\n    <span class=\"text-danger\" *ngIf=\"question?.required\">*</span>\n    <div\n      class=\"svg-wrapper mb-2 hintIcon\"\n      [attr.data-title]=\"hint\"\n      *ngIf=\"hint\"\n    >\n      <svg\n        class=\"hintSvg\"\n        viewBox=\"0 0 30 30\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n          stroke=\"#323232\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <div class=\"currency-input inside\">\n    <span *ngIf=\"symbolPosition === 'Before the value'\" class=\"currency-symbol left\">\n      {{ currencySymbol }}\n    </span>\n\n    <input\n    type=\"text\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [class.hide-spin-buttons]=\"true\"\n    (blur)=\"validateNumber()\"\n    [(ngModel)]=\"enteredAmount\"\n    [class.invalid]=\"validationFailed\"\n    [class.invalid-question]=\"isInvalid && (!inLine || !enteredAmount)\"\n    (input)=\"validateInput($event)\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    (wheel)=\"preventNumberScroll($event)\"\n    [disabled]=\"disableEdit\"\n    />\n\n    <span *ngIf=\"symbolPosition === 'After the value'\" class=\"currency-symbol right\">\n        {{ currencySymbol }}\n    </span>\n\n  </div>\n  <div *ngIf=\"showAmountInWords && amountInWordsText\" class=\"amount-in-words\">\n    {{ amountInWordsText }}\n  </div>\n  <div *ngIf=\"isInvalid && (!inLine || !enteredAmount)\" class=\"error-message\">\n    {{ errorMessage }}\n  </div>\n  <div *ngIf=\"validationFailed && !isInvalid\" class=\"text-danger error-message\">\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}::ng-deep html lib-formSubmission{font-family:var(--library-font-family)!important;font-size:var(--library-font-size)!important}::ng-deep .timepicker-overlay{z-index:1000!important}::ng-deep .timepicker-backdrop-overlay{z-index:1000!important}.space{width:5px}.error-message{color:#f44336;font-size:.8em;margin-top:4px;padding:0 8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.invalid-question{border:2px solid #f44336;border-radius:4px;padding:8px;margin-bottom:4px}.currency-input.inside{position:relative}.currency-input.inside input{padding-left:.75rem;padding-right:.75rem}.currency-input.inside .currency-symbol{position:absolute;top:50%;transform:translateY(-50%);color:#444;font-weight:700;pointer-events:none;white-space:nowrap}.currency-input.inside .currency-symbol.left{left:1%}.currency-input.inside .currency-symbol.left+input{padding-left:6ch}.currency-input.inside input+.currency-symbol.right{right:10px;padding-right:4ch}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValidationService }, { type: ElementTrackerService }, { type: AggregationFunctionService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -6873,10 +7065,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class HiddenFieldComponent {
-    constructor(tracker, dataService, whenClauseService) {
+    constructor(tracker, dataService, whenClauseService, hiddenFieldService) {
         this.tracker = tracker;
         this.dataService = dataService;
         this.whenClauseService = whenClauseService;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = {};
         this.inLine = false;
         this.inCard = false;
@@ -6885,13 +7078,27 @@ class HiddenFieldComponent {
         this.key = '';
         this.valueSource = '';
         this.value = '';
+        this.updateOn = '';
         this.user = '';
         this.elementId = '';
+        this.isEdit = this.hiddenFieldService.getEditMode();
         this.dataService.header$.subscribe((data) => {
             this.user = data.authUser;
         });
     }
     ngOnInit() {
+        if (!this.inCard || !this.inLine) {
+            this.hiddenFieldService.setHiddenField(this.question.id, this.question);
+        }
+        this.subscription = this.hiddenFieldService.hiddenFieldResults$.subscribe((update) => {
+            if (update && update.id === this.question.id) {
+                // include rowId
+                if (this.isEdit &&
+                    (this.updateOn == 'UPDATE' || this.updateOn == 'BOTH')) {
+                    this.question.answer = update.result;
+                }
+            }
+        });
         this.valueAssigned();
     }
     valueAssigned() {
@@ -6900,20 +7107,8 @@ class HiddenFieldComponent {
         this.key = this.hiddenField?.key;
         this.value = this.hiddenField?.value;
         this.valueSource = this.hiddenField?.valueSource;
-        const sourcesThatShouldNotOverride = [
-            'PREDEFINED_VARIABLE',
-            'LOCAL_STORAGE',
-            'SESSION_STORAGE'
-        ];
-        const hasExistingAnswer = this.question.answer !== null &&
-            this.question.answer !== undefined &&
-            this.question.answer !== '';
-        // 🚨 Skip overwrite if answer exists for specific sources
-        if (sourcesThatShouldNotOverride.includes(this.valueSource) &&
-            hasExistingAnswer) {
-            // Do nothing — keep existing answer
-        }
-        else {
+        this.updateOn = this.hiddenField?.updateOn;
+        if (!this.isEdit || !this.question.answer) {
             this.question.answer = this.resolveHiddenFieldValue(this.hiddenField);
         }
         setTimeout(() => {
@@ -6921,7 +7116,7 @@ class HiddenFieldComponent {
         });
         this.answerChange.emit({
             answer: this.question.answer,
-            maxPossibleScore: 0
+            maxPossibleScore: 0,
         });
     }
     resolveHiddenFieldValue(hiddenField) {
@@ -6985,14 +7180,17 @@ class HiddenFieldComponent {
         if (this.elementId) {
             this.tracker.unregisterElement(this.elementId);
         }
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenFieldComponent, deps: [{ token: ElementTrackerService }, { token: DataService }, { token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenFieldComponent, deps: [{ token: ElementTrackerService }, { token: DataService }, { token: WhenClauseService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: { question: "question", inLine: "inLine", inCard: "inCard", submissionIndex: "submissionIndex" }, outputs: { answerChange: "answerChange" }, ngImport: i0, template: '', isInline: true, styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-hidden-field', template: '' }]
-        }], ctorParameters: function () { return [{ type: ElementTrackerService }, { type: DataService }, { type: WhenClauseService }]; }, propDecorators: { question: [{
+        }], ctorParameters: function () { return [{ type: ElementTrackerService }, { type: DataService }, { type: WhenClauseService }, { type: HiddenFieldService }]; }, propDecorators: { question: [{
                 type: Input
             }], inLine: [{
                 type: Input
@@ -7073,26 +7271,26 @@ class IframeFieldsComponent {
         const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
         if (iframeDoc) {
             // Build the complete HTML content to inject into the iframe
-            const safeHtml = `
-        <html>
-          <head>
-            <style>${this.cssContent || ''}</style>
-          </head>
-          <body>
-            ${this.htmlContent || ''}
-            <script>
-              (function(localStorage) {
-                try {
+            const safeHtml = `
+        <html>
+          <head>
+            <style>${this.cssContent || ''}</style>
+          </head>
+          <body>
+            ${this.htmlContent || ''}
+            <script>
+              (function(localStorage) {
+                try {
                   ${this.isSafeScript(this.scriptContent)
                 ? this.scriptContent
-                : ''}
-                } catch (e) {
-                  document.body.innerHTML += '<p style="color:red">Script Error: ' + e.message + '</p>';
-                }
-              })(window.localStorage);
-            </script>
-          </body>
-        </html>
+                : ''}
+                } catch (e) {
+                  document.body.innerHTML += '<p style="color:red">Script Error: ' + e.message + '</p>';
+                }
+              })(window.localStorage);
+            </script>
+          </body>
+        </html>
       `;
             iframeDoc.open();
             iframeDoc.write(safeHtml);
@@ -7186,11 +7384,11 @@ class IframeFieldsComponent {
         return !unsafePatterns.some((pattern) => pattern.test(code));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IframeFieldsComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: { question: "question" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframeRef"], descendants: true }], ngImport: i0, template: "<div class=\"custom-embed mb-4\"\r\n     [style.width]=\"width\"\r\n     [style.height]=\"height\">\r\n\r\n  <ng-container [ngSwitch]=\"contentType\">\r\n\r\n    <!-- HTML, CSS, and Script rendered together -->\r\n    <iframe\r\n      *ngSwitchCase=\"'HTML'\"\r\n      #iframeRef\r\n      sandbox=\"allow-scripts allow-same-origin\"\r\n      [style.width]=\"width\"\r\n      [style.height]=\"height\"\r\n      frameborder=\"0\"\r\n    ></iframe>\r\n\r\n    <!-- Link Embed -->\r\n     <div *ngSwitchCase=\"'LINK'\">\r\n     <iframe\r\n     *ngIf=\"safeUrl\"\r\n     [src]=\"safeUrl\"\r\n     [style.width]=\"width\"\r\n     [style.height]=\"height\"\r\n     frameborder=\"0\"\r\n     allowfullscreen>\r\n   </iframe>\r\n     </div>\r\n    \r\n\r\n  </ng-container>\r\n</div>\r\n", styles: [""], dependencies: [{ 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: { question: "question" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframeRef"], descendants: true }], ngImport: i0, template: "<div class=\"custom-embed mb-4\"\n     [style.width]=\"width\"\n     [style.height]=\"height\">\n\n  <ng-container [ngSwitch]=\"contentType\">\n\n    <!-- HTML, CSS, and Script rendered together -->\n    <iframe\n      *ngSwitchCase=\"'HTML'\"\n      #iframeRef\n      sandbox=\"allow-scripts allow-same-origin\"\n      [style.width]=\"width\"\n      [style.height]=\"height\"\n      frameborder=\"0\"\n    ></iframe>\n\n    <!-- Link Embed -->\n     <div *ngSwitchCase=\"'LINK'\">\n     <iframe\n     *ngIf=\"safeUrl\"\n     [src]=\"safeUrl\"\n     [style.width]=\"width\"\n     [style.height]=\"height\"\n     frameborder=\"0\"\n     allowfullscreen>\n   </iframe>\n     </div>\n    \n\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IframeFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-iframe-fields', template: "<div class=\"custom-embed mb-4\"\r\n     [style.width]=\"width\"\r\n     [style.height]=\"height\">\r\n\r\n  <ng-container [ngSwitch]=\"contentType\">\r\n\r\n    <!-- HTML, CSS, and Script rendered together -->\r\n    <iframe\r\n      *ngSwitchCase=\"'HTML'\"\r\n      #iframeRef\r\n      sandbox=\"allow-scripts allow-same-origin\"\r\n      [style.width]=\"width\"\r\n      [style.height]=\"height\"\r\n      frameborder=\"0\"\r\n    ></iframe>\r\n\r\n    <!-- Link Embed -->\r\n     <div *ngSwitchCase=\"'LINK'\">\r\n     <iframe\r\n     *ngIf=\"safeUrl\"\r\n     [src]=\"safeUrl\"\r\n     [style.width]=\"width\"\r\n     [style.height]=\"height\"\r\n     frameborder=\"0\"\r\n     allowfullscreen>\r\n   </iframe>\r\n     </div>\r\n    \r\n\r\n  </ng-container>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-iframe-fields', template: "<div class=\"custom-embed mb-4\"\n     [style.width]=\"width\"\n     [style.height]=\"height\">\n\n  <ng-container [ngSwitch]=\"contentType\">\n\n    <!-- HTML, CSS, and Script rendered together -->\n    <iframe\n      *ngSwitchCase=\"'HTML'\"\n      #iframeRef\n      sandbox=\"allow-scripts allow-same-origin\"\n      [style.width]=\"width\"\n      [style.height]=\"height\"\n      frameborder=\"0\"\n    ></iframe>\n\n    <!-- Link Embed -->\n     <div *ngSwitchCase=\"'LINK'\">\n     <iframe\n     *ngIf=\"safeUrl\"\n     [src]=\"safeUrl\"\n     [style.width]=\"width\"\n     [style.height]=\"height\"\n     frameborder=\"0\"\n     allowfullscreen>\n   </iframe>\n     </div>\n    \n\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { question: [{
                 type: Input
             }], iframeRef: [{
@@ -7298,11 +7496,11 @@ class QuestionComponent {
         this.cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuestionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QuestionComponent, selector: "lib-question", inputs: { question: "question", edit: "edit", acceptedLanguage: "acceptedLanguage", currentPageIndex: "currentPageIndex" }, outputs: { emitValidations: "emitValidations", subFormChange: "subFormChange" }, ngImport: i0, template: "<div [ngSwitch]=\"question.formElement.elementType\">\r\n\r\n  <lib-check-box-fields *ngSwitchCase=\"'CHECK_BOX'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-check-box-fields>\r\n  <lib-date-time-fields *ngSwitchCase=\"'DATE_TIME'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-date-time-fields>\r\n  <lib-drop-down-fields *ngSwitchCase=\"'DROP_DOWN'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-drop-down-fields>\r\n  <lib-file-picker-fields *ngSwitchCase=\"'FILE_PICKER'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-file-picker-fields>\r\n  <lib-location-fields *ngSwitchCase=\"'LOCATION'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-location-fields>\r\n  <lib-mail-fields *ngSwitchCase=\"'EMAIL'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-mail-fields>\r\n  <lib-mobile-fields *ngSwitchCase=\"'MOBILE'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-mobile-fields>\r\n  <lib-number-fields *ngSwitchCase=\"'NUMBER'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-number-fields>\r\n  <lib-password-fields *ngSwitchCase=\"'PASSWORD'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-password-fields>\r\n  <lib-radio-button-fields *ngSwitchCase=\"'RADIO_BUTTON'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-radio-button-fields>\r\n  <lib-rich-text-editor-fields *ngSwitchCase=\"'RICH_TEXT_EDITOR'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-rich-text-editor-fields>\r\n  <lib-selection-matrix-fields *ngSwitchCase=\"'SELECTION_MATRIX'\" [question]=\"question\" [acceptedLanguage]=\"acceptedLanguage\" (validate)=\"handleValidation($event)\"></lib-selection-matrix-fields>\r\n  <lib-signature-fields *ngSwitchCase=\"'SIGNATURE'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-signature-fields>\r\n  <lib-slider-fields *ngSwitchCase=\"'SLIDER'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-slider-fields>\r\n  <lib-terms-and-condition-fields *ngSwitchCase=\"'TERMS_AND_CONDITION'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-terms-and-condition-fields>\r\n  <lib-text-area-fields *ngSwitchCase=\"'TEXT_AREA'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-text-area-fields>\r\n  <lib-text-fields *ngSwitchCase=\"'TEXT_BOX'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-text-fields>\r\n  <lib-toggle-switch-fields *ngSwitchCase=\"'TOGGLE_SWITCH'\" [question]=\"question\" [acceptedLanguage]=\"acceptedLanguage\" (validate)=\"handleValidation($event)\"></lib-toggle-switch-fields>\r\n  <lib-url-fields *ngSwitchCase=\"'URL'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-url-fields>\r\n  <lib-aggregate-function *ngSwitchCase=\"'AGGREGATE_FUNCTION'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-aggregate-function>\r\n  <lib-currency-fields *ngSwitchCase=\"'CURRENCY'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-currency-fields>\r\n  <lib-hidden-field *ngSwitchCase=\"'HIDDEN_FIELD'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-hidden-field>\r\n  <lib-iframe-fields *ngSwitchCase=\"'IFRAME_WIDGET'\" [question]=\"question\" ></lib-iframe-fields>\r\n</div>\r\n\r\n<ng-container *ngIf=\"question.childLogics\">\r\n\r\n  <!-- <ng-container *ngIf=\"componentToLoad\">\r\n    <ng-container *ngComponentOutlet=\"componentToLoad;\r\n                                      inputs: { grid: question.childLogics,\r\n                                                answer: question.answer,\r\n                                                state: 'child' }\"></ng-container>\r\n  </ng-container> -->\r\n\r\n  <!-- <ng-container *ngIf=\"getComponentForChildLogics(question.childLogics, 'child', question.answer) as cached\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"cached.component | async; injector: cached.injector\">\r\n    </ng-container>\r\n  </ng-container> -->\r\n\r\n\r\n  <ng-container *ngIf=\"componentToLoad\">\r\n\r\n                      <ng-container *ngComponentOutlet=\"componentToLoad;\r\n                                                        inputs: { grid: question.childLogics,\r\n                                                                  answer: question?.answer,\r\n                                                                  state: 'child' }\"></ng-container>\r\n                    </ng-container>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: ["question"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QuestionComponent, selector: "lib-question", inputs: { question: "question", edit: "edit", acceptedLanguage: "acceptedLanguage", currentPageIndex: "currentPageIndex" }, outputs: { emitValidations: "emitValidations", subFormChange: "subFormChange" }, ngImport: i0, template: "<div [ngSwitch]=\"question.formElement.elementType\">\n\n  <lib-check-box-fields *ngSwitchCase=\"'CHECK_BOX'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-check-box-fields>\n  <lib-date-time-fields *ngSwitchCase=\"'DATE_TIME'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-date-time-fields>\n  <lib-drop-down-fields *ngSwitchCase=\"'DROP_DOWN'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-drop-down-fields>\n  <lib-file-picker-fields *ngSwitchCase=\"'FILE_PICKER'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-file-picker-fields>\n  <lib-location-fields *ngSwitchCase=\"'LOCATION'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-location-fields>\n  <lib-mail-fields *ngSwitchCase=\"'EMAIL'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-mail-fields>\n  <lib-mobile-fields *ngSwitchCase=\"'MOBILE'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-mobile-fields>\n  <lib-number-fields *ngSwitchCase=\"'NUMBER'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-number-fields>\n  <lib-password-fields *ngSwitchCase=\"'PASSWORD'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-password-fields>\n  <lib-radio-button-fields *ngSwitchCase=\"'RADIO_BUTTON'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-radio-button-fields>\n  <lib-rich-text-editor-fields *ngSwitchCase=\"'RICH_TEXT_EDITOR'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-rich-text-editor-fields>\n  <lib-selection-matrix-fields *ngSwitchCase=\"'SELECTION_MATRIX'\" [question]=\"question\" [acceptedLanguage]=\"acceptedLanguage\" (validate)=\"handleValidation($event)\"></lib-selection-matrix-fields>\n  <lib-signature-fields *ngSwitchCase=\"'SIGNATURE'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-signature-fields>\n  <lib-slider-fields *ngSwitchCase=\"'SLIDER'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-slider-fields>\n  <lib-terms-and-condition-fields *ngSwitchCase=\"'TERMS_AND_CONDITION'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-terms-and-condition-fields>\n  <lib-text-area-fields *ngSwitchCase=\"'TEXT_AREA'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-text-area-fields>\n  <lib-text-fields *ngSwitchCase=\"'TEXT_BOX'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-text-fields>\n  <lib-toggle-switch-fields *ngSwitchCase=\"'TOGGLE_SWITCH'\" [question]=\"question\" [acceptedLanguage]=\"acceptedLanguage\" (validate)=\"handleValidation($event)\"></lib-toggle-switch-fields>\n  <lib-url-fields *ngSwitchCase=\"'URL'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-url-fields>\n  <lib-aggregate-function *ngSwitchCase=\"'AGGREGATE_FUNCTION'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-aggregate-function>\n  <lib-currency-fields *ngSwitchCase=\"'CURRENCY'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-currency-fields>\n  <lib-hidden-field *ngSwitchCase=\"'HIDDEN_FIELD'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-hidden-field>\n  <lib-iframe-fields *ngSwitchCase=\"'IFRAME_WIDGET'\" [question]=\"question\" ></lib-iframe-fields>\n</div>\n\n<ng-container *ngIf=\"question.childLogics\">\n\n  <!-- <ng-container *ngIf=\"componentToLoad\">\n    <ng-container *ngComponentOutlet=\"componentToLoad;\n                                      inputs: { grid: question.childLogics,\n                                                answer: question.answer,\n                                                state: 'child' }\"></ng-container>\n  </ng-container> -->\n\n  <!-- <ng-container *ngIf=\"getComponentForChildLogics(question.childLogics, 'child', question.answer) as cached\">\n    <ng-container\n      *ngComponentOutlet=\"cached.component | async; injector: cached.injector\">\n    </ng-container>\n  </ng-container> -->\n\n\n  <ng-container *ngIf=\"componentToLoad\">\n\n                      <ng-container *ngComponentOutlet=\"componentToLoad;\n                                                        inputs: { grid: question.childLogics,\n                                                                  answer: question?.answer,\n                                                                  state: 'child' }\"></ng-container>\n                    </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: ["question"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question', template: "<div [ngSwitch]=\"question.formElement.elementType\">\r\n\r\n  <lib-check-box-fields *ngSwitchCase=\"'CHECK_BOX'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-check-box-fields>\r\n  <lib-date-time-fields *ngSwitchCase=\"'DATE_TIME'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-date-time-fields>\r\n  <lib-drop-down-fields *ngSwitchCase=\"'DROP_DOWN'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-drop-down-fields>\r\n  <lib-file-picker-fields *ngSwitchCase=\"'FILE_PICKER'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-file-picker-fields>\r\n  <lib-location-fields *ngSwitchCase=\"'LOCATION'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-location-fields>\r\n  <lib-mail-fields *ngSwitchCase=\"'EMAIL'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-mail-fields>\r\n  <lib-mobile-fields *ngSwitchCase=\"'MOBILE'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-mobile-fields>\r\n  <lib-number-fields *ngSwitchCase=\"'NUMBER'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-number-fields>\r\n  <lib-password-fields *ngSwitchCase=\"'PASSWORD'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-password-fields>\r\n  <lib-radio-button-fields *ngSwitchCase=\"'RADIO_BUTTON'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-radio-button-fields>\r\n  <lib-rich-text-editor-fields *ngSwitchCase=\"'RICH_TEXT_EDITOR'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-rich-text-editor-fields>\r\n  <lib-selection-matrix-fields *ngSwitchCase=\"'SELECTION_MATRIX'\" [question]=\"question\" [acceptedLanguage]=\"acceptedLanguage\" (validate)=\"handleValidation($event)\"></lib-selection-matrix-fields>\r\n  <lib-signature-fields *ngSwitchCase=\"'SIGNATURE'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-signature-fields>\r\n  <lib-slider-fields *ngSwitchCase=\"'SLIDER'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-slider-fields>\r\n  <lib-terms-and-condition-fields *ngSwitchCase=\"'TERMS_AND_CONDITION'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-terms-and-condition-fields>\r\n  <lib-text-area-fields *ngSwitchCase=\"'TEXT_AREA'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-text-area-fields>\r\n  <lib-text-fields *ngSwitchCase=\"'TEXT_BOX'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-text-fields>\r\n  <lib-toggle-switch-fields *ngSwitchCase=\"'TOGGLE_SWITCH'\" [question]=\"question\" [acceptedLanguage]=\"acceptedLanguage\" (validate)=\"handleValidation($event)\"></lib-toggle-switch-fields>\r\n  <lib-url-fields *ngSwitchCase=\"'URL'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-url-fields>\r\n  <lib-aggregate-function *ngSwitchCase=\"'AGGREGATE_FUNCTION'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-aggregate-function>\r\n  <lib-currency-fields *ngSwitchCase=\"'CURRENCY'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-currency-fields>\r\n  <lib-hidden-field *ngSwitchCase=\"'HIDDEN_FIELD'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-hidden-field>\r\n  <lib-iframe-fields *ngSwitchCase=\"'IFRAME_WIDGET'\" [question]=\"question\" ></lib-iframe-fields>\r\n</div>\r\n\r\n<ng-container *ngIf=\"question.childLogics\">\r\n\r\n  <!-- <ng-container *ngIf=\"componentToLoad\">\r\n    <ng-container *ngComponentOutlet=\"componentToLoad;\r\n                                      inputs: { grid: question.childLogics,\r\n                                                answer: question.answer,\r\n                                                state: 'child' }\"></ng-container>\r\n  </ng-container> -->\r\n\r\n  <!-- <ng-container *ngIf=\"getComponentForChildLogics(question.childLogics, 'child', question.answer) as cached\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"cached.component | async; injector: cached.injector\">\r\n    </ng-container>\r\n  </ng-container> -->\r\n\r\n\r\n  <ng-container *ngIf=\"componentToLoad\">\r\n\r\n                      <ng-container *ngComponentOutlet=\"componentToLoad;\r\n                                                        inputs: { grid: question.childLogics,\r\n                                                                  answer: question?.answer,\r\n                                                                  state: 'child' }\"></ng-container>\r\n                    </ng-container>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'lib-question', template: "<div [ngSwitch]=\"question.formElement.elementType\">\n\n  <lib-check-box-fields *ngSwitchCase=\"'CHECK_BOX'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-check-box-fields>\n  <lib-date-time-fields *ngSwitchCase=\"'DATE_TIME'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-date-time-fields>\n  <lib-drop-down-fields *ngSwitchCase=\"'DROP_DOWN'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-drop-down-fields>\n  <lib-file-picker-fields *ngSwitchCase=\"'FILE_PICKER'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-file-picker-fields>\n  <lib-location-fields *ngSwitchCase=\"'LOCATION'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-location-fields>\n  <lib-mail-fields *ngSwitchCase=\"'EMAIL'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-mail-fields>\n  <lib-mobile-fields *ngSwitchCase=\"'MOBILE'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-mobile-fields>\n  <lib-number-fields *ngSwitchCase=\"'NUMBER'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-number-fields>\n  <lib-password-fields *ngSwitchCase=\"'PASSWORD'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-password-fields>\n  <lib-radio-button-fields *ngSwitchCase=\"'RADIO_BUTTON'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-radio-button-fields>\n  <lib-rich-text-editor-fields *ngSwitchCase=\"'RICH_TEXT_EDITOR'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-rich-text-editor-fields>\n  <lib-selection-matrix-fields *ngSwitchCase=\"'SELECTION_MATRIX'\" [question]=\"question\" [acceptedLanguage]=\"acceptedLanguage\" (validate)=\"handleValidation($event)\"></lib-selection-matrix-fields>\n  <lib-signature-fields *ngSwitchCase=\"'SIGNATURE'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-signature-fields>\n  <lib-slider-fields *ngSwitchCase=\"'SLIDER'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-slider-fields>\n  <lib-terms-and-condition-fields *ngSwitchCase=\"'TERMS_AND_CONDITION'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-terms-and-condition-fields>\n  <lib-text-area-fields *ngSwitchCase=\"'TEXT_AREA'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-text-area-fields>\n  <lib-text-fields *ngSwitchCase=\"'TEXT_BOX'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-text-fields>\n  <lib-toggle-switch-fields *ngSwitchCase=\"'TOGGLE_SWITCH'\" [question]=\"question\" [acceptedLanguage]=\"acceptedLanguage\" (validate)=\"handleValidation($event)\"></lib-toggle-switch-fields>\n  <lib-url-fields *ngSwitchCase=\"'URL'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-url-fields>\n  <lib-aggregate-function *ngSwitchCase=\"'AGGREGATE_FUNCTION'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-aggregate-function>\n  <lib-currency-fields *ngSwitchCase=\"'CURRENCY'\" [question]=\"question\" (validate)=\"handleValidation($event)\" [rowId]=\"'0'\"></lib-currency-fields>\n  <lib-hidden-field *ngSwitchCase=\"'HIDDEN_FIELD'\" [question]=\"question\" (validate)=\"handleValidation($event)\"></lib-hidden-field>\n  <lib-iframe-fields *ngSwitchCase=\"'IFRAME_WIDGET'\" [question]=\"question\" ></lib-iframe-fields>\n</div>\n\n<ng-container *ngIf=\"question.childLogics\">\n\n  <!-- <ng-container *ngIf=\"componentToLoad\">\n    <ng-container *ngComponentOutlet=\"componentToLoad;\n                                      inputs: { grid: question.childLogics,\n                                                answer: question.answer,\n                                                state: 'child' }\"></ng-container>\n  </ng-container> -->\n\n  <!-- <ng-container *ngIf=\"getComponentForChildLogics(question.childLogics, 'child', question.answer) as cached\">\n    <ng-container\n      *ngComponentOutlet=\"cached.component | async; injector: cached.injector\">\n    </ng-container>\n  </ng-container> -->\n\n\n  <ng-container *ngIf=\"componentToLoad\">\n\n                      <ng-container *ngComponentOutlet=\"componentToLoad;\n                                                        inputs: { grid: question.childLogics,\n                                                                  answer: question?.answer,\n                                                                  state: 'child' }\"></ng-container>\n                    </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { question: [{
                 type: Input
             }], edit: [{
@@ -7330,11 +7528,11 @@ class ConfirmDialogComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmDialogComponent, selector: "lib-confirm-dialog", ngImport: i0, template: "<div class=\"\" id=\"checkdeleteModal\" tabindex=\"-1\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modalHeader\">\r\n        <div class=\"title-div\">\r\n        </div>\r\n        <div class=\"header-btn\">\r\n            <img (click)=\"closeModal()\" src=\"/assets/icons/close-sidebar-mark-icon.svg\" alt=\"Close Sidebar Icon\">          \r\n        </div>\r\n    </div>\r\n      <div class=\"modalBody\">\r\n        <div class=\"row text-center\">\r\n            <img class=\"delete-icon\" src=\"/assets/icons/delete-no-outline-icon.svg\" alt=\"Delete Icon\"> \r\n            <p class=\"delete-confirm\">{{messageHeader}}</p>\r\n            <p class=\"delete-dialog\">{{message}}</p>\r\n        </div>\r\n      </div>\r\n      <div class=\"modalFooter\">\r\n        <div class=\"footer-btn \">\r\n        <button type=\"button\" class=\"delete-btn\"\r\n        (click)=\"dialogRef.close(true)\"\r\n       >Yes</button>\r\n        <button class=\"cancel-btn\"\r\n        (click)=\"dialogRef.close(false)\"\r\n        type=\"button\">\r\n            No\r\n        </button>\r\n      </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\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{width:105px;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%}.modalHeader .header-btn img{width:2em;cursor:pointer}.modalBody{padding:4%}.appearanceInput{box-sizing:border-box;width:100%;left:1043px;top:346px;background:#fff;border:1px solid #D8D8D8;box-shadow:0 4px 4px -5px #00000040;border-radius:6px;margin-bottom:3%;padding:3%}.hintModalFooter{margin:5%;display:flex;justify-content:flex-end}.hintModalFooter .footer-btn button{width:102px;height:46px;border-radius:23px;background:#084fff;color:#fff;border:0}.modalFooter .footer-btn{margin-bottom:11%;display:flex;justify-content:center}.modalFooter .footer-btn .delete-btn{width:102px;height:46px;border-radius:23px;background:#084fff;color:#fff;border:0;margin-left:2%;font-size:14px;font-weight:500}.modalFooter .footer-btn .cancel-btn{width:102px;height:46px;border-radius:23px;background:#8e9aa0;color:#fff;border:0;margin-left:2%;font-size:14px;font-weight:500}.modal-dialog{top:30%}.delete-confirm{font-size:24px;font-weight:500;margin-top:2%}.delete-dialog{font-size:15px;font-weight:400;color:#8e9aa0;margin-top:2%}.delete-icon{width:70px;margin:0 auto}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmDialogComponent, selector: "lib-confirm-dialog", ngImport: i0, template: "<div class=\"\" id=\"checkdeleteModal\" tabindex=\"-1\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n      <div class=\"modalHeader\">\n        <div class=\"title-div\">\n        </div>\n        <div class=\"header-btn\">\n            <img (click)=\"closeModal()\" src=\"/assets/icons/close-sidebar-mark-icon.svg\" alt=\"Close Sidebar Icon\">          \n        </div>\n    </div>\n      <div class=\"modalBody\">\n        <div class=\"row text-center\">\n            <img class=\"delete-icon\" src=\"/assets/icons/delete-no-outline-icon.svg\" alt=\"Delete Icon\"> \n            <p class=\"delete-confirm\">{{messageHeader}}</p>\n            <p class=\"delete-dialog\">{{message}}</p>\n        </div>\n      </div>\n      <div class=\"modalFooter\">\n        <div class=\"footer-btn \">\n        <button type=\"button\" class=\"delete-btn\"\n        (click)=\"dialogRef.close(true)\"\n       >Yes</button>\n        <button class=\"cancel-btn\"\n        (click)=\"dialogRef.close(false)\"\n        type=\"button\">\n            No\n        </button>\n      </div>\n      </div>\n    </div>\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{width:105px;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%}.modalHeader .header-btn img{width:2em;cursor:pointer}.modalBody{padding:4%}.appearanceInput{box-sizing:border-box;width:100%;left:1043px;top:346px;background:#fff;border:1px solid #D8D8D8;box-shadow:0 4px 4px -5px #00000040;border-radius:6px;margin-bottom:3%;padding:3%}.hintModalFooter{margin:5%;display:flex;justify-content:flex-end}.hintModalFooter .footer-btn button{width:102px;height:46px;border-radius:23px;background:#084fff;color:#fff;border:0}.modalFooter .footer-btn{margin-bottom:11%;display:flex;justify-content:center}.modalFooter .footer-btn .delete-btn{width:102px;height:46px;border-radius:23px;background:#084fff;color:#fff;border:0;margin-left:2%;font-size:14px;font-weight:500}.modalFooter .footer-btn .cancel-btn{width:102px;height:46px;border-radius:23px;background:#8e9aa0;color:#fff;border:0;margin-left:2%;font-size:14px;font-weight:500}.modal-dialog{top:30%}.delete-confirm{font-size:24px;font-weight:500;margin-top:2%}.delete-dialog{font-size:15px;font-weight:400;color:#8e9aa0;margin-top:2%}.delete-icon{width:70px;margin:0 auto}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-confirm-dialog', template: "<div class=\"\" id=\"checkdeleteModal\" tabindex=\"-1\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modalHeader\">\r\n        <div class=\"title-div\">\r\n        </div>\r\n        <div class=\"header-btn\">\r\n            <img (click)=\"closeModal()\" src=\"/assets/icons/close-sidebar-mark-icon.svg\" alt=\"Close Sidebar Icon\">          \r\n        </div>\r\n    </div>\r\n      <div class=\"modalBody\">\r\n        <div class=\"row text-center\">\r\n            <img class=\"delete-icon\" src=\"/assets/icons/delete-no-outline-icon.svg\" alt=\"Delete Icon\"> \r\n            <p class=\"delete-confirm\">{{messageHeader}}</p>\r\n            <p class=\"delete-dialog\">{{message}}</p>\r\n        </div>\r\n      </div>\r\n      <div class=\"modalFooter\">\r\n        <div class=\"footer-btn \">\r\n        <button type=\"button\" class=\"delete-btn\"\r\n        (click)=\"dialogRef.close(true)\"\r\n       >Yes</button>\r\n        <button class=\"cancel-btn\"\r\n        (click)=\"dialogRef.close(false)\"\r\n        type=\"button\">\r\n            No\r\n        </button>\r\n      </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\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{width:105px;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%}.modalHeader .header-btn img{width:2em;cursor:pointer}.modalBody{padding:4%}.appearanceInput{box-sizing:border-box;width:100%;left:1043px;top:346px;background:#fff;border:1px solid #D8D8D8;box-shadow:0 4px 4px -5px #00000040;border-radius:6px;margin-bottom:3%;padding:3%}.hintModalFooter{margin:5%;display:flex;justify-content:flex-end}.hintModalFooter .footer-btn button{width:102px;height:46px;border-radius:23px;background:#084fff;color:#fff;border:0}.modalFooter .footer-btn{margin-bottom:11%;display:flex;justify-content:center}.modalFooter .footer-btn .delete-btn{width:102px;height:46px;border-radius:23px;background:#084fff;color:#fff;border:0;margin-left:2%;font-size:14px;font-weight:500}.modalFooter .footer-btn .cancel-btn{width:102px;height:46px;border-radius:23px;background:#8e9aa0;color:#fff;border:0;margin-left:2%;font-size:14px;font-weight:500}.modal-dialog{top:30%}.delete-confirm{font-size:24px;font-weight:500;margin-top:2%}.delete-dialog{font-size:15px;font-weight:400;color:#8e9aa0;margin-top:2%}.delete-icon{width:70px;margin:0 auto}\n"] }]
+            args: [{ selector: 'lib-confirm-dialog', template: "<div class=\"\" id=\"checkdeleteModal\" tabindex=\"-1\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n      <div class=\"modalHeader\">\n        <div class=\"title-div\">\n        </div>\n        <div class=\"header-btn\">\n            <img (click)=\"closeModal()\" src=\"/assets/icons/close-sidebar-mark-icon.svg\" alt=\"Close Sidebar Icon\">          \n        </div>\n    </div>\n      <div class=\"modalBody\">\n        <div class=\"row text-center\">\n            <img class=\"delete-icon\" src=\"/assets/icons/delete-no-outline-icon.svg\" alt=\"Delete Icon\"> \n            <p class=\"delete-confirm\">{{messageHeader}}</p>\n            <p class=\"delete-dialog\">{{message}}</p>\n        </div>\n      </div>\n      <div class=\"modalFooter\">\n        <div class=\"footer-btn \">\n        <button type=\"button\" class=\"delete-btn\"\n        (click)=\"dialogRef.close(true)\"\n       >Yes</button>\n        <button class=\"cancel-btn\"\n        (click)=\"dialogRef.close(false)\"\n        type=\"button\">\n            No\n        </button>\n      </div>\n      </div>\n    </div>\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{width:105px;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%}.modalHeader .header-btn img{width:2em;cursor:pointer}.modalBody{padding:4%}.appearanceInput{box-sizing:border-box;width:100%;left:1043px;top:346px;background:#fff;border:1px solid #D8D8D8;box-shadow:0 4px 4px -5px #00000040;border-radius:6px;margin-bottom:3%;padding:3%}.hintModalFooter{margin:5%;display:flex;justify-content:flex-end}.hintModalFooter .footer-btn button{width:102px;height:46px;border-radius:23px;background:#084fff;color:#fff;border:0}.modalFooter .footer-btn{margin-bottom:11%;display:flex;justify-content:center}.modalFooter .footer-btn .delete-btn{width:102px;height:46px;border-radius:23px;background:#084fff;color:#fff;border:0;margin-left:2%;font-size:14px;font-weight:500}.modalFooter .footer-btn .cancel-btn{width:102px;height:46px;border-radius:23px;background:#8e9aa0;color:#fff;border:0;margin-left:2%;font-size:14px;font-weight:500}.modal-dialog{top:30%}.delete-confirm{font-size:24px;font-weight:500;margin-top:2%}.delete-dialog{font-size:15px;font-weight:400;color:#8e9aa0;margin-top:2%}.delete-icon{width:70px;margin:0 auto}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -7552,11 +7750,11 @@ class SubmissionModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmissionModalComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: ValidationService }, { token: i1$3.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\">\r\n    <div class=\"modalHeader mb-4\">\r\n        <div class=\"title-div\">\r\n            <p class=\"title\">{{subForm.title}}</p>\r\n        </div>\r\n        <div class=\"header-btn\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"closeModal()\">\r\n                <path d=\"M8 8L16 16\" stroke=\"#1D252D\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M16 8L8 16\" stroke=\"#1D252D\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"px-3\" *ngFor=\"let row of subForm.rows\">\r\n      <ng-container *ngFor=\"let formElement of row.grid\">\r\n        <div *ngIf=\"formElement.entityType === 'QUESTION'\">\r\n          <lib-check-box-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-check-box-fields>\r\n          <lib-date-time-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-date-time-fields>\r\n          <lib-drop-down-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-drop-down-fields>\r\n          <lib-file-picker-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType === 'FILE_PICKER'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n          ></lib-file-picker-fields>\r\n          <lib-location-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-location-fields>\r\n\r\n          <lib-mail-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\r\n            [question]=\"formElement.element\"\r\n          >\r\n          </lib-mail-fields>\r\n          <lib-mobile-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\r\n            [question]=\"formElement.element\"\r\n          >\r\n          </lib-mobile-fields>\r\n          <lib-number-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\r\n            [question]=\"formElement.element\"\r\n            [rowId]=\"'0'\"\r\n          >\r\n          </lib-number-fields>\r\n          <lib-password-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\r\n            [question]=\"formElement.element\"\r\n          >\r\n          </lib-password-fields>\r\n          <lib-radio-button-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType === 'RADIO_BUTTON'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n          ></lib-radio-button-fields>\r\n          <lib-rich-text-editor-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n          ></lib-rich-text-editor-fields>\r\n          <lib-selection-matrix-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType === 'SELECTION_MATRIX'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n            [acceptedLanguage] = \"acceptedLanguage\"\r\n          ></lib-selection-matrix-fields>\r\n          <lib-signature-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-signature-fields>\r\n          <lib-slider-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-slider-fields>\r\n          <lib-terms-and-condition-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType ===\r\n              'TERMS_AND_CONDITION'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n          ></lib-terms-and-condition-fields>\r\n          <lib-text-area-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-text-area-fields>\r\n          <lib-text-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-text-fields>\r\n          <lib-toggle-switch-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n            [acceptedLanguage] = \"acceptedLanguage\"\r\n          ></lib-toggle-switch-fields>\r\n          <lib-url-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-url-fields>\r\n          <lib-currency-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'CURRENCY'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-currency-fields>\r\n          <lib-hidden-field\r\n            *ngIf=\"formElement.element.formElement.elementType === 'HIDDEN_FIELD'\"\r\n            [question]=\"formElement.element\"\r\n            ></lib-hidden-field>\r\n            <lib-iframe-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'IFRAME_WIDGET'\"\r\n            [question]=\"formElement.element\"\r\n            ></lib-iframe-fields>\r\n          <lib-aggregate-function\r\n          *ngIf=\"formElement.element.formElement.elementType === 'AGGREGATE_FUNCTION'\"\r\n          [question]=\"formElement.element\"\r\n          [rowId]=\"'0'\"\r\n          ></lib-aggregate-function>\r\n          <ng-container *ngIf=\"formElement?.element?.childLogics\">\r\n\r\n            <ng-container *ngIf=\"componentToLoad\">\r\n\r\n              <ng-container *ngComponentOutlet=\"componentToLoad;\r\n                                                inputs: { grid: formElement?.element?.childLogics,\r\n                                                          answer:  formElement?.element?.answer,\r\n                                                          state: 'child' }\"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </div>\r\n        <div *ngIf=\"formElement.entityType === 'SECTION'\">\r\n          <lib-section-fields\r\n            [section]=\"formElement.element\"\r\n          ></lib-section-fields>\r\n        </div>\r\n      </ng-container>\r\n\r\n      </div>\r\n\r\n    <div class=\"okBtn me-4 ms-4\">\r\n        <button\r\n          class=\"submitBtn ms-md-3 me-md-2 rounded-pill\"\r\n          type=\"button\"\r\n          (click)=\"saveSubmission()\">\r\n          Ok\r\n        </button>\r\n    </div>\r\n</div>\r\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:flex-end;margin-left:auto;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: ["question"] }] }); }
+    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 row of subForm.rows\">\n      <ng-container *ngFor=\"let formElement of row.grid\">\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            [rowId]=\"'0'\"\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            [acceptedLanguage] = \"acceptedLanguage\"\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            [acceptedLanguage] = \"acceptedLanguage\"\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-currency-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'CURRENCY'\"\n            [question]=\"formElement.element\"\n          ></lib-currency-fields>\n          <lib-hidden-field\n            *ngIf=\"formElement.element.formElement.elementType === 'HIDDEN_FIELD'\"\n            [question]=\"formElement.element\"\n            ></lib-hidden-field>\n            <lib-iframe-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'IFRAME_WIDGET'\"\n            [question]=\"formElement.element\"\n            ></lib-iframe-fields>\n          <lib-aggregate-function\n          *ngIf=\"formElement.element.formElement.elementType === 'AGGREGATE_FUNCTION'\"\n          [question]=\"formElement.element\"\n          [rowId]=\"'0'\"\n          ></lib-aggregate-function>\n          <ng-container *ngIf=\"formElement?.element?.childLogics\">\n\n            <ng-container *ngIf=\"componentToLoad\">\n\n              <ng-container *ngComponentOutlet=\"componentToLoad;\n                                                inputs: { grid: formElement?.element?.childLogics,\n                                                          answer:  formElement?.element?.answer,\n                                                          state: 'child' }\"></ng-container>\n            </ng-container>\n          </ng-container>\n\n        </div>\n        <div *ngIf=\"formElement.entityType === 'SECTION'\">\n          <lib-section-fields\n            [section]=\"formElement.element\"\n          ></lib-section-fields>\n        </div>\n      </ng-container>\n\n      </div>\n\n    <div class=\"okBtn me-4 ms-4\">\n        <button\n          class=\"submitBtn ms-md-3 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:flex-end;margin-left:auto;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: ["question"] }] }); }
 }
 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\">\r\n    <div class=\"modalHeader mb-4\">\r\n        <div class=\"title-div\">\r\n            <p class=\"title\">{{subForm.title}}</p>\r\n        </div>\r\n        <div class=\"header-btn\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"closeModal()\">\r\n                <path d=\"M8 8L16 16\" stroke=\"#1D252D\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M16 8L8 16\" stroke=\"#1D252D\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"px-3\" *ngFor=\"let row of subForm.rows\">\r\n      <ng-container *ngFor=\"let formElement of row.grid\">\r\n        <div *ngIf=\"formElement.entityType === 'QUESTION'\">\r\n          <lib-check-box-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-check-box-fields>\r\n          <lib-date-time-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-date-time-fields>\r\n          <lib-drop-down-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-drop-down-fields>\r\n          <lib-file-picker-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType === 'FILE_PICKER'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n          ></lib-file-picker-fields>\r\n          <lib-location-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-location-fields>\r\n\r\n          <lib-mail-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\r\n            [question]=\"formElement.element\"\r\n          >\r\n          </lib-mail-fields>\r\n          <lib-mobile-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\r\n            [question]=\"formElement.element\"\r\n          >\r\n          </lib-mobile-fields>\r\n          <lib-number-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\r\n            [question]=\"formElement.element\"\r\n            [rowId]=\"'0'\"\r\n          >\r\n          </lib-number-fields>\r\n          <lib-password-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\r\n            [question]=\"formElement.element\"\r\n          >\r\n          </lib-password-fields>\r\n          <lib-radio-button-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType === 'RADIO_BUTTON'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n          ></lib-radio-button-fields>\r\n          <lib-rich-text-editor-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n          ></lib-rich-text-editor-fields>\r\n          <lib-selection-matrix-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType === 'SELECTION_MATRIX'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n            [acceptedLanguage] = \"acceptedLanguage\"\r\n          ></lib-selection-matrix-fields>\r\n          <lib-signature-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-signature-fields>\r\n          <lib-slider-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-slider-fields>\r\n          <lib-terms-and-condition-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType ===\r\n              'TERMS_AND_CONDITION'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n          ></lib-terms-and-condition-fields>\r\n          <lib-text-area-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-text-area-fields>\r\n          <lib-text-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-text-fields>\r\n          <lib-toggle-switch-fields\r\n            *ngIf=\"\r\n              formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\r\n            \"\r\n            [question]=\"formElement.element\"\r\n            [acceptedLanguage] = \"acceptedLanguage\"\r\n          ></lib-toggle-switch-fields>\r\n          <lib-url-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-url-fields>\r\n          <lib-currency-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'CURRENCY'\"\r\n            [question]=\"formElement.element\"\r\n          ></lib-currency-fields>\r\n          <lib-hidden-field\r\n            *ngIf=\"formElement.element.formElement.elementType === 'HIDDEN_FIELD'\"\r\n            [question]=\"formElement.element\"\r\n            ></lib-hidden-field>\r\n            <lib-iframe-fields\r\n            *ngIf=\"formElement.element.formElement.elementType === 'IFRAME_WIDGET'\"\r\n            [question]=\"formElement.element\"\r\n            ></lib-iframe-fields>\r\n          <lib-aggregate-function\r\n          *ngIf=\"formElement.element.formElement.elementType === 'AGGREGATE_FUNCTION'\"\r\n          [question]=\"formElement.element\"\r\n          [rowId]=\"'0'\"\r\n          ></lib-aggregate-function>\r\n          <ng-container *ngIf=\"formElement?.element?.childLogics\">\r\n\r\n            <ng-container *ngIf=\"componentToLoad\">\r\n\r\n              <ng-container *ngComponentOutlet=\"componentToLoad;\r\n                                                inputs: { grid: formElement?.element?.childLogics,\r\n                                                          answer:  formElement?.element?.answer,\r\n                                                          state: 'child' }\"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </div>\r\n        <div *ngIf=\"formElement.entityType === 'SECTION'\">\r\n          <lib-section-fields\r\n            [section]=\"formElement.element\"\r\n          ></lib-section-fields>\r\n        </div>\r\n      </ng-container>\r\n\r\n      </div>\r\n\r\n    <div class=\"okBtn me-4 ms-4\">\r\n        <button\r\n          class=\"submitBtn ms-md-3 me-md-2 rounded-pill\"\r\n          type=\"button\"\r\n          (click)=\"saveSubmission()\">\r\n          Ok\r\n        </button>\r\n    </div>\r\n</div>\r\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:flex-end;margin-left:auto;margin-bottom:5px}\n"] }]
+            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 row of subForm.rows\">\n      <ng-container *ngFor=\"let formElement of row.grid\">\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            [rowId]=\"'0'\"\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            [acceptedLanguage] = \"acceptedLanguage\"\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            [acceptedLanguage] = \"acceptedLanguage\"\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-currency-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'CURRENCY'\"\n            [question]=\"formElement.element\"\n          ></lib-currency-fields>\n          <lib-hidden-field\n            *ngIf=\"formElement.element.formElement.elementType === 'HIDDEN_FIELD'\"\n            [question]=\"formElement.element\"\n            ></lib-hidden-field>\n            <lib-iframe-fields\n            *ngIf=\"formElement.element.formElement.elementType === 'IFRAME_WIDGET'\"\n            [question]=\"formElement.element\"\n            ></lib-iframe-fields>\n          <lib-aggregate-function\n          *ngIf=\"formElement.element.formElement.elementType === 'AGGREGATE_FUNCTION'\"\n          [question]=\"formElement.element\"\n          [rowId]=\"'0'\"\n          ></lib-aggregate-function>\n          <ng-container *ngIf=\"formElement?.element?.childLogics\">\n\n            <ng-container *ngIf=\"componentToLoad\">\n\n              <ng-container *ngComponentOutlet=\"componentToLoad;\n                                                inputs: { grid: formElement?.element?.childLogics,\n                                                          answer:  formElement?.element?.answer,\n                                                          state: 'child' }\"></ng-container>\n            </ng-container>\n          </ng-container>\n\n        </div>\n        <div *ngIf=\"formElement.entityType === 'SECTION'\">\n          <lib-section-fields\n            [section]=\"formElement.element\"\n          ></lib-section-fields>\n        </div>\n      </ng-container>\n\n      </div>\n\n    <div class=\"okBtn me-4 ms-4\">\n        <button\n          class=\"submitBtn ms-md-3 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:flex-end;margin-left:auto;margin-bottom:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -7950,11 +8148,11 @@ class MultipleSubformComponent {
         this.updateSubFormWithSubmissions();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultipleSubformComponent, deps: [{ token: i1$3.MatDialog }, { token: i1$2.DomSanitizer }, { token: ScoreCalculationService }, { token: WhenClauseService }], 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", acceptedLanguage: "acceptedLanguage" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"example-container\" tabindex=\"0\">\r\n  <div class=\"table-container\">\r\n    <table mat-table [dataSource]=\"submissions\" class=\"mat-elevation-z8\">\r\n      <ng-container *ngFor=\"let row of subForm.rows\">\r\n        <ng-container\r\n          *ngFor=\"let formElement of row.grid\"\r\n          [matColumnDef]=\"formElement.element.question\"\r\n        >\r\n          <th\r\n            mat-header-cell\r\n            *matHeaderCellDef\r\n            class=\"border border-1 column-width\"\r\n          >\r\n            {{ formElement.element.question }}\r\n          </th>\r\n          <td\r\n            mat-cell\r\n            *matCellDef=\"let submission\"\r\n            class=\"border border-1\"\r\n            [id]=\"'question-'+submission.submissionId\"\r\n            [ngClass]=\"{\r\n              hidden: getAnswerByQuestionId(submission, formElement)\r\n                ?.isChild\r\n            }\"\r\n          >\r\n            <div\r\n              [innerHTML]=\"\r\n                getAnswerByQuestionId(submission, formElement)\r\n                  ?.htmlContent\r\n              \"\r\n            ></div>\r\n          </td>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container matColumnDef=\"actions\" stickyEnd>\r\n        <th mat-header-cell *matHeaderCellDef class=\"border border-1\">\r\n          Actions\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let submission; let i = index\"\r\n          class=\"text-center border border-1\"\r\n        >\r\n          <div>\r\n            <button\r\n              class=\"btn\"\r\n              mat-icon-button\r\n              [matMenuTriggerFor]=\"menu\"\r\n              aria-label=\"Example icon-button with a menu\"\r\n            >\r\n              <mat-icon>more_vert</mat-icon>\r\n            </button>\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button\r\n                mat-menu-item\r\n                (click)=\"editSubFormSubmission(i, submission)\"\r\n              >\r\n                <svg\r\n                  width=\"29\"\r\n                  height=\"28\"\r\n                  viewBox=\"0 0 29 28\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect\r\n                    x=\"0.5\"\r\n                    y=\"0.5\"\r\n                    width=\"28\"\r\n                    height=\"26.4737\"\r\n                    rx=\"5.5\"\r\n                    fill=\"white\"\r\n                    stroke=\"#D8D8D8\"\r\n                  />\r\n                  <path\r\n                    fill-rule=\"evenodd\"\r\n                    clip-rule=\"evenodd\"\r\n                    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\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M15.1704 10.3984L17.8415 13.0695\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </button>\r\n              <button mat-menu-item (click)=\"deleteSubForm(i)\">\r\n                <svg\r\n                  width=\"29\"\r\n                  height=\"28\"\r\n                  viewBox=\"0 0 29 28\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect\r\n                    x=\"0.5\"\r\n                    y=\"0.5\"\r\n                    width=\"27.6402\"\r\n                    height=\"26.1328\"\r\n                    rx=\"5.5\"\r\n                    fill=\"white\"\r\n                    stroke=\"#D8D8D8\"\r\n                  />\r\n                  <path\r\n                    d=\"M8.60449 9.20637H20.0354\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    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\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M16.7696 6.67122H11.8706\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M12.6871 12.3242V16.2239\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M15.9532 12.3242V16.2239\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </button>\r\n            </mat-menu>\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"footer\">\r\n    <div class=\"addNewBtn\" (click)=\"addNewSubmission()\">\r\n      <svg\r\n        width=\"15\"\r\n        height=\"14\"\r\n        viewBox=\"0 0 15 14\"\r\n        fill=\"none\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\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\"\r\n          stroke=\"#D8D8D8\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M5.3335 7.50347H9.66683\"\r\n          stroke=\"#084FFF\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M7.50005 5.33594V9.66927\"\r\n          stroke=\"#084FFF\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n      <a class=\"ms-2 text-decoration-none\">{{addButtonLabel}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".table-container{overflow-x:auto;width:100%}.table-container .mat-table-sticky{background:#fff;z-index:1}.footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer;margin-top:15px}.hidden{display:none}.dropdown-menu{position:relative;z-index:999}::-webkit-scrollbar{width:2px;height:8px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#dbd9d9;border-radius:6px}::ng-deep .mat-mdc-menu-panel{min-width:65px!important}table{border-collapse:separate!important}.column-width{min-width:300px;max-width:500px;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultipleSubformComponent, selector: "lib-multiple-subform", inputs: { subForm: "subForm", acceptedLanguage: "acceptedLanguage" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"example-container\" tabindex=\"0\">\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"submissions\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let row of subForm.rows\">\n        <ng-container\n          *ngFor=\"let formElement of row.grid\"\n          [matColumnDef]=\"formElement.element.question\"\n        >\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            class=\"border border-1 column-width\"\n          >\n            {{ formElement.element.question }}\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let submission\"\n            class=\"border border-1\"\n            [id]=\"'question-'+submission.submissionId\"\n            [ngClass]=\"{\n              hidden: getAnswerByQuestionId(submission, formElement)\n                ?.isChild\n            }\"\n          >\n            <div\n              [innerHTML]=\"\n                getAnswerByQuestionId(submission, formElement)\n                  ?.htmlContent\n              \"\n            ></div>\n          </td>\n        </ng-container>\n      </ng-container>\n      <ng-container matColumnDef=\"actions\" stickyEnd>\n        <th mat-header-cell *matHeaderCellDef class=\"border border-1\">\n          Actions\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let submission; let i = index\"\n          class=\"text-center border border-1\"\n        >\n          <div>\n            <button\n              class=\"btn\"\n              mat-icon-button\n              [matMenuTriggerFor]=\"menu\"\n              aria-label=\"Example icon-button with a menu\"\n            >\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n              <button\n                mat-menu-item\n                (click)=\"editSubFormSubmission(i, submission)\"\n              >\n                <svg\n                  width=\"29\"\n                  height=\"28\"\n                  viewBox=\"0 0 29 28\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <rect\n                    x=\"0.5\"\n                    y=\"0.5\"\n                    width=\"28\"\n                    height=\"26.4737\"\n                    rx=\"5.5\"\n                    fill=\"white\"\n                    stroke=\"#D8D8D8\"\n                  />\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    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\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <path\n                    d=\"M15.1704 10.3984L17.8415 13.0695\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </button>\n              <button mat-menu-item (click)=\"deleteSubForm(i)\">\n                <svg\n                  width=\"29\"\n                  height=\"28\"\n                  viewBox=\"0 0 29 28\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <rect\n                    x=\"0.5\"\n                    y=\"0.5\"\n                    width=\"27.6402\"\n                    height=\"26.1328\"\n                    rx=\"5.5\"\n                    fill=\"white\"\n                    stroke=\"#D8D8D8\"\n                  />\n                  <path\n                    d=\"M8.60449 9.20637H20.0354\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <path\n                    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\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <path\n                    d=\"M16.7696 6.67122H11.8706\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <path\n                    d=\"M12.6871 12.3242V16.2239\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <path\n                    d=\"M15.9532 12.3242V16.2239\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </button>\n            </mat-menu>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n  </div>\n\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\">{{addButtonLabel}}</a>\n    </div>\n  </div>\n</div>\n", styles: [".table-container{overflow-x:auto;width:100%}.table-container .mat-table-sticky{background:#fff;z-index:1}.footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer;margin-top:15px}.hidden{display:none}.dropdown-menu{position:relative;z-index:999}::-webkit-scrollbar{width:2px;height:8px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#dbd9d9;border-radius:6px}::ng-deep .mat-mdc-menu-panel{min-width:65px!important}table{border-collapse:separate!important}.column-width{min-width:300px;max-width:500px;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 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=\"example-container\" tabindex=\"0\">\r\n  <div class=\"table-container\">\r\n    <table mat-table [dataSource]=\"submissions\" class=\"mat-elevation-z8\">\r\n      <ng-container *ngFor=\"let row of subForm.rows\">\r\n        <ng-container\r\n          *ngFor=\"let formElement of row.grid\"\r\n          [matColumnDef]=\"formElement.element.question\"\r\n        >\r\n          <th\r\n            mat-header-cell\r\n            *matHeaderCellDef\r\n            class=\"border border-1 column-width\"\r\n          >\r\n            {{ formElement.element.question }}\r\n          </th>\r\n          <td\r\n            mat-cell\r\n            *matCellDef=\"let submission\"\r\n            class=\"border border-1\"\r\n            [id]=\"'question-'+submission.submissionId\"\r\n            [ngClass]=\"{\r\n              hidden: getAnswerByQuestionId(submission, formElement)\r\n                ?.isChild\r\n            }\"\r\n          >\r\n            <div\r\n              [innerHTML]=\"\r\n                getAnswerByQuestionId(submission, formElement)\r\n                  ?.htmlContent\r\n              \"\r\n            ></div>\r\n          </td>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container matColumnDef=\"actions\" stickyEnd>\r\n        <th mat-header-cell *matHeaderCellDef class=\"border border-1\">\r\n          Actions\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let submission; let i = index\"\r\n          class=\"text-center border border-1\"\r\n        >\r\n          <div>\r\n            <button\r\n              class=\"btn\"\r\n              mat-icon-button\r\n              [matMenuTriggerFor]=\"menu\"\r\n              aria-label=\"Example icon-button with a menu\"\r\n            >\r\n              <mat-icon>more_vert</mat-icon>\r\n            </button>\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button\r\n                mat-menu-item\r\n                (click)=\"editSubFormSubmission(i, submission)\"\r\n              >\r\n                <svg\r\n                  width=\"29\"\r\n                  height=\"28\"\r\n                  viewBox=\"0 0 29 28\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect\r\n                    x=\"0.5\"\r\n                    y=\"0.5\"\r\n                    width=\"28\"\r\n                    height=\"26.4737\"\r\n                    rx=\"5.5\"\r\n                    fill=\"white\"\r\n                    stroke=\"#D8D8D8\"\r\n                  />\r\n                  <path\r\n                    fill-rule=\"evenodd\"\r\n                    clip-rule=\"evenodd\"\r\n                    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\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M15.1704 10.3984L17.8415 13.0695\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </button>\r\n              <button mat-menu-item (click)=\"deleteSubForm(i)\">\r\n                <svg\r\n                  width=\"29\"\r\n                  height=\"28\"\r\n                  viewBox=\"0 0 29 28\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <rect\r\n                    x=\"0.5\"\r\n                    y=\"0.5\"\r\n                    width=\"27.6402\"\r\n                    height=\"26.1328\"\r\n                    rx=\"5.5\"\r\n                    fill=\"white\"\r\n                    stroke=\"#D8D8D8\"\r\n                  />\r\n                  <path\r\n                    d=\"M8.60449 9.20637H20.0354\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    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\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M16.7696 6.67122H11.8706\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M12.6871 12.3242V16.2239\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                  <path\r\n                    d=\"M15.9532 12.3242V16.2239\"\r\n                    stroke=\"#084FFF\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              </button>\r\n            </mat-menu>\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"footer\">\r\n    <div class=\"addNewBtn\" (click)=\"addNewSubmission()\">\r\n      <svg\r\n        width=\"15\"\r\n        height=\"14\"\r\n        viewBox=\"0 0 15 14\"\r\n        fill=\"none\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\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\"\r\n          stroke=\"#D8D8D8\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M5.3335 7.50347H9.66683\"\r\n          stroke=\"#084FFF\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M7.50005 5.33594V9.66927\"\r\n          stroke=\"#084FFF\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n      <a class=\"ms-2 text-decoration-none\">{{addButtonLabel}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".table-container{overflow-x:auto;width:100%}.table-container .mat-table-sticky{background:#fff;z-index:1}.footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer;margin-top:15px}.hidden{display:none}.dropdown-menu{position:relative;z-index:999}::-webkit-scrollbar{width:2px;height:8px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#dbd9d9;border-radius:6px}::ng-deep .mat-mdc-menu-panel{min-width:65px!important}table{border-collapse:separate!important}.column-width{min-width:300px;max-width:500px;white-space:nowrap}\n"] }]
+            args: [{ selector: 'lib-multiple-subform', template: "<div class=\"example-container\" tabindex=\"0\">\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"submissions\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let row of subForm.rows\">\n        <ng-container\n          *ngFor=\"let formElement of row.grid\"\n          [matColumnDef]=\"formElement.element.question\"\n        >\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            class=\"border border-1 column-width\"\n          >\n            {{ formElement.element.question }}\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let submission\"\n            class=\"border border-1\"\n            [id]=\"'question-'+submission.submissionId\"\n            [ngClass]=\"{\n              hidden: getAnswerByQuestionId(submission, formElement)\n                ?.isChild\n            }\"\n          >\n            <div\n              [innerHTML]=\"\n                getAnswerByQuestionId(submission, formElement)\n                  ?.htmlContent\n              \"\n            ></div>\n          </td>\n        </ng-container>\n      </ng-container>\n      <ng-container matColumnDef=\"actions\" stickyEnd>\n        <th mat-header-cell *matHeaderCellDef class=\"border border-1\">\n          Actions\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let submission; let i = index\"\n          class=\"text-center border border-1\"\n        >\n          <div>\n            <button\n              class=\"btn\"\n              mat-icon-button\n              [matMenuTriggerFor]=\"menu\"\n              aria-label=\"Example icon-button with a menu\"\n            >\n              <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n              <button\n                mat-menu-item\n                (click)=\"editSubFormSubmission(i, submission)\"\n              >\n                <svg\n                  width=\"29\"\n                  height=\"28\"\n                  viewBox=\"0 0 29 28\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <rect\n                    x=\"0.5\"\n                    y=\"0.5\"\n                    width=\"28\"\n                    height=\"26.4737\"\n                    rx=\"5.5\"\n                    fill=\"white\"\n                    stroke=\"#D8D8D8\"\n                  />\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    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\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <path\n                    d=\"M15.1704 10.3984L17.8415 13.0695\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </button>\n              <button mat-menu-item (click)=\"deleteSubForm(i)\">\n                <svg\n                  width=\"29\"\n                  height=\"28\"\n                  viewBox=\"0 0 29 28\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <rect\n                    x=\"0.5\"\n                    y=\"0.5\"\n                    width=\"27.6402\"\n                    height=\"26.1328\"\n                    rx=\"5.5\"\n                    fill=\"white\"\n                    stroke=\"#D8D8D8\"\n                  />\n                  <path\n                    d=\"M8.60449 9.20637H20.0354\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <path\n                    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\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <path\n                    d=\"M16.7696 6.67122H11.8706\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <path\n                    d=\"M12.6871 12.3242V16.2239\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <path\n                    d=\"M15.9532 12.3242V16.2239\"\n                    stroke=\"#084FFF\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </button>\n            </mat-menu>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n  </div>\n\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\">{{addButtonLabel}}</a>\n    </div>\n  </div>\n</div>\n", styles: [".table-container{overflow-x:auto;width:100%}.table-container .mat-table-sticky{background:#fff;z-index:1}.footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer;margin-top:15px}.hidden{display:none}.dropdown-menu{position:relative;z-index:999}::-webkit-scrollbar{width:2px;height:8px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#dbd9d9;border-radius:6px}::ng-deep .mat-mdc-menu-panel{min-width:65px!important}table{border-collapse:separate!important}.column-width{min-width:300px;max-width:500px;white-space:nowrap}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: i1$2.DomSanitizer }, { type: ScoreCalculationService }, { type: WhenClauseService }]; }, propDecorators: { subForm: [{
                 type: Input
             }], subFormChange: [{
@@ -7964,10 +8162,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class InlineMultipleSubformComponent {
-    constructor(scoreCalcService, dataService, whenClauseService) {
+    constructor(scoreCalcService, dataService, whenClauseService, hiddenFieldService) {
         this.scoreCalcService = scoreCalcService;
         this.dataService = dataService;
         this.whenClauseService = whenClauseService;
+        this.hiddenFieldService = hiddenFieldService;
         this.subForm = {};
         this.subFormChange = new EventEmitter();
         this.acceptedLanguage = '';
@@ -7977,6 +8176,7 @@ class InlineMultipleSubformComponent {
         this.addButtonLabel = 'Add New';
         this.user = '';
         this.editableQuestions = [];
+        this.isEdit = this.hiddenFieldService.getEditMode();
         this.dataService.header$.subscribe((data) => {
             this.user = data.authUser;
         });
@@ -7995,6 +8195,7 @@ class InlineMultipleSubformComponent {
         }
         this.initializeDisplayedColumns();
         this.elementsWithWhenClause = this.whenClauseService.getWhenClauseElements(this.subForm);
+        this.hiddenFieldService.extractSubformHiddenFields(this.subForm);
         this.updateWhenClause();
         if (this.subForm.submissionCopyConfig?.allowCopyFromOtherSubmissions) {
             this.editableQuestions = this.subForm.submissionCopyConfig.editableQuestions || [];
@@ -8147,6 +8348,9 @@ class InlineMultipleSubformComponent {
         return questionClone;
     }
     updateInlineAnswer(submission, question, newAnswerObject) {
+        if (question.formElement.elementType != 'HIDDEN_FIELD' && this.isEdit) {
+            submission = this.hiddenFieldService.updateSubformHiddenFieldsFromCache(this.subForm.id, submission, 'UPDATE');
+        }
         const newAnswer = newAnswerObject.answer;
         const amountInWords = newAnswerObject?.amountInWords;
         const currency = newAnswerObject?.currency;
@@ -8304,13 +8508,13 @@ class InlineMultipleSubformComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineMultipleSubformComponent, deps: [{ token: ScoreCalculationService }, { token: DataService }, { token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InlineMultipleSubformComponent, selector: "lib-inline-multiple-subform", inputs: { subForm: "subForm", acceptedLanguage: "acceptedLanguage" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"example-container\" tabindex=\"0\">\r\n  <div class=\"table-container\">\r\n    <table mat-table [dataSource]=\"submissions\" class=\"mat-elevation-z8\">\r\n      <ng-container *ngFor=\"let row of subForm.rows\">\r\n        <ng-container\r\n          *ngFor=\"let formElement of row.grid\"\r\n          [matColumnDef]=\"formElement.element.question\"\r\n        >\r\n          <th\r\n            mat-header-cell\r\n            *matHeaderCellDef\r\n            class=\"border border-1 column-width\"\r\n          >\r\n            {{ formElement.element.question }}\r\n          </th>\r\n          <td\r\n            mat-cell\r\n            *matCellDef=\"let submission;let i=index\"\r\n            class=\"border-cell column-width\"\r\n            [id]=\"'question-'+submission.submissionId\"\r\n          >\r\n            <div *ngIf=\"formElement.entityType === 'QUESTION' && whenClauseService.checkElementVisibility(formElement.element.id,submission)\">\r\n              <div [ngSwitch]=\"formElement.element.formElement.elementType\">\r\n                <lib-check-box-fields\r\n                  *ngSwitchCase=\"'CHECK_BOX'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [rowId]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-check-box-fields>\r\n                <lib-date-time-fields\r\n                  *ngSwitchCase=\"'DATE_TIME'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-date-time-fields>\r\n                <lib-drop-down-fields\r\n                  *ngSwitchCase=\"'DROP_DOWN'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-drop-down-fields>\r\n                <lib-file-picker-fields\r\n                  *ngSwitchCase=\"'FILE_PICKER'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                  (inlineDeleteFiles)=\"\r\n                    updateDeletedFiles(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-file-picker-fields>\r\n                <lib-location-fields\r\n                  *ngSwitchCase=\"'LOCATION'\"\r\n                  [inLine]=\"true\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-location-fields>\r\n                <lib-mail-fields\r\n                  *ngSwitchCase=\"'EMAIL'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-mail-fields>\r\n                <lib-mobile-fields\r\n                  *ngSwitchCase=\"'MOBILE'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-mobile-fields>\r\n                <lib-number-fields\r\n                  *ngSwitchCase=\"'NUMBER'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  [rowId]=\"i\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-number-fields>\r\n                <lib-password-fields\r\n                  *ngSwitchCase=\"'PASSWORD'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-password-fields>\r\n                <lib-radio-button-fields\r\n                  *ngSwitchCase=\"'RADIO_BUTTON'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  [rowId]=\"i\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-radio-button-fields>\r\n                <lib-rich-text-editor-fields\r\n                  *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-rich-text-editor-fields>\r\n                <lib-selection-matrix-fields\r\n                  *ngSwitchCase=\"'SELECTION_MATRIX'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [acceptedLanguage]=\"acceptedLanguage\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  [rowId]=\"i\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-selection-matrix-fields>\r\n                <lib-signature-fields\r\n                  *ngSwitchCase=\"'SIGNATURE'\"\r\n                  [inLine]=\"true\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-signature-fields>\r\n                <lib-slider-fields\r\n                  *ngSwitchCase=\"'SLIDER'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-slider-fields>\r\n                <lib-terms-and-condition-fields\r\n                  *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\r\n                  [inLine]=\"true\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-terms-and-condition-fields>\r\n                <lib-text-area-fields\r\n                  *ngSwitchCase=\"'TEXT_AREA'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-text-area-fields>\r\n                <lib-text-fields\r\n                  *ngSwitchCase=\"'TEXT_BOX'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-text-fields>\r\n                <lib-toggle-switch-fields\r\n                  *ngSwitchCase=\"'TOGGLE_SWITCH'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  [acceptedLanguage]=\"acceptedLanguage\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-toggle-switch-fields>\r\n                <lib-url-fields\r\n                  *ngSwitchCase=\"'URL'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-url-fields>\r\n                <lib-currency-fields\r\n                  *ngSwitchCase=\"'CURRENCY'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-currency-fields>\r\n                <lib-hidden-field\r\n                  *ngSwitchCase=\"'HIDDEN_FIELD'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-hidden-field>\r\n                <lib-aggregate-function\r\n                  *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  [rowId]=\"i\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-aggregate-function>\r\n              </div>\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"actions\" stickyEnd>\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          class=\"border border-1 action-column\"\r\n        >\r\n          Actions\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let submission; let i = index\"\r\n          class=\"border-cell text-center\"\r\n        >\r\n          <button class=\"delete-button\" (click)=\"deleteSubmission(i)\">\r\n            <i class=\"bi bi-trash\"></i>\r\n          </button>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <tr\r\n        mat-header-row\r\n        *matHeaderRowDef=\"displayedColumns\"\r\n        class=\"border-row\"\r\n      ></tr>\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let submission; columns: displayedColumns\"\r\n        class=\"border-row\"\r\n      ></tr>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"footer\">\r\n    <div class=\"addNewBtn\" (click)=\"addNewSubmission()\">\r\n      <svg\r\n        width=\"15\"\r\n        height=\"14\"\r\n        viewBox=\"0 0 15 14\"\r\n        fill=\"none\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\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\"\r\n          stroke=\"#D8D8D8\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M5.3335 7.50347H9.66683\"\r\n          stroke=\"#084FFF\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M7.50005 5.33594V9.66927\"\r\n          stroke=\"#084FFF\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n      <a class=\"ms-2 text-decoration-none\">{{addButtonLabel}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".table-container{overflow-x:auto;width:100%}.table-container .mat-table-sticky{background:#fff;z-index:1}.footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer;margin-top:15px}.hidden{display:none}.dropdown-menu{position:relative;z-index:999}::-webkit-scrollbar{width:2px;height:8px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#dbd9d9;border-radius:6px}::ng-deep .mat-mdc-menu-panel{min-width:65px!important}table{border-collapse:separate!important}.border-row th,.border-row td{border:1px solid #d8d8d8}.border-cell{padding-top:10px;padding-bottom:10px}.delete-button{border:none;background-color:#fff;font-size:20px}.action-column{width:30px;padding-left:5px;padding-right:5px}.column-width{min-width:320px;white-space:nowrap}::ng-deep .ql-toolbar.ql-snow{display:flex}\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: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineMultipleSubformComponent, deps: [{ token: ScoreCalculationService }, { token: DataService }, { token: WhenClauseService }, { token: HiddenFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InlineMultipleSubformComponent, selector: "lib-inline-multiple-subform", inputs: { subForm: "subForm", acceptedLanguage: "acceptedLanguage" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"example-container\" tabindex=\"0\">\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"submissions\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let row of subForm.rows\">\n        <ng-container\n          *ngFor=\"let formElement of row.grid\"\n          [matColumnDef]=\"formElement.element.question\"\n        >\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            class=\"border border-1 column-width\"\n          >\n            {{ formElement.element.question }}\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let submission;let i=index\"\n            class=\"border-cell column-width\"\n            [id]=\"'question-'+submission.submissionId\"\n          >\n            <div *ngIf=\"formElement.entityType === 'QUESTION' && whenClauseService.checkElementVisibility(formElement.element.id,submission)\">\n              <div [ngSwitch]=\"formElement.element.formElement.elementType\">\n                <lib-check-box-fields\n                  *ngSwitchCase=\"'CHECK_BOX'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [rowId]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-check-box-fields>\n                <lib-date-time-fields\n                  *ngSwitchCase=\"'DATE_TIME'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-date-time-fields>\n                <lib-drop-down-fields\n                  *ngSwitchCase=\"'DROP_DOWN'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-drop-down-fields>\n                <lib-file-picker-fields\n                  *ngSwitchCase=\"'FILE_PICKER'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                  (inlineDeleteFiles)=\"\n                    updateDeletedFiles(submission, formElement.element, $event)\n                  \"\n                ></lib-file-picker-fields>\n                <lib-location-fields\n                  *ngSwitchCase=\"'LOCATION'\"\n                  [inLine]=\"true\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-location-fields>\n                <lib-mail-fields\n                  *ngSwitchCase=\"'EMAIL'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-mail-fields>\n                <lib-mobile-fields\n                  *ngSwitchCase=\"'MOBILE'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-mobile-fields>\n                <lib-number-fields\n                  *ngSwitchCase=\"'NUMBER'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  [rowId]=\"i\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-number-fields>\n                <lib-password-fields\n                  *ngSwitchCase=\"'PASSWORD'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-password-fields>\n                <lib-radio-button-fields\n                  *ngSwitchCase=\"'RADIO_BUTTON'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  [rowId]=\"i\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-radio-button-fields>\n                <lib-rich-text-editor-fields\n                  *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-rich-text-editor-fields>\n                <lib-selection-matrix-fields\n                  *ngSwitchCase=\"'SELECTION_MATRIX'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [acceptedLanguage]=\"acceptedLanguage\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  [rowId]=\"i\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-selection-matrix-fields>\n                <lib-signature-fields\n                  *ngSwitchCase=\"'SIGNATURE'\"\n                  [inLine]=\"true\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-signature-fields>\n                <lib-slider-fields\n                  *ngSwitchCase=\"'SLIDER'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-slider-fields>\n                <lib-terms-and-condition-fields\n                  *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\n                  [inLine]=\"true\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-terms-and-condition-fields>\n                <lib-text-area-fields\n                  *ngSwitchCase=\"'TEXT_AREA'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-text-area-fields>\n                <lib-text-fields\n                  *ngSwitchCase=\"'TEXT_BOX'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-text-fields>\n                <lib-toggle-switch-fields\n                  *ngSwitchCase=\"'TOGGLE_SWITCH'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  [acceptedLanguage]=\"acceptedLanguage\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-toggle-switch-fields>\n                <lib-url-fields\n                  *ngSwitchCase=\"'URL'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-url-fields>\n                <lib-currency-fields\n                  *ngSwitchCase=\"'CURRENCY'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-currency-fields>\n                <lib-hidden-field\n                  *ngSwitchCase=\"'HIDDEN_FIELD'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-hidden-field>\n                <lib-aggregate-function\n                  *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  [rowId]=\"i\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-aggregate-function>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\" stickyEnd>\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          class=\"border border-1 action-column\"\n        >\n          Actions\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let submission; let i = index\"\n          class=\"border-cell text-center\"\n        >\n          <button class=\"delete-button\" (click)=\"deleteSubmission(i)\">\n            <i class=\"bi bi-trash\"></i>\n          </button>\n        </td>\n      </ng-container>\n\n      <tr\n        mat-header-row\n        *matHeaderRowDef=\"displayedColumns\"\n        class=\"border-row\"\n      ></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let submission; columns: displayedColumns\"\n        class=\"border-row\"\n      ></tr>\n    </table>\n  </div>\n\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\">{{addButtonLabel}}</a>\n    </div>\n  </div>\n</div>\n", styles: [".table-container{overflow-x:auto;width:100%}.table-container .mat-table-sticky{background:#fff;z-index:1}.footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer;margin-top:15px}.hidden{display:none}.dropdown-menu{position:relative;z-index:999}::-webkit-scrollbar{width:2px;height:8px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#dbd9d9;border-radius:6px}::ng-deep .mat-mdc-menu-panel{min-width:65px!important}table{border-collapse:separate!important}.border-row th,.border-row td{border:1px solid #d8d8d8}.border-cell{padding-top:10px;padding-bottom:10px}.delete-button{border:none;background-color:#fff;font-size:20px}.action-column{width:30px;padding-left:5px;padding-right:5px}.column-width{min-width:320px;white-space:nowrap}::ng-deep .ql-toolbar.ql-snow{display:flex}\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: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineMultipleSubformComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-inline-multiple-subform', template: "<div class=\"example-container\" tabindex=\"0\">\r\n  <div class=\"table-container\">\r\n    <table mat-table [dataSource]=\"submissions\" class=\"mat-elevation-z8\">\r\n      <ng-container *ngFor=\"let row of subForm.rows\">\r\n        <ng-container\r\n          *ngFor=\"let formElement of row.grid\"\r\n          [matColumnDef]=\"formElement.element.question\"\r\n        >\r\n          <th\r\n            mat-header-cell\r\n            *matHeaderCellDef\r\n            class=\"border border-1 column-width\"\r\n          >\r\n            {{ formElement.element.question }}\r\n          </th>\r\n          <td\r\n            mat-cell\r\n            *matCellDef=\"let submission;let i=index\"\r\n            class=\"border-cell column-width\"\r\n            [id]=\"'question-'+submission.submissionId\"\r\n          >\r\n            <div *ngIf=\"formElement.entityType === 'QUESTION' && whenClauseService.checkElementVisibility(formElement.element.id,submission)\">\r\n              <div [ngSwitch]=\"formElement.element.formElement.elementType\">\r\n                <lib-check-box-fields\r\n                  *ngSwitchCase=\"'CHECK_BOX'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [rowId]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-check-box-fields>\r\n                <lib-date-time-fields\r\n                  *ngSwitchCase=\"'DATE_TIME'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-date-time-fields>\r\n                <lib-drop-down-fields\r\n                  *ngSwitchCase=\"'DROP_DOWN'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-drop-down-fields>\r\n                <lib-file-picker-fields\r\n                  *ngSwitchCase=\"'FILE_PICKER'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                  (inlineDeleteFiles)=\"\r\n                    updateDeletedFiles(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-file-picker-fields>\r\n                <lib-location-fields\r\n                  *ngSwitchCase=\"'LOCATION'\"\r\n                  [inLine]=\"true\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-location-fields>\r\n                <lib-mail-fields\r\n                  *ngSwitchCase=\"'EMAIL'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-mail-fields>\r\n                <lib-mobile-fields\r\n                  *ngSwitchCase=\"'MOBILE'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-mobile-fields>\r\n                <lib-number-fields\r\n                  *ngSwitchCase=\"'NUMBER'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  [rowId]=\"i\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-number-fields>\r\n                <lib-password-fields\r\n                  *ngSwitchCase=\"'PASSWORD'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-password-fields>\r\n                <lib-radio-button-fields\r\n                  *ngSwitchCase=\"'RADIO_BUTTON'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  [rowId]=\"i\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-radio-button-fields>\r\n                <lib-rich-text-editor-fields\r\n                  *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-rich-text-editor-fields>\r\n                <lib-selection-matrix-fields\r\n                  *ngSwitchCase=\"'SELECTION_MATRIX'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [acceptedLanguage]=\"acceptedLanguage\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  [rowId]=\"i\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-selection-matrix-fields>\r\n                <lib-signature-fields\r\n                  *ngSwitchCase=\"'SIGNATURE'\"\r\n                  [inLine]=\"true\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-signature-fields>\r\n                <lib-slider-fields\r\n                  *ngSwitchCase=\"'SLIDER'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-slider-fields>\r\n                <lib-terms-and-condition-fields\r\n                  *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\r\n                  [inLine]=\"true\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-terms-and-condition-fields>\r\n                <lib-text-area-fields\r\n                  *ngSwitchCase=\"'TEXT_AREA'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-text-area-fields>\r\n                <lib-text-fields\r\n                  *ngSwitchCase=\"'TEXT_BOX'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-text-fields>\r\n                <lib-toggle-switch-fields\r\n                  *ngSwitchCase=\"'TOGGLE_SWITCH'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  [acceptedLanguage]=\"acceptedLanguage\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-toggle-switch-fields>\r\n                <lib-url-fields\r\n                  *ngSwitchCase=\"'URL'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-url-fields>\r\n                <lib-currency-fields\r\n                  *ngSwitchCase=\"'CURRENCY'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-currency-fields>\r\n                <lib-hidden-field\r\n                  *ngSwitchCase=\"'HIDDEN_FIELD'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-hidden-field>\r\n                <lib-aggregate-function\r\n                  *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\r\n                  [inLine]=\"true\"\r\n                  [submissionIndex]=\"i\"\r\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\r\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\r\n                  [rowId]=\"i\"\r\n                  (answerChange)=\"\r\n                    updateInlineAnswer(submission, formElement.element, $event)\r\n                  \"\r\n                ></lib-aggregate-function>\r\n              </div>\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container matColumnDef=\"actions\" stickyEnd>\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          class=\"border border-1 action-column\"\r\n        >\r\n          Actions\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let submission; let i = index\"\r\n          class=\"border-cell text-center\"\r\n        >\r\n          <button class=\"delete-button\" (click)=\"deleteSubmission(i)\">\r\n            <i class=\"bi bi-trash\"></i>\r\n          </button>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <tr\r\n        mat-header-row\r\n        *matHeaderRowDef=\"displayedColumns\"\r\n        class=\"border-row\"\r\n      ></tr>\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let submission; columns: displayedColumns\"\r\n        class=\"border-row\"\r\n      ></tr>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"footer\">\r\n    <div class=\"addNewBtn\" (click)=\"addNewSubmission()\">\r\n      <svg\r\n        width=\"15\"\r\n        height=\"14\"\r\n        viewBox=\"0 0 15 14\"\r\n        fill=\"none\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\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\"\r\n          stroke=\"#D8D8D8\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M5.3335 7.50347H9.66683\"\r\n          stroke=\"#084FFF\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M7.50005 5.33594V9.66927\"\r\n          stroke=\"#084FFF\"\r\n          stroke-width=\"0.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n      <a class=\"ms-2 text-decoration-none\">{{addButtonLabel}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".table-container{overflow-x:auto;width:100%}.table-container .mat-table-sticky{background:#fff;z-index:1}.footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer;margin-top:15px}.hidden{display:none}.dropdown-menu{position:relative;z-index:999}::-webkit-scrollbar{width:2px;height:8px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#dbd9d9;border-radius:6px}::ng-deep .mat-mdc-menu-panel{min-width:65px!important}table{border-collapse:separate!important}.border-row th,.border-row td{border:1px solid #d8d8d8}.border-cell{padding-top:10px;padding-bottom:10px}.delete-button{border:none;background-color:#fff;font-size:20px}.action-column{width:30px;padding-left:5px;padding-right:5px}.column-width{min-width:320px;white-space:nowrap}::ng-deep .ql-toolbar.ql-snow{display:flex}\n"] }]
-        }], ctorParameters: function () { return [{ type: ScoreCalculationService }, { type: DataService }, { type: WhenClauseService }]; }, propDecorators: { subForm: [{
+            args: [{ selector: 'lib-inline-multiple-subform', template: "<div class=\"example-container\" tabindex=\"0\">\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"submissions\" class=\"mat-elevation-z8\">\n      <ng-container *ngFor=\"let row of subForm.rows\">\n        <ng-container\n          *ngFor=\"let formElement of row.grid\"\n          [matColumnDef]=\"formElement.element.question\"\n        >\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            class=\"border border-1 column-width\"\n          >\n            {{ formElement.element.question }}\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let submission;let i=index\"\n            class=\"border-cell column-width\"\n            [id]=\"'question-'+submission.submissionId\"\n          >\n            <div *ngIf=\"formElement.entityType === 'QUESTION' && whenClauseService.checkElementVisibility(formElement.element.id,submission)\">\n              <div [ngSwitch]=\"formElement.element.formElement.elementType\">\n                <lib-check-box-fields\n                  *ngSwitchCase=\"'CHECK_BOX'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [rowId]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-check-box-fields>\n                <lib-date-time-fields\n                  *ngSwitchCase=\"'DATE_TIME'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-date-time-fields>\n                <lib-drop-down-fields\n                  *ngSwitchCase=\"'DROP_DOWN'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-drop-down-fields>\n                <lib-file-picker-fields\n                  *ngSwitchCase=\"'FILE_PICKER'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                  (inlineDeleteFiles)=\"\n                    updateDeletedFiles(submission, formElement.element, $event)\n                  \"\n                ></lib-file-picker-fields>\n                <lib-location-fields\n                  *ngSwitchCase=\"'LOCATION'\"\n                  [inLine]=\"true\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-location-fields>\n                <lib-mail-fields\n                  *ngSwitchCase=\"'EMAIL'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-mail-fields>\n                <lib-mobile-fields\n                  *ngSwitchCase=\"'MOBILE'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-mobile-fields>\n                <lib-number-fields\n                  *ngSwitchCase=\"'NUMBER'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  [rowId]=\"i\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-number-fields>\n                <lib-password-fields\n                  *ngSwitchCase=\"'PASSWORD'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-password-fields>\n                <lib-radio-button-fields\n                  *ngSwitchCase=\"'RADIO_BUTTON'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  [rowId]=\"i\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-radio-button-fields>\n                <lib-rich-text-editor-fields\n                  *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-rich-text-editor-fields>\n                <lib-selection-matrix-fields\n                  *ngSwitchCase=\"'SELECTION_MATRIX'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [acceptedLanguage]=\"acceptedLanguage\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  [rowId]=\"i\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-selection-matrix-fields>\n                <lib-signature-fields\n                  *ngSwitchCase=\"'SIGNATURE'\"\n                  [inLine]=\"true\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-signature-fields>\n                <lib-slider-fields\n                  *ngSwitchCase=\"'SLIDER'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-slider-fields>\n                <lib-terms-and-condition-fields\n                  *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\n                  [inLine]=\"true\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-terms-and-condition-fields>\n                <lib-text-area-fields\n                  *ngSwitchCase=\"'TEXT_AREA'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-text-area-fields>\n                <lib-text-fields\n                  *ngSwitchCase=\"'TEXT_BOX'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-text-fields>\n                <lib-toggle-switch-fields\n                  *ngSwitchCase=\"'TOGGLE_SWITCH'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  [acceptedLanguage]=\"acceptedLanguage\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-toggle-switch-fields>\n                <lib-url-fields\n                  *ngSwitchCase=\"'URL'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-url-fields>\n                <lib-currency-fields\n                  *ngSwitchCase=\"'CURRENCY'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-currency-fields>\n                <lib-hidden-field\n                  *ngSwitchCase=\"'HIDDEN_FIELD'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-hidden-field>\n                <lib-aggregate-function\n                  *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\n                  [inLine]=\"true\"\n                  [submissionIndex]=\"i\"\n                  [question]=\"getSubmissionQuestion(submission, formElement)\"\n                  [disableEdit]=\"isSubmissionEditable(submission,formElement.element.id)\"\n                  [rowId]=\"i\"\n                  (answerChange)=\"\n                    updateInlineAnswer(submission, formElement.element, $event)\n                  \"\n                ></lib-aggregate-function>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\" stickyEnd>\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          class=\"border border-1 action-column\"\n        >\n          Actions\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let submission; let i = index\"\n          class=\"border-cell text-center\"\n        >\n          <button class=\"delete-button\" (click)=\"deleteSubmission(i)\">\n            <i class=\"bi bi-trash\"></i>\n          </button>\n        </td>\n      </ng-container>\n\n      <tr\n        mat-header-row\n        *matHeaderRowDef=\"displayedColumns\"\n        class=\"border-row\"\n      ></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let submission; columns: displayedColumns\"\n        class=\"border-row\"\n      ></tr>\n    </table>\n  </div>\n\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\">{{addButtonLabel}}</a>\n    </div>\n  </div>\n</div>\n", styles: [".table-container{overflow-x:auto;width:100%}.table-container .mat-table-sticky{background:#fff;z-index:1}.footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer;margin-top:15px}.hidden{display:none}.dropdown-menu{position:relative;z-index:999}::-webkit-scrollbar{width:2px;height:8px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#dbd9d9;border-radius:6px}::ng-deep .mat-mdc-menu-panel{min-width:65px!important}table{border-collapse:separate!important}.border-row th,.border-row td{border:1px solid #d8d8d8}.border-cell{padding-top:10px;padding-bottom:10px}.delete-button{border:none;background-color:#fff;font-size:20px}.action-column{width:30px;padding-left:5px;padding-right:5px}.column-width{min-width:320px;white-space:nowrap}::ng-deep .ql-toolbar.ql-snow{display:flex}\n"] }]
+        }], ctorParameters: function () { return [{ type: ScoreCalculationService }, { type: DataService }, { type: WhenClauseService }, { type: HiddenFieldService }]; }, propDecorators: { subForm: [{
                 type: Input
             }], subFormChange: [{
                 type: Output
@@ -8319,9 +8523,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class CardSubformComponent {
-    constructor(scoreCalcService, whenClauseService) {
+    constructor(scoreCalcService, whenClauseService, hiddenFieldService, dialog) {
         this.scoreCalcService = scoreCalcService;
         this.whenClauseService = whenClauseService;
+        this.hiddenFieldService = hiddenFieldService;
+        this.dialog = dialog;
         this.subForm = {};
         this.acceptedLanguage = '';
         this.edit = false;
@@ -8331,6 +8537,7 @@ class CardSubformComponent {
         this.subFormChange = new EventEmitter();
         this.Math = Math;
         this.editableQuestions = [];
+        this.isEdit = this.hiddenFieldService.getEditMode();
     }
     ngOnInit() {
         const { goodMax, badMax } = this.scoreCalcService.getMaxPossibleScore(this.subForm);
@@ -8351,9 +8558,11 @@ class CardSubformComponent {
             this.addButtonLabel = this.subForm.property.addButtonLabel;
         }
         this.elementsWithWhenClause = this.whenClauseService.getWhenClauseElements(this.subForm);
+        this.hiddenFieldService.extractSubformHiddenFields(this.subForm);
         this.updateWhenClause();
         if (this.subForm.submissionCopyConfig?.allowCopyFromOtherSubmissions) {
-            this.editableQuestions = this.subForm.submissionCopyConfig.editableQuestions || [];
+            this.editableQuestions =
+                this.subForm.submissionCopyConfig.editableQuestions || [];
         }
     }
     ngOnChanges() {
@@ -8424,10 +8633,17 @@ class CardSubformComponent {
             ? questionClone.disableEdit
             : false;
         questionClone.attachments = ansObj?.attachments ? ansObj.attachments : [];
-        questionClone.copiedAttachments = ansObj?.copiedAttachments ? ansObj.copiedAttachments : [];
-        questionClone.amountInWords = ansObj?.amountInWords ? ansObj.amountInWords : '';
-        questionClone.required = ansObj?.required !== undefined ? ansObj.required : questionClone.required;
-        questionClone.answerCurrency = ansObj?.answerCurrency ? ansObj.answerCurrency : '';
+        questionClone.copiedAttachments = ansObj?.copiedAttachments
+            ? ansObj.copiedAttachments
+            : [];
+        questionClone.amountInWords = ansObj?.amountInWords
+            ? ansObj.amountInWords
+            : '';
+        questionClone.required =
+            ansObj?.required !== undefined ? ansObj.required : questionClone.required;
+        questionClone.answerCurrency = ansObj?.answerCurrency
+            ? ansObj.answerCurrency
+            : '';
         return questionClone;
     }
     isSubmissionEditable(submission, questionId) {
@@ -8453,7 +8669,7 @@ class CardSubformComponent {
                         answer: '',
                         maximumPossibleScore: 0,
                         show: gridItem.show,
-                        required: gridItem.element.required
+                        required: gridItem.element.required,
                     });
                 }
             });
@@ -8484,6 +8700,9 @@ class CardSubformComponent {
         this.subFormChange.emit(this.subForm);
     }
     updateAnswer(submission, question, newAnswerObject) {
+        if (question.formElement.elementType != 'HIDDEN_FIELD' && this.isEdit) {
+            submission = this.hiddenFieldService.updateSubformHiddenFieldsFromCache(this.subForm.id, submission, 'UPDATE');
+        }
         const newAnswer = newAnswerObject.answer;
         const amountInWords = newAnswerObject?.amountInWords;
         const currency = newAnswerObject?.currency;
@@ -8547,7 +8766,7 @@ class CardSubformComponent {
                         answer: newAnswer,
                         maximumPossibleScore: newAnswerObject.maxPossibleScore,
                         amountInWords: amountInWords,
-                        currencySymbol: currency
+                        currencySymbol: currency,
                     });
                 }
                 if (question.formElement &&
@@ -8575,12 +8794,11 @@ class CardSubformComponent {
                 }
             }
             const hasAnyScore = this.submissions.some((sub) => sub.scores?.some((s) => s.score !== null && s.score !== undefined));
-            if (hasAnyScore) {
-                this.subForm.scores = this.scoreCalcService.calculateFinalScore(this.submissions, this.maxPossibleGoodScore, this.maxPossibleBadScore);
-            }
-            else {
-                this.subForm.scores = null; // or 0, depending on how you want to represent "no score yet"
-            }
+            Promise.resolve().then(() => {
+                this.subForm.scores = hasAnyScore
+                    ? this.scoreCalcService.calculateFinalScore(this.subForm.submissions, this.maxPossibleGoodScore, this.maxPossibleBadScore)
+                    : [];
+            });
             this.updateSubFormWithSubmissions();
         }
     }
@@ -8598,20 +8816,32 @@ class CardSubformComponent {
                     answerObj.deleteFiles.push(fileId);
                 }
             });
-            answerObj.copiedAttachments = answerObj.copiedAttachments?.filter(item => {
+            answerObj.copiedAttachments = answerObj.copiedAttachments?.filter((item) => {
                 return !deletedFiles.includes(item);
             });
         }
     }
     deleteSubmission(index) {
-        const submission = this.submissions[index];
-        if (submission.submissionId) {
-            this.deletedSubmissions.push(submission.submissionId);
-        }
-        this.submissions.splice(index, 1);
-        this.submissions = [...this.submissions];
-        this.subForm.scores = this.scoreCalcService.calculateFinalScore(this.submissions, this.maxPossibleGoodScore, this.maxPossibleBadScore);
-        this.updateSubFormWithSubmissions();
+        const dialogConfig = new MatDialogConfig();
+        dialogConfig.data = {
+            messageHeader: 'Are you sure?',
+            message: 'Do you want to delete this submission?',
+        };
+        dialogConfig.hasBackdrop = true;
+        dialogConfig.disableClose = true;
+        this.dialogRef = this.dialog.open(ConfirmDialogComponent, dialogConfig);
+        this.dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                const submission = this.submissions[index];
+                if (submission.submissionId) {
+                    this.deletedSubmissions.push(submission.submissionId);
+                }
+                this.submissions.splice(index, 1);
+                this.submissions = [...this.submissions];
+                this.subForm.scores = this.scoreCalcService.calculateFinalScore(this.submissions, this.maxPossibleGoodScore, this.maxPossibleBadScore);
+                this.updateSubFormWithSubmissions();
+            }
+        });
     }
     clearHiddenAnswers() {
         for (const submission of this.submissions) {
@@ -8620,20 +8850,20 @@ class CardSubformComponent {
             for (const ans of submission.answers) {
                 // If show flag is explicitly false → clear the answer value
                 if (ans.show === false) {
-                    ans.answer = ""; // clear the answer
+                    ans.answer = ''; // clear the answer
                     ans.files = []; // clear files (optional)
                     ans.scores = []; // clear score (optional)
                 }
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardSubformComponent, deps: [{ token: ScoreCalculationService }, { token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardSubformComponent, selector: "lib-card-subform", inputs: { subForm: "subForm", acceptedLanguage: "acceptedLanguage", edit: "edit" }, outputs: { subFormChange: "subFormChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let submission of submissions;let i=index ;trackBy: trackBySubmissionId\">\r\n  <div class=\"card-subform mb-4\" [id]=\"'question-'+submission.submissionId\">\r\n    <div class=\"delete d-flex justify-content-end me-4 mb-2 mt-2 gap-3\"\r\n    >\r\n    <ng-container *ngIf=\"submission?.scores?.[0] as firstScore\">\r\n      <div\r\n        class=\"submissionScore\"\r\n        [ngClass]=\"{\r\n          'good-score': firstScore.scoreType === 'GOOD_SCORE',\r\n          'bad-score': firstScore.scoreType === 'BAD_SCORE'\r\n        }\"\r\n      >\r\n      <span>{{ Math.abs(firstScore.score) }}</span>\r\n      </div>\r\n    </ng-container>\r\n      <img class=\"delete-icon\" src=\"assets/icons/delete-icon.svg\" alt=\"delete\"\r\n      *ngIf=\"submission.configuration?.allowDelete\"\r\n      (click)=\"deleteSubmission(i)\">\r\n    </div>\r\n    <div *ngFor=\"let row of subForm.rows\">\r\n      <div class=\"d-flex\">\r\n        <div\r\n          *ngFor=\"let grid of row.grid\"\r\n          [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\r\n        >\r\n          <div *ngIf=\"grid.entityType === 'QUESTION' && whenClauseService.checkElementVisibility(grid.element.id,submission)\">\r\n            <div [ngSwitch]=\"grid.element.formElement.elementType\">\r\n              <lib-check-box-fields\r\n                *ngSwitchCase=\"'CHECK_BOX'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [rowId]=\"i\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-check-box-fields>\r\n              <lib-date-time-fields\r\n                *ngSwitchCase=\"'DATE_TIME'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-date-time-fields>\r\n              <lib-drop-down-fields\r\n                *ngSwitchCase=\"'DROP_DOWN'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-drop-down-fields>\r\n              <lib-file-picker-fields\r\n                *ngSwitchCase=\"'FILE_PICKER'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n                (inlineDeleteFiles)=\"\r\n                    updateDeletedFiles(submission, grid.element, $event)\r\n                  \"\r\n              ></lib-file-picker-fields>\r\n              <lib-location-fields\r\n                *ngSwitchCase=\"'LOCATION'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-location-fields>\r\n              <lib-mail-fields\r\n                *ngSwitchCase=\"'EMAIL'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-mail-fields>\r\n              <lib-mobile-fields\r\n                *ngSwitchCase=\"'MOBILE'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-mobile-fields>\r\n              <lib-number-fields\r\n                *ngSwitchCase=\"'NUMBER'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [rowId]=\"'0'\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-number-fields>\r\n              <lib-password-fields\r\n                *ngSwitchCase=\"'PASSWORD'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-password-fields>\r\n              <lib-radio-button-fields\r\n                *ngSwitchCase=\"'RADIO_BUTTON'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [rowId]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-radio-button-fields>\r\n              <lib-rich-text-editor-fields\r\n                *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [inSubForm]=\"true\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-rich-text-editor-fields>\r\n              <lib-selection-matrix-fields\r\n                *ngSwitchCase=\"'SELECTION_MATRIX'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [acceptedLanguage]=\"acceptedLanguage\"\r\n                [rowId]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-selection-matrix-fields>\r\n              <lib-slider-fields\r\n                *ngSwitchCase=\"'SLIDER'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-slider-fields>\r\n              <lib-terms-and-condition-fields\r\n                *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-terms-and-condition-fields>\r\n              <lib-text-area-fields\r\n                *ngSwitchCase=\"'TEXT_AREA'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-text-area-fields>\r\n              <lib-text-fields\r\n                *ngSwitchCase=\"'TEXT_BOX'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-text-fields>\r\n              <lib-toggle-switch-fields\r\n                *ngSwitchCase=\"'TOGGLE_SWITCH'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [acceptedLanguage]=\"acceptedLanguage\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-toggle-switch-fields>\r\n              <lib-url-fields\r\n                *ngSwitchCase=\"'URL'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-url-fields>\r\n              <lib-currency-fields\r\n                *ngSwitchCase=\"'CURRENCY'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-currency-fields>\r\n              <lib-hidden-field\r\n                *ngSwitchCase=\"'HIDDEN_FIELD'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-hidden-field>\r\n              <lib-iframe-fields\r\n                *ngSwitchCase=\"'IFRAME_WIDGET'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n              ></lib-iframe-fields>\r\n              <lib-aggregate-function\r\n                *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [rowId]=\"'0'\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-aggregate-function>\r\n            </div>\r\n\r\n            <!-- <ng-container *ngIf=\"grid.element.childLogics\">\r\n                      <ng-container\r\n                        *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as outlet\">\r\n                        <ng-container *ngComponentOutlet=\"outlet.component | async; injector: outlet.injector\">\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container> -->\r\n            <ng-container *ngIf=\"grid?.element?.childLogics\">\r\n              <ng-container *ngIf=\"componentToLoad\">\r\n                <ng-container\r\n                  *ngComponentOutlet=\"\r\n                    componentToLoad;\r\n                    inputs: {\r\n                      grid: grid?.element?.childLogics,\r\n                      answer: grid?.element?.answer,\r\n                      state: 'child'\r\n                    }\r\n                  \"\r\n                ></ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n\r\n          <div *ngIf=\"grid.entityType === 'SECTION'\">\r\n            <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<div class=\"subform-footer\">\r\n  <button class=\"btn btn-primary\" (click)=\"addNewSubmission()\">{{addButtonLabel}}</button>\r\n</div>\r\n", styles: [".card-subform{background:#f9f6f6;border-radius:6px;padding:8px 0}.delete-icon{cursor:pointer;margin-right:10px;width:36px;height:36px;fill:none}.delete-icon path{stroke:#084fff;stroke-linecap:round;stroke-linejoin:round}.delete-icon rect{stroke:#d8d8d8;fill:#fff;width:35px;height:35px}.submissionScore{width:45px;height:37px;border-radius:6px;border:1px solid #c8c8c8;display:flex;justify-content:center;align-items:center;font-weight:500;text-align:center;padding:0}.submissionScore span{margin-top:5px}.submissionScore.good-score{border-color:#50f550}.submissionScore.bad-score{border-color:#f08080}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: ["question"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardSubformComponent, deps: [{ token: ScoreCalculationService }, { token: WhenClauseService }, { token: HiddenFieldService }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardSubformComponent, selector: "lib-card-subform", inputs: { subForm: "subForm", acceptedLanguage: "acceptedLanguage", edit: "edit" }, outputs: { subFormChange: "subFormChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let submission of submissions;let i=index ;trackBy: trackBySubmissionId\">\n  <div class=\"card-subform mb-4\" [id]=\"'question-'+submission.submissionId\">\n    <div class=\"delete d-flex justify-content-end me-4 mb-2 mt-2 gap-3\"\n    >\n    <ng-container *ngIf=\"submission?.scores?.[0] as firstScore\">\n      <div\n        class=\"submissionScore\"\n        [ngClass]=\"{\n          'good-score': firstScore.scoreType === 'GOOD_SCORE',\n          'bad-score': firstScore.scoreType === 'BAD_SCORE'\n        }\"\n      >\n      <span>{{ Math.abs(firstScore.score) }}</span>\n      </div>\n    </ng-container>\n      <img class=\"delete-icon\" src=\"assets/icons/delete-icon.svg\" alt=\"delete\"\n      *ngIf=\"submission.configuration?.allowDelete\"\n      (click)=\"deleteSubmission(i)\">\n    </div>\n    <div *ngFor=\"let row of subForm.rows\">\n      <div class=\"d-flex\">\n        <div\n          *ngFor=\"let grid of row.grid\"\n          [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\n        >\n          <div *ngIf=\"grid.entityType === 'QUESTION' && whenClauseService.checkElementVisibility(grid.element.id,submission)\">\n            <div [ngSwitch]=\"grid.element.formElement.elementType\">\n              <lib-check-box-fields\n                *ngSwitchCase=\"'CHECK_BOX'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [rowId]=\"i\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-check-box-fields>\n              <lib-date-time-fields\n                *ngSwitchCase=\"'DATE_TIME'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-date-time-fields>\n              <lib-drop-down-fields\n                *ngSwitchCase=\"'DROP_DOWN'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-drop-down-fields>\n              <lib-file-picker-fields\n                *ngSwitchCase=\"'FILE_PICKER'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n                (inlineDeleteFiles)=\"\n                    updateDeletedFiles(submission, grid.element, $event)\n                  \"\n              ></lib-file-picker-fields>\n              <lib-location-fields\n                *ngSwitchCase=\"'LOCATION'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-location-fields>\n              <lib-mail-fields\n                *ngSwitchCase=\"'EMAIL'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-mail-fields>\n              <lib-mobile-fields\n                *ngSwitchCase=\"'MOBILE'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-mobile-fields>\n              <lib-number-fields\n                *ngSwitchCase=\"'NUMBER'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [rowId]=\"'0'\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-number-fields>\n              <lib-password-fields\n                *ngSwitchCase=\"'PASSWORD'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-password-fields>\n              <lib-radio-button-fields\n                *ngSwitchCase=\"'RADIO_BUTTON'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [rowId]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-radio-button-fields>\n              <lib-rich-text-editor-fields\n                *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [inSubForm]=\"true\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-rich-text-editor-fields>\n              <lib-selection-matrix-fields\n                *ngSwitchCase=\"'SELECTION_MATRIX'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [acceptedLanguage]=\"acceptedLanguage\"\n                [rowId]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-selection-matrix-fields>\n              <lib-slider-fields\n                *ngSwitchCase=\"'SLIDER'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-slider-fields>\n              <lib-terms-and-condition-fields\n                *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-terms-and-condition-fields>\n              <lib-text-area-fields\n                *ngSwitchCase=\"'TEXT_AREA'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-text-area-fields>\n              <lib-text-fields\n                *ngSwitchCase=\"'TEXT_BOX'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-text-fields>\n              <lib-toggle-switch-fields\n                *ngSwitchCase=\"'TOGGLE_SWITCH'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [acceptedLanguage]=\"acceptedLanguage\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-toggle-switch-fields>\n              <lib-url-fields\n                *ngSwitchCase=\"'URL'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-url-fields>\n              <lib-currency-fields\n                *ngSwitchCase=\"'CURRENCY'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-currency-fields>\n              <lib-hidden-field\n                *ngSwitchCase=\"'HIDDEN_FIELD'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-hidden-field>\n              <lib-iframe-fields\n                *ngSwitchCase=\"'IFRAME_WIDGET'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n              ></lib-iframe-fields>\n              <lib-aggregate-function\n                *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [rowId]=\"'0'\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-aggregate-function>\n            </div>\n\n            <!-- <ng-container *ngIf=\"grid.element.childLogics\">\n                      <ng-container\n                        *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as outlet\">\n                        <ng-container *ngComponentOutlet=\"outlet.component | async; injector: outlet.injector\">\n                        </ng-container>\n                      </ng-container>\n                    </ng-container> -->\n            <ng-container *ngIf=\"grid?.element?.childLogics\">\n              <ng-container *ngIf=\"componentToLoad\">\n                <ng-container\n                  *ngComponentOutlet=\"\n                    componentToLoad;\n                    inputs: {\n                      grid: grid?.element?.childLogics,\n                      answer: grid?.element?.answer,\n                      state: 'child'\n                    }\n                  \"\n                ></ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <div *ngIf=\"grid.entityType === 'SECTION'\">\n            <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div class=\"subform-footer\">\n  <button class=\"btn btn-primary\" (click)=\"addNewSubmission()\">{{addButtonLabel}}</button>\n</div>\n", styles: [".card-subform{background:#f9f6f6;border-radius:6px;padding:8px 0}.delete-icon{cursor:pointer;margin-right:10px;width:36px;height:36px;fill:none}.delete-icon path{stroke:#084fff;stroke-linecap:round;stroke-linejoin:round}.delete-icon rect{stroke:#d8d8d8;fill:#fff;width:35px;height:35px}.submissionScore{width:45px;height:37px;border-radius:6px;border:1px solid #c8c8c8;display:flex;justify-content:center;align-items:center;font-weight:500;text-align:center;padding:0}.submissionScore span{margin-top:5px}.submissionScore.good-score{border-color:#50f550}.submissionScore.bad-score{border-color:#f08080}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: ["question"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardSubformComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-card-subform', template: "<ng-container *ngFor=\"let submission of submissions;let i=index ;trackBy: trackBySubmissionId\">\r\n  <div class=\"card-subform mb-4\" [id]=\"'question-'+submission.submissionId\">\r\n    <div class=\"delete d-flex justify-content-end me-4 mb-2 mt-2 gap-3\"\r\n    >\r\n    <ng-container *ngIf=\"submission?.scores?.[0] as firstScore\">\r\n      <div\r\n        class=\"submissionScore\"\r\n        [ngClass]=\"{\r\n          'good-score': firstScore.scoreType === 'GOOD_SCORE',\r\n          'bad-score': firstScore.scoreType === 'BAD_SCORE'\r\n        }\"\r\n      >\r\n      <span>{{ Math.abs(firstScore.score) }}</span>\r\n      </div>\r\n    </ng-container>\r\n      <img class=\"delete-icon\" src=\"assets/icons/delete-icon.svg\" alt=\"delete\"\r\n      *ngIf=\"submission.configuration?.allowDelete\"\r\n      (click)=\"deleteSubmission(i)\">\r\n    </div>\r\n    <div *ngFor=\"let row of subForm.rows\">\r\n      <div class=\"d-flex\">\r\n        <div\r\n          *ngFor=\"let grid of row.grid\"\r\n          [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\r\n        >\r\n          <div *ngIf=\"grid.entityType === 'QUESTION' && whenClauseService.checkElementVisibility(grid.element.id,submission)\">\r\n            <div [ngSwitch]=\"grid.element.formElement.elementType\">\r\n              <lib-check-box-fields\r\n                *ngSwitchCase=\"'CHECK_BOX'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [rowId]=\"i\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-check-box-fields>\r\n              <lib-date-time-fields\r\n                *ngSwitchCase=\"'DATE_TIME'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-date-time-fields>\r\n              <lib-drop-down-fields\r\n                *ngSwitchCase=\"'DROP_DOWN'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-drop-down-fields>\r\n              <lib-file-picker-fields\r\n                *ngSwitchCase=\"'FILE_PICKER'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n                (inlineDeleteFiles)=\"\r\n                    updateDeletedFiles(submission, grid.element, $event)\r\n                  \"\r\n              ></lib-file-picker-fields>\r\n              <lib-location-fields\r\n                *ngSwitchCase=\"'LOCATION'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-location-fields>\r\n              <lib-mail-fields\r\n                *ngSwitchCase=\"'EMAIL'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-mail-fields>\r\n              <lib-mobile-fields\r\n                *ngSwitchCase=\"'MOBILE'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-mobile-fields>\r\n              <lib-number-fields\r\n                *ngSwitchCase=\"'NUMBER'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [rowId]=\"'0'\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-number-fields>\r\n              <lib-password-fields\r\n                *ngSwitchCase=\"'PASSWORD'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-password-fields>\r\n              <lib-radio-button-fields\r\n                *ngSwitchCase=\"'RADIO_BUTTON'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [rowId]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-radio-button-fields>\r\n              <lib-rich-text-editor-fields\r\n                *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [inSubForm]=\"true\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-rich-text-editor-fields>\r\n              <lib-selection-matrix-fields\r\n                *ngSwitchCase=\"'SELECTION_MATRIX'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [acceptedLanguage]=\"acceptedLanguage\"\r\n                [rowId]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-selection-matrix-fields>\r\n              <lib-slider-fields\r\n                *ngSwitchCase=\"'SLIDER'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-slider-fields>\r\n              <lib-terms-and-condition-fields\r\n                *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-terms-and-condition-fields>\r\n              <lib-text-area-fields\r\n                *ngSwitchCase=\"'TEXT_AREA'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-text-area-fields>\r\n              <lib-text-fields\r\n                *ngSwitchCase=\"'TEXT_BOX'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-text-fields>\r\n              <lib-toggle-switch-fields\r\n                *ngSwitchCase=\"'TOGGLE_SWITCH'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [acceptedLanguage]=\"acceptedLanguage\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-toggle-switch-fields>\r\n              <lib-url-fields\r\n                *ngSwitchCase=\"'URL'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-url-fields>\r\n              <lib-currency-fields\r\n                *ngSwitchCase=\"'CURRENCY'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-currency-fields>\r\n              <lib-hidden-field\r\n                *ngSwitchCase=\"'HIDDEN_FIELD'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-hidden-field>\r\n              <lib-iframe-fields\r\n                *ngSwitchCase=\"'IFRAME_WIDGET'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n              ></lib-iframe-fields>\r\n              <lib-aggregate-function\r\n                *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\r\n                [question]=\"getSubmissionQuestion(submission,grid)\"\r\n                [inCard]=\"true\"\r\n                [submissionIndex]=\"i\"\r\n                [rowId]=\"'0'\"\r\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\r\n                (answerChange)=\"\r\n                    updateAnswer(submission, grid.element, $event)\r\n                \"\r\n              ></lib-aggregate-function>\r\n            </div>\r\n\r\n            <!-- <ng-container *ngIf=\"grid.element.childLogics\">\r\n                      <ng-container\r\n                        *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as outlet\">\r\n                        <ng-container *ngComponentOutlet=\"outlet.component | async; injector: outlet.injector\">\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container> -->\r\n            <ng-container *ngIf=\"grid?.element?.childLogics\">\r\n              <ng-container *ngIf=\"componentToLoad\">\r\n                <ng-container\r\n                  *ngComponentOutlet=\"\r\n                    componentToLoad;\r\n                    inputs: {\r\n                      grid: grid?.element?.childLogics,\r\n                      answer: grid?.element?.answer,\r\n                      state: 'child'\r\n                    }\r\n                  \"\r\n                ></ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n\r\n          <div *ngIf=\"grid.entityType === 'SECTION'\">\r\n            <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<div class=\"subform-footer\">\r\n  <button class=\"btn btn-primary\" (click)=\"addNewSubmission()\">{{addButtonLabel}}</button>\r\n</div>\r\n", styles: [".card-subform{background:#f9f6f6;border-radius:6px;padding:8px 0}.delete-icon{cursor:pointer;margin-right:10px;width:36px;height:36px;fill:none}.delete-icon path{stroke:#084fff;stroke-linecap:round;stroke-linejoin:round}.delete-icon rect{stroke:#d8d8d8;fill:#fff;width:35px;height:35px}.submissionScore{width:45px;height:37px;border-radius:6px;border:1px solid #c8c8c8;display:flex;justify-content:center;align-items:center;font-weight:500;text-align:center;padding:0}.submissionScore span{margin-top:5px}.submissionScore.good-score{border-color:#50f550}.submissionScore.bad-score{border-color:#f08080}\n"] }]
-        }], ctorParameters: function () { return [{ type: ScoreCalculationService }, { type: WhenClauseService }]; }, propDecorators: { subForm: [{
+            args: [{ selector: 'lib-card-subform', template: "<ng-container *ngFor=\"let submission of submissions;let i=index ;trackBy: trackBySubmissionId\">\n  <div class=\"card-subform mb-4\" [id]=\"'question-'+submission.submissionId\">\n    <div class=\"delete d-flex justify-content-end me-4 mb-2 mt-2 gap-3\"\n    >\n    <ng-container *ngIf=\"submission?.scores?.[0] as firstScore\">\n      <div\n        class=\"submissionScore\"\n        [ngClass]=\"{\n          'good-score': firstScore.scoreType === 'GOOD_SCORE',\n          'bad-score': firstScore.scoreType === 'BAD_SCORE'\n        }\"\n      >\n      <span>{{ Math.abs(firstScore.score) }}</span>\n      </div>\n    </ng-container>\n      <img class=\"delete-icon\" src=\"assets/icons/delete-icon.svg\" alt=\"delete\"\n      *ngIf=\"submission.configuration?.allowDelete\"\n      (click)=\"deleteSubmission(i)\">\n    </div>\n    <div *ngFor=\"let row of subForm.rows\">\n      <div class=\"d-flex\">\n        <div\n          *ngFor=\"let grid of row.grid\"\n          [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\n        >\n          <div *ngIf=\"grid.entityType === 'QUESTION' && whenClauseService.checkElementVisibility(grid.element.id,submission)\">\n            <div [ngSwitch]=\"grid.element.formElement.elementType\">\n              <lib-check-box-fields\n                *ngSwitchCase=\"'CHECK_BOX'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [rowId]=\"i\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-check-box-fields>\n              <lib-date-time-fields\n                *ngSwitchCase=\"'DATE_TIME'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-date-time-fields>\n              <lib-drop-down-fields\n                *ngSwitchCase=\"'DROP_DOWN'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-drop-down-fields>\n              <lib-file-picker-fields\n                *ngSwitchCase=\"'FILE_PICKER'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n                (inlineDeleteFiles)=\"\n                    updateDeletedFiles(submission, grid.element, $event)\n                  \"\n              ></lib-file-picker-fields>\n              <lib-location-fields\n                *ngSwitchCase=\"'LOCATION'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-location-fields>\n              <lib-mail-fields\n                *ngSwitchCase=\"'EMAIL'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-mail-fields>\n              <lib-mobile-fields\n                *ngSwitchCase=\"'MOBILE'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-mobile-fields>\n              <lib-number-fields\n                *ngSwitchCase=\"'NUMBER'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [rowId]=\"'0'\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-number-fields>\n              <lib-password-fields\n                *ngSwitchCase=\"'PASSWORD'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-password-fields>\n              <lib-radio-button-fields\n                *ngSwitchCase=\"'RADIO_BUTTON'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [rowId]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-radio-button-fields>\n              <lib-rich-text-editor-fields\n                *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [inSubForm]=\"true\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-rich-text-editor-fields>\n              <lib-selection-matrix-fields\n                *ngSwitchCase=\"'SELECTION_MATRIX'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [acceptedLanguage]=\"acceptedLanguage\"\n                [rowId]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-selection-matrix-fields>\n              <lib-slider-fields\n                *ngSwitchCase=\"'SLIDER'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-slider-fields>\n              <lib-terms-and-condition-fields\n                *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-terms-and-condition-fields>\n              <lib-text-area-fields\n                *ngSwitchCase=\"'TEXT_AREA'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-text-area-fields>\n              <lib-text-fields\n                *ngSwitchCase=\"'TEXT_BOX'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-text-fields>\n              <lib-toggle-switch-fields\n                *ngSwitchCase=\"'TOGGLE_SWITCH'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [acceptedLanguage]=\"acceptedLanguage\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-toggle-switch-fields>\n              <lib-url-fields\n                *ngSwitchCase=\"'URL'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-url-fields>\n              <lib-currency-fields\n                *ngSwitchCase=\"'CURRENCY'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-currency-fields>\n              <lib-hidden-field\n                *ngSwitchCase=\"'HIDDEN_FIELD'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-hidden-field>\n              <lib-iframe-fields\n                *ngSwitchCase=\"'IFRAME_WIDGET'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n              ></lib-iframe-fields>\n              <lib-aggregate-function\n                *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\n                [question]=\"getSubmissionQuestion(submission,grid)\"\n                [inCard]=\"true\"\n                [submissionIndex]=\"i\"\n                [rowId]=\"'0'\"\n                [disableEdit]=\"isSubmissionEditable(submission,grid.element.id)\"\n                (answerChange)=\"\n                    updateAnswer(submission, grid.element, $event)\n                \"\n              ></lib-aggregate-function>\n            </div>\n\n            <!-- <ng-container *ngIf=\"grid.element.childLogics\">\n                      <ng-container\n                        *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as outlet\">\n                        <ng-container *ngComponentOutlet=\"outlet.component | async; injector: outlet.injector\">\n                        </ng-container>\n                      </ng-container>\n                    </ng-container> -->\n            <ng-container *ngIf=\"grid?.element?.childLogics\">\n              <ng-container *ngIf=\"componentToLoad\">\n                <ng-container\n                  *ngComponentOutlet=\"\n                    componentToLoad;\n                    inputs: {\n                      grid: grid?.element?.childLogics,\n                      answer: grid?.element?.answer,\n                      state: 'child'\n                    }\n                  \"\n                ></ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <div *ngIf=\"grid.entityType === 'SECTION'\">\n            <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div class=\"subform-footer\">\n  <button class=\"btn btn-primary\" (click)=\"addNewSubmission()\">{{addButtonLabel}}</button>\n</div>\n", styles: [".card-subform{background:#f9f6f6;border-radius:6px;padding:8px 0}.delete-icon{cursor:pointer;margin-right:10px;width:36px;height:36px;fill:none}.delete-icon path{stroke:#084fff;stroke-linecap:round;stroke-linejoin:round}.delete-icon rect{stroke:#d8d8d8;fill:#fff;width:35px;height:35px}.submissionScore{width:45px;height:37px;border-radius:6px;border:1px solid #c8c8c8;display:flex;justify-content:center;align-items:center;font-weight:500;text-align:center;padding:0}.submissionScore span{margin-top:5px}.submissionScore.good-score{border-color:#50f550}.submissionScore.bad-score{border-color:#f08080}\n"] }]
+        }], ctorParameters: function () { return [{ type: ScoreCalculationService }, { type: WhenClauseService }, { type: HiddenFieldService }, { type: i1$3.MatDialog }]; }, propDecorators: { subForm: [{
                 type: Input
             }], acceptedLanguage: [{
                 type: Input
@@ -8936,11 +9166,11 @@ class SubFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormComponent, deps: [{ token: SubformCopyService }, { token: i1$3.MatDialog }, { token: DataService }, { token: FormService }, { token: WhenClauseService }, { token: ValidationService }, { token: ScoreCalculationService }], 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", edit: "edit", acceptedLanguage: "acceptedLanguage", pages: "pages" }, outputs: { subFormChange: "subFormChange" }, host: { listeners: { "click": "onAnyClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"outer-container mb-4 px-3\"\r\n  [id]=\"'question-' + subForm.id\"\r\n  [attr.name]=\"subForm.testElementName\"\r\n  *ngIf=\"!subForm.deleted\"\r\n>\r\n  <div class=\"body py-1 px-1\">\r\n    <div class=\"tab-content pt-4 pb-3 px-3\">\r\n      <ng-container *ngIf=\"!subForm.copied; else copySubformContainer\">\r\n        <div class=\"subform-header\">\r\n          <div class=\"data-container\">\r\n            <p class=\"sectionTitle\">{{ subForm.title }}</p>\r\n            <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\r\n          </div>\r\n          <div class=\"d-flex gap-3\">\r\n            <div\r\n              class=\"finalScore\"\r\n              *ngFor=\"let s of subForm?.scores\"\r\n              [ngClass]=\"{\r\n                goodScore: s.scoreType === 'GOOD_SCORE',\r\n                badScore: s.scoreType === 'BAD_SCORE'\r\n              }\"\r\n            >\r\n              <span class=\"scoreTitle\">Score</span>\r\n              <p class=\"mb-0\">{{ s.score }}</p>\r\n            </div>\r\n            <div class=\"icon-container\">\r\n              <img\r\n                src=\"assets/icons/copy-icon.svg\"\r\n                alt=\"copy-icon\"\r\n                (click)=\"copySubform()\"\r\n                *ngIf=\"allowCopy\"\r\n              />\r\n              <img\r\n                src=\"assets/icons/delete-icon.svg\"\r\n                class=\"delete-icon ms-3\"\r\n                alt=\"delete icon\"\r\n                (click)=\"deleteMainSubform(subForm.id)\"\r\n                *ngIf=\"allowDelete\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #copySubformContainer>\r\n        <div class=\"d-flex justify-content-end gap-4\">\r\n          <div\r\n              class=\"finalScore\"\r\n              *ngFor=\"let s of subForm?.scores\"\r\n              [ngClass]=\"{\r\n                goodScore: s.scoreType === 'GOOD_SCORE',\r\n                badScore: s.scoreType === 'BAD_SCORE'\r\n              }\"\r\n            >\r\n              <span class=\"scoreTitle\">Score</span>\r\n              <p class=\"mb-0\">{{ s.score }}</p>\r\n            </div>\r\n          <div class=\"icon-container\" (click)=\"deleteCopySubform(subForm.id)\">\r\n            <img\r\n              src=\"assets/icons/delete-icon.svg\"\r\n              class=\"delete-icon\"\r\n              alt=\"delete icon\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"copy-subform-container mb-3\">\r\n          <p>Title</p>\r\n          <input\r\n            type=\"text\"\r\n            class=\"form-control\"\r\n            [(ngModel)]=\"subformTitle\"\r\n            (ngModelChange)=\"updateSubformData($event, subForm.id, 'title')\"\r\n          />\r\n          <p class=\"mt-3\">Description</p>\r\n          <quill-editor\r\n            [(ngModel)]=\"subformDescription\"\r\n            (ngModelChange)=\"\r\n              updateSubformData($event, subForm.id, 'description')\r\n            \"\r\n            (onEditorCreated)=\"editorCreated($event)\"\r\n            class=\"editor\"\r\n            placeholder=\"\"\r\n          ></quill-editor>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div *ngIf=\"subForm.property.subFormStructure == 'multiple'\">\r\n        <lib-multiple-subform\r\n          *ngIf=\"subForm.property.subFormType === 'table'\"\r\n          [subForm]=\"subForm\"\r\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n          [acceptedLanguage]=\"acceptedLanguage\"\r\n        ></lib-multiple-subform>\r\n\r\n        <lib-inline-multiple-subform\r\n          *ngIf=\"subForm.property.subFormType === 'inline'\"\r\n          [subForm]=\"subForm\"\r\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n          [acceptedLanguage]=\"acceptedLanguage\"\r\n        ></lib-inline-multiple-subform>\r\n        <lib-card-subform\r\n          *ngIf=\"subForm.property.subFormType === 'card'\"\r\n          [subForm]=\"subForm\"\r\n          [acceptedLanguage]=\"acceptedLanguage\"\r\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n          [edit]=\"edit\"\r\n        ></lib-card-subform>\r\n      </div>\r\n      <div *ngIf=\"subForm.property.subFormStructure == 'single'\">\r\n        <div *ngFor=\"let row of subForm.rows\">\r\n          <div class=\"d-flex\">\r\n            <div\r\n              *ngFor=\"let grid of row.grid\"\r\n              [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\r\n            >\r\n              <div *ngIf=\"grid.entityType === 'QUESTION' && grid.show\">\r\n                <div [ngSwitch]=\"grid.element.formElement.elementType\">\r\n                  <lib-check-box-fields\r\n                    *ngSwitchCase=\"'CHECK_BOX'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-check-box-fields>\r\n                  <lib-date-time-fields\r\n                    *ngSwitchCase=\"'DATE_TIME'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-date-time-fields>\r\n                  <lib-drop-down-fields\r\n                    *ngSwitchCase=\"'DROP_DOWN'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-drop-down-fields>\r\n                  <lib-file-picker-fields\r\n                    *ngSwitchCase=\"'FILE_PICKER'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-file-picker-fields>\r\n                  <lib-location-fields\r\n                    *ngSwitchCase=\"'LOCATION'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-location-fields>\r\n                  <lib-mail-fields\r\n                    *ngSwitchCase=\"'EMAIL'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-mail-fields>\r\n                  <lib-mobile-fields\r\n                    *ngSwitchCase=\"'MOBILE'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-mobile-fields>\r\n                  <lib-number-fields\r\n                    *ngSwitchCase=\"'NUMBER'\"\r\n                    [question]=\"grid.element\"\r\n                    [rowId]=\"'0'\"\r\n                  ></lib-number-fields>\r\n                  <lib-password-fields\r\n                    *ngSwitchCase=\"'PASSWORD'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-password-fields>\r\n                  <lib-radio-button-fields\r\n                    *ngSwitchCase=\"'RADIO_BUTTON'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-radio-button-fields>\r\n                  <lib-rich-text-editor-fields\r\n                    *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-rich-text-editor-fields>\r\n                  <lib-selection-matrix-fields\r\n                    *ngSwitchCase=\"'SELECTION_MATRIX'\"\r\n                    [question]=\"grid.element\"\r\n                    [acceptedLanguage]=\"acceptedLanguage\"\r\n                  ></lib-selection-matrix-fields>\r\n                  <lib-signature-fields\r\n                    *ngSwitchCase=\"'SIGNATURE'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-signature-fields>\r\n                  <lib-slider-fields\r\n                    *ngSwitchCase=\"'SLIDER'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-slider-fields>\r\n                  <lib-terms-and-condition-fields\r\n                    *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-terms-and-condition-fields>\r\n                  <lib-text-area-fields\r\n                    *ngSwitchCase=\"'TEXT_AREA'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-text-area-fields>\r\n                  <lib-text-fields\r\n                    *ngSwitchCase=\"'TEXT_BOX'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-text-fields>\r\n                  <lib-toggle-switch-fields\r\n                    *ngSwitchCase=\"'TOGGLE_SWITCH'\"\r\n                    [question]=\"grid.element\"\r\n                    [acceptedLanguage]=\"acceptedLanguage\"\r\n                  ></lib-toggle-switch-fields>\r\n                  <lib-url-fields\r\n                    *ngSwitchCase=\"'URL'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-url-fields>\r\n                  <lib-currency-fields\r\n                    *ngSwitchCase=\"'CURRENCY'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-currency-fields>\r\n                  <lib-aggregate-function\r\n                    *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\r\n                    [question]=\"grid.element\"\r\n                    [rowId]=\"'0'\"\r\n                  ></lib-aggregate-function>\r\n                  <lib-hidden-field\r\n                    *ngSwitchCase=\"'HIDDEN_FIELD'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-hidden-field>\r\n                  <lib-iframe-fields\r\n                    *ngSwitchCase=\"'IFRAME_WIDGET'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-iframe-fields>\r\n                </div>\r\n\r\n                <!-- <ng-container *ngIf=\"grid.element.childLogics\">\r\n                  <ng-container\r\n                    *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as outlet\">\r\n                    <ng-container *ngComponentOutlet=\"outlet.component | async; injector: outlet.injector\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ng-container> -->\r\n                <ng-container *ngIf=\"grid?.element?.childLogics\">\r\n                  <ng-container *ngIf=\"componentToLoad\">\r\n                    <ng-container\r\n                      *ngComponentOutlet=\"\r\n                        componentToLoad;\r\n                        inputs: {\r\n                          grid: grid?.element?.childLogics,\r\n                          answer: grid?.element?.answer,\r\n                          state: 'child'\r\n                        }\r\n                      \"\r\n                    ></ng-container>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <div *ngIf=\"grid.entityType === 'SECTION' && grid.show\">\r\n                <lib-section-fields\r\n                  [section]=\"grid.element\"\r\n                ></lib-section-fields>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"isInvalid\" class=\"error-message mt-4\">\r\n        {{ errorMessage }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".outer-container{background-color:#fff;position:relative}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}.subform-header{display:flex;justify-content:space-between;margin-bottom:10px}.icon-container{cursor:pointer}.delete-icon{height:36px;width:36px}.finalScore{width:57px;height:52px;border-radius:6px;border:1px solid #c8c8c8;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:500}.goodScore{border-color:#50f550}.badScore{border-color:#f08080}.scoreTitle{font-weight:400;font-size:14px;color:#2b2e3e80}.error-message{color:#f44336;font-size:1em;margin-top:4px;padding:0 8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: ["question"] }, { kind: "component", type: i5$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultipleSubformComponent, selector: "lib-multiple-subform", inputs: ["subForm", "acceptedLanguage"], outputs: ["subFormChange"] }, { kind: "component", type: InlineMultipleSubformComponent, selector: "lib-inline-multiple-subform", inputs: ["subForm", "acceptedLanguage"], outputs: ["subFormChange"] }, { kind: "component", type: CardSubformComponent, selector: "lib-card-subform", inputs: ["subForm", "acceptedLanguage", "edit"], outputs: ["subFormChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubFormComponent, selector: "lib-sub-form", inputs: { subForm: "subForm", edit: "edit", acceptedLanguage: "acceptedLanguage", pages: "pages" }, outputs: { subFormChange: "subFormChange" }, host: { listeners: { "click": "onAnyClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"outer-container mb-4 px-3\"\n  [id]=\"'question-' + subForm.id\"\n  [attr.name]=\"subForm.testElementName\"\n  *ngIf=\"!subForm.deleted\"\n>\n  <div class=\"body py-1 px-1\">\n    <div class=\"tab-content pt-4 pb-3 px-3\">\n      <ng-container *ngIf=\"!subForm.copied; else copySubformContainer\">\n        <div class=\"subform-header\">\n          <div class=\"data-container\">\n            <p class=\"sectionTitle\">{{ subForm.title }}</p>\n            <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\n          </div>\n          <div class=\"d-flex gap-3\">\n            <div\n              class=\"finalScore\"\n              *ngFor=\"let s of subForm?.scores\"\n              [ngClass]=\"{\n                goodScore: s.scoreType === 'GOOD_SCORE',\n                badScore: s.scoreType === 'BAD_SCORE'\n              }\"\n            >\n              <span class=\"scoreTitle\">Score</span>\n              <p class=\"mb-0\">{{ s.score }}</p>\n            </div>\n            <div class=\"icon-container\">\n              <img\n                src=\"assets/icons/copy-icon.svg\"\n                alt=\"copy-icon\"\n                (click)=\"copySubform()\"\n                *ngIf=\"allowCopy\"\n              />\n              <img\n                src=\"assets/icons/delete-icon.svg\"\n                class=\"delete-icon ms-3\"\n                alt=\"delete icon\"\n                (click)=\"deleteMainSubform(subForm.id)\"\n                *ngIf=\"allowDelete\"\n              />\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-template #copySubformContainer>\n        <div class=\"d-flex justify-content-end gap-4\">\n          <ng-container *ngIf=\"subForm?.scores?.length\">\n          <div\n              class=\"finalScore\"\n              *ngFor=\"let s of subForm?.scores\"\n              [ngClass]=\"{\n                goodScore: s.scoreType === 'GOOD_SCORE',\n                badScore: s.scoreType === 'BAD_SCORE'\n              }\"\n            >\n              <span class=\"scoreTitle\">Score</span>\n              <p class=\"mb-0\">{{ s?.score }}</p>\n            </div>\n          </ng-container>\n          <div class=\"icon-container\" (click)=\"deleteCopySubform(subForm.id)\">\n            <img\n              src=\"assets/icons/delete-icon.svg\"\n              class=\"delete-icon\"\n              alt=\"delete icon\"\n            />\n          </div>\n        </div>\n        <div class=\"copy-subform-container mb-3\">\n          <p>Title</p>\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [(ngModel)]=\"subformTitle\"\n            (ngModelChange)=\"updateSubformData($event, subForm.id, 'title')\"\n          />\n          <p class=\"mt-3\">Description</p>\n          <quill-editor\n            [(ngModel)]=\"subformDescription\"\n            (ngModelChange)=\"\n              updateSubformData($event, subForm.id, 'description')\n            \"\n            (onEditorCreated)=\"editorCreated($event)\"\n            class=\"editor\"\n            placeholder=\"\"\n          ></quill-editor>\n        </div>\n      </ng-template>\n\n      <div *ngIf=\"subForm.property.subFormStructure == 'multiple'\">\n        <lib-multiple-subform\n          *ngIf=\"subForm.property.subFormType === 'table'\"\n          [subForm]=\"subForm\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n        ></lib-multiple-subform>\n\n        <lib-inline-multiple-subform\n          *ngIf=\"subForm.property.subFormType === 'inline'\"\n          [subForm]=\"subForm\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n        ></lib-inline-multiple-subform>\n        <lib-card-subform\n          *ngIf=\"subForm.property.subFormType === 'card'\"\n          [subForm]=\"subForm\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          [edit]=\"edit\"\n        ></lib-card-subform>\n      </div>\n      <div *ngIf=\"subForm.property.subFormStructure == 'single'\">\n        <div *ngFor=\"let row of subForm.rows\">\n          <div class=\"d-flex\">\n            <div\n              *ngFor=\"let grid of row.grid\"\n              [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\n            >\n              <div *ngIf=\"grid.entityType === 'QUESTION' && grid.show\">\n                <div [ngSwitch]=\"grid.element.formElement.elementType\">\n                  <lib-check-box-fields\n                    *ngSwitchCase=\"'CHECK_BOX'\"\n                    [question]=\"grid.element\"\n                  ></lib-check-box-fields>\n                  <lib-date-time-fields\n                    *ngSwitchCase=\"'DATE_TIME'\"\n                    [question]=\"grid.element\"\n                  ></lib-date-time-fields>\n                  <lib-drop-down-fields\n                    *ngSwitchCase=\"'DROP_DOWN'\"\n                    [question]=\"grid.element\"\n                  ></lib-drop-down-fields>\n                  <lib-file-picker-fields\n                    *ngSwitchCase=\"'FILE_PICKER'\"\n                    [question]=\"grid.element\"\n                  ></lib-file-picker-fields>\n                  <lib-location-fields\n                    *ngSwitchCase=\"'LOCATION'\"\n                    [question]=\"grid.element\"\n                  ></lib-location-fields>\n                  <lib-mail-fields\n                    *ngSwitchCase=\"'EMAIL'\"\n                    [question]=\"grid.element\"\n                  ></lib-mail-fields>\n                  <lib-mobile-fields\n                    *ngSwitchCase=\"'MOBILE'\"\n                    [question]=\"grid.element\"\n                  ></lib-mobile-fields>\n                  <lib-number-fields\n                    *ngSwitchCase=\"'NUMBER'\"\n                    [question]=\"grid.element\"\n                    [rowId]=\"'0'\"\n                  ></lib-number-fields>\n                  <lib-password-fields\n                    *ngSwitchCase=\"'PASSWORD'\"\n                    [question]=\"grid.element\"\n                  ></lib-password-fields>\n                  <lib-radio-button-fields\n                    *ngSwitchCase=\"'RADIO_BUTTON'\"\n                    [question]=\"grid.element\"\n                  ></lib-radio-button-fields>\n                  <lib-rich-text-editor-fields\n                    *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\n                    [question]=\"grid.element\"\n                  ></lib-rich-text-editor-fields>\n                  <lib-selection-matrix-fields\n                    *ngSwitchCase=\"'SELECTION_MATRIX'\"\n                    [question]=\"grid.element\"\n                    [acceptedLanguage]=\"acceptedLanguage\"\n                  ></lib-selection-matrix-fields>\n                  <lib-signature-fields\n                    *ngSwitchCase=\"'SIGNATURE'\"\n                    [question]=\"grid.element\"\n                  ></lib-signature-fields>\n                  <lib-slider-fields\n                    *ngSwitchCase=\"'SLIDER'\"\n                    [question]=\"grid.element\"\n                  ></lib-slider-fields>\n                  <lib-terms-and-condition-fields\n                    *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\n                    [question]=\"grid.element\"\n                  ></lib-terms-and-condition-fields>\n                  <lib-text-area-fields\n                    *ngSwitchCase=\"'TEXT_AREA'\"\n                    [question]=\"grid.element\"\n                  ></lib-text-area-fields>\n                  <lib-text-fields\n                    *ngSwitchCase=\"'TEXT_BOX'\"\n                    [question]=\"grid.element\"\n                  ></lib-text-fields>\n                  <lib-toggle-switch-fields\n                    *ngSwitchCase=\"'TOGGLE_SWITCH'\"\n                    [question]=\"grid.element\"\n                    [acceptedLanguage]=\"acceptedLanguage\"\n                  ></lib-toggle-switch-fields>\n                  <lib-url-fields\n                    *ngSwitchCase=\"'URL'\"\n                    [question]=\"grid.element\"\n                  ></lib-url-fields>\n                  <lib-currency-fields\n                    *ngSwitchCase=\"'CURRENCY'\"\n                    [question]=\"grid.element\"\n                  ></lib-currency-fields>\n                  <lib-aggregate-function\n                    *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\n                    [question]=\"grid.element\"\n                    [rowId]=\"'0'\"\n                  ></lib-aggregate-function>\n                  <lib-hidden-field\n                    *ngSwitchCase=\"'HIDDEN_FIELD'\"\n                    [question]=\"grid.element\"\n                  ></lib-hidden-field>\n                  <lib-iframe-fields\n                    *ngSwitchCase=\"'IFRAME_WIDGET'\"\n                    [question]=\"grid.element\"\n                  ></lib-iframe-fields>\n                </div>\n\n                <!-- <ng-container *ngIf=\"grid.element.childLogics\">\n                  <ng-container\n                    *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as outlet\">\n                    <ng-container *ngComponentOutlet=\"outlet.component | async; injector: outlet.injector\">\n                    </ng-container>\n                  </ng-container>\n                </ng-container> -->\n                <ng-container *ngIf=\"grid?.element?.childLogics\">\n                  <ng-container *ngIf=\"componentToLoad\">\n                    <ng-container\n                      *ngComponentOutlet=\"\n                        componentToLoad;\n                        inputs: {\n                          grid: grid?.element?.childLogics,\n                          answer: grid?.element?.answer,\n                          state: 'child'\n                        }\n                      \"\n                    ></ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n\n              <div *ngIf=\"grid.entityType === 'SECTION' && grid.show\">\n                <lib-section-fields\n                  [section]=\"grid.element\"\n                ></lib-section-fields>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"isInvalid\" class=\"error-message mt-4\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;position:relative}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}.subform-header{display:flex;justify-content:space-between;margin-bottom:10px}.icon-container{cursor:pointer}.delete-icon{height:36px;width:36px}.finalScore{width:57px;height:52px;border-radius:6px;border:1px solid #c8c8c8;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:500}.goodScore{border-color:#50f550}.badScore{border-color:#f08080}.scoreTitle{font-weight:400;font-size:14px;color:#2b2e3e80}.error-message{color:#f44336;font-size:1em;margin-top:4px;padding:0 8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: ["question"] }, { kind: "component", type: i6.QuillEditorComponent, selector: "quill-editor" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultipleSubformComponent, selector: "lib-multiple-subform", inputs: ["subForm", "acceptedLanguage"], outputs: ["subFormChange"] }, { kind: "component", type: InlineMultipleSubformComponent, selector: "lib-inline-multiple-subform", inputs: ["subForm", "acceptedLanguage"], outputs: ["subFormChange"] }, { kind: "component", type: CardSubformComponent, selector: "lib-card-subform", inputs: ["subForm", "acceptedLanguage", "edit"], 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\r\n  class=\"outer-container mb-4 px-3\"\r\n  [id]=\"'question-' + subForm.id\"\r\n  [attr.name]=\"subForm.testElementName\"\r\n  *ngIf=\"!subForm.deleted\"\r\n>\r\n  <div class=\"body py-1 px-1\">\r\n    <div class=\"tab-content pt-4 pb-3 px-3\">\r\n      <ng-container *ngIf=\"!subForm.copied; else copySubformContainer\">\r\n        <div class=\"subform-header\">\r\n          <div class=\"data-container\">\r\n            <p class=\"sectionTitle\">{{ subForm.title }}</p>\r\n            <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\r\n          </div>\r\n          <div class=\"d-flex gap-3\">\r\n            <div\r\n              class=\"finalScore\"\r\n              *ngFor=\"let s of subForm?.scores\"\r\n              [ngClass]=\"{\r\n                goodScore: s.scoreType === 'GOOD_SCORE',\r\n                badScore: s.scoreType === 'BAD_SCORE'\r\n              }\"\r\n            >\r\n              <span class=\"scoreTitle\">Score</span>\r\n              <p class=\"mb-0\">{{ s.score }}</p>\r\n            </div>\r\n            <div class=\"icon-container\">\r\n              <img\r\n                src=\"assets/icons/copy-icon.svg\"\r\n                alt=\"copy-icon\"\r\n                (click)=\"copySubform()\"\r\n                *ngIf=\"allowCopy\"\r\n              />\r\n              <img\r\n                src=\"assets/icons/delete-icon.svg\"\r\n                class=\"delete-icon ms-3\"\r\n                alt=\"delete icon\"\r\n                (click)=\"deleteMainSubform(subForm.id)\"\r\n                *ngIf=\"allowDelete\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #copySubformContainer>\r\n        <div class=\"d-flex justify-content-end gap-4\">\r\n          <div\r\n              class=\"finalScore\"\r\n              *ngFor=\"let s of subForm?.scores\"\r\n              [ngClass]=\"{\r\n                goodScore: s.scoreType === 'GOOD_SCORE',\r\n                badScore: s.scoreType === 'BAD_SCORE'\r\n              }\"\r\n            >\r\n              <span class=\"scoreTitle\">Score</span>\r\n              <p class=\"mb-0\">{{ s.score }}</p>\r\n            </div>\r\n          <div class=\"icon-container\" (click)=\"deleteCopySubform(subForm.id)\">\r\n            <img\r\n              src=\"assets/icons/delete-icon.svg\"\r\n              class=\"delete-icon\"\r\n              alt=\"delete icon\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"copy-subform-container mb-3\">\r\n          <p>Title</p>\r\n          <input\r\n            type=\"text\"\r\n            class=\"form-control\"\r\n            [(ngModel)]=\"subformTitle\"\r\n            (ngModelChange)=\"updateSubformData($event, subForm.id, 'title')\"\r\n          />\r\n          <p class=\"mt-3\">Description</p>\r\n          <quill-editor\r\n            [(ngModel)]=\"subformDescription\"\r\n            (ngModelChange)=\"\r\n              updateSubformData($event, subForm.id, 'description')\r\n            \"\r\n            (onEditorCreated)=\"editorCreated($event)\"\r\n            class=\"editor\"\r\n            placeholder=\"\"\r\n          ></quill-editor>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div *ngIf=\"subForm.property.subFormStructure == 'multiple'\">\r\n        <lib-multiple-subform\r\n          *ngIf=\"subForm.property.subFormType === 'table'\"\r\n          [subForm]=\"subForm\"\r\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n          [acceptedLanguage]=\"acceptedLanguage\"\r\n        ></lib-multiple-subform>\r\n\r\n        <lib-inline-multiple-subform\r\n          *ngIf=\"subForm.property.subFormType === 'inline'\"\r\n          [subForm]=\"subForm\"\r\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n          [acceptedLanguage]=\"acceptedLanguage\"\r\n        ></lib-inline-multiple-subform>\r\n        <lib-card-subform\r\n          *ngIf=\"subForm.property.subFormType === 'card'\"\r\n          [subForm]=\"subForm\"\r\n          [acceptedLanguage]=\"acceptedLanguage\"\r\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n          [edit]=\"edit\"\r\n        ></lib-card-subform>\r\n      </div>\r\n      <div *ngIf=\"subForm.property.subFormStructure == 'single'\">\r\n        <div *ngFor=\"let row of subForm.rows\">\r\n          <div class=\"d-flex\">\r\n            <div\r\n              *ngFor=\"let grid of row.grid\"\r\n              [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\r\n            >\r\n              <div *ngIf=\"grid.entityType === 'QUESTION' && grid.show\">\r\n                <div [ngSwitch]=\"grid.element.formElement.elementType\">\r\n                  <lib-check-box-fields\r\n                    *ngSwitchCase=\"'CHECK_BOX'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-check-box-fields>\r\n                  <lib-date-time-fields\r\n                    *ngSwitchCase=\"'DATE_TIME'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-date-time-fields>\r\n                  <lib-drop-down-fields\r\n                    *ngSwitchCase=\"'DROP_DOWN'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-drop-down-fields>\r\n                  <lib-file-picker-fields\r\n                    *ngSwitchCase=\"'FILE_PICKER'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-file-picker-fields>\r\n                  <lib-location-fields\r\n                    *ngSwitchCase=\"'LOCATION'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-location-fields>\r\n                  <lib-mail-fields\r\n                    *ngSwitchCase=\"'EMAIL'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-mail-fields>\r\n                  <lib-mobile-fields\r\n                    *ngSwitchCase=\"'MOBILE'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-mobile-fields>\r\n                  <lib-number-fields\r\n                    *ngSwitchCase=\"'NUMBER'\"\r\n                    [question]=\"grid.element\"\r\n                    [rowId]=\"'0'\"\r\n                  ></lib-number-fields>\r\n                  <lib-password-fields\r\n                    *ngSwitchCase=\"'PASSWORD'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-password-fields>\r\n                  <lib-radio-button-fields\r\n                    *ngSwitchCase=\"'RADIO_BUTTON'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-radio-button-fields>\r\n                  <lib-rich-text-editor-fields\r\n                    *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-rich-text-editor-fields>\r\n                  <lib-selection-matrix-fields\r\n                    *ngSwitchCase=\"'SELECTION_MATRIX'\"\r\n                    [question]=\"grid.element\"\r\n                    [acceptedLanguage]=\"acceptedLanguage\"\r\n                  ></lib-selection-matrix-fields>\r\n                  <lib-signature-fields\r\n                    *ngSwitchCase=\"'SIGNATURE'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-signature-fields>\r\n                  <lib-slider-fields\r\n                    *ngSwitchCase=\"'SLIDER'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-slider-fields>\r\n                  <lib-terms-and-condition-fields\r\n                    *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-terms-and-condition-fields>\r\n                  <lib-text-area-fields\r\n                    *ngSwitchCase=\"'TEXT_AREA'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-text-area-fields>\r\n                  <lib-text-fields\r\n                    *ngSwitchCase=\"'TEXT_BOX'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-text-fields>\r\n                  <lib-toggle-switch-fields\r\n                    *ngSwitchCase=\"'TOGGLE_SWITCH'\"\r\n                    [question]=\"grid.element\"\r\n                    [acceptedLanguage]=\"acceptedLanguage\"\r\n                  ></lib-toggle-switch-fields>\r\n                  <lib-url-fields\r\n                    *ngSwitchCase=\"'URL'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-url-fields>\r\n                  <lib-currency-fields\r\n                    *ngSwitchCase=\"'CURRENCY'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-currency-fields>\r\n                  <lib-aggregate-function\r\n                    *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\r\n                    [question]=\"grid.element\"\r\n                    [rowId]=\"'0'\"\r\n                  ></lib-aggregate-function>\r\n                  <lib-hidden-field\r\n                    *ngSwitchCase=\"'HIDDEN_FIELD'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-hidden-field>\r\n                  <lib-iframe-fields\r\n                    *ngSwitchCase=\"'IFRAME_WIDGET'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-iframe-fields>\r\n                </div>\r\n\r\n                <!-- <ng-container *ngIf=\"grid.element.childLogics\">\r\n                  <ng-container\r\n                    *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as outlet\">\r\n                    <ng-container *ngComponentOutlet=\"outlet.component | async; injector: outlet.injector\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ng-container> -->\r\n                <ng-container *ngIf=\"grid?.element?.childLogics\">\r\n                  <ng-container *ngIf=\"componentToLoad\">\r\n                    <ng-container\r\n                      *ngComponentOutlet=\"\r\n                        componentToLoad;\r\n                        inputs: {\r\n                          grid: grid?.element?.childLogics,\r\n                          answer: grid?.element?.answer,\r\n                          state: 'child'\r\n                        }\r\n                      \"\r\n                    ></ng-container>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n\r\n              <div *ngIf=\"grid.entityType === 'SECTION' && grid.show\">\r\n                <lib-section-fields\r\n                  [section]=\"grid.element\"\r\n                ></lib-section-fields>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"isInvalid\" class=\"error-message mt-4\">\r\n        {{ errorMessage }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".outer-container{background-color:#fff;position:relative}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}.subform-header{display:flex;justify-content:space-between;margin-bottom:10px}.icon-container{cursor:pointer}.delete-icon{height:36px;width:36px}.finalScore{width:57px;height:52px;border-radius:6px;border:1px solid #c8c8c8;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:500}.goodScore{border-color:#50f550}.badScore{border-color:#f08080}.scoreTitle{font-weight:400;font-size:14px;color:#2b2e3e80}.error-message{color:#f44336;font-size:1em;margin-top:4px;padding:0 8px}\n"] }]
+            args: [{ selector: 'lib-sub-form', template: "<div\n  class=\"outer-container mb-4 px-3\"\n  [id]=\"'question-' + subForm.id\"\n  [attr.name]=\"subForm.testElementName\"\n  *ngIf=\"!subForm.deleted\"\n>\n  <div class=\"body py-1 px-1\">\n    <div class=\"tab-content pt-4 pb-3 px-3\">\n      <ng-container *ngIf=\"!subForm.copied; else copySubformContainer\">\n        <div class=\"subform-header\">\n          <div class=\"data-container\">\n            <p class=\"sectionTitle\">{{ subForm.title }}</p>\n            <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\n          </div>\n          <div class=\"d-flex gap-3\">\n            <div\n              class=\"finalScore\"\n              *ngFor=\"let s of subForm?.scores\"\n              [ngClass]=\"{\n                goodScore: s.scoreType === 'GOOD_SCORE',\n                badScore: s.scoreType === 'BAD_SCORE'\n              }\"\n            >\n              <span class=\"scoreTitle\">Score</span>\n              <p class=\"mb-0\">{{ s.score }}</p>\n            </div>\n            <div class=\"icon-container\">\n              <img\n                src=\"assets/icons/copy-icon.svg\"\n                alt=\"copy-icon\"\n                (click)=\"copySubform()\"\n                *ngIf=\"allowCopy\"\n              />\n              <img\n                src=\"assets/icons/delete-icon.svg\"\n                class=\"delete-icon ms-3\"\n                alt=\"delete icon\"\n                (click)=\"deleteMainSubform(subForm.id)\"\n                *ngIf=\"allowDelete\"\n              />\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-template #copySubformContainer>\n        <div class=\"d-flex justify-content-end gap-4\">\n          <ng-container *ngIf=\"subForm?.scores?.length\">\n          <div\n              class=\"finalScore\"\n              *ngFor=\"let s of subForm?.scores\"\n              [ngClass]=\"{\n                goodScore: s.scoreType === 'GOOD_SCORE',\n                badScore: s.scoreType === 'BAD_SCORE'\n              }\"\n            >\n              <span class=\"scoreTitle\">Score</span>\n              <p class=\"mb-0\">{{ s?.score }}</p>\n            </div>\n          </ng-container>\n          <div class=\"icon-container\" (click)=\"deleteCopySubform(subForm.id)\">\n            <img\n              src=\"assets/icons/delete-icon.svg\"\n              class=\"delete-icon\"\n              alt=\"delete icon\"\n            />\n          </div>\n        </div>\n        <div class=\"copy-subform-container mb-3\">\n          <p>Title</p>\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [(ngModel)]=\"subformTitle\"\n            (ngModelChange)=\"updateSubformData($event, subForm.id, 'title')\"\n          />\n          <p class=\"mt-3\">Description</p>\n          <quill-editor\n            [(ngModel)]=\"subformDescription\"\n            (ngModelChange)=\"\n              updateSubformData($event, subForm.id, 'description')\n            \"\n            (onEditorCreated)=\"editorCreated($event)\"\n            class=\"editor\"\n            placeholder=\"\"\n          ></quill-editor>\n        </div>\n      </ng-template>\n\n      <div *ngIf=\"subForm.property.subFormStructure == 'multiple'\">\n        <lib-multiple-subform\n          *ngIf=\"subForm.property.subFormType === 'table'\"\n          [subForm]=\"subForm\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n        ></lib-multiple-subform>\n\n        <lib-inline-multiple-subform\n          *ngIf=\"subForm.property.subFormType === 'inline'\"\n          [subForm]=\"subForm\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n        ></lib-inline-multiple-subform>\n        <lib-card-subform\n          *ngIf=\"subForm.property.subFormType === 'card'\"\n          [subForm]=\"subForm\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          [edit]=\"edit\"\n        ></lib-card-subform>\n      </div>\n      <div *ngIf=\"subForm.property.subFormStructure == 'single'\">\n        <div *ngFor=\"let row of subForm.rows\">\n          <div class=\"d-flex\">\n            <div\n              *ngFor=\"let grid of row.grid\"\n              [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\n            >\n              <div *ngIf=\"grid.entityType === 'QUESTION' && grid.show\">\n                <div [ngSwitch]=\"grid.element.formElement.elementType\">\n                  <lib-check-box-fields\n                    *ngSwitchCase=\"'CHECK_BOX'\"\n                    [question]=\"grid.element\"\n                  ></lib-check-box-fields>\n                  <lib-date-time-fields\n                    *ngSwitchCase=\"'DATE_TIME'\"\n                    [question]=\"grid.element\"\n                  ></lib-date-time-fields>\n                  <lib-drop-down-fields\n                    *ngSwitchCase=\"'DROP_DOWN'\"\n                    [question]=\"grid.element\"\n                  ></lib-drop-down-fields>\n                  <lib-file-picker-fields\n                    *ngSwitchCase=\"'FILE_PICKER'\"\n                    [question]=\"grid.element\"\n                  ></lib-file-picker-fields>\n                  <lib-location-fields\n                    *ngSwitchCase=\"'LOCATION'\"\n                    [question]=\"grid.element\"\n                  ></lib-location-fields>\n                  <lib-mail-fields\n                    *ngSwitchCase=\"'EMAIL'\"\n                    [question]=\"grid.element\"\n                  ></lib-mail-fields>\n                  <lib-mobile-fields\n                    *ngSwitchCase=\"'MOBILE'\"\n                    [question]=\"grid.element\"\n                  ></lib-mobile-fields>\n                  <lib-number-fields\n                    *ngSwitchCase=\"'NUMBER'\"\n                    [question]=\"grid.element\"\n                    [rowId]=\"'0'\"\n                  ></lib-number-fields>\n                  <lib-password-fields\n                    *ngSwitchCase=\"'PASSWORD'\"\n                    [question]=\"grid.element\"\n                  ></lib-password-fields>\n                  <lib-radio-button-fields\n                    *ngSwitchCase=\"'RADIO_BUTTON'\"\n                    [question]=\"grid.element\"\n                  ></lib-radio-button-fields>\n                  <lib-rich-text-editor-fields\n                    *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\n                    [question]=\"grid.element\"\n                  ></lib-rich-text-editor-fields>\n                  <lib-selection-matrix-fields\n                    *ngSwitchCase=\"'SELECTION_MATRIX'\"\n                    [question]=\"grid.element\"\n                    [acceptedLanguage]=\"acceptedLanguage\"\n                  ></lib-selection-matrix-fields>\n                  <lib-signature-fields\n                    *ngSwitchCase=\"'SIGNATURE'\"\n                    [question]=\"grid.element\"\n                  ></lib-signature-fields>\n                  <lib-slider-fields\n                    *ngSwitchCase=\"'SLIDER'\"\n                    [question]=\"grid.element\"\n                  ></lib-slider-fields>\n                  <lib-terms-and-condition-fields\n                    *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\n                    [question]=\"grid.element\"\n                  ></lib-terms-and-condition-fields>\n                  <lib-text-area-fields\n                    *ngSwitchCase=\"'TEXT_AREA'\"\n                    [question]=\"grid.element\"\n                  ></lib-text-area-fields>\n                  <lib-text-fields\n                    *ngSwitchCase=\"'TEXT_BOX'\"\n                    [question]=\"grid.element\"\n                  ></lib-text-fields>\n                  <lib-toggle-switch-fields\n                    *ngSwitchCase=\"'TOGGLE_SWITCH'\"\n                    [question]=\"grid.element\"\n                    [acceptedLanguage]=\"acceptedLanguage\"\n                  ></lib-toggle-switch-fields>\n                  <lib-url-fields\n                    *ngSwitchCase=\"'URL'\"\n                    [question]=\"grid.element\"\n                  ></lib-url-fields>\n                  <lib-currency-fields\n                    *ngSwitchCase=\"'CURRENCY'\"\n                    [question]=\"grid.element\"\n                  ></lib-currency-fields>\n                  <lib-aggregate-function\n                    *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\n                    [question]=\"grid.element\"\n                    [rowId]=\"'0'\"\n                  ></lib-aggregate-function>\n                  <lib-hidden-field\n                    *ngSwitchCase=\"'HIDDEN_FIELD'\"\n                    [question]=\"grid.element\"\n                  ></lib-hidden-field>\n                  <lib-iframe-fields\n                    *ngSwitchCase=\"'IFRAME_WIDGET'\"\n                    [question]=\"grid.element\"\n                  ></lib-iframe-fields>\n                </div>\n\n                <!-- <ng-container *ngIf=\"grid.element.childLogics\">\n                  <ng-container\n                    *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as outlet\">\n                    <ng-container *ngComponentOutlet=\"outlet.component | async; injector: outlet.injector\">\n                    </ng-container>\n                  </ng-container>\n                </ng-container> -->\n                <ng-container *ngIf=\"grid?.element?.childLogics\">\n                  <ng-container *ngIf=\"componentToLoad\">\n                    <ng-container\n                      *ngComponentOutlet=\"\n                        componentToLoad;\n                        inputs: {\n                          grid: grid?.element?.childLogics,\n                          answer: grid?.element?.answer,\n                          state: 'child'\n                        }\n                      \"\n                    ></ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n\n              <div *ngIf=\"grid.entityType === 'SECTION' && grid.show\">\n                <lib-section-fields\n                  [section]=\"grid.element\"\n                ></lib-section-fields>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"isInvalid\" class=\"error-message mt-4\">\n        {{ errorMessage }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;position:relative}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}.subform-header{display:flex;justify-content:space-between;margin-bottom:10px}.icon-container{cursor:pointer}.delete-icon{height:36px;width:36px}.finalScore{width:57px;height:52px;border-radius:6px;border:1px solid #c8c8c8;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:500}.goodScore{border-color:#50f550}.badScore{border-color:#f08080}.scoreTitle{font-weight:400;font-size:14px;color:#2b2e3e80}.error-message{color:#f44336;font-size:1em;margin-top:4px;padding:0 8px}\n"] }]
         }], ctorParameters: function () { return [{ type: SubformCopyService }, { type: i1$3.MatDialog }, { type: DataService }, { type: FormService }, { type: WhenClauseService }, { type: ValidationService }, { type: ScoreCalculationService }]; }, propDecorators: { subForm: [{
                 type: Input
             }], edit: [{
@@ -9018,11 +9248,11 @@ class QuestionGroupComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuestionGroupComponent, deps: [{ token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QuestionGroupComponent, selector: "lib-question-group", inputs: { questionGroup: "questionGroup", edit: "edit", acceptedLanguage: "acceptedLanguage" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"outer-container mb-4 px-3\"\r\n  [attr.name]=\"questionGroup.testElementName\"\r\n  [id]=\"'question-' + questionGroup.id\"\r\n>\r\n  <div class=\"body container pt-3 pb-3 px-3\">\r\n    <div class=\"tab-content pt-4 pb-3 px-3\">\r\n      <p class=\"sectionTitle\">{{ questionGroup.title }}</p>\r\n      <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\r\n\r\n      <div class=\"mt-5\">\r\n        <div *ngFor=\"let row of questionGroup.rows\">\r\n          <div class=\"d-flex\">\r\n            <div\r\n              *ngFor=\"let grid of row.grid\"\r\n              [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\r\n            >\r\n              <div *ngIf=\"grid.entityType === 'QUESTION' && grid.show\">\r\n                <div [ngSwitch]=\"grid.element.formElement.elementType\">\r\n                  <lib-check-box-fields\r\n                    *ngSwitchCase=\"'CHECK_BOX'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-check-box-fields>\r\n                  <lib-date-time-fields\r\n                    *ngSwitchCase=\"'DATE_TIME'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-date-time-fields>\r\n                  <lib-drop-down-fields\r\n                    *ngSwitchCase=\"'DROP_DOWN'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-drop-down-fields>\r\n                  <lib-file-picker-fields\r\n                    *ngSwitchCase=\"'FILE_PICKER'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-file-picker-fields>\r\n                  <lib-location-fields\r\n                    *ngSwitchCase=\"'LOCATION'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-location-fields>\r\n                  <lib-mail-fields\r\n                    *ngSwitchCase=\"'EMAIL'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-mail-fields>\r\n                  <lib-mobile-fields\r\n                    *ngSwitchCase=\"'MOBILE'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-mobile-fields>\r\n                  <lib-number-fields\r\n                    *ngSwitchCase=\"'NUMBER'\"\r\n                    [question]=\"grid.element\"\r\n                    [rowId]=\"'0'\"\r\n                  ></lib-number-fields>\r\n                  <lib-password-fields\r\n                    *ngSwitchCase=\"'PASSWORD'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-password-fields>\r\n                  <lib-radio-button-fields\r\n                    *ngSwitchCase=\"'RADIO_BUTTON'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-radio-button-fields>\r\n                  <lib-rich-text-editor-fields\r\n                    *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-rich-text-editor-fields>\r\n                  <lib-selection-matrix-fields\r\n                    *ngSwitchCase=\"'SELECTION_MATRIX'\"\r\n                    [question]=\"grid.element\"\r\n                    [acceptedLanguage]=\"acceptedLanguage\"\r\n                  ></lib-selection-matrix-fields>\r\n                  <lib-signature-fields\r\n                    *ngSwitchCase=\"'SIGNATURE'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-signature-fields>\r\n                  <lib-slider-fields\r\n                    *ngSwitchCase=\"'SLIDER'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-slider-fields>\r\n                  <lib-terms-and-condition-fields\r\n                    *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-terms-and-condition-fields>\r\n                  <lib-text-area-fields\r\n                    *ngSwitchCase=\"'TEXT_AREA'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-text-area-fields>\r\n                  <lib-text-fields\r\n                    *ngSwitchCase=\"'TEXT_BOX'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-text-fields>\r\n                  <lib-toggle-switch-fields\r\n                    *ngSwitchCase=\"'TOGGLE_SWITCH'\"\r\n                    [question]=\"grid.element\"\r\n                    [acceptedLanguage]=\"acceptedLanguage\"\r\n                  ></lib-toggle-switch-fields>\r\n                  <lib-url-fields\r\n                    *ngSwitchCase=\"'URL'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-url-fields>\r\n                  <lib-currency-fields\r\n                    *ngSwitchCase=\"'CURRENCY'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-currency-fields>\r\n                  <lib-aggregate-function\r\n                    *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\r\n                    [question]=\"grid.element\"\r\n                    [rowId]=\"'0'\"\r\n                  ></lib-aggregate-function>\r\n                  <lib-hidden-field\r\n                    *ngSwitchCase=\"'HIDDEN_FIELD'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-hidden-field>\r\n                  <lib-iframe-fields\r\n                    *ngSwitchCase=\"'IFRAME_WIDGET'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-iframe-fields>\r\n                </div>\r\n\r\n                <!-- <ng-container *ngIf=\"grid.element.childLogics\">\r\n                    <ng-container *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as cached\">\r\n                      <ng-container\r\n                        *ngComponentOutlet=\"cached.component | async; injector: cached.injector\">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                  </ng-container> -->\r\n\r\n                <ng-container *ngIf=\"grid?.element?.childLogics\">\r\n                  <ng-container *ngIf=\"componentToLoad\">\r\n                    <ng-container\r\n                      *ngComponentOutlet=\"\r\n                        componentToLoad;\r\n                        inputs: {\r\n                          grid: grid?.element?.childLogics,\r\n                          answer: grid?.element?.answer,\r\n                          state: 'child'\r\n                        }\r\n                      \"\r\n                    ></ng-container>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".outer-container{background-color:#fff;position:relative}@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:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: ["question"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QuestionGroupComponent, selector: "lib-question-group", inputs: { questionGroup: "questionGroup", edit: "edit", acceptedLanguage: "acceptedLanguage" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"outer-container mb-4 px-3\"\n  [attr.name]=\"questionGroup.testElementName\"\n  [id]=\"'question-' + questionGroup.id\"\n>\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\">{{ questionGroup.title }}</p>\n      <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\n\n      <div class=\"mt-5\">\n        <div *ngFor=\"let row of questionGroup.rows\">\n          <div class=\"d-flex\">\n            <div\n              *ngFor=\"let grid of row.grid\"\n              [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\n            >\n              <div *ngIf=\"grid.entityType === 'QUESTION' && grid.show\">\n                <div [ngSwitch]=\"grid.element.formElement.elementType\">\n                  <lib-check-box-fields\n                    *ngSwitchCase=\"'CHECK_BOX'\"\n                    [question]=\"grid.element\"\n                  ></lib-check-box-fields>\n                  <lib-date-time-fields\n                    *ngSwitchCase=\"'DATE_TIME'\"\n                    [question]=\"grid.element\"\n                  ></lib-date-time-fields>\n                  <lib-drop-down-fields\n                    *ngSwitchCase=\"'DROP_DOWN'\"\n                    [question]=\"grid.element\"\n                  ></lib-drop-down-fields>\n                  <lib-file-picker-fields\n                    *ngSwitchCase=\"'FILE_PICKER'\"\n                    [question]=\"grid.element\"\n                  ></lib-file-picker-fields>\n                  <lib-location-fields\n                    *ngSwitchCase=\"'LOCATION'\"\n                    [question]=\"grid.element\"\n                  ></lib-location-fields>\n                  <lib-mail-fields\n                    *ngSwitchCase=\"'EMAIL'\"\n                    [question]=\"grid.element\"\n                  ></lib-mail-fields>\n                  <lib-mobile-fields\n                    *ngSwitchCase=\"'MOBILE'\"\n                    [question]=\"grid.element\"\n                  ></lib-mobile-fields>\n                  <lib-number-fields\n                    *ngSwitchCase=\"'NUMBER'\"\n                    [question]=\"grid.element\"\n                    [rowId]=\"'0'\"\n                  ></lib-number-fields>\n                  <lib-password-fields\n                    *ngSwitchCase=\"'PASSWORD'\"\n                    [question]=\"grid.element\"\n                  ></lib-password-fields>\n                  <lib-radio-button-fields\n                    *ngSwitchCase=\"'RADIO_BUTTON'\"\n                    [question]=\"grid.element\"\n                  ></lib-radio-button-fields>\n                  <lib-rich-text-editor-fields\n                    *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\n                    [question]=\"grid.element\"\n                  ></lib-rich-text-editor-fields>\n                  <lib-selection-matrix-fields\n                    *ngSwitchCase=\"'SELECTION_MATRIX'\"\n                    [question]=\"grid.element\"\n                    [acceptedLanguage]=\"acceptedLanguage\"\n                  ></lib-selection-matrix-fields>\n                  <lib-signature-fields\n                    *ngSwitchCase=\"'SIGNATURE'\"\n                    [question]=\"grid.element\"\n                  ></lib-signature-fields>\n                  <lib-slider-fields\n                    *ngSwitchCase=\"'SLIDER'\"\n                    [question]=\"grid.element\"\n                  ></lib-slider-fields>\n                  <lib-terms-and-condition-fields\n                    *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\n                    [question]=\"grid.element\"\n                  ></lib-terms-and-condition-fields>\n                  <lib-text-area-fields\n                    *ngSwitchCase=\"'TEXT_AREA'\"\n                    [question]=\"grid.element\"\n                  ></lib-text-area-fields>\n                  <lib-text-fields\n                    *ngSwitchCase=\"'TEXT_BOX'\"\n                    [question]=\"grid.element\"\n                  ></lib-text-fields>\n                  <lib-toggle-switch-fields\n                    *ngSwitchCase=\"'TOGGLE_SWITCH'\"\n                    [question]=\"grid.element\"\n                    [acceptedLanguage]=\"acceptedLanguage\"\n                  ></lib-toggle-switch-fields>\n                  <lib-url-fields\n                    *ngSwitchCase=\"'URL'\"\n                    [question]=\"grid.element\"\n                  ></lib-url-fields>\n                  <lib-currency-fields\n                    *ngSwitchCase=\"'CURRENCY'\"\n                    [question]=\"grid.element\"\n                  ></lib-currency-fields>\n                  <lib-aggregate-function\n                    *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\n                    [question]=\"grid.element\"\n                    [rowId]=\"'0'\"\n                  ></lib-aggregate-function>\n                  <lib-hidden-field\n                    *ngSwitchCase=\"'HIDDEN_FIELD'\"\n                    [question]=\"grid.element\"\n                  ></lib-hidden-field>\n                  <lib-iframe-fields\n                    *ngSwitchCase=\"'IFRAME_WIDGET'\"\n                    [question]=\"grid.element\"\n                  ></lib-iframe-fields>\n                </div>\n\n                <!-- <ng-container *ngIf=\"grid.element.childLogics\">\n                    <ng-container *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as cached\">\n                      <ng-container\n                        *ngComponentOutlet=\"cached.component | async; injector: cached.injector\">\n                      </ng-container>\n                    </ng-container>\n                  </ng-container> -->\n\n                <ng-container *ngIf=\"grid?.element?.childLogics\">\n                  <ng-container *ngIf=\"componentToLoad\">\n                    <ng-container\n                      *ngComponentOutlet=\"\n                        componentToLoad;\n                        inputs: {\n                          grid: grid?.element?.childLogics,\n                          answer: grid?.element?.answer,\n                          state: 'child'\n                        }\n                      \"\n                    ></ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;position:relative}@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:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: AggregateFunctionComponent, selector: "lib-aggregate-function", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "component", type: IframeFieldsComponent, selector: "lib-iframe-fields", inputs: ["question"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuestionGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-group', template: "<div\r\n  class=\"outer-container mb-4 px-3\"\r\n  [attr.name]=\"questionGroup.testElementName\"\r\n  [id]=\"'question-' + questionGroup.id\"\r\n>\r\n  <div class=\"body container pt-3 pb-3 px-3\">\r\n    <div class=\"tab-content pt-4 pb-3 px-3\">\r\n      <p class=\"sectionTitle\">{{ questionGroup.title }}</p>\r\n      <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\r\n\r\n      <div class=\"mt-5\">\r\n        <div *ngFor=\"let row of questionGroup.rows\">\r\n          <div class=\"d-flex\">\r\n            <div\r\n              *ngFor=\"let grid of row.grid\"\r\n              [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\r\n            >\r\n              <div *ngIf=\"grid.entityType === 'QUESTION' && grid.show\">\r\n                <div [ngSwitch]=\"grid.element.formElement.elementType\">\r\n                  <lib-check-box-fields\r\n                    *ngSwitchCase=\"'CHECK_BOX'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-check-box-fields>\r\n                  <lib-date-time-fields\r\n                    *ngSwitchCase=\"'DATE_TIME'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-date-time-fields>\r\n                  <lib-drop-down-fields\r\n                    *ngSwitchCase=\"'DROP_DOWN'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-drop-down-fields>\r\n                  <lib-file-picker-fields\r\n                    *ngSwitchCase=\"'FILE_PICKER'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-file-picker-fields>\r\n                  <lib-location-fields\r\n                    *ngSwitchCase=\"'LOCATION'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-location-fields>\r\n                  <lib-mail-fields\r\n                    *ngSwitchCase=\"'EMAIL'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-mail-fields>\r\n                  <lib-mobile-fields\r\n                    *ngSwitchCase=\"'MOBILE'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-mobile-fields>\r\n                  <lib-number-fields\r\n                    *ngSwitchCase=\"'NUMBER'\"\r\n                    [question]=\"grid.element\"\r\n                    [rowId]=\"'0'\"\r\n                  ></lib-number-fields>\r\n                  <lib-password-fields\r\n                    *ngSwitchCase=\"'PASSWORD'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-password-fields>\r\n                  <lib-radio-button-fields\r\n                    *ngSwitchCase=\"'RADIO_BUTTON'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-radio-button-fields>\r\n                  <lib-rich-text-editor-fields\r\n                    *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-rich-text-editor-fields>\r\n                  <lib-selection-matrix-fields\r\n                    *ngSwitchCase=\"'SELECTION_MATRIX'\"\r\n                    [question]=\"grid.element\"\r\n                    [acceptedLanguage]=\"acceptedLanguage\"\r\n                  ></lib-selection-matrix-fields>\r\n                  <lib-signature-fields\r\n                    *ngSwitchCase=\"'SIGNATURE'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-signature-fields>\r\n                  <lib-slider-fields\r\n                    *ngSwitchCase=\"'SLIDER'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-slider-fields>\r\n                  <lib-terms-and-condition-fields\r\n                    *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-terms-and-condition-fields>\r\n                  <lib-text-area-fields\r\n                    *ngSwitchCase=\"'TEXT_AREA'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-text-area-fields>\r\n                  <lib-text-fields\r\n                    *ngSwitchCase=\"'TEXT_BOX'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-text-fields>\r\n                  <lib-toggle-switch-fields\r\n                    *ngSwitchCase=\"'TOGGLE_SWITCH'\"\r\n                    [question]=\"grid.element\"\r\n                    [acceptedLanguage]=\"acceptedLanguage\"\r\n                  ></lib-toggle-switch-fields>\r\n                  <lib-url-fields\r\n                    *ngSwitchCase=\"'URL'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-url-fields>\r\n                  <lib-currency-fields\r\n                    *ngSwitchCase=\"'CURRENCY'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-currency-fields>\r\n                  <lib-aggregate-function\r\n                    *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\r\n                    [question]=\"grid.element\"\r\n                    [rowId]=\"'0'\"\r\n                  ></lib-aggregate-function>\r\n                  <lib-hidden-field\r\n                    *ngSwitchCase=\"'HIDDEN_FIELD'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-hidden-field>\r\n                  <lib-iframe-fields\r\n                    *ngSwitchCase=\"'IFRAME_WIDGET'\"\r\n                    [question]=\"grid.element\"\r\n                  ></lib-iframe-fields>\r\n                </div>\r\n\r\n                <!-- <ng-container *ngIf=\"grid.element.childLogics\">\r\n                    <ng-container *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as cached\">\r\n                      <ng-container\r\n                        *ngComponentOutlet=\"cached.component | async; injector: cached.injector\">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                  </ng-container> -->\r\n\r\n                <ng-container *ngIf=\"grid?.element?.childLogics\">\r\n                  <ng-container *ngIf=\"componentToLoad\">\r\n                    <ng-container\r\n                      *ngComponentOutlet=\"\r\n                        componentToLoad;\r\n                        inputs: {\r\n                          grid: grid?.element?.childLogics,\r\n                          answer: grid?.element?.answer,\r\n                          state: 'child'\r\n                        }\r\n                      \"\r\n                    ></ng-container>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".outer-container{background-color:#fff;position:relative}@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:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}\n"] }]
+            args: [{ selector: 'lib-question-group', template: "<div\n  class=\"outer-container mb-4 px-3\"\n  [attr.name]=\"questionGroup.testElementName\"\n  [id]=\"'question-' + questionGroup.id\"\n>\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\">{{ questionGroup.title }}</p>\n      <p [innerHTML]=\"decodedDescription\" class=\"description\"></p>\n\n      <div class=\"mt-5\">\n        <div *ngFor=\"let row of questionGroup.rows\">\n          <div class=\"d-flex\">\n            <div\n              *ngFor=\"let grid of row.grid\"\n              [ngStyle]=\"{ 'width.%': grid.element.count * (100 / 12) }\"\n            >\n              <div *ngIf=\"grid.entityType === 'QUESTION' && grid.show\">\n                <div [ngSwitch]=\"grid.element.formElement.elementType\">\n                  <lib-check-box-fields\n                    *ngSwitchCase=\"'CHECK_BOX'\"\n                    [question]=\"grid.element\"\n                  ></lib-check-box-fields>\n                  <lib-date-time-fields\n                    *ngSwitchCase=\"'DATE_TIME'\"\n                    [question]=\"grid.element\"\n                  ></lib-date-time-fields>\n                  <lib-drop-down-fields\n                    *ngSwitchCase=\"'DROP_DOWN'\"\n                    [question]=\"grid.element\"\n                  ></lib-drop-down-fields>\n                  <lib-file-picker-fields\n                    *ngSwitchCase=\"'FILE_PICKER'\"\n                    [question]=\"grid.element\"\n                  ></lib-file-picker-fields>\n                  <lib-location-fields\n                    *ngSwitchCase=\"'LOCATION'\"\n                    [question]=\"grid.element\"\n                  ></lib-location-fields>\n                  <lib-mail-fields\n                    *ngSwitchCase=\"'EMAIL'\"\n                    [question]=\"grid.element\"\n                  ></lib-mail-fields>\n                  <lib-mobile-fields\n                    *ngSwitchCase=\"'MOBILE'\"\n                    [question]=\"grid.element\"\n                  ></lib-mobile-fields>\n                  <lib-number-fields\n                    *ngSwitchCase=\"'NUMBER'\"\n                    [question]=\"grid.element\"\n                    [rowId]=\"'0'\"\n                  ></lib-number-fields>\n                  <lib-password-fields\n                    *ngSwitchCase=\"'PASSWORD'\"\n                    [question]=\"grid.element\"\n                  ></lib-password-fields>\n                  <lib-radio-button-fields\n                    *ngSwitchCase=\"'RADIO_BUTTON'\"\n                    [question]=\"grid.element\"\n                  ></lib-radio-button-fields>\n                  <lib-rich-text-editor-fields\n                    *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\n                    [question]=\"grid.element\"\n                  ></lib-rich-text-editor-fields>\n                  <lib-selection-matrix-fields\n                    *ngSwitchCase=\"'SELECTION_MATRIX'\"\n                    [question]=\"grid.element\"\n                    [acceptedLanguage]=\"acceptedLanguage\"\n                  ></lib-selection-matrix-fields>\n                  <lib-signature-fields\n                    *ngSwitchCase=\"'SIGNATURE'\"\n                    [question]=\"grid.element\"\n                  ></lib-signature-fields>\n                  <lib-slider-fields\n                    *ngSwitchCase=\"'SLIDER'\"\n                    [question]=\"grid.element\"\n                  ></lib-slider-fields>\n                  <lib-terms-and-condition-fields\n                    *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\n                    [question]=\"grid.element\"\n                  ></lib-terms-and-condition-fields>\n                  <lib-text-area-fields\n                    *ngSwitchCase=\"'TEXT_AREA'\"\n                    [question]=\"grid.element\"\n                  ></lib-text-area-fields>\n                  <lib-text-fields\n                    *ngSwitchCase=\"'TEXT_BOX'\"\n                    [question]=\"grid.element\"\n                  ></lib-text-fields>\n                  <lib-toggle-switch-fields\n                    *ngSwitchCase=\"'TOGGLE_SWITCH'\"\n                    [question]=\"grid.element\"\n                    [acceptedLanguage]=\"acceptedLanguage\"\n                  ></lib-toggle-switch-fields>\n                  <lib-url-fields\n                    *ngSwitchCase=\"'URL'\"\n                    [question]=\"grid.element\"\n                  ></lib-url-fields>\n                  <lib-currency-fields\n                    *ngSwitchCase=\"'CURRENCY'\"\n                    [question]=\"grid.element\"\n                  ></lib-currency-fields>\n                  <lib-aggregate-function\n                    *ngSwitchCase=\"'AGGREGATE_FUNCTION'\"\n                    [question]=\"grid.element\"\n                    [rowId]=\"'0'\"\n                  ></lib-aggregate-function>\n                  <lib-hidden-field\n                    *ngSwitchCase=\"'HIDDEN_FIELD'\"\n                    [question]=\"grid.element\"\n                  ></lib-hidden-field>\n                  <lib-iframe-fields\n                    *ngSwitchCase=\"'IFRAME_WIDGET'\"\n                    [question]=\"grid.element\"\n                  ></lib-iframe-fields>\n                </div>\n\n                <!-- <ng-container *ngIf=\"grid.element.childLogics\">\n                    <ng-container *ngIf=\"getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as cached\">\n                      <ng-container\n                        *ngComponentOutlet=\"cached.component | async; injector: cached.injector\">\n                      </ng-container>\n                    </ng-container>\n                  </ng-container> -->\n\n                <ng-container *ngIf=\"grid?.element?.childLogics\">\n                  <ng-container *ngIf=\"componentToLoad\">\n                    <ng-container\n                      *ngComponentOutlet=\"\n                        componentToLoad;\n                        inputs: {\n                          grid: grid?.element?.childLogics,\n                          answer: grid?.element?.answer,\n                          state: 'child'\n                        }\n                      \"\n                    ></ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;position:relative}@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:19px;font-weight:700;margin-bottom:20px;word-break:break-word}.description{font-size:17px;font-weight:500;margin-bottom:18px;word-break:break-word}::ng-deep .description img{max-width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: WhenClauseService }]; }, propDecorators: { questionGroup: [{
                 type: Input
             }], edit: [{
@@ -9050,11 +9280,11 @@ class MultifieldsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultifieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultifieldsComponent, selector: "lib-multifields", inputs: { multiFields: "multiFields", acceptedLanguage: "acceptedLanguage" }, ngImport: i0, template: "<div class=\"outer-container mb-4 px-3 multifields\" [attr.name]=\"multiFields.testElementName\"\r\n[id]=\"'question-'+ multiFields.id\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <div [innerHTML]=\"multiFields.questionNumber\"></div><span class=\"space\"></span>\r\n      <label>{{ multiFields.question }}</label>\r\n    </div>\r\n\r\n    <div class=\"multifields-row\">\r\n        <ng-container *ngFor=\"let row of multiFields.rows\">\r\n            <div class=\"d-flex\">\r\n                <div *ngFor=\"let grid of row.grid\"\r\n                    [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\r\n                    <div *ngIf=\"grid.entityType === 'QUESTION'\">\r\n                        <div [ngSwitch]=\"grid.element.formElement.elementType\">\r\n                            <lib-check-box-fields *ngSwitchCase=\"'CHECK_BOX'\"\r\n                                [question]=\"grid.element\"></lib-check-box-fields>\r\n                            <lib-date-time-fields *ngSwitchCase=\"'DATE_TIME'\"\r\n                                [question]=\"grid.element\"></lib-date-time-fields>\r\n                            <lib-drop-down-fields *ngSwitchCase=\"'DROP_DOWN'\"\r\n                                [question]=\"grid.element\"></lib-drop-down-fields>\r\n                            <lib-file-picker-fields\r\n                                *ngSwitchCase=\"'FILE_PICKER'\"\r\n                                [question]=\"grid.element\"></lib-file-picker-fields>\r\n                            <lib-location-fields *ngSwitchCase=\"'LOCATION'\"\r\n                                [question]=\"grid.element\"></lib-location-fields>\r\n                            <lib-mail-fields *ngSwitchCase=\"'EMAIL'\"\r\n                                [question]=\"grid.element\"></lib-mail-fields>\r\n                            <lib-mobile-fields *ngSwitchCase=\"'MOBILE'\"\r\n                                [question]=\"grid.element\"></lib-mobile-fields>\r\n                            <lib-number-fields *ngSwitchCase=\"'NUMBER'\"\r\n                                [question]=\"grid.element\"></lib-number-fields>\r\n                            <lib-password-fields *ngSwitchCase=\"'PASSWORD'\"\r\n                                [question]=\"grid.element\"></lib-password-fields>\r\n                            <lib-radio-button-fields\r\n                                *ngSwitchCase=\"'RADIO_BUTTON'\"\r\n                                [question]=\"grid.element\"></lib-radio-button-fields>\r\n                            <lib-rich-text-editor-fields\r\n                                *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\r\n                                [question]=\"grid.element\"></lib-rich-text-editor-fields>\r\n                            <lib-selection-matrix-fields\r\n                                *ngSwitchCase=\"'SELECTION_MATRIX'\"\r\n                                [question]=\"grid.element\"\r\n                                [acceptedLanguage]=\"acceptedLanguage\"></lib-selection-matrix-fields>\r\n                            <lib-signature-fields *ngSwitchCase=\"'SIGNATURE'\"\r\n                                [question]=\"grid.element\"></lib-signature-fields>\r\n                            <lib-slider-fields *ngSwitchCase=\"'SLIDER'\"\r\n                                [question]=\"grid.element\"></lib-slider-fields>\r\n                            <lib-terms-and-condition-fields\r\n                                *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\r\n                                [question]=\"grid.element\"></lib-terms-and-condition-fields>\r\n                            <lib-text-area-fields *ngSwitchCase=\"'TEXT_AREA'\"\r\n                                [question]=\"grid.element\"></lib-text-area-fields>\r\n                            <lib-text-fields *ngSwitchCase=\"'TEXT_BOX'\"\r\n                                [question]=\"grid.element\"></lib-text-fields>\r\n                            <lib-toggle-switch-fields\r\n                                *ngSwitchCase=\"'TOGGLE_SWITCH'\"\r\n                                [question]=\"grid.element\"\r\n                                [acceptedLanguage]=\"acceptedLanguage\"></lib-toggle-switch-fields>\r\n                            <lib-url-fields *ngSwitchCase=\"'URL'\"\r\n                                [question]=\"grid.element\"></lib-url-fields>\r\n                            <lib-currency-fields *ngSwitchCase=\"'CURRENCY'\"\r\n                                [question]=\"grid.element\"></lib-currency-fields>\r\n                            <lib-hidden-field *ngSwitchCase=\"'HIDDEN_FIELD'\" \r\n                                [question]=\"grid.element\"></lib-hidden-field>\r\n                        </div>\r\n\r\n                        <ng-container *ngIf=\"grid.element.childLogics\">\r\n                            <ng-container\r\n                                *ngComponentOutlet=\"loadFormElementsComponent(grid.element.childLogics) | async\"></ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                </div>\r\n            </div>\r\n\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .multifields .mb-5{margin:0!important}.space{width:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultifieldsComponent, selector: "lib-multifields", inputs: { multiFields: "multiFields", acceptedLanguage: "acceptedLanguage" }, ngImport: i0, template: "<div class=\"outer-container mb-4 px-3 multifields\" [attr.name]=\"multiFields.testElementName\"\n[id]=\"'question-'+ multiFields.id\">\n    <div class=\"d-flex align-items-center\">\n      <div [innerHTML]=\"multiFields.questionNumber\"></div><span class=\"space\"></span>\n      <label>{{ multiFields.question }}</label>\n    </div>\n\n    <div class=\"multifields-row\">\n        <ng-container *ngFor=\"let row of multiFields.rows\">\n            <div class=\"d-flex\">\n                <div *ngFor=\"let grid of row.grid\"\n                    [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\n                    <div *ngIf=\"grid.entityType === 'QUESTION'\">\n                        <div [ngSwitch]=\"grid.element.formElement.elementType\">\n                            <lib-check-box-fields *ngSwitchCase=\"'CHECK_BOX'\"\n                                [question]=\"grid.element\"></lib-check-box-fields>\n                            <lib-date-time-fields *ngSwitchCase=\"'DATE_TIME'\"\n                                [question]=\"grid.element\"></lib-date-time-fields>\n                            <lib-drop-down-fields *ngSwitchCase=\"'DROP_DOWN'\"\n                                [question]=\"grid.element\"></lib-drop-down-fields>\n                            <lib-file-picker-fields\n                                *ngSwitchCase=\"'FILE_PICKER'\"\n                                [question]=\"grid.element\"></lib-file-picker-fields>\n                            <lib-location-fields *ngSwitchCase=\"'LOCATION'\"\n                                [question]=\"grid.element\"></lib-location-fields>\n                            <lib-mail-fields *ngSwitchCase=\"'EMAIL'\"\n                                [question]=\"grid.element\"></lib-mail-fields>\n                            <lib-mobile-fields *ngSwitchCase=\"'MOBILE'\"\n                                [question]=\"grid.element\"></lib-mobile-fields>\n                            <lib-number-fields *ngSwitchCase=\"'NUMBER'\"\n                                [question]=\"grid.element\"></lib-number-fields>\n                            <lib-password-fields *ngSwitchCase=\"'PASSWORD'\"\n                                [question]=\"grid.element\"></lib-password-fields>\n                            <lib-radio-button-fields\n                                *ngSwitchCase=\"'RADIO_BUTTON'\"\n                                [question]=\"grid.element\"></lib-radio-button-fields>\n                            <lib-rich-text-editor-fields\n                                *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\n                                [question]=\"grid.element\"></lib-rich-text-editor-fields>\n                            <lib-selection-matrix-fields\n                                *ngSwitchCase=\"'SELECTION_MATRIX'\"\n                                [question]=\"grid.element\"\n                                [acceptedLanguage]=\"acceptedLanguage\"></lib-selection-matrix-fields>\n                            <lib-signature-fields *ngSwitchCase=\"'SIGNATURE'\"\n                                [question]=\"grid.element\"></lib-signature-fields>\n                            <lib-slider-fields *ngSwitchCase=\"'SLIDER'\"\n                                [question]=\"grid.element\"></lib-slider-fields>\n                            <lib-terms-and-condition-fields\n                                *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\n                                [question]=\"grid.element\"></lib-terms-and-condition-fields>\n                            <lib-text-area-fields *ngSwitchCase=\"'TEXT_AREA'\"\n                                [question]=\"grid.element\"></lib-text-area-fields>\n                            <lib-text-fields *ngSwitchCase=\"'TEXT_BOX'\"\n                                [question]=\"grid.element\"></lib-text-fields>\n                            <lib-toggle-switch-fields\n                                *ngSwitchCase=\"'TOGGLE_SWITCH'\"\n                                [question]=\"grid.element\"\n                                [acceptedLanguage]=\"acceptedLanguage\"></lib-toggle-switch-fields>\n                            <lib-url-fields *ngSwitchCase=\"'URL'\"\n                                [question]=\"grid.element\"></lib-url-fields>\n                            <lib-currency-fields *ngSwitchCase=\"'CURRENCY'\"\n                                [question]=\"grid.element\"></lib-currency-fields>\n                            <lib-hidden-field *ngSwitchCase=\"'HIDDEN_FIELD'\" \n                                [question]=\"grid.element\"></lib-hidden-field>\n                        </div>\n\n                        <ng-container *ngIf=\"grid.element.childLogics\">\n                            <ng-container\n                                *ngComponentOutlet=\"loadFormElementsComponent(grid.element.childLogics) | async\"></ng-container>\n                        </ng-container>\n                    </div>\n\n                </div>\n            </div>\n\n        </ng-container>\n    </div>\n</div>\n", styles: ["::ng-deep .multifields .mb-5{margin:0!important}.space{width:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange", "inlineDeleteFiles"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question", "inLine"], outputs: ["answerChange"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "rowId", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question", "inLine", "inSubForm", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question", "inLine", "acceptedLanguage", "rowId", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question", "inLine"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question", "inLine"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "acceptedLanguage", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit"], outputs: ["answerChange"] }, { kind: "component", type: CurrencyFieldsComponent, selector: "lib-currency-fields", inputs: ["question", "inLine", "inCard", "submissionIndex", "disableEdit", "rowId"], outputs: ["answerChange"] }, { kind: "component", type: HiddenFieldComponent, selector: "lib-hidden-field", inputs: ["question", "inLine", "inCard", "submissionIndex"], outputs: ["answerChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultifieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-multifields', template: "<div class=\"outer-container mb-4 px-3 multifields\" [attr.name]=\"multiFields.testElementName\"\r\n[id]=\"'question-'+ multiFields.id\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <div [innerHTML]=\"multiFields.questionNumber\"></div><span class=\"space\"></span>\r\n      <label>{{ multiFields.question }}</label>\r\n    </div>\r\n\r\n    <div class=\"multifields-row\">\r\n        <ng-container *ngFor=\"let row of multiFields.rows\">\r\n            <div class=\"d-flex\">\r\n                <div *ngFor=\"let grid of row.grid\"\r\n                    [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\r\n                    <div *ngIf=\"grid.entityType === 'QUESTION'\">\r\n                        <div [ngSwitch]=\"grid.element.formElement.elementType\">\r\n                            <lib-check-box-fields *ngSwitchCase=\"'CHECK_BOX'\"\r\n                                [question]=\"grid.element\"></lib-check-box-fields>\r\n                            <lib-date-time-fields *ngSwitchCase=\"'DATE_TIME'\"\r\n                                [question]=\"grid.element\"></lib-date-time-fields>\r\n                            <lib-drop-down-fields *ngSwitchCase=\"'DROP_DOWN'\"\r\n                                [question]=\"grid.element\"></lib-drop-down-fields>\r\n                            <lib-file-picker-fields\r\n                                *ngSwitchCase=\"'FILE_PICKER'\"\r\n                                [question]=\"grid.element\"></lib-file-picker-fields>\r\n                            <lib-location-fields *ngSwitchCase=\"'LOCATION'\"\r\n                                [question]=\"grid.element\"></lib-location-fields>\r\n                            <lib-mail-fields *ngSwitchCase=\"'EMAIL'\"\r\n                                [question]=\"grid.element\"></lib-mail-fields>\r\n                            <lib-mobile-fields *ngSwitchCase=\"'MOBILE'\"\r\n                                [question]=\"grid.element\"></lib-mobile-fields>\r\n                            <lib-number-fields *ngSwitchCase=\"'NUMBER'\"\r\n                                [question]=\"grid.element\"></lib-number-fields>\r\n                            <lib-password-fields *ngSwitchCase=\"'PASSWORD'\"\r\n                                [question]=\"grid.element\"></lib-password-fields>\r\n                            <lib-radio-button-fields\r\n                                *ngSwitchCase=\"'RADIO_BUTTON'\"\r\n                                [question]=\"grid.element\"></lib-radio-button-fields>\r\n                            <lib-rich-text-editor-fields\r\n                                *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\r\n                                [question]=\"grid.element\"></lib-rich-text-editor-fields>\r\n                            <lib-selection-matrix-fields\r\n                                *ngSwitchCase=\"'SELECTION_MATRIX'\"\r\n                                [question]=\"grid.element\"\r\n                                [acceptedLanguage]=\"acceptedLanguage\"></lib-selection-matrix-fields>\r\n                            <lib-signature-fields *ngSwitchCase=\"'SIGNATURE'\"\r\n                                [question]=\"grid.element\"></lib-signature-fields>\r\n                            <lib-slider-fields *ngSwitchCase=\"'SLIDER'\"\r\n                                [question]=\"grid.element\"></lib-slider-fields>\r\n                            <lib-terms-and-condition-fields\r\n                                *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\r\n                                [question]=\"grid.element\"></lib-terms-and-condition-fields>\r\n                            <lib-text-area-fields *ngSwitchCase=\"'TEXT_AREA'\"\r\n                                [question]=\"grid.element\"></lib-text-area-fields>\r\n                            <lib-text-fields *ngSwitchCase=\"'TEXT_BOX'\"\r\n                                [question]=\"grid.element\"></lib-text-fields>\r\n                            <lib-toggle-switch-fields\r\n                                *ngSwitchCase=\"'TOGGLE_SWITCH'\"\r\n                                [question]=\"grid.element\"\r\n                                [acceptedLanguage]=\"acceptedLanguage\"></lib-toggle-switch-fields>\r\n                            <lib-url-fields *ngSwitchCase=\"'URL'\"\r\n                                [question]=\"grid.element\"></lib-url-fields>\r\n                            <lib-currency-fields *ngSwitchCase=\"'CURRENCY'\"\r\n                                [question]=\"grid.element\"></lib-currency-fields>\r\n                            <lib-hidden-field *ngSwitchCase=\"'HIDDEN_FIELD'\" \r\n                                [question]=\"grid.element\"></lib-hidden-field>\r\n                        </div>\r\n\r\n                        <ng-container *ngIf=\"grid.element.childLogics\">\r\n                            <ng-container\r\n                                *ngComponentOutlet=\"loadFormElementsComponent(grid.element.childLogics) | async\"></ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                </div>\r\n            </div>\r\n\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .multifields .mb-5{margin:0!important}.space{width:5px}\n"] }]
+            args: [{ selector: 'lib-multifields', template: "<div class=\"outer-container mb-4 px-3 multifields\" [attr.name]=\"multiFields.testElementName\"\n[id]=\"'question-'+ multiFields.id\">\n    <div class=\"d-flex align-items-center\">\n      <div [innerHTML]=\"multiFields.questionNumber\"></div><span class=\"space\"></span>\n      <label>{{ multiFields.question }}</label>\n    </div>\n\n    <div class=\"multifields-row\">\n        <ng-container *ngFor=\"let row of multiFields.rows\">\n            <div class=\"d-flex\">\n                <div *ngFor=\"let grid of row.grid\"\n                    [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\n                    <div *ngIf=\"grid.entityType === 'QUESTION'\">\n                        <div [ngSwitch]=\"grid.element.formElement.elementType\">\n                            <lib-check-box-fields *ngSwitchCase=\"'CHECK_BOX'\"\n                                [question]=\"grid.element\"></lib-check-box-fields>\n                            <lib-date-time-fields *ngSwitchCase=\"'DATE_TIME'\"\n                                [question]=\"grid.element\"></lib-date-time-fields>\n                            <lib-drop-down-fields *ngSwitchCase=\"'DROP_DOWN'\"\n                                [question]=\"grid.element\"></lib-drop-down-fields>\n                            <lib-file-picker-fields\n                                *ngSwitchCase=\"'FILE_PICKER'\"\n                                [question]=\"grid.element\"></lib-file-picker-fields>\n                            <lib-location-fields *ngSwitchCase=\"'LOCATION'\"\n                                [question]=\"grid.element\"></lib-location-fields>\n                            <lib-mail-fields *ngSwitchCase=\"'EMAIL'\"\n                                [question]=\"grid.element\"></lib-mail-fields>\n                            <lib-mobile-fields *ngSwitchCase=\"'MOBILE'\"\n                                [question]=\"grid.element\"></lib-mobile-fields>\n                            <lib-number-fields *ngSwitchCase=\"'NUMBER'\"\n                                [question]=\"grid.element\"></lib-number-fields>\n                            <lib-password-fields *ngSwitchCase=\"'PASSWORD'\"\n                                [question]=\"grid.element\"></lib-password-fields>\n                            <lib-radio-button-fields\n                                *ngSwitchCase=\"'RADIO_BUTTON'\"\n                                [question]=\"grid.element\"></lib-radio-button-fields>\n                            <lib-rich-text-editor-fields\n                                *ngSwitchCase=\"'RICH_TEXT_EDITOR'\"\n                                [question]=\"grid.element\"></lib-rich-text-editor-fields>\n                            <lib-selection-matrix-fields\n                                *ngSwitchCase=\"'SELECTION_MATRIX'\"\n                                [question]=\"grid.element\"\n                                [acceptedLanguage]=\"acceptedLanguage\"></lib-selection-matrix-fields>\n                            <lib-signature-fields *ngSwitchCase=\"'SIGNATURE'\"\n                                [question]=\"grid.element\"></lib-signature-fields>\n                            <lib-slider-fields *ngSwitchCase=\"'SLIDER'\"\n                                [question]=\"grid.element\"></lib-slider-fields>\n                            <lib-terms-and-condition-fields\n                                *ngSwitchCase=\"'TERMS_AND_CONDITION'\"\n                                [question]=\"grid.element\"></lib-terms-and-condition-fields>\n                            <lib-text-area-fields *ngSwitchCase=\"'TEXT_AREA'\"\n                                [question]=\"grid.element\"></lib-text-area-fields>\n                            <lib-text-fields *ngSwitchCase=\"'TEXT_BOX'\"\n                                [question]=\"grid.element\"></lib-text-fields>\n                            <lib-toggle-switch-fields\n                                *ngSwitchCase=\"'TOGGLE_SWITCH'\"\n                                [question]=\"grid.element\"\n                                [acceptedLanguage]=\"acceptedLanguage\"></lib-toggle-switch-fields>\n                            <lib-url-fields *ngSwitchCase=\"'URL'\"\n                                [question]=\"grid.element\"></lib-url-fields>\n                            <lib-currency-fields *ngSwitchCase=\"'CURRENCY'\"\n                                [question]=\"grid.element\"></lib-currency-fields>\n                            <lib-hidden-field *ngSwitchCase=\"'HIDDEN_FIELD'\" \n                                [question]=\"grid.element\"></lib-hidden-field>\n                        </div>\n\n                        <ng-container *ngIf=\"grid.element.childLogics\">\n                            <ng-container\n                                *ngComponentOutlet=\"loadFormElementsComponent(grid.element.childLogics) | async\"></ng-container>\n                        </ng-container>\n                    </div>\n\n                </div>\n            </div>\n\n        </ng-container>\n    </div>\n</div>\n", styles: ["::ng-deep .multifields .mb-5{margin:0!important}.space{width:5px}\n"] }]
         }], propDecorators: { multiFields: [{
                 type: Input
             }], acceptedLanguage: [{
@@ -9078,11 +9308,11 @@ class RecursiveLogicComponent {
         this.subFormChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RecursiveLogicComponent, deps: [{ token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RecursiveLogicComponent, selector: "lib-recursive-logic", inputs: { grid: "grid", currentPageIndex: "currentPageIndex", edit: "edit", acceptedLanguage: "acceptedLanguage", state: "state", answer: "answer", pages: "pages" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div *ngIf=\"grid.show\">\r\n  <div *ngIf=\"grid.entityType === 'QUESTION'\">\r\n    <lib-question\r\n      [question]=\"grid?.element\"\r\n      [edit]=\"edit\"\r\n      [acceptedLanguage]=\"acceptedLanguage\"\r\n    ></lib-question>\r\n  </div>\r\n  <div *ngIf=\"grid.entityType === 'SECTION'\">\r\n    <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\r\n  </div>\r\n  <ng-container *ngIf=\"grid.entityType === 'SUBFORM'\">\r\n    <lib-sub-form\r\n      [subForm]=\"grid.element\"\r\n      [acceptedLanguage]=\"acceptedLanguage\"\r\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n      [edit]=\"edit\"\r\n      [pages]=\"pages\"\r\n    ></lib-sub-form>\r\n  </ng-container>\r\n  \r\n  <ng-container *ngIf=\"grid.entityType === 'QUESTION_GROUP'\">\r\n    <lib-question-group\r\n      [questionGroup]=\"grid.element\"\r\n      [acceptedLanguage]=\"acceptedLanguage\"\r\n    ></lib-question-group>\r\n  </ng-container>\r\n  \r\n  \r\n  <ng-container *ngIf=\"grid.entityType === 'MULTIFIELD'\">\r\n      <lib-multifields [multiFields]=\"grid.element\" [acceptedLanguage]=\"acceptedLanguage\"></lib-multifields>\r\n  </ng-container>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: QuestionComponent, selector: "lib-question", inputs: ["question", "edit", "acceptedLanguage", "currentPageIndex"], outputs: ["emitValidations", "subFormChange"] }, { kind: "component", type: SubFormComponent, selector: "lib-sub-form", inputs: ["subForm", "edit", "acceptedLanguage", "pages"], outputs: ["subFormChange"] }, { kind: "component", type: QuestionGroupComponent, selector: "lib-question-group", inputs: ["questionGroup", "edit", "acceptedLanguage"] }, { kind: "component", type: MultifieldsComponent, selector: "lib-multifields", inputs: ["multiFields", "acceptedLanguage"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RecursiveLogicComponent, selector: "lib-recursive-logic", inputs: { grid: "grid", currentPageIndex: "currentPageIndex", edit: "edit", acceptedLanguage: "acceptedLanguage", state: "state", answer: "answer", pages: "pages" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div *ngIf=\"grid.show\">\n  <div *ngIf=\"grid.entityType === 'QUESTION'\">\n    <lib-question\n      [question]=\"grid?.element\"\n      [edit]=\"edit\"\n      [acceptedLanguage]=\"acceptedLanguage\"\n    ></lib-question>\n  </div>\n  <div *ngIf=\"grid.entityType === 'SECTION'\">\n    <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\n  </div>\n  <ng-container *ngIf=\"grid.entityType === 'SUBFORM'\">\n    <lib-sub-form\n      [subForm]=\"grid.element\"\n      [acceptedLanguage]=\"acceptedLanguage\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      [edit]=\"edit\"\n      [pages]=\"pages\"\n    ></lib-sub-form>\n  </ng-container>\n  \n  <ng-container *ngIf=\"grid.entityType === 'QUESTION_GROUP'\">\n    <lib-question-group\n      [questionGroup]=\"grid.element\"\n      [acceptedLanguage]=\"acceptedLanguage\"\n    ></lib-question-group>\n  </ng-container>\n  \n  \n  <ng-container *ngIf=\"grid.entityType === 'MULTIFIELD'\">\n      <lib-multifields [multiFields]=\"grid.element\" [acceptedLanguage]=\"acceptedLanguage\"></lib-multifields>\n  </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: QuestionComponent, selector: "lib-question", inputs: ["question", "edit", "acceptedLanguage", "currentPageIndex"], outputs: ["emitValidations", "subFormChange"] }, { kind: "component", type: SubFormComponent, selector: "lib-sub-form", inputs: ["subForm", "edit", "acceptedLanguage", "pages"], outputs: ["subFormChange"] }, { kind: "component", type: QuestionGroupComponent, selector: "lib-question-group", inputs: ["questionGroup", "edit", "acceptedLanguage"] }, { kind: "component", type: MultifieldsComponent, selector: "lib-multifields", inputs: ["multiFields", "acceptedLanguage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RecursiveLogicComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-recursive-logic', template: "<div *ngIf=\"grid.show\">\r\n  <div *ngIf=\"grid.entityType === 'QUESTION'\">\r\n    <lib-question\r\n      [question]=\"grid?.element\"\r\n      [edit]=\"edit\"\r\n      [acceptedLanguage]=\"acceptedLanguage\"\r\n    ></lib-question>\r\n  </div>\r\n  <div *ngIf=\"grid.entityType === 'SECTION'\">\r\n    <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\r\n  </div>\r\n  <ng-container *ngIf=\"grid.entityType === 'SUBFORM'\">\r\n    <lib-sub-form\r\n      [subForm]=\"grid.element\"\r\n      [acceptedLanguage]=\"acceptedLanguage\"\r\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n      [edit]=\"edit\"\r\n      [pages]=\"pages\"\r\n    ></lib-sub-form>\r\n  </ng-container>\r\n  \r\n  <ng-container *ngIf=\"grid.entityType === 'QUESTION_GROUP'\">\r\n    <lib-question-group\r\n      [questionGroup]=\"grid.element\"\r\n      [acceptedLanguage]=\"acceptedLanguage\"\r\n    ></lib-question-group>\r\n  </ng-container>\r\n  \r\n  \r\n  <ng-container *ngIf=\"grid.entityType === 'MULTIFIELD'\">\r\n      <lib-multifields [multiFields]=\"grid.element\" [acceptedLanguage]=\"acceptedLanguage\"></lib-multifields>\r\n  </ng-container>\r\n</div>" }]
+            args: [{ selector: 'lib-recursive-logic', template: "<div *ngIf=\"grid.show\">\n  <div *ngIf=\"grid.entityType === 'QUESTION'\">\n    <lib-question\n      [question]=\"grid?.element\"\n      [edit]=\"edit\"\n      [acceptedLanguage]=\"acceptedLanguage\"\n    ></lib-question>\n  </div>\n  <div *ngIf=\"grid.entityType === 'SECTION'\">\n    <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\n  </div>\n  <ng-container *ngIf=\"grid.entityType === 'SUBFORM'\">\n    <lib-sub-form\n      [subForm]=\"grid.element\"\n      [acceptedLanguage]=\"acceptedLanguage\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      [edit]=\"edit\"\n      [pages]=\"pages\"\n    ></lib-sub-form>\n  </ng-container>\n  \n  <ng-container *ngIf=\"grid.entityType === 'QUESTION_GROUP'\">\n    <lib-question-group\n      [questionGroup]=\"grid.element\"\n      [acceptedLanguage]=\"acceptedLanguage\"\n    ></lib-question-group>\n  </ng-container>\n  \n  \n  <ng-container *ngIf=\"grid.entityType === 'MULTIFIELD'\">\n      <lib-multifields [multiFields]=\"grid.element\" [acceptedLanguage]=\"acceptedLanguage\"></lib-multifields>\n  </ng-container>\n</div>" }]
         }], ctorParameters: function () { return [{ type: WhenClauseService }]; }, propDecorators: { grid: [{
                 type: Input
             }], currentPageIndex: [{
@@ -9121,11 +9351,11 @@ class FormElementsComponent {
         this.subFormChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormElementsComponent, deps: [{ token: 'grid', optional: true }, { token: 'state', optional: true }, { token: 'answer', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormElementsComponent, selector: "lib-form-elements", inputs: { currentPageIndex: "currentPageIndex", edit: "edit", acceptedLanguage: "acceptedLanguage", answer: "answer", grid: "grid", state: "state", pages: "pages" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<ng-container *ngIf=\"state === 'child'; else parentBlock\">\r\n  <div *ngFor=\"let childLogic of grid\">\r\n    <div *ngIf=\"childLogic.showLogic && answer\">\r\n      <div *ngFor=\"let row of childLogic.rows\">\r\n        <div *ngFor=\"let grid of row.grid\">\r\n          <lib-recursive-logic\r\n            [grid]=\"grid\"\r\n            [edit]=\"edit\"\r\n            [acceptedLanguage]=\"acceptedLanguage\"\r\n            [pages]=\"pages\"\r\n            (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n          >\r\n          </lib-recursive-logic>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n<ng-template #parentBlock>\r\n  <lib-recursive-logic\r\n    [grid]=\"grid\"\r\n    [edit]=\"edit\"\r\n    [acceptedLanguage]=\"acceptedLanguage\"\r\n    [pages]=\"pages\"\r\n    (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n  >\r\n  </lib-recursive-logic>\r\n</ng-template>\r\n", styles: [""], 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: RecursiveLogicComponent, selector: "lib-recursive-logic", inputs: ["grid", "currentPageIndex", "edit", "acceptedLanguage", "state", "answer", "pages"], outputs: ["subFormChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormElementsComponent, selector: "lib-form-elements", inputs: { currentPageIndex: "currentPageIndex", edit: "edit", acceptedLanguage: "acceptedLanguage", answer: "answer", grid: "grid", state: "state", pages: "pages" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<ng-container *ngIf=\"state === 'child'; else parentBlock\">\n  <div *ngFor=\"let childLogic of grid\">\n    <div *ngIf=\"childLogic.showLogic && answer\">\n      <div *ngFor=\"let row of childLogic.rows\">\n        <div *ngFor=\"let grid of row.grid\">\n          <lib-recursive-logic\n            [grid]=\"grid\"\n            [edit]=\"edit\"\n            [acceptedLanguage]=\"acceptedLanguage\"\n            [pages]=\"pages\"\n            (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          >\n          </lib-recursive-logic>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n<ng-template #parentBlock>\n  <lib-recursive-logic\n    [grid]=\"grid\"\n    [edit]=\"edit\"\n    [acceptedLanguage]=\"acceptedLanguage\"\n    [pages]=\"pages\"\n    (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n  >\n  </lib-recursive-logic>\n</ng-template>\n", styles: [""], 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: RecursiveLogicComponent, selector: "lib-recursive-logic", inputs: ["grid", "currentPageIndex", "edit", "acceptedLanguage", "state", "answer", "pages"], 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: "<ng-container *ngIf=\"state === 'child'; else parentBlock\">\r\n  <div *ngFor=\"let childLogic of grid\">\r\n    <div *ngIf=\"childLogic.showLogic && answer\">\r\n      <div *ngFor=\"let row of childLogic.rows\">\r\n        <div *ngFor=\"let grid of row.grid\">\r\n          <lib-recursive-logic\r\n            [grid]=\"grid\"\r\n            [edit]=\"edit\"\r\n            [acceptedLanguage]=\"acceptedLanguage\"\r\n            [pages]=\"pages\"\r\n            (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n          >\r\n          </lib-recursive-logic>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n<ng-template #parentBlock>\r\n  <lib-recursive-logic\r\n    [grid]=\"grid\"\r\n    [edit]=\"edit\"\r\n    [acceptedLanguage]=\"acceptedLanguage\"\r\n    [pages]=\"pages\"\r\n    (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n  >\r\n  </lib-recursive-logic>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'lib-form-elements', template: "<ng-container *ngIf=\"state === 'child'; else parentBlock\">\n  <div *ngFor=\"let childLogic of grid\">\n    <div *ngIf=\"childLogic.showLogic && answer\">\n      <div *ngFor=\"let row of childLogic.rows\">\n        <div *ngFor=\"let grid of row.grid\">\n          <lib-recursive-logic\n            [grid]=\"grid\"\n            [edit]=\"edit\"\n            [acceptedLanguage]=\"acceptedLanguage\"\n            [pages]=\"pages\"\n            (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          >\n          </lib-recursive-logic>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n<ng-template #parentBlock>\n  <lib-recursive-logic\n    [grid]=\"grid\"\n    [edit]=\"edit\"\n    [acceptedLanguage]=\"acceptedLanguage\"\n    [pages]=\"pages\"\n    (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n  >\n  </lib-recursive-logic>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['grid']
@@ -9274,11 +9504,11 @@ class NavigationTabsComponent {
         this.cancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationTabsComponent, deps: [{ token: FormValidationService }, { token: i0.ChangeDetectorRef }], 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", skipValidation: "skipValidation", edit: "edit", acceptedLanguage: "acceptedLanguage", eligibleForSubmission: "eligibleForSubmission", pageDetails: "pageDetails", markAllQuestionsAsRequired: "markAllQuestionsAsRequired", skipMargin: "skipMargin", primaryColor: "primaryColor", secondaryColor: "secondaryColor", isActionTriggered: "isActionTriggered", submissionInProgress: "submissionInProgress", submissionInDraft: "submissionInDraft", showCancelButton: "showCancelButton", submissionProgress: "submissionProgress", currentStep: "currentStep", animatedDots: "animatedDots" }, outputs: { pageChanged: "pageChanged", submitEmit: "submitEmit", saveAsDraftEmit: "saveAsDraftEmit", subFormChange: "subFormChange", rowSetIndex: "rowSetIndex", cancel: "cancel" }, ngImport: i0, template: "<div class=\"tab-inner-container\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\r\n  <div class=\"d-flex gap-2\">\r\n    <div class=\"tab-navigation\" *ngIf=\"!hideTabs\">\r\n      <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\r\n        <li\r\n          class=\"nav-item\"\r\n          role=\"presentation\"\r\n          *ngFor=\"let page of pageDetails; let i = index; trackBy: trackByIndex\"\r\n          [ngClass]=\"{'nav-item-ara': acceptedLanguage === 'ara', 'nav-item-default': acceptedLanguage !== 'ara'}\"\r\n        >\r\n          <button\r\n            class=\"nav-link\"\r\n            [title]=\"page.name\"\r\n            data-bs-toggle=\"tooltip\"\r\n            data-bs-placement=\"top\"\r\n            data-bs-custom-class=\"custom-tooltip\"\r\n            [class.active]=\"i === currentPageIndex\"\r\n            id=\"tab-{{ i }}\"\r\n            type=\"button\"\r\n            role=\"tab\"\r\n            [attr.aria-controls]=\"'content-' + i\"\r\n            [attr.aria-selected]=\"i === currentPageIndex\"\r\n            (click)=\"setCurrentPage(i)\"\r\n          >\r\n            {{ page.name }}\r\n          </button>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"showNavArrows\">\r\n      <button class=\"nav-arrow\">\r\n        <img src=\"assets/icons/left_arrow.svg\" alt=\"left arrow\"\r\n        (click)=\"scrollTabs(-1)\">\r\n        <img src=\"assets/icons/right_arrow.svg\" alt=\"right arrow\"\r\n        (click)=\"scrollTabs(1)\">\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"tab-content pt-5 pb-3 px-1\" [attr.name]=\"pages[currentPageIndex].testElementName\">\r\n    <ng-container *ngIf=\"pages[currentPageIndex]\">\r\n      <div\r\n        class=\"tab-pane fade show active\"\r\n        id=\"content-{{ currentPageIndex }}\"\r\n        role=\"tabpanel\"\r\n        [attr.aria-labelledby]=\"'tab-' + currentPageIndex\"\r\n      >\r\n        <div *ngIf=\"loadedPages[currentPageIndex]\">\r\n          <div class=\"data-container\"\r\n          infiniteScroll\r\n          [infiniteScrollDistance]=\"2\"\r\n          [infiniteScrollThrottle]=\"200\"\r\n          (scrolled)=\"loadMoreData()\">\r\n          <div *ngFor=\"let row of pages[currentPageIndex].rows\">\r\n            <div class=\"margin d-flex\">\r\n              <div *ngFor=\"let grid of row.grid\"\r\n                   [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\r\n                <lib-form-elements\r\n                  [grid]=\"grid\"\r\n                  [edit]=\"edit\"\r\n                  [acceptedLanguage]=\"acceptedLanguage\"\r\n                  [pages]=\"pages\"\r\n                  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n                ></lib-form-elements>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          </div>\r\n          <div class=\"footerButton d-flex justify-content-between align-items-center me-4 ms-4 position-relative\">\r\n          <!-- Hover detection container -->\r\n                    <div  [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\r\n          <div\r\n            class=\"button-container position-relative\"\r\n            (mouseenter)=\"showTooltip = true\"\r\n            (mouseleave)=\"showTooltip = false\"\r\n          >\r\n\r\n          <div  *ngIf=\"currentPageIndex == pageDetails.length - 1\">\r\n            <button *ngIf=\"showCancelButton\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\r\n            (click)=\"cancelled()\" type=\"button\"\r\n            >Cancel</button>\r\n               <button\r\n            *ngIf=\"!isActionTriggered && skipValidation\"\r\n              class=\"btn rounded-pill submitButton text-white\"\r\n              [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\r\n              type=\"button\"\r\n              (click)=\"saveAsDraft()\"\r\n              [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\r\n            >\r\n            <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\r\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n              Submitting...\r\n            </ng-container>\r\n            <ng-template #showSubmitText>\r\n             Save Draft\r\n            </ng-template>\r\n            </button>\r\n            \r\n\r\n            <button\r\n            *ngIf=\"!isActionTriggered\"\r\n              class=\"btn rounded-pill submitButton text-white\"\r\n              [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\r\n              type=\"button\"\r\n              (click)=\"submitForm()\"\r\n              [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\r\n            >\r\n            <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\r\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n              Submitting...\r\n            </ng-container>\r\n            <ng-template #showSubmitText>\r\n              Submit\r\n            </ng-template>\r\n            </button>\r\n            <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\r\n              {{eligibleForSubmission.message}}\r\n            </div>\r\n              </div>\r\n          </div>\r\n\r\n        </div>\r\n        <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\r\n          {{ currentStep }}{{ animatedDots }}\r\n          <span class=\"percentage\">{{ submissionProgress }}%</span>\r\n        </div>\r\n\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\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}}.skip-margin{padding:0}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important;padding-right:0}.nav-item{background-color:#fff;border-radius:5px}.nav-item.nav-item-default{margin-right:.5%}.nav-item.nav-item-ara{margin-left:.5%}.nav-link{position:relative;margin-bottom:-2px;padding-left:25px;padding-right:25px}.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}.custom-tooltip{--bs-tooltip-bg: var(--bd-violet-bg);--bs-tooltip-color: var(--bs-white)}.tab-navigation{position:relative;display:flex;align-items:center;width:95%}.navTabs{display:flex;overflow-x:auto;scroll-behavior:smooth;white-space:nowrap;width:100%;padding:0;margin:0;scrollbar-width:none;-ms-overflow-style:none}.navTabs::-webkit-scrollbar{display:none}.nav-arrow{position:absolute;background:#fff;border:none;cursor:pointer;font-size:20px;font-weight:700;padding:5px 10px;z-index:1000;box-shadow:0 2px 5px #0003;width:45px;height:27px;gap:13px;display:flex;justify-content:center;align-items:center;border-radius:6px}.nav-arrow img{width:8px;height:15px}.submitButton{margin-right:1rem}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["currentPageIndex", "edit", "acceptedLanguage", "answer", "grid", "state", "pages"], outputs: ["subFormChange"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: { pages: "pages", currentPageIndex: "currentPageIndex", skipValidation: "skipValidation", edit: "edit", acceptedLanguage: "acceptedLanguage", eligibleForSubmission: "eligibleForSubmission", pageDetails: "pageDetails", markAllQuestionsAsRequired: "markAllQuestionsAsRequired", skipMargin: "skipMargin", primaryColor: "primaryColor", secondaryColor: "secondaryColor", isActionTriggered: "isActionTriggered", submissionInProgress: "submissionInProgress", submissionInDraft: "submissionInDraft", showCancelButton: "showCancelButton", submissionProgress: "submissionProgress", currentStep: "currentStep", animatedDots: "animatedDots" }, outputs: { pageChanged: "pageChanged", submitEmit: "submitEmit", saveAsDraftEmit: "saveAsDraftEmit", subFormChange: "subFormChange", rowSetIndex: "rowSetIndex", cancel: "cancel" }, ngImport: i0, template: "<div class=\"tab-inner-container\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"d-flex gap-2\">\n    <div class=\"tab-navigation\" *ngIf=\"!hideTabs\">\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 pageDetails; let i = index; trackBy: trackByIndex\"\n          [ngClass]=\"{'nav-item-ara': acceptedLanguage === 'ara', 'nav-item-default': acceptedLanguage !== 'ara'}\"\n        >\n          <button\n            class=\"nav-link\"\n            [title]=\"page.name\"\n            data-bs-toggle=\"tooltip\"\n            data-bs-placement=\"top\"\n            data-bs-custom-class=\"custom-tooltip\"\n            [class.active]=\"i === currentPageIndex\"\n            id=\"tab-{{ i }}\"\n            type=\"button\"\n            role=\"tab\"\n            [attr.aria-controls]=\"'content-' + i\"\n            [attr.aria-selected]=\"i === currentPageIndex\"\n            (click)=\"setCurrentPage(i)\"\n          >\n            {{ page.name }}\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex align-items-center\" *ngIf=\"showNavArrows\">\n      <button class=\"nav-arrow\">\n        <img src=\"assets/icons/left_arrow.svg\" alt=\"left arrow\"\n        (click)=\"scrollTabs(-1)\">\n        <img src=\"assets/icons/right_arrow.svg\" alt=\"right arrow\"\n        (click)=\"scrollTabs(1)\">\n      </button>\n    </div>\n  </div>\n\n\n\n  <div class=\"tab-content pt-5 pb-3 px-1\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <ng-container *ngIf=\"pages[currentPageIndex]\">\n      <div\n        class=\"tab-pane fade show active\"\n        id=\"content-{{ currentPageIndex }}\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + currentPageIndex\"\n      >\n        <div *ngIf=\"loadedPages[currentPageIndex]\">\n          <div class=\"data-container\"\n          infiniteScroll\n          [infiniteScrollDistance]=\"2\"\n          [infiniteScrollThrottle]=\"200\"\n          (scrolled)=\"loadMoreData()\">\n          <div *ngFor=\"let row of pages[currentPageIndex].rows\">\n            <div class=\"margin d-flex\">\n              <div *ngFor=\"let grid of row.grid\"\n                   [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\n                <lib-form-elements\n                  [grid]=\"grid\"\n                  [edit]=\"edit\"\n                  [acceptedLanguage]=\"acceptedLanguage\"\n                  [pages]=\"pages\"\n                  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n                ></lib-form-elements>\n              </div>\n            </div>\n          </div>\n          </div>\n          <div class=\"footerButton d-flex justify-content-between align-items-center me-4 ms-4 position-relative\">\n          <!-- Hover detection container -->\n                    <div  [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n          <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n\n          <div  *ngIf=\"currentPageIndex == pageDetails.length - 1\">\n            <button *ngIf=\"showCancelButton\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n            (click)=\"cancelled()\" type=\"button\"\n            >Cancel</button>\n               <button\n            *ngIf=\"!isActionTriggered && skipValidation\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n              type=\"button\"\n              (click)=\"saveAsDraft()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n            >\n            <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n             Save Draft\n            </ng-template>\n            </button>\n            \n\n            <button\n            *ngIf=\"!isActionTriggered\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n              type=\"button\"\n              (click)=\"submitForm()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n            >\n            <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n              Submit\n            </ng-template>\n            </button>\n            <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n              </div>\n          </div>\n\n        </div>\n        <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\n          {{ currentStep }}{{ animatedDots }}\n          <span class=\"percentage\">{{ submissionProgress }}%</span>\n        </div>\n\n        </div>\n      </div>\n    </ng-container>\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}}.skip-margin{padding:0}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important;padding-right:0}.nav-item{background-color:#fff;border-radius:5px}.nav-item.nav-item-default{margin-right:.5%}.nav-item.nav-item-ara{margin-left:.5%}.nav-link{position:relative;margin-bottom:-2px;padding-left:25px;padding-right:25px}.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}.custom-tooltip{--bs-tooltip-bg: var(--bd-violet-bg);--bs-tooltip-color: var(--bs-white)}.tab-navigation{position:relative;display:flex;align-items:center;width:95%}.navTabs{display:flex;overflow-x:auto;scroll-behavior:smooth;white-space:nowrap;width:100%;padding:0;margin:0;scrollbar-width:none;-ms-overflow-style:none}.navTabs::-webkit-scrollbar{display:none}.nav-arrow{position:absolute;background:#fff;border:none;cursor:pointer;font-size:20px;font-weight:700;padding:5px 10px;z-index:1000;box-shadow:0 2px 5px #0003;width:45px;height:27px;gap:13px;display:flex;justify-content:center;align-items:center;border-radius:6px}.nav-arrow img{width:8px;height:15px}.submitButton{margin-right:1rem}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["currentPageIndex", "edit", "acceptedLanguage", "answer", "grid", "state", "pages"], outputs: ["subFormChange"] }, { kind: "directive", type: i4$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] }); }
 }
 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\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\r\n  <div class=\"d-flex gap-2\">\r\n    <div class=\"tab-navigation\" *ngIf=\"!hideTabs\">\r\n      <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\r\n        <li\r\n          class=\"nav-item\"\r\n          role=\"presentation\"\r\n          *ngFor=\"let page of pageDetails; let i = index; trackBy: trackByIndex\"\r\n          [ngClass]=\"{'nav-item-ara': acceptedLanguage === 'ara', 'nav-item-default': acceptedLanguage !== 'ara'}\"\r\n        >\r\n          <button\r\n            class=\"nav-link\"\r\n            [title]=\"page.name\"\r\n            data-bs-toggle=\"tooltip\"\r\n            data-bs-placement=\"top\"\r\n            data-bs-custom-class=\"custom-tooltip\"\r\n            [class.active]=\"i === currentPageIndex\"\r\n            id=\"tab-{{ i }}\"\r\n            type=\"button\"\r\n            role=\"tab\"\r\n            [attr.aria-controls]=\"'content-' + i\"\r\n            [attr.aria-selected]=\"i === currentPageIndex\"\r\n            (click)=\"setCurrentPage(i)\"\r\n          >\r\n            {{ page.name }}\r\n          </button>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"showNavArrows\">\r\n      <button class=\"nav-arrow\">\r\n        <img src=\"assets/icons/left_arrow.svg\" alt=\"left arrow\"\r\n        (click)=\"scrollTabs(-1)\">\r\n        <img src=\"assets/icons/right_arrow.svg\" alt=\"right arrow\"\r\n        (click)=\"scrollTabs(1)\">\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"tab-content pt-5 pb-3 px-1\" [attr.name]=\"pages[currentPageIndex].testElementName\">\r\n    <ng-container *ngIf=\"pages[currentPageIndex]\">\r\n      <div\r\n        class=\"tab-pane fade show active\"\r\n        id=\"content-{{ currentPageIndex }}\"\r\n        role=\"tabpanel\"\r\n        [attr.aria-labelledby]=\"'tab-' + currentPageIndex\"\r\n      >\r\n        <div *ngIf=\"loadedPages[currentPageIndex]\">\r\n          <div class=\"data-container\"\r\n          infiniteScroll\r\n          [infiniteScrollDistance]=\"2\"\r\n          [infiniteScrollThrottle]=\"200\"\r\n          (scrolled)=\"loadMoreData()\">\r\n          <div *ngFor=\"let row of pages[currentPageIndex].rows\">\r\n            <div class=\"margin d-flex\">\r\n              <div *ngFor=\"let grid of row.grid\"\r\n                   [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\r\n                <lib-form-elements\r\n                  [grid]=\"grid\"\r\n                  [edit]=\"edit\"\r\n                  [acceptedLanguage]=\"acceptedLanguage\"\r\n                  [pages]=\"pages\"\r\n                  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n                ></lib-form-elements>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          </div>\r\n          <div class=\"footerButton d-flex justify-content-between align-items-center me-4 ms-4 position-relative\">\r\n          <!-- Hover detection container -->\r\n                    <div  [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\r\n          <div\r\n            class=\"button-container position-relative\"\r\n            (mouseenter)=\"showTooltip = true\"\r\n            (mouseleave)=\"showTooltip = false\"\r\n          >\r\n\r\n          <div  *ngIf=\"currentPageIndex == pageDetails.length - 1\">\r\n            <button *ngIf=\"showCancelButton\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\r\n            (click)=\"cancelled()\" type=\"button\"\r\n            >Cancel</button>\r\n               <button\r\n            *ngIf=\"!isActionTriggered && skipValidation\"\r\n              class=\"btn rounded-pill submitButton text-white\"\r\n              [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\r\n              type=\"button\"\r\n              (click)=\"saveAsDraft()\"\r\n              [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\r\n            >\r\n            <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\r\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n              Submitting...\r\n            </ng-container>\r\n            <ng-template #showSubmitText>\r\n             Save Draft\r\n            </ng-template>\r\n            </button>\r\n            \r\n\r\n            <button\r\n            *ngIf=\"!isActionTriggered\"\r\n              class=\"btn rounded-pill submitButton text-white\"\r\n              [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\r\n              type=\"button\"\r\n              (click)=\"submitForm()\"\r\n              [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\r\n            >\r\n            <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\r\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n              Submitting...\r\n            </ng-container>\r\n            <ng-template #showSubmitText>\r\n              Submit\r\n            </ng-template>\r\n            </button>\r\n            <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\r\n              {{eligibleForSubmission.message}}\r\n            </div>\r\n              </div>\r\n          </div>\r\n\r\n        </div>\r\n        <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\r\n          {{ currentStep }}{{ animatedDots }}\r\n          <span class=\"percentage\">{{ submissionProgress }}%</span>\r\n        </div>\r\n\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\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}}.skip-margin{padding:0}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important;padding-right:0}.nav-item{background-color:#fff;border-radius:5px}.nav-item.nav-item-default{margin-right:.5%}.nav-item.nav-item-ara{margin-left:.5%}.nav-link{position:relative;margin-bottom:-2px;padding-left:25px;padding-right:25px}.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}.custom-tooltip{--bs-tooltip-bg: var(--bd-violet-bg);--bs-tooltip-color: var(--bs-white)}.tab-navigation{position:relative;display:flex;align-items:center;width:95%}.navTabs{display:flex;overflow-x:auto;scroll-behavior:smooth;white-space:nowrap;width:100%;padding:0;margin:0;scrollbar-width:none;-ms-overflow-style:none}.navTabs::-webkit-scrollbar{display:none}.nav-arrow{position:absolute;background:#fff;border:none;cursor:pointer;font-size:20px;font-weight:700;padding:5px 10px;z-index:1000;box-shadow:0 2px 5px #0003;width:45px;height:27px;gap:13px;display:flex;justify-content:center;align-items:center;border-radius:6px}.nav-arrow img{width:8px;height:15px}.submitButton{margin-right:1rem}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"] }]
+            args: [{ selector: 'lib-navigation-tabs', template: "<div class=\"tab-inner-container\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"d-flex gap-2\">\n    <div class=\"tab-navigation\" *ngIf=\"!hideTabs\">\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 pageDetails; let i = index; trackBy: trackByIndex\"\n          [ngClass]=\"{'nav-item-ara': acceptedLanguage === 'ara', 'nav-item-default': acceptedLanguage !== 'ara'}\"\n        >\n          <button\n            class=\"nav-link\"\n            [title]=\"page.name\"\n            data-bs-toggle=\"tooltip\"\n            data-bs-placement=\"top\"\n            data-bs-custom-class=\"custom-tooltip\"\n            [class.active]=\"i === currentPageIndex\"\n            id=\"tab-{{ i }}\"\n            type=\"button\"\n            role=\"tab\"\n            [attr.aria-controls]=\"'content-' + i\"\n            [attr.aria-selected]=\"i === currentPageIndex\"\n            (click)=\"setCurrentPage(i)\"\n          >\n            {{ page.name }}\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex align-items-center\" *ngIf=\"showNavArrows\">\n      <button class=\"nav-arrow\">\n        <img src=\"assets/icons/left_arrow.svg\" alt=\"left arrow\"\n        (click)=\"scrollTabs(-1)\">\n        <img src=\"assets/icons/right_arrow.svg\" alt=\"right arrow\"\n        (click)=\"scrollTabs(1)\">\n      </button>\n    </div>\n  </div>\n\n\n\n  <div class=\"tab-content pt-5 pb-3 px-1\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <ng-container *ngIf=\"pages[currentPageIndex]\">\n      <div\n        class=\"tab-pane fade show active\"\n        id=\"content-{{ currentPageIndex }}\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + currentPageIndex\"\n      >\n        <div *ngIf=\"loadedPages[currentPageIndex]\">\n          <div class=\"data-container\"\n          infiniteScroll\n          [infiniteScrollDistance]=\"2\"\n          [infiniteScrollThrottle]=\"200\"\n          (scrolled)=\"loadMoreData()\">\n          <div *ngFor=\"let row of pages[currentPageIndex].rows\">\n            <div class=\"margin d-flex\">\n              <div *ngFor=\"let grid of row.grid\"\n                   [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\n                <lib-form-elements\n                  [grid]=\"grid\"\n                  [edit]=\"edit\"\n                  [acceptedLanguage]=\"acceptedLanguage\"\n                  [pages]=\"pages\"\n                  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n                ></lib-form-elements>\n              </div>\n            </div>\n          </div>\n          </div>\n          <div class=\"footerButton d-flex justify-content-between align-items-center me-4 ms-4 position-relative\">\n          <!-- Hover detection container -->\n                    <div  [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n          <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n\n          <div  *ngIf=\"currentPageIndex == pageDetails.length - 1\">\n            <button *ngIf=\"showCancelButton\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n            (click)=\"cancelled()\" type=\"button\"\n            >Cancel</button>\n               <button\n            *ngIf=\"!isActionTriggered && skipValidation\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n              type=\"button\"\n              (click)=\"saveAsDraft()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n            >\n            <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n             Save Draft\n            </ng-template>\n            </button>\n            \n\n            <button\n            *ngIf=\"!isActionTriggered\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n              type=\"button\"\n              (click)=\"submitForm()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n            >\n            <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n              Submit\n            </ng-template>\n            </button>\n            <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n              </div>\n          </div>\n\n        </div>\n        <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\n          {{ currentStep }}{{ animatedDots }}\n          <span class=\"percentage\">{{ submissionProgress }}%</span>\n        </div>\n\n        </div>\n      </div>\n    </ng-container>\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}}.skip-margin{padding:0}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important;padding-right:0}.nav-item{background-color:#fff;border-radius:5px}.nav-item.nav-item-default{margin-right:.5%}.nav-item.nav-item-ara{margin-left:.5%}.nav-link{position:relative;margin-bottom:-2px;padding-left:25px;padding-right:25px}.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}.custom-tooltip{--bs-tooltip-bg: var(--bd-violet-bg);--bs-tooltip-color: var(--bs-white)}.tab-navigation{position:relative;display:flex;align-items:center;width:95%}.navTabs{display:flex;overflow-x:auto;scroll-behavior:smooth;white-space:nowrap;width:100%;padding:0;margin:0;scrollbar-width:none;-ms-overflow-style:none}.navTabs::-webkit-scrollbar{display:none}.nav-arrow{position:absolute;background:#fff;border:none;cursor:pointer;font-size:20px;font-weight:700;padding:5px 10px;z-index:1000;box-shadow:0 2px 5px #0003;width:45px;height:27px;gap:13px;display:flex;justify-content:center;align-items:center;border-radius:6px}.nav-arrow img{width:8px;height:15px}.submitButton{margin-right:1rem}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"] }]
         }], ctorParameters: function () { return [{ type: FormValidationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pages: [{
                 type: Input
             }], currentPageIndex: [{
@@ -9365,11 +9595,11 @@ class SaveDraftModalComponent {
         this.dialogRef.close(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaveDraftModalComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SaveDraftModalComponent, selector: "lib-form-submission-conformation", ngImport: i0, template: "<div class=\"save-draft-modal\"\r\n     [style.--primary-color]=\"primaryColor\"\r\n     [style.--primary-color-rgb]=\"primaryColorRgb\">\r\n  <div class=\"modal-card\">\r\n    <div class=\"status-icon\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"bi bi-file-earmark-text-fill\"></i>\r\n      </div>\r\n    </div>\r\n\r\n    <h3>Form Submission Incomplete</h3>\r\n    <p class=\"subheader\">We noticed some information needs attention</p>\r\n\r\n    <div class=\"message-card\">\r\n      <div class=\"message-content\">\r\n        <p>Your form contains:</p>\r\n        <ul>\r\n          <li><i class=\"bi bi-x-circle\"></i> Missing required fields</li>\r\n          <li><i class=\"bi bi-exclamation-triangle\"></i> Incorrectly formatted answers</li>\r\n        </ul>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action-buttons\">\r\n      <button class=\"btn btn-continue\" (click)=\"continueEditing()\">\r\n        <i class=\"bi bi-pencil-square\"></i> Continue Editing\r\n      </button>\r\n      <button class=\"btn btn-save\" (click)=\"saveAsDraft()\">\r\n        <i class=\"bi bi-cloud-arrow-up\"></i> Save as Draft\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".save-draft-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1050;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:hidden;animation:fadeIn .25s ease-out forwards}.save-draft-modal .modal-card{background:#fff;border-radius:12px;width:90%;max-width:480px;min-height:300px;padding:2.5rem;box-shadow:0 10px 30px #0003;margin:20px;position:relative;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.1);transform:scale(.98);animation:scaleIn .25s ease-out forwards .1s}.save-draft-modal .status-icon{text-align:center;margin-bottom:1.5rem;flex-shrink:0}.save-draft-modal .status-icon .icon-wrapper{display:inline-flex;background:linear-gradient(135deg,var(--primary-color),color-mix(in srgb,var(--primary-color) 90%,white));box-shadow:0 4px 15px rgba(var(--primary-color-rgb),.3);width:70px;height:70px;border-radius:50%;align-items:center;justify-content:center}.save-draft-modal .status-icon .icon-wrapper i{color:#fff;font-size:2.2rem}.save-draft-modal h3{color:#2c3e50;text-align:center;margin-bottom:.5rem;font-weight:700;font-size:1.5rem}.save-draft-modal .subheader{color:#6c757d;text-align:center;margin-bottom:1.5rem;font-size:1rem}.save-draft-modal .message-card{background:#f8f9fa;border-radius:8px;padding:1.25rem;margin-bottom:2rem;border-left:4px solid var(--primary-color);transition:transform .2s ease}.save-draft-modal .message-card:hover{transform:translateY(-2px)}.save-draft-modal .message-card .message-content p{color:#495057;font-weight:500;margin-bottom:.75rem}.save-draft-modal .message-card .message-content ul{list-style:none;padding-left:0;margin-bottom:0}.save-draft-modal .message-card .message-content ul li{color:#495057;margin-bottom:.5rem;display:flex;align-items:center;font-size:.95rem}.save-draft-modal .message-card .message-content ul li i{margin-right:.5rem;font-size:1.1rem}.save-draft-modal .message-card .message-content ul li .bi-x-circle{color:#dc3545}.save-draft-modal .message-card .message-content ul li .bi-exclamation-triangle{color:#ffc107}.save-draft-modal .action-buttons{margin-top:auto;flex-shrink:0;display:flex;gap:1rem}.save-draft-modal .action-buttons .btn{flex:1;padding:.8rem;border-radius:8px;font-weight:500;display:flex;align-items:center;justify-content:center;transition:all .2s ease;border:none}.save-draft-modal .action-buttons .btn i{margin-right:.5rem;font-size:1.1rem}.save-draft-modal .action-buttons .btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.save-draft-modal .action-buttons .btn:active{transform:translateY(0)}.save-draft-modal .action-buttons .btn-continue{background:#fff;color:var(--primary-color);border:1px solid var(--primary-color)}.save-draft-modal .action-buttons .btn-continue:hover{background-color:color-mix(in srgb,var(--primary-color) 5%,white)}.save-draft-modal .action-buttons .btn-save{background:var(--primary-color);color:#fff;box-shadow:0 4px 15px rgba(var(--primary-color-rgb),.3)}.save-draft-modal .action-buttons .btn-save:hover{background-color:color-mix(in srgb,var(--primary-color) 95%,black)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 576px){.save-draft-modal .modal-card{padding:1.5rem;min-height:auto;height:auto;max-height:90vh;overflow-y:auto}.save-draft-modal .action-buttons{flex-direction:column}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SaveDraftModalComponent, selector: "lib-form-submission-conformation", ngImport: i0, template: "<div class=\"save-draft-modal\"\n     [style.--primary-color]=\"primaryColor\"\n     [style.--primary-color-rgb]=\"primaryColorRgb\">\n  <div class=\"modal-card\">\n    <div class=\"status-icon\">\n      <div class=\"icon-wrapper\">\n        <i class=\"bi bi-file-earmark-text-fill\"></i>\n      </div>\n    </div>\n\n    <h3>Form Submission Incomplete</h3>\n    <p class=\"subheader\">We noticed some information needs attention</p>\n\n    <div class=\"message-card\">\n      <div class=\"message-content\">\n        <p>Your form contains:</p>\n        <ul>\n          <li><i class=\"bi bi-x-circle\"></i> Missing required fields</li>\n          <li><i class=\"bi bi-exclamation-triangle\"></i> Incorrectly formatted answers</li>\n        </ul>\n      </div>\n    </div>\n\n    <div class=\"action-buttons\">\n      <button class=\"btn btn-continue\" (click)=\"continueEditing()\">\n        <i class=\"bi bi-pencil-square\"></i> Continue Editing\n      </button>\n      <button class=\"btn btn-save\" (click)=\"saveAsDraft()\">\n        <i class=\"bi bi-cloud-arrow-up\"></i> Save as Draft\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".save-draft-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1050;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:hidden;animation:fadeIn .25s ease-out forwards}.save-draft-modal .modal-card{background:#fff;border-radius:12px;width:90%;max-width:480px;min-height:300px;padding:2.5rem;box-shadow:0 10px 30px #0003;margin:20px;position:relative;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.1);transform:scale(.98);animation:scaleIn .25s ease-out forwards .1s}.save-draft-modal .status-icon{text-align:center;margin-bottom:1.5rem;flex-shrink:0}.save-draft-modal .status-icon .icon-wrapper{display:inline-flex;background:linear-gradient(135deg,var(--primary-color),color-mix(in srgb,var(--primary-color) 90%,white));box-shadow:0 4px 15px rgba(var(--primary-color-rgb),.3);width:70px;height:70px;border-radius:50%;align-items:center;justify-content:center}.save-draft-modal .status-icon .icon-wrapper i{color:#fff;font-size:2.2rem}.save-draft-modal h3{color:#2c3e50;text-align:center;margin-bottom:.5rem;font-weight:700;font-size:1.5rem}.save-draft-modal .subheader{color:#6c757d;text-align:center;margin-bottom:1.5rem;font-size:1rem}.save-draft-modal .message-card{background:#f8f9fa;border-radius:8px;padding:1.25rem;margin-bottom:2rem;border-left:4px solid var(--primary-color);transition:transform .2s ease}.save-draft-modal .message-card:hover{transform:translateY(-2px)}.save-draft-modal .message-card .message-content p{color:#495057;font-weight:500;margin-bottom:.75rem}.save-draft-modal .message-card .message-content ul{list-style:none;padding-left:0;margin-bottom:0}.save-draft-modal .message-card .message-content ul li{color:#495057;margin-bottom:.5rem;display:flex;align-items:center;font-size:.95rem}.save-draft-modal .message-card .message-content ul li i{margin-right:.5rem;font-size:1.1rem}.save-draft-modal .message-card .message-content ul li .bi-x-circle{color:#dc3545}.save-draft-modal .message-card .message-content ul li .bi-exclamation-triangle{color:#ffc107}.save-draft-modal .action-buttons{margin-top:auto;flex-shrink:0;display:flex;gap:1rem}.save-draft-modal .action-buttons .btn{flex:1;padding:.8rem;border-radius:8px;font-weight:500;display:flex;align-items:center;justify-content:center;transition:all .2s ease;border:none}.save-draft-modal .action-buttons .btn i{margin-right:.5rem;font-size:1.1rem}.save-draft-modal .action-buttons .btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.save-draft-modal .action-buttons .btn:active{transform:translateY(0)}.save-draft-modal .action-buttons .btn-continue{background:#fff;color:var(--primary-color);border:1px solid var(--primary-color)}.save-draft-modal .action-buttons .btn-continue:hover{background-color:color-mix(in srgb,var(--primary-color) 5%,white)}.save-draft-modal .action-buttons .btn-save{background:var(--primary-color);color:#fff;box-shadow:0 4px 15px rgba(var(--primary-color-rgb),.3)}.save-draft-modal .action-buttons .btn-save:hover{background-color:color-mix(in srgb,var(--primary-color) 95%,black)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 576px){.save-draft-modal .modal-card{padding:1.5rem;min-height:auto;height:auto;max-height:90vh;overflow-y:auto}.save-draft-modal .action-buttons{flex-direction:column}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaveDraftModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-submission-conformation', template: "<div class=\"save-draft-modal\"\r\n     [style.--primary-color]=\"primaryColor\"\r\n     [style.--primary-color-rgb]=\"primaryColorRgb\">\r\n  <div class=\"modal-card\">\r\n    <div class=\"status-icon\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"bi bi-file-earmark-text-fill\"></i>\r\n      </div>\r\n    </div>\r\n\r\n    <h3>Form Submission Incomplete</h3>\r\n    <p class=\"subheader\">We noticed some information needs attention</p>\r\n\r\n    <div class=\"message-card\">\r\n      <div class=\"message-content\">\r\n        <p>Your form contains:</p>\r\n        <ul>\r\n          <li><i class=\"bi bi-x-circle\"></i> Missing required fields</li>\r\n          <li><i class=\"bi bi-exclamation-triangle\"></i> Incorrectly formatted answers</li>\r\n        </ul>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action-buttons\">\r\n      <button class=\"btn btn-continue\" (click)=\"continueEditing()\">\r\n        <i class=\"bi bi-pencil-square\"></i> Continue Editing\r\n      </button>\r\n      <button class=\"btn btn-save\" (click)=\"saveAsDraft()\">\r\n        <i class=\"bi bi-cloud-arrow-up\"></i> Save as Draft\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".save-draft-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1050;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:hidden;animation:fadeIn .25s ease-out forwards}.save-draft-modal .modal-card{background:#fff;border-radius:12px;width:90%;max-width:480px;min-height:300px;padding:2.5rem;box-shadow:0 10px 30px #0003;margin:20px;position:relative;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.1);transform:scale(.98);animation:scaleIn .25s ease-out forwards .1s}.save-draft-modal .status-icon{text-align:center;margin-bottom:1.5rem;flex-shrink:0}.save-draft-modal .status-icon .icon-wrapper{display:inline-flex;background:linear-gradient(135deg,var(--primary-color),color-mix(in srgb,var(--primary-color) 90%,white));box-shadow:0 4px 15px rgba(var(--primary-color-rgb),.3);width:70px;height:70px;border-radius:50%;align-items:center;justify-content:center}.save-draft-modal .status-icon .icon-wrapper i{color:#fff;font-size:2.2rem}.save-draft-modal h3{color:#2c3e50;text-align:center;margin-bottom:.5rem;font-weight:700;font-size:1.5rem}.save-draft-modal .subheader{color:#6c757d;text-align:center;margin-bottom:1.5rem;font-size:1rem}.save-draft-modal .message-card{background:#f8f9fa;border-radius:8px;padding:1.25rem;margin-bottom:2rem;border-left:4px solid var(--primary-color);transition:transform .2s ease}.save-draft-modal .message-card:hover{transform:translateY(-2px)}.save-draft-modal .message-card .message-content p{color:#495057;font-weight:500;margin-bottom:.75rem}.save-draft-modal .message-card .message-content ul{list-style:none;padding-left:0;margin-bottom:0}.save-draft-modal .message-card .message-content ul li{color:#495057;margin-bottom:.5rem;display:flex;align-items:center;font-size:.95rem}.save-draft-modal .message-card .message-content ul li i{margin-right:.5rem;font-size:1.1rem}.save-draft-modal .message-card .message-content ul li .bi-x-circle{color:#dc3545}.save-draft-modal .message-card .message-content ul li .bi-exclamation-triangle{color:#ffc107}.save-draft-modal .action-buttons{margin-top:auto;flex-shrink:0;display:flex;gap:1rem}.save-draft-modal .action-buttons .btn{flex:1;padding:.8rem;border-radius:8px;font-weight:500;display:flex;align-items:center;justify-content:center;transition:all .2s ease;border:none}.save-draft-modal .action-buttons .btn i{margin-right:.5rem;font-size:1.1rem}.save-draft-modal .action-buttons .btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.save-draft-modal .action-buttons .btn:active{transform:translateY(0)}.save-draft-modal .action-buttons .btn-continue{background:#fff;color:var(--primary-color);border:1px solid var(--primary-color)}.save-draft-modal .action-buttons .btn-continue:hover{background-color:color-mix(in srgb,var(--primary-color) 5%,white)}.save-draft-modal .action-buttons .btn-save{background:var(--primary-color);color:#fff;box-shadow:0 4px 15px rgba(var(--primary-color-rgb),.3)}.save-draft-modal .action-buttons .btn-save:hover{background-color:color-mix(in srgb,var(--primary-color) 95%,black)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 576px){.save-draft-modal .modal-card{padding:1.5rem;min-height:auto;height:auto;max-height:90vh;overflow-y:auto}.save-draft-modal .action-buttons{flex-direction:column}}\n"] }]
+            args: [{ selector: 'lib-form-submission-conformation', template: "<div class=\"save-draft-modal\"\n     [style.--primary-color]=\"primaryColor\"\n     [style.--primary-color-rgb]=\"primaryColorRgb\">\n  <div class=\"modal-card\">\n    <div class=\"status-icon\">\n      <div class=\"icon-wrapper\">\n        <i class=\"bi bi-file-earmark-text-fill\"></i>\n      </div>\n    </div>\n\n    <h3>Form Submission Incomplete</h3>\n    <p class=\"subheader\">We noticed some information needs attention</p>\n\n    <div class=\"message-card\">\n      <div class=\"message-content\">\n        <p>Your form contains:</p>\n        <ul>\n          <li><i class=\"bi bi-x-circle\"></i> Missing required fields</li>\n          <li><i class=\"bi bi-exclamation-triangle\"></i> Incorrectly formatted answers</li>\n        </ul>\n      </div>\n    </div>\n\n    <div class=\"action-buttons\">\n      <button class=\"btn btn-continue\" (click)=\"continueEditing()\">\n        <i class=\"bi bi-pencil-square\"></i> Continue Editing\n      </button>\n      <button class=\"btn btn-save\" (click)=\"saveAsDraft()\">\n        <i class=\"bi bi-cloud-arrow-up\"></i> Save as Draft\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".save-draft-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1050;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:hidden;animation:fadeIn .25s ease-out forwards}.save-draft-modal .modal-card{background:#fff;border-radius:12px;width:90%;max-width:480px;min-height:300px;padding:2.5rem;box-shadow:0 10px 30px #0003;margin:20px;position:relative;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.1);transform:scale(.98);animation:scaleIn .25s ease-out forwards .1s}.save-draft-modal .status-icon{text-align:center;margin-bottom:1.5rem;flex-shrink:0}.save-draft-modal .status-icon .icon-wrapper{display:inline-flex;background:linear-gradient(135deg,var(--primary-color),color-mix(in srgb,var(--primary-color) 90%,white));box-shadow:0 4px 15px rgba(var(--primary-color-rgb),.3);width:70px;height:70px;border-radius:50%;align-items:center;justify-content:center}.save-draft-modal .status-icon .icon-wrapper i{color:#fff;font-size:2.2rem}.save-draft-modal h3{color:#2c3e50;text-align:center;margin-bottom:.5rem;font-weight:700;font-size:1.5rem}.save-draft-modal .subheader{color:#6c757d;text-align:center;margin-bottom:1.5rem;font-size:1rem}.save-draft-modal .message-card{background:#f8f9fa;border-radius:8px;padding:1.25rem;margin-bottom:2rem;border-left:4px solid var(--primary-color);transition:transform .2s ease}.save-draft-modal .message-card:hover{transform:translateY(-2px)}.save-draft-modal .message-card .message-content p{color:#495057;font-weight:500;margin-bottom:.75rem}.save-draft-modal .message-card .message-content ul{list-style:none;padding-left:0;margin-bottom:0}.save-draft-modal .message-card .message-content ul li{color:#495057;margin-bottom:.5rem;display:flex;align-items:center;font-size:.95rem}.save-draft-modal .message-card .message-content ul li i{margin-right:.5rem;font-size:1.1rem}.save-draft-modal .message-card .message-content ul li .bi-x-circle{color:#dc3545}.save-draft-modal .message-card .message-content ul li .bi-exclamation-triangle{color:#ffc107}.save-draft-modal .action-buttons{margin-top:auto;flex-shrink:0;display:flex;gap:1rem}.save-draft-modal .action-buttons .btn{flex:1;padding:.8rem;border-radius:8px;font-weight:500;display:flex;align-items:center;justify-content:center;transition:all .2s ease;border:none}.save-draft-modal .action-buttons .btn i{margin-right:.5rem;font-size:1.1rem}.save-draft-modal .action-buttons .btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.save-draft-modal .action-buttons .btn:active{transform:translateY(0)}.save-draft-modal .action-buttons .btn-continue{background:#fff;color:var(--primary-color);border:1px solid var(--primary-color)}.save-draft-modal .action-buttons .btn-continue:hover{background-color:color-mix(in srgb,var(--primary-color) 5%,white)}.save-draft-modal .action-buttons .btn-save{background:var(--primary-color);color:#fff;box-shadow:0 4px 15px rgba(var(--primary-color-rgb),.3)}.save-draft-modal .action-buttons .btn-save:hover{background-color:color-mix(in srgb,var(--primary-color) 95%,black)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 576px){.save-draft-modal .modal-card{padding:1.5rem;min-height:auto;height:auto;max-height:90vh;overflow-y:auto}.save-draft-modal .action-buttons{flex-direction:column}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -9511,11 +9741,11 @@ class HeaderComponent {
         this.skipMargin = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, selector: "lib-header", inputs: { name: "name", skipMargin: "skipMargin" }, ngImport: i0, template: "<div class=\"head container\">\r\n  <div class=\"registration-header\">\r\n    <p>{{ name }}</p>\r\n  </div>\r\n  <div class=\"line\" *ngIf=\"!skipMargin\"></div>\r\n</div>\r\n", styles: [".head{background-color:#fff;padding:0!important}.registration-header{top:20px;left:50%}.registration-header p{font-size:20px;font-weight:600}.line{margin-top:1%;margin-bottom:2%;width:100%;height:0px;border:1.5px solid #eaeaea;transform:rotate(180deg)}@media (max-width: 576px){.line{margin-bottom:5%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, selector: "lib-header", inputs: { name: "name", skipMargin: "skipMargin" }, ngImport: i0, template: "<div class=\"head container\">\n  <div class=\"registration-header\">\n    <p>{{ name }}</p>\n  </div>\n  <div class=\"line\" *ngIf=\"!skipMargin\"></div>\n</div>\n", styles: [".head{background-color:#fff;padding:0!important}.registration-header{top:20px;left:50%}.registration-header p{font-size:20px;font-weight:600}.line{margin-top:1%;margin-bottom:2%;width:100%;height:0px;border:1.5px solid #eaeaea;transform:rotate(180deg)}@media (max-width: 576px){.line{margin-bottom:5%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-header', template: "<div class=\"head container\">\r\n  <div class=\"registration-header\">\r\n    <p>{{ name }}</p>\r\n  </div>\r\n  <div class=\"line\" *ngIf=\"!skipMargin\"></div>\r\n</div>\r\n", styles: [".head{background-color:#fff;padding:0!important}.registration-header{top:20px;left:50%}.registration-header p{font-size:20px;font-weight:600}.line{margin-top:1%;margin-bottom:2%;width:100%;height:0px;border:1.5px solid #eaeaea;transform:rotate(180deg)}@media (max-width: 576px){.line{margin-bottom:5%}}\n"] }]
+            args: [{ selector: 'lib-header', template: "<div class=\"head container\">\n  <div class=\"registration-header\">\n    <p>{{ name }}</p>\n  </div>\n  <div class=\"line\" *ngIf=\"!skipMargin\"></div>\n</div>\n", styles: [".head{background-color:#fff;padding:0!important}.registration-header{top:20px;left:50%}.registration-header p{font-size:20px;font-weight:600}.line{margin-top:1%;margin-bottom:2%;width:100%;height:0px;border:1.5px solid #eaeaea;transform:rotate(180deg)}@media (max-width: 576px){.line{margin-bottom:5%}}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], skipMargin: [{
@@ -9580,11 +9810,11 @@ class NextPrevNavigationComponent {
         this.cancel.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: { skipValidation: "skipValidation", currentPageIndex: "currentPageIndex", pages: "pages", previousPage: "previousPage", nextPage: "nextPage", currentPage: "currentPage", pageDetails: "pageDetails", skipMargin: "skipMargin", edit: "edit", acceptedLanguage: "acceptedLanguage", primaryColor: "primaryColor", secondaryColor: "secondaryColor", isActionTriggered: "isActionTriggered", submissionInProgress: "submissionInProgress", submissionInDraft: "submissionInDraft", eligibleForSubmission: "eligibleForSubmission", showCancelButton: "showCancelButton", submissionProgress: "submissionProgress", currentStep: "currentStep", animatedDots: "animatedDots" }, outputs: { navigateNext: "navigateNext", navigatePrevious: "navigatePrevious", submitEmit: "submitEmit", saveAsDraftEmit: "saveAsDraftEmit", cancel: "cancel", subFormChange: "subFormChange", rowSetIndex: "rowSetIndex" }, ngImport: i0, template: "<!-- <div class=\"pageTitleDiv\" *ngIf=\"!skipMargin\">\r\n  <p class=\"pageTitle\">{{pageDetails[currentPageIndex]?.name}}</p>\r\n</div> -->\r\n<div class=\"button-inner-container rounded\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\r\n  <div class=\"tab-content pt-5 pb-3 row\" [attr.name]=\"pages[currentPageIndex].testElementName\">\r\n    <div class=\"data-container\"\r\n    infiniteScroll\r\n    [infiniteScrollDistance]=\"2\"\r\n    [infiniteScrollThrottle]=\"200\"\r\n    (scrolled)=\"loadMoreData()\">\r\n\r\n    <div *ngFor=\"let row of pages[currentPageIndex]?.rows\" class=\"marginSize d-flex\">\r\n      <div *ngFor=\"let grid of row.grid\"\r\n      [ngStyle]=\"{'width.%': (grid.element.count) * (100 / (12))}\">\r\n        <lib-form-elements\r\n          [grid]=\"grid\"\r\n          [currentPageIndex]=\"currentPageIndex\"\r\n          [edit]=\"edit\"\r\n          [acceptedLanguage]=\"acceptedLanguage\"\r\n          [pages]=\"pages\"\r\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n          state=\"parent\"\r\n        ></lib-form-elements>\r\n      </div>\r\n    </div>\r\n    </div>\r\n   <div [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\r\n\r\n    <div class=\"footerButton\">\r\n      <div\r\n        class=\"prevButtonDiv\"\r\n        [ngClass]=\"{ 'prevDirection-rtl': acceptedLanguage === 'ara' }\">\r\n        <button\r\n          class=\"me-md-2 rounded-pill navButton\"\r\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\r\n          type=\"button\"\r\n          (click)=\"onNavigatePrevious()\"\r\n          *ngIf=\"0 < currentPageIndex\"\r\n        >\r\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\r\n            <svg\r\n              width=\"24\"\r\n              height=\"24\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n              <path\r\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n              <path\r\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </ng-container>\r\n          <ng-template #defaultSvg>\r\n            <svg\r\n              width=\"24\"\r\n              height=\"24\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n              <path\r\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n              <path\r\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </ng-template>\r\n          Previous | {{ previousPage.name }}\r\n        </button>\r\n      </div>\r\n      <div\r\n        class=\"nextButtonDiv\"\r\n        [ngClass]=\"{ 'nextDirection-rtl': acceptedLanguage === 'ara' }\"\r\n      >\r\n        <button\r\n          class=\"md-2 rounded-pill navButton\"\r\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\r\n          type=\"button\"\r\n          (click)=\"onNavigateNext()\"\r\n          *ngIf=\"currentPageIndex < pageDetails.length - 1\"\r\n        >\r\n          Next | {{ nextPage.name }}\r\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\r\n            <svg\r\n              width=\"24\"\r\n              height=\"24\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n              <path\r\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n              <path\r\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </ng-container>\r\n          <ng-template #defaultSvg>\r\n            <svg\r\n              width=\"24\"\r\n              height=\"24\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n              <path\r\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n              <path\r\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </ng-template>\r\n        </button>\r\n        <button *ngIf=\"showCancelButton && currentPageIndex == pageDetails.length - 1\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\r\n        (click)=\"cancelled()\" type=\"button\"\r\n        >Cancel</button>\r\n        <div\r\n             *ngIf=\"skipValidation\"\r\n            class=\"button-container position-relative\"\r\n            (mouseenter)=\"showTooltip = true\"\r\n            (mouseleave)=\"showTooltip = false\"\r\n          >\r\n          <button\r\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\r\n          [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\r\n          type=\"button\"\r\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\r\n          (click)=\"saveAsDraft()\"\r\n          [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\r\n        >\r\n          <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\r\n\r\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n            Submitting...\r\n          </ng-container>\r\n          <ng-template #showSubmitText>\r\n            Save Draft\r\n          </ng-template>\r\n        </button>\r\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\r\n              {{eligibleForSubmission.message}}\r\n            </div>\r\n      </div>\r\n\r\n  <div\r\n            class=\"button-container position-relative\"\r\n            (mouseenter)=\"showTooltip = true\"\r\n            (mouseleave)=\"showTooltip = false\"\r\n          >\r\n          <button\r\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\r\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor : '#084fff' }\"\r\n          type=\"button\"\r\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\r\n          (click)=\"submitForm()\"\r\n          [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\r\n        >\r\n          <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\r\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n            Submitting...\r\n          </ng-container>\r\n          <ng-template #showSubmitText>\r\n            Submit\r\n          </ng-template>\r\n        </button>\r\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\r\n              {{eligibleForSubmission.message}}\r\n            </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\r\n    {{ currentStep }}{{ animatedDots }}\r\n    <span class=\"percentage\">{{ submissionProgress }}%</span>\r\n  </div>\r\n</div>\r\n", styles: [".pageTitle{font-size:15px;font-weight:500}#captcha-container{display:flex;justify-content:center;align-items:center;padding-left:1.8rem}.grecaptcha-popup{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:9999;border-radius:50%}@media (max-width: 480px){.g-recaptcha{transform:scale(.85);transform-origin:center}}.pageTitleDiv{padding-left:3rem;padding-top:3rem;padding-right:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-right:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-right:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:2rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}.skip-margin{padding:0}@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{color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:flex-end;margin-left:auto;margin-bottom:5px}.nextDirection-rtl{margin-left:0;margin-right:auto}.tab-content,.row{background-color:#fff}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["currentPageIndex", "edit", "acceptedLanguage", "answer", "grid", "state", "pages"], outputs: ["subFormChange"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: { skipValidation: "skipValidation", currentPageIndex: "currentPageIndex", pages: "pages", previousPage: "previousPage", nextPage: "nextPage", currentPage: "currentPage", pageDetails: "pageDetails", skipMargin: "skipMargin", edit: "edit", acceptedLanguage: "acceptedLanguage", primaryColor: "primaryColor", secondaryColor: "secondaryColor", isActionTriggered: "isActionTriggered", submissionInProgress: "submissionInProgress", submissionInDraft: "submissionInDraft", eligibleForSubmission: "eligibleForSubmission", showCancelButton: "showCancelButton", submissionProgress: "submissionProgress", currentStep: "currentStep", animatedDots: "animatedDots" }, outputs: { navigateNext: "navigateNext", navigatePrevious: "navigatePrevious", submitEmit: "submitEmit", saveAsDraftEmit: "saveAsDraftEmit", cancel: "cancel", subFormChange: "subFormChange", rowSetIndex: "rowSetIndex" }, ngImport: i0, template: "<!-- <div class=\"pageTitleDiv\" *ngIf=\"!skipMargin\">\n  <p class=\"pageTitle\">{{pageDetails[currentPageIndex]?.name}}</p>\n</div> -->\n<div class=\"button-inner-container rounded\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"tab-content pt-5 pb-3 row\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <div class=\"data-container\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"200\"\n    (scrolled)=\"loadMoreData()\">\n\n    <div *ngFor=\"let row of pages[currentPageIndex]?.rows\" class=\"marginSize d-flex\">\n      <div *ngFor=\"let grid of row.grid\"\n      [ngStyle]=\"{'width.%': (grid.element.count) * (100 / (12))}\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n          [pages]=\"pages\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          state=\"parent\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    </div>\n   <div [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n\n    <div class=\"footerButton\">\n      <div\n        class=\"prevButtonDiv\"\n        [ngClass]=\"{ 'prevDirection-rtl': acceptedLanguage === 'ara' }\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\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          </ng-container>\n          <ng-template #defaultSvg>\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          </ng-template>\n          Previous | {{ previousPage.name }}\n        </button>\n      </div>\n      <div\n        class=\"nextButtonDiv\"\n        [ngClass]=\"{ 'nextDirection-rtl': acceptedLanguage === 'ara' }\"\n      >\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pageDetails.length - 1\"\n        >\n          Next | {{ nextPage.name }}\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\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          </ng-container>\n          <ng-template #defaultSvg>\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          </ng-template>\n        </button>\n        <button *ngIf=\"showCancelButton && currentPageIndex == pageDetails.length - 1\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n        (click)=\"cancelled()\" type=\"button\"\n        >Cancel</button>\n        <div\n             *ngIf=\"skipValidation\"\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"saveAsDraft()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n        >\n          <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Save Draft\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n  <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"submitForm()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n        >\n          <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Submit\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n    </div>\n  </div>\n  <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\n    {{ currentStep }}{{ animatedDots }}\n    <span class=\"percentage\">{{ submissionProgress }}%</span>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}#captcha-container{display:flex;justify-content:center;align-items:center;padding-left:1.8rem}.grecaptcha-popup{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:9999;border-radius:50%}@media (max-width: 480px){.g-recaptcha{transform:scale(.85);transform-origin:center}}.pageTitleDiv{padding-left:3rem;padding-top:3rem;padding-right:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-right:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-right:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:2rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}.skip-margin{padding:0}@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{color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:flex-end;margin-left:auto;margin-bottom:5px}.nextDirection-rtl{margin-left:0;margin-right:auto}.tab-content,.row{background-color:#fff}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["currentPageIndex", "edit", "acceptedLanguage", "answer", "grid", "state", "pages"], outputs: ["subFormChange"] }, { kind: "directive", type: i4$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] }); }
 }
 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\" *ngIf=\"!skipMargin\">\r\n  <p class=\"pageTitle\">{{pageDetails[currentPageIndex]?.name}}</p>\r\n</div> -->\r\n<div class=\"button-inner-container rounded\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\r\n  <div class=\"tab-content pt-5 pb-3 row\" [attr.name]=\"pages[currentPageIndex].testElementName\">\r\n    <div class=\"data-container\"\r\n    infiniteScroll\r\n    [infiniteScrollDistance]=\"2\"\r\n    [infiniteScrollThrottle]=\"200\"\r\n    (scrolled)=\"loadMoreData()\">\r\n\r\n    <div *ngFor=\"let row of pages[currentPageIndex]?.rows\" class=\"marginSize d-flex\">\r\n      <div *ngFor=\"let grid of row.grid\"\r\n      [ngStyle]=\"{'width.%': (grid.element.count) * (100 / (12))}\">\r\n        <lib-form-elements\r\n          [grid]=\"grid\"\r\n          [currentPageIndex]=\"currentPageIndex\"\r\n          [edit]=\"edit\"\r\n          [acceptedLanguage]=\"acceptedLanguage\"\r\n          [pages]=\"pages\"\r\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n          state=\"parent\"\r\n        ></lib-form-elements>\r\n      </div>\r\n    </div>\r\n    </div>\r\n   <div [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\r\n\r\n    <div class=\"footerButton\">\r\n      <div\r\n        class=\"prevButtonDiv\"\r\n        [ngClass]=\"{ 'prevDirection-rtl': acceptedLanguage === 'ara' }\">\r\n        <button\r\n          class=\"me-md-2 rounded-pill navButton\"\r\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\r\n          type=\"button\"\r\n          (click)=\"onNavigatePrevious()\"\r\n          *ngIf=\"0 < currentPageIndex\"\r\n        >\r\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\r\n            <svg\r\n              width=\"24\"\r\n              height=\"24\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n              <path\r\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n              <path\r\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </ng-container>\r\n          <ng-template #defaultSvg>\r\n            <svg\r\n              width=\"24\"\r\n              height=\"24\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n              <path\r\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n              <path\r\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </ng-template>\r\n          Previous | {{ previousPage.name }}\r\n        </button>\r\n      </div>\r\n      <div\r\n        class=\"nextButtonDiv\"\r\n        [ngClass]=\"{ 'nextDirection-rtl': acceptedLanguage === 'ara' }\"\r\n      >\r\n        <button\r\n          class=\"md-2 rounded-pill navButton\"\r\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\r\n          type=\"button\"\r\n          (click)=\"onNavigateNext()\"\r\n          *ngIf=\"currentPageIndex < pageDetails.length - 1\"\r\n        >\r\n          Next | {{ nextPage.name }}\r\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\r\n            <svg\r\n              width=\"24\"\r\n              height=\"24\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n              <path\r\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n              <path\r\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </ng-container>\r\n          <ng-template #defaultSvg>\r\n            <svg\r\n              width=\"24\"\r\n              height=\"24\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n              <path\r\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n              <path\r\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\r\n                stroke=\"white\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </ng-template>\r\n        </button>\r\n        <button *ngIf=\"showCancelButton && currentPageIndex == pageDetails.length - 1\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\r\n        (click)=\"cancelled()\" type=\"button\"\r\n        >Cancel</button>\r\n        <div\r\n             *ngIf=\"skipValidation\"\r\n            class=\"button-container position-relative\"\r\n            (mouseenter)=\"showTooltip = true\"\r\n            (mouseleave)=\"showTooltip = false\"\r\n          >\r\n          <button\r\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\r\n          [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\r\n          type=\"button\"\r\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\r\n          (click)=\"saveAsDraft()\"\r\n          [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\r\n        >\r\n          <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\r\n\r\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n            Submitting...\r\n          </ng-container>\r\n          <ng-template #showSubmitText>\r\n            Save Draft\r\n          </ng-template>\r\n        </button>\r\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\r\n              {{eligibleForSubmission.message}}\r\n            </div>\r\n      </div>\r\n\r\n  <div\r\n            class=\"button-container position-relative\"\r\n            (mouseenter)=\"showTooltip = true\"\r\n            (mouseleave)=\"showTooltip = false\"\r\n          >\r\n          <button\r\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\r\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor : '#084fff' }\"\r\n          type=\"button\"\r\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\r\n          (click)=\"submitForm()\"\r\n          [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\r\n        >\r\n          <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\r\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n            Submitting...\r\n          </ng-container>\r\n          <ng-template #showSubmitText>\r\n            Submit\r\n          </ng-template>\r\n        </button>\r\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\r\n              {{eligibleForSubmission.message}}\r\n            </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\r\n    {{ currentStep }}{{ animatedDots }}\r\n    <span class=\"percentage\">{{ submissionProgress }}%</span>\r\n  </div>\r\n</div>\r\n", styles: [".pageTitle{font-size:15px;font-weight:500}#captcha-container{display:flex;justify-content:center;align-items:center;padding-left:1.8rem}.grecaptcha-popup{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:9999;border-radius:50%}@media (max-width: 480px){.g-recaptcha{transform:scale(.85);transform-origin:center}}.pageTitleDiv{padding-left:3rem;padding-top:3rem;padding-right:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-right:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-right:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:2rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}.skip-margin{padding:0}@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{color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:flex-end;margin-left:auto;margin-bottom:5px}.nextDirection-rtl{margin-left:0;margin-right:auto}.tab-content,.row{background-color:#fff}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"] }]
+            args: [{ selector: 'lib-next-prev-navigation', template: "<!-- <div class=\"pageTitleDiv\" *ngIf=\"!skipMargin\">\n  <p class=\"pageTitle\">{{pageDetails[currentPageIndex]?.name}}</p>\n</div> -->\n<div class=\"button-inner-container rounded\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"tab-content pt-5 pb-3 row\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <div class=\"data-container\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"200\"\n    (scrolled)=\"loadMoreData()\">\n\n    <div *ngFor=\"let row of pages[currentPageIndex]?.rows\" class=\"marginSize d-flex\">\n      <div *ngFor=\"let grid of row.grid\"\n      [ngStyle]=\"{'width.%': (grid.element.count) * (100 / (12))}\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n          [pages]=\"pages\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          state=\"parent\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    </div>\n   <div [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n\n    <div class=\"footerButton\">\n      <div\n        class=\"prevButtonDiv\"\n        [ngClass]=\"{ 'prevDirection-rtl': acceptedLanguage === 'ara' }\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\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          </ng-container>\n          <ng-template #defaultSvg>\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          </ng-template>\n          Previous | {{ previousPage.name }}\n        </button>\n      </div>\n      <div\n        class=\"nextButtonDiv\"\n        [ngClass]=\"{ 'nextDirection-rtl': acceptedLanguage === 'ara' }\"\n      >\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pageDetails.length - 1\"\n        >\n          Next | {{ nextPage.name }}\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\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          </ng-container>\n          <ng-template #defaultSvg>\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          </ng-template>\n        </button>\n        <button *ngIf=\"showCancelButton && currentPageIndex == pageDetails.length - 1\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n        (click)=\"cancelled()\" type=\"button\"\n        >Cancel</button>\n        <div\n             *ngIf=\"skipValidation\"\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"saveAsDraft()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n        >\n          <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Save Draft\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n  <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"submitForm()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n        >\n          <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Submit\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n    </div>\n  </div>\n  <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\n    {{ currentStep }}{{ animatedDots }}\n    <span class=\"percentage\">{{ submissionProgress }}%</span>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}#captcha-container{display:flex;justify-content:center;align-items:center;padding-left:1.8rem}.grecaptcha-popup{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:9999;border-radius:50%}@media (max-width: 480px){.g-recaptcha{transform:scale(.85);transform-origin:center}}.pageTitleDiv{padding-left:3rem;padding-top:3rem;padding-right:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-right:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-right:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:2rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}.skip-margin{padding:0}@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{color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:flex-end;margin-left:auto;margin-bottom:5px}.nextDirection-rtl{margin-left:0;margin-right:auto}.tab-content,.row{background-color:#fff}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"] }]
         }], propDecorators: { skipValidation: [{
                 type: Input
             }], currentPageIndex: [{
@@ -9656,7 +9886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class SubmitFormComponent {
-    constructor(formService, toastr, router, dataService, recaptchaService, validationService, changeDetectorRef, elementTracker, formValidationService, aggregateService, scoreCalcService, dialog, whenClauseService) {
+    constructor(formService, toastr, router, dataService, recaptchaService, validationService, changeDetectorRef, elementTracker, formValidationService, aggregateService, scoreCalcService, dialog, whenClauseService, hiddenFieldService) {
         this.formService = formService;
         this.toastr = toastr;
         this.router = router;
@@ -9670,6 +9900,7 @@ class SubmitFormComponent {
         this.scoreCalcService = scoreCalcService;
         this.dialog = dialog;
         this.whenClauseService = whenClauseService;
+        this.hiddenFieldService = hiddenFieldService;
         this.question = null;
         this.moduleName = '';
         this.edit = false;
@@ -9807,6 +10038,7 @@ class SubmitFormComponent {
         }
     }
     ngOnInit() {
+        this.hiddenFieldService.setEditMode(this.edit);
         if (this.edit && this.submissionId) {
             // this.getSubmittedFormData();
         }
@@ -9848,16 +10080,16 @@ class SubmitFormComponent {
     loadFont(fontName) {
         const fontPath = `assets/fonts/${fontName}.woff2`; // Adjust extension as per your font file
         const style = document.createElement('style');
-        style.innerHTML = `
-      @font-face {
-        font-family: '${fontName}';
-        src: url('${fontPath}') format('woff2');
-        font-weight: normal;
-        font-style: normal;
-      }
-      body {
-        font-family: '${fontName}', sans-serif;
-      }
+        style.innerHTML = `
+      @font-face {
+        font-family: '${fontName}';
+        src: url('${fontPath}') format('woff2');
+        font-weight: normal;
+        font-style: normal;
+      }
+      body {
+        font-family: '${fontName}', sans-serif;
+      }
     `;
         document.head.appendChild(style);
     }
@@ -11202,13 +11434,13 @@ class SubmitFormComponent {
     cancelled() {
         this.cancel.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitFormComponent, deps: [{ token: FormService }, { token: i1$4.ToastrService }, { token: i2.Router }, { token: DataService }, { token: RecaptchaService }, { token: ValidationService }, { token: i0.ChangeDetectorRef }, { token: ElementTrackerService }, { token: FormValidationService }, { token: AggregationFunctionService }, { token: ScoreCalculationService }, { token: i1$3.MatDialog }, { token: WhenClauseService }], 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", acceptedLanguage: "acceptedLanguage", skipMargin: "skipMargin", skipValidation: "skipValidation", navigateTo: "navigateTo", country: "country", showCancelButton: "showCancelButton", isActionTriggered: "isActionTriggered" }, outputs: { submit: "submit", apiCalled: "apiCalled", currentPageIndexChange: "currentPageIndexChange", cancel: "cancel" }, viewQueries: [{ propertyName: "child", first: true, predicate: NavigationTabsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n\r\n<ng-container *ngIf=\"isLoadingPages\">\r\n    <ngx-skeleton-loader count=\"5\"></ngx-skeleton-loader>\r\n</ng-container>\r\n\r\n  <div class=\"head container\" *ngIf=\"!skipMargin\">\r\n    <lib-header [name]=\"name\" [skipMargin]=\"skipMargin\"></lib-header>\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"body\" [ngClass]=\"{ 'skip-margin': skipMargin,container: !skipMargin}\">\r\n\r\n    <lib-submission-container [parentQuestionAnswers]=\"parentQuestionAnswers\"\r\n    *ngIf=\"parentQuestionAnswers\"></lib-submission-container>\r\n\r\n    <lib-navigation-tabs\r\n      *ngIf=\"navigation == 'TAB'\"\r\n      [skipMargin]=\"skipMargin\"\r\n      [skipValidation]=\"skipValidation\"\r\n      [pages]=\"pages\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      (pageChanged)=\"setCurrentPage($event)\"\r\n      (submitEmit)=\"submitForm()\"\r\n      [pageDetails]=\"pageDetails\"\r\n      [eligibleForSubmission]=\"eligibleForSubmission\"\r\n      [edit]=\"edit\"\r\n      [acceptedLanguage] = \"acceptedLanguage\"\r\n      [isActionTriggered]=\"isActionTriggered\"\r\n      [primaryColor]=\"primaryColor\"\r\n      [secondaryColor]=\"secondaryColor\"\r\n      [markAllQuestionsAsRequired]=\"markAllQuestionsAsRequired\"\r\n      [submissionInProgress]=\"submissionInProgress\"\r\n      [submissionInDraft]=\"submissionInDraft\"\r\n      [showCancelButton]=\"showCancelButton\"\r\n      [submissionProgress]=\"submissionProgress\"\r\n      [animatedDots]=\"animatedDots\"\r\n      [currentStep]=\"currentStep\"\r\n      (saveAsDraftEmit)=\"saveAsDraft()\"\r\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n      (rowSetIndex)=\"loadMoreData($event)\"\r\n      (cancel)=\"cancelled()\"\r\n    ></lib-navigation-tabs>\r\n    <lib-next-prev-navigation\r\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\r\n      [skipMargin]=\"skipMargin\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      [pageDetails]=\"pageDetails\"\r\n      (rowSetIndex)=\"loadMoreData($event)\"\r\n      [pages]=\"pages\"\r\n      [previousPage]=\"previousPage\"\r\n      [isActionTriggered]=\"isActionTriggered\"\r\n      [currentPage]=\"currentPage\"\r\n      [primaryColor]=\"primaryColor\"\r\n      [secondaryColor]=\"secondaryColor\"\r\n      [nextPage]=\"nextPage\"\r\n      (navigateNext)=\"navigateToNextPage()\"\r\n      (navigatePrevious)=\"navigateToPreviousPage()\"\r\n      [acceptedLanguage] = \"acceptedLanguage\"\r\n      (submitEmit)=\"submitForm()\"\r\n      (saveAsDraftEmit)=\"saveAsDraft()\"\r\n      [edit]=\"edit\"\r\n      [eligibleForSubmission]=\"eligibleForSubmission\"\r\n      [submissionInProgress]=\"submissionInProgress\"\r\n      [submissionInDraft]=\"submissionInDraft\"\r\n      [showCancelButton]=\"showCancelButton\"\r\n      [submissionProgress]=\"submissionProgress\"\r\n      [animatedDots]=\"animatedDots\"\r\n      [currentStep]=\"currentStep\"\r\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n      (cancel)=\"cancelled()\"\r\n       [skipValidation]=\"skipValidation\"\r\n    ></lib-next-prev-navigation>\r\n  </div>\r\n</div>\r\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}.skip-margin{background:#fff}.save-draft-wrapper{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem;margin-right:2rem;padding:0 1.5rem 1.5rem}.draft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.65rem 1.6rem;font-size:14px;font-weight:500;border-radius:9999px;border:1px solid transparent;cursor:pointer;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;transition:all .2s ease}.draft-btn:hover:not(:disabled){background:linear-gradient(135deg,#1e40af,#1d4ed8);transform:translateY(-1px);box-shadow:0 3px 6px #0000001a}.draft-btn:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed;box-shadow:none}.draft-btn .spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;width:14px;height:14px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i14.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["name", "skipMargin"] }, { kind: "component", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: ["pages", "currentPageIndex", "skipValidation", "edit", "acceptedLanguage", "eligibleForSubmission", "pageDetails", "markAllQuestionsAsRequired", "skipMargin", "primaryColor", "secondaryColor", "isActionTriggered", "submissionInProgress", "submissionInDraft", "showCancelButton", "submissionProgress", "currentStep", "animatedDots"], outputs: ["pageChanged", "submitEmit", "saveAsDraftEmit", "subFormChange", "rowSetIndex", "cancel"] }, { kind: "component", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: ["skipValidation", "currentPageIndex", "pages", "previousPage", "nextPage", "currentPage", "pageDetails", "skipMargin", "edit", "acceptedLanguage", "primaryColor", "secondaryColor", "isActionTriggered", "submissionInProgress", "submissionInDraft", "eligibleForSubmission", "showCancelButton", "submissionProgress", "currentStep", "animatedDots"], outputs: ["navigateNext", "navigatePrevious", "submitEmit", "saveAsDraftEmit", "cancel", "subFormChange", "rowSetIndex"] }, { kind: "component", type: SubmissionContainerComponent, selector: "lib-submission-container", inputs: ["parentQuestionAnswers"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitFormComponent, deps: [{ token: FormService }, { token: i1$4.ToastrService }, { token: i2.Router }, { token: DataService }, { token: RecaptchaService }, { token: ValidationService }, { token: i0.ChangeDetectorRef }, { token: ElementTrackerService }, { token: FormValidationService }, { token: AggregationFunctionService }, { token: ScoreCalculationService }, { token: i1$3.MatDialog }, { token: WhenClauseService }, { token: HiddenFieldService }], 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", acceptedLanguage: "acceptedLanguage", skipMargin: "skipMargin", skipValidation: "skipValidation", navigateTo: "navigateTo", country: "country", showCancelButton: "showCancelButton", isActionTriggered: "isActionTriggered" }, outputs: { submit: "submit", apiCalled: "apiCalled", currentPageIndexChange: "currentPageIndexChange", cancel: "cancel" }, viewQueries: [{ propertyName: "child", first: true, predicate: NavigationTabsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\n\n<ng-container *ngIf=\"isLoadingPages\">\n    <ngx-skeleton-loader count=\"5\"></ngx-skeleton-loader>\n</ng-container>\n\n  <div class=\"head container\" *ngIf=\"!skipMargin\">\n    <lib-header [name]=\"name\" [skipMargin]=\"skipMargin\"></lib-header>\n  </div>\n\n\n\n  <div class=\"body\" [ngClass]=\"{ 'skip-margin': skipMargin,container: !skipMargin}\">\n\n    <lib-submission-container [parentQuestionAnswers]=\"parentQuestionAnswers\"\n    *ngIf=\"parentQuestionAnswers\"></lib-submission-container>\n\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [skipMargin]=\"skipMargin\"\n      [skipValidation]=\"skipValidation\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [pageDetails]=\"pageDetails\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [edit]=\"edit\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [markAllQuestionsAsRequired]=\"markAllQuestionsAsRequired\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      [submissionProgress]=\"submissionProgress\"\n      [animatedDots]=\"animatedDots\"\n      [currentStep]=\"currentStep\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      (cancel)=\"cancelled()\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [skipMargin]=\"skipMargin\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pageDetails]=\"pageDetails\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [currentPage]=\"currentPage\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      (submitEmit)=\"submitForm()\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      [edit]=\"edit\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      [submissionProgress]=\"submissionProgress\"\n      [animatedDots]=\"animatedDots\"\n      [currentStep]=\"currentStep\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (cancel)=\"cancelled()\"\n       [skipValidation]=\"skipValidation\"\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}.skip-margin{background:#fff}.save-draft-wrapper{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem;margin-right:2rem;padding:0 1.5rem 1.5rem}.draft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.65rem 1.6rem;font-size:14px;font-weight:500;border-radius:9999px;border:1px solid transparent;cursor:pointer;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;transition:all .2s ease}.draft-btn:hover:not(:disabled){background:linear-gradient(135deg,#1e40af,#1d4ed8);transform:translateY(-1px);box-shadow:0 3px 6px #0000001a}.draft-btn:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed;box-shadow:none}.draft-btn .spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;width:14px;height:14px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i15.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["name", "skipMargin"] }, { kind: "component", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: ["pages", "currentPageIndex", "skipValidation", "edit", "acceptedLanguage", "eligibleForSubmission", "pageDetails", "markAllQuestionsAsRequired", "skipMargin", "primaryColor", "secondaryColor", "isActionTriggered", "submissionInProgress", "submissionInDraft", "showCancelButton", "submissionProgress", "currentStep", "animatedDots"], outputs: ["pageChanged", "submitEmit", "saveAsDraftEmit", "subFormChange", "rowSetIndex", "cancel"] }, { kind: "component", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: ["skipValidation", "currentPageIndex", "pages", "previousPage", "nextPage", "currentPage", "pageDetails", "skipMargin", "edit", "acceptedLanguage", "primaryColor", "secondaryColor", "isActionTriggered", "submissionInProgress", "submissionInDraft", "eligibleForSubmission", "showCancelButton", "submissionProgress", "currentStep", "animatedDots"], outputs: ["navigateNext", "navigatePrevious", "submitEmit", "saveAsDraftEmit", "cancel", "subFormChange", "rowSetIndex"] }, { kind: "component", type: SubmissionContainerComponent, selector: "lib-submission-container", inputs: ["parentQuestionAnswers"] }] }); }
 }
 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\">\r\n\r\n<ng-container *ngIf=\"isLoadingPages\">\r\n    <ngx-skeleton-loader count=\"5\"></ngx-skeleton-loader>\r\n</ng-container>\r\n\r\n  <div class=\"head container\" *ngIf=\"!skipMargin\">\r\n    <lib-header [name]=\"name\" [skipMargin]=\"skipMargin\"></lib-header>\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"body\" [ngClass]=\"{ 'skip-margin': skipMargin,container: !skipMargin}\">\r\n\r\n    <lib-submission-container [parentQuestionAnswers]=\"parentQuestionAnswers\"\r\n    *ngIf=\"parentQuestionAnswers\"></lib-submission-container>\r\n\r\n    <lib-navigation-tabs\r\n      *ngIf=\"navigation == 'TAB'\"\r\n      [skipMargin]=\"skipMargin\"\r\n      [skipValidation]=\"skipValidation\"\r\n      [pages]=\"pages\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      (pageChanged)=\"setCurrentPage($event)\"\r\n      (submitEmit)=\"submitForm()\"\r\n      [pageDetails]=\"pageDetails\"\r\n      [eligibleForSubmission]=\"eligibleForSubmission\"\r\n      [edit]=\"edit\"\r\n      [acceptedLanguage] = \"acceptedLanguage\"\r\n      [isActionTriggered]=\"isActionTriggered\"\r\n      [primaryColor]=\"primaryColor\"\r\n      [secondaryColor]=\"secondaryColor\"\r\n      [markAllQuestionsAsRequired]=\"markAllQuestionsAsRequired\"\r\n      [submissionInProgress]=\"submissionInProgress\"\r\n      [submissionInDraft]=\"submissionInDraft\"\r\n      [showCancelButton]=\"showCancelButton\"\r\n      [submissionProgress]=\"submissionProgress\"\r\n      [animatedDots]=\"animatedDots\"\r\n      [currentStep]=\"currentStep\"\r\n      (saveAsDraftEmit)=\"saveAsDraft()\"\r\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n      (rowSetIndex)=\"loadMoreData($event)\"\r\n      (cancel)=\"cancelled()\"\r\n    ></lib-navigation-tabs>\r\n    <lib-next-prev-navigation\r\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\r\n      [skipMargin]=\"skipMargin\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      [pageDetails]=\"pageDetails\"\r\n      (rowSetIndex)=\"loadMoreData($event)\"\r\n      [pages]=\"pages\"\r\n      [previousPage]=\"previousPage\"\r\n      [isActionTriggered]=\"isActionTriggered\"\r\n      [currentPage]=\"currentPage\"\r\n      [primaryColor]=\"primaryColor\"\r\n      [secondaryColor]=\"secondaryColor\"\r\n      [nextPage]=\"nextPage\"\r\n      (navigateNext)=\"navigateToNextPage()\"\r\n      (navigatePrevious)=\"navigateToPreviousPage()\"\r\n      [acceptedLanguage] = \"acceptedLanguage\"\r\n      (submitEmit)=\"submitForm()\"\r\n      (saveAsDraftEmit)=\"saveAsDraft()\"\r\n      [edit]=\"edit\"\r\n      [eligibleForSubmission]=\"eligibleForSubmission\"\r\n      [submissionInProgress]=\"submissionInProgress\"\r\n      [submissionInDraft]=\"submissionInDraft\"\r\n      [showCancelButton]=\"showCancelButton\"\r\n      [submissionProgress]=\"submissionProgress\"\r\n      [animatedDots]=\"animatedDots\"\r\n      [currentStep]=\"currentStep\"\r\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n      (cancel)=\"cancelled()\"\r\n       [skipValidation]=\"skipValidation\"\r\n    ></lib-next-prev-navigation>\r\n  </div>\r\n</div>\r\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}.skip-margin{background:#fff}.save-draft-wrapper{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem;margin-right:2rem;padding:0 1.5rem 1.5rem}.draft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.65rem 1.6rem;font-size:14px;font-weight:500;border-radius:9999px;border:1px solid transparent;cursor:pointer;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;transition:all .2s ease}.draft-btn:hover:not(:disabled){background:linear-gradient(135deg,#1e40af,#1d4ed8);transform:translateY(-1px);box-shadow:0 3px 6px #0000001a}.draft-btn:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed;box-shadow:none}.draft-btn .spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;width:14px;height:14px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: function () { return [{ type: FormService }, { type: i1$4.ToastrService }, { type: i2.Router }, { type: DataService }, { type: RecaptchaService }, { type: ValidationService }, { type: i0.ChangeDetectorRef }, { type: ElementTrackerService }, { type: FormValidationService }, { type: AggregationFunctionService }, { type: ScoreCalculationService }, { type: i1$3.MatDialog }, { type: WhenClauseService }]; }, propDecorators: { moduleName: [{
+            args: [{ selector: 'lib-submit-form', template: "<div class=\"outer-container\">\n\n<ng-container *ngIf=\"isLoadingPages\">\n    <ngx-skeleton-loader count=\"5\"></ngx-skeleton-loader>\n</ng-container>\n\n  <div class=\"head container\" *ngIf=\"!skipMargin\">\n    <lib-header [name]=\"name\" [skipMargin]=\"skipMargin\"></lib-header>\n  </div>\n\n\n\n  <div class=\"body\" [ngClass]=\"{ 'skip-margin': skipMargin,container: !skipMargin}\">\n\n    <lib-submission-container [parentQuestionAnswers]=\"parentQuestionAnswers\"\n    *ngIf=\"parentQuestionAnswers\"></lib-submission-container>\n\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [skipMargin]=\"skipMargin\"\n      [skipValidation]=\"skipValidation\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [pageDetails]=\"pageDetails\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [edit]=\"edit\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [markAllQuestionsAsRequired]=\"markAllQuestionsAsRequired\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      [submissionProgress]=\"submissionProgress\"\n      [animatedDots]=\"animatedDots\"\n      [currentStep]=\"currentStep\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      (cancel)=\"cancelled()\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [skipMargin]=\"skipMargin\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pageDetails]=\"pageDetails\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [currentPage]=\"currentPage\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      (submitEmit)=\"submitForm()\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      [edit]=\"edit\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      [submissionProgress]=\"submissionProgress\"\n      [animatedDots]=\"animatedDots\"\n      [currentStep]=\"currentStep\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (cancel)=\"cancelled()\"\n       [skipValidation]=\"skipValidation\"\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}.skip-margin{background:#fff}.save-draft-wrapper{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem;margin-right:2rem;padding:0 1.5rem 1.5rem}.draft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.65rem 1.6rem;font-size:14px;font-weight:500;border-radius:9999px;border:1px solid transparent;cursor:pointer;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;transition:all .2s ease}.draft-btn:hover:not(:disabled){background:linear-gradient(135deg,#1e40af,#1d4ed8);transform:translateY(-1px);box-shadow:0 3px 6px #0000001a}.draft-btn:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed;box-shadow:none}.draft-btn .spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;width:14px;height:14px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: FormService }, { type: i1$4.ToastrService }, { type: i2.Router }, { type: DataService }, { type: RecaptchaService }, { type: ValidationService }, { type: i0.ChangeDetectorRef }, { type: ElementTrackerService }, { type: FormValidationService }, { type: AggregationFunctionService }, { type: ScoreCalculationService }, { type: i1$3.MatDialog }, { type: WhenClauseService }, { type: HiddenFieldService }]; }, propDecorators: { moduleName: [{
                 type: Input
             }], edit: [{
                 type: Input
@@ -11318,11 +11550,11 @@ class FormSubmissionComponent {
         this.cancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionComponent, deps: [{ token: DataService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormSubmissionComponent, selector: "lib-formSubmission", inputs: { formData: "formData", edit: "edit", skipValidation: "skipValidation", submissionId: "submissionId", triggerFormSave: "triggerFormSave" }, outputs: { submitForm: "submitForm", apiCalled: "apiCalled", cancel: "cancel" }, viewQueries: [{ propertyName: "submitFormComponent", first: true, predicate: SubmitFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<lib-submit-form\r\n  [moduleName]=\"formData.moduleName\"\r\n  [submissionId]=\"submissionId\"\r\n  [edit]=\"edit\"\r\n  [acceptedLanguage] = \"formData.headers.acceptedLanguage\"\r\n  [skipMargin]=\"formData.skipMargin\"\r\n  [skipValidation]=\"skipValidation\"\r\n  [isActionTriggered]=\"isActionTriggered\"\r\n  [navigateTo]=\"formData.navigateTo\"\r\n  [country]=\"formData.country\"\r\n  [showCancelButton]=\"showCancelButton\"\r\n  (submit)=\"submit($event)\"\r\n (apiCalled)=\"getFormApiCalled($event)\"\r\n (cancel)=\"cancelled()\"\r\n></lib-submit-form>\r\n", styles: [""], dependencies: [{ kind: "component", type: SubmitFormComponent, selector: "lib-submit-form", inputs: ["moduleName", "edit", "submissionId", "acceptedLanguage", "skipMargin", "skipValidation", "navigateTo", "country", "showCancelButton", "isActionTriggered"], outputs: ["submit", "apiCalled", "currentPageIndexChange", "cancel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormSubmissionComponent, selector: "lib-formSubmission", inputs: { formData: "formData", edit: "edit", skipValidation: "skipValidation", submissionId: "submissionId", triggerFormSave: "triggerFormSave" }, outputs: { submitForm: "submitForm", apiCalled: "apiCalled", cancel: "cancel" }, viewQueries: [{ propertyName: "submitFormComponent", first: true, predicate: SubmitFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<lib-submit-form\n  [moduleName]=\"formData.moduleName\"\n  [submissionId]=\"submissionId\"\n  [edit]=\"edit\"\n  [acceptedLanguage] = \"formData.headers.acceptedLanguage\"\n  [skipMargin]=\"formData.skipMargin\"\n  [skipValidation]=\"skipValidation\"\n  [isActionTriggered]=\"isActionTriggered\"\n  [navigateTo]=\"formData.navigateTo\"\n  [country]=\"formData.country\"\n  [showCancelButton]=\"showCancelButton\"\n  (submit)=\"submit($event)\"\n (apiCalled)=\"getFormApiCalled($event)\"\n (cancel)=\"cancelled()\"\n></lib-submit-form>\n", styles: [""], dependencies: [{ kind: "component", type: SubmitFormComponent, selector: "lib-submit-form", inputs: ["moduleName", "edit", "submissionId", "acceptedLanguage", "skipMargin", "skipValidation", "navigateTo", "country", "showCancelButton", "isActionTriggered"], outputs: ["submit", "apiCalled", "currentPageIndexChange", "cancel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-formSubmission', template: "<lib-submit-form\r\n  [moduleName]=\"formData.moduleName\"\r\n  [submissionId]=\"submissionId\"\r\n  [edit]=\"edit\"\r\n  [acceptedLanguage] = \"formData.headers.acceptedLanguage\"\r\n  [skipMargin]=\"formData.skipMargin\"\r\n  [skipValidation]=\"skipValidation\"\r\n  [isActionTriggered]=\"isActionTriggered\"\r\n  [navigateTo]=\"formData.navigateTo\"\r\n  [country]=\"formData.country\"\r\n  [showCancelButton]=\"showCancelButton\"\r\n  (submit)=\"submit($event)\"\r\n (apiCalled)=\"getFormApiCalled($event)\"\r\n (cancel)=\"cancelled()\"\r\n></lib-submit-form>\r\n" }]
+            args: [{ selector: 'lib-formSubmission', template: "<lib-submit-form\n  [moduleName]=\"formData.moduleName\"\n  [submissionId]=\"submissionId\"\n  [edit]=\"edit\"\n  [acceptedLanguage] = \"formData.headers.acceptedLanguage\"\n  [skipMargin]=\"formData.skipMargin\"\n  [skipValidation]=\"skipValidation\"\n  [isActionTriggered]=\"isActionTriggered\"\n  [navigateTo]=\"formData.navigateTo\"\n  [country]=\"formData.country\"\n  [showCancelButton]=\"showCancelButton\"\n  (submit)=\"submit($event)\"\n (apiCalled)=\"getFormApiCalled($event)\"\n (cancel)=\"cancelled()\"\n></lib-submit-form>\n" }]
         }], ctorParameters: function () { return [{ type: DataService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -11374,7 +11606,7 @@ class FormFieldsModule {
             HiddenFieldComponent,
             IframeFieldsComponent], imports: [CommonModule,
             FormsModule,
-            MatSliderModule, i6.BsDatepickerModule, DropdownModule,
+            MatSliderModule, i7.BsDatepickerModule, DropdownModule,
             DocUploadModule,
             GoogleMapsModule,
             FilePreviewModule,
@@ -11567,7 +11799,7 @@ class FormSubmitModule {
             NavigationTabsComponent,
             NextPrevNavigationComponent,
             SubmissionContainerComponent,
-            SaveDraftModalComponent], imports: [CommonModule, i6.BsDatepickerModule, ToastrModule,
+            SaveDraftModalComponent], imports: [CommonModule, i7.BsDatepickerModule, ToastrModule,
             SharedModule,
             InfiniteScrollModule,
             NgxSkeletonLoaderModule,