@piserve-tech/form-submission 1.2.4 → 1.2.6

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

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
+import { Injectable, Component, Input, ViewChild, EventEmitter, Output, Inject, NgModule } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import * as i2$3 from 'ngx-toastr';
 import { ToastrModule } from 'ngx-toastr';
-import * as i3$4 from '@angular/router';
 import * as i1$1 from '@angular/common';
 import { DatePipe, CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -22,6 +21,8 @@ import * as i3$2 from '@kolkov/angular-editor';
 import { AngularEditorModule } from '@kolkov/angular-editor';
 import * as i3$3 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
+import * as i1$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
 import { FilePreviewModule } from '@piserve-tech/file-preview';
 import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserModule } from '@angular/platform-browser';
@@ -170,10 +171,26 @@ function mapLogicToModel(apiLogic) {
 function mapSubFormToModel(apiSubForm) {
     return {
         id: apiSubForm.id,
+        count: apiSubForm.count,
         title: apiSubForm.title,
         description: apiSubForm.description,
         subFormStructure: apiSubForm.subFormStructure,
         formElements: apiSubForm.formElements.map((element) => mapFormElementTypeToModel(element)),
+        submissions: apiSubForm?.submissions?.map((submission) => mapSubmissionToModel(submission)),
+    };
+}
+function mapSubmissionToModel(apiSubmission) {
+    return {
+        submissionId: apiSubmission.submissionId,
+        answers: apiSubmission?.answers?.map((answer) => mapAnswerToModel(answer)),
+    };
+}
+function mapAnswerToModel(apiAnswer) {
+    return {
+        questionId: apiAnswer.questionId,
+        answer: apiAnswer?.answer,
+        answerId: apiAnswer?.answerId,
+        attachments: apiAnswer?.attachments?.map((attachment) => mapAttachmentToModel(attachment)),
     };
 }
 function mapFormElementTypeToModel(apiFormElementType) {
@@ -393,11 +410,11 @@ class HeaderComponent {
         this.name = '';
     }
     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" }, ngImport: i0, template: "<div class=\"head container\">\n  <div class=\"registration-header\">\n    <h2>{{ name }}</h2>\n  </div>\n  <div class=\"line\"></div>\n</div>\n", styles: [".head{background-color:#fff;padding:0!important}.registration-header{top:20px;left:50%}.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"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, selector: "lib-header", inputs: { name: "name" }, ngImport: i0, template: "<div class=\"head container\">\r\n  <div class=\"registration-header\">\r\n    <h2>{{ name }}</h2>\r\n  </div>\r\n  <div class=\"line\"></div>\r\n</div>\r\n", styles: [".head{background-color:#fff;padding:0!important}.registration-header{top:20px;left:50%}.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"] }); }
 }
 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\">\n  <div class=\"registration-header\">\n    <h2>{{ name }}</h2>\n  </div>\n  <div class=\"line\"></div>\n</div>\n", styles: [".head{background-color:#fff;padding:0!important}.registration-header{top:20px;left:50%}.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\">\r\n  <div class=\"registration-header\">\r\n    <h2>{{ name }}</h2>\r\n  </div>\r\n  <div class=\"line\"></div>\r\n</div>\r\n", styles: [".head{background-color:#fff;padding:0!important}.registration-header{top:20px;left:50%}.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
             }] } });
@@ -681,11 +698,11 @@ class CheckBoxFieldsComponent {
             !this.selectedOptions.includes(option));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxFieldsComponent, deps: [{ token: FormService }], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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=\"form-check\" *ngFor=\"let option of customOptions\">\n    <input\n      class=\"form-check-input\"\n      type=\"checkbox\"\n      [id]=\"option.value + question?.id\"\n      [name]=\"option.value + 'Checkbox'\"\n      [value]=\"option.value\"\n      (change)=\"onCheckboxChange(option, $event)\"\n      [disabled]=\"isOptionDisabled(option)\"\n      [checked]=\"selectedOptions.includes(option)\"\n    />\n    <label\n      class=\"formCheckLabel ms-2 mb-2\"\n      [for]=\"option.value + question?.id\"\n      *ngIf=\"optionType == 'OPTION'\"\n      >{{ option.value }}</label\n    >\n    <label\n      class=\"formCheckLabel ms-2 mb-2\"\n      [for]=\"option.value + question?.id\"\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\n      >{{ option.label }}</label\n    >\n  </div>\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.form-check-input,.form-check-label{cursor:pointer}\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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=\"form-check\" *ngFor=\"let option of customOptions\">\r\n    <input\r\n      class=\"form-check-input\"\r\n      type=\"checkbox\"\r\n      [id]=\"option.value + question?.id\"\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    />\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value + question?.id\"\r\n      *ngIf=\"optionType == 'OPTION'\"\r\n      >{{ option.value }}</label\r\n    >\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value + question?.id\"\r\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\r\n      >{{ option.label }}</label\r\n    >\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.form-check-input,.form-check-label{cursor:pointer}\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 [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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=\"form-check\" *ngFor=\"let option of customOptions\">\n    <input\n      class=\"form-check-input\"\n      type=\"checkbox\"\n      [id]=\"option.value + question?.id\"\n      [name]=\"option.value + 'Checkbox'\"\n      [value]=\"option.value\"\n      (change)=\"onCheckboxChange(option, $event)\"\n      [disabled]=\"isOptionDisabled(option)\"\n      [checked]=\"selectedOptions.includes(option)\"\n    />\n    <label\n      class=\"formCheckLabel ms-2 mb-2\"\n      [for]=\"option.value + question?.id\"\n      *ngIf=\"optionType == 'OPTION'\"\n      >{{ option.value }}</label\n    >\n    <label\n      class=\"formCheckLabel ms-2 mb-2\"\n      [for]=\"option.value + question?.id\"\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\n      >{{ option.label }}</label\n    >\n  </div>\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.form-check-input,.form-check-label{cursor:pointer}\n"] }]
+            args: [{ selector: 'lib-check-box-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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=\"form-check\" *ngFor=\"let option of customOptions\">\r\n    <input\r\n      class=\"form-check-input\"\r\n      type=\"checkbox\"\r\n      [id]=\"option.value + question?.id\"\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    />\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value + question?.id\"\r\n      *ngIf=\"optionType == 'OPTION'\"\r\n      >{{ option.value }}</label\r\n    >\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value + question?.id\"\r\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\r\n      >{{ option.label }}</label\r\n    >\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.form-check-input,.form-check-label{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: FormService }]; }, propDecorators: { question: [{
                 type: Input
             }] } });
@@ -860,11 +877,11 @@ class DateTimeFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeFieldsComponent, deps: [{ token: i1$1.DatePipe }], 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" }, 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 }], ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <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 : todayDate\"\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\n        [bsConfig]=\"{ dateInputFormat: format }\"\n        [(ngModel)]=\"selectedDate\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\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=\"validationFailed\" class=\"text-danger mt-2\">\n      <svg\n        class=\"validationSvg\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n          fill=\"#FF0000\"\n          stroke=\"#FF0000\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M12 12.75L12 7.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n      </svg>\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\n    <!-- Time picker -->\n    <input\n      type=\"time\"\n      class=\"form-control height\"\n      (blur)=\"validateField()\"\n      [(ngModel)]=\"selectedTime\"\n      (ngModelChange)=\"validateField()\"\n      [class.invalid]=\"validationFailed\"\n    />\n    <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n      <svg\n        class=\"validationSvg\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n          fill=\"#FF0000\"\n          stroke=\"#FF0000\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M12 12.75L12 7.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n      </svg>\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 : todayDate\"\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\n        [bsConfig]=\"{\n          withTimepicker: true,\n          keepDatepickerOpened: true,\n          rangeInputFormat: format,\n          dateInputFormat: format\n        }\"\n        bsDatepicker\n        [class.invalid]=\"validationFailed\"\n        [(ngModel)]=\"selectedDateAndTime\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\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 *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n      <svg\n        class=\"validationSvg\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n          fill=\"#FF0000\"\n          stroke=\"#FF0000\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M12 12.75L12 7.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n      </svg>\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        [minDate]=\"minDate ? minDate : todayDate\"\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\n        [bsConfig]=\"{\n          rangeInputFormat: format,\n          dateInputFormat: format,\n          showWeekNumbers: false\n        }\"\n        [(ngModel)]=\"selectedDateRange\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\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=\"validationFailed\" class=\"text-danger mt-2\">\n      <svg\n        class=\"validationSvg\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n          fill=\"#FF0000\"\n          stroke=\"#FF0000\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M12 12.75L12 7.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n      </svg>\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i3.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: i3.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: { question: "question" }, 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 }], ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <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 : todayDate\"\r\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n        [bsConfig]=\"{ dateInputFormat: format }\"\r\n        [(ngModel)]=\"selectedDate\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\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=\"validationFailed\" class=\"text-danger mt-2\">\r\n      <svg\r\n        class=\"validationSvg\"\r\n        viewBox=\"0 0 24 24\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n          fill=\"#FF0000\"\r\n          stroke=\"#FF0000\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 12.75L12 7.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n      </svg>\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    <input\r\n      type=\"time\"\r\n      class=\"form-control height\"\r\n      (blur)=\"validateField()\"\r\n      [(ngModel)]=\"selectedTime\"\r\n      (ngModelChange)=\"validateField()\"\r\n      [class.invalid]=\"validationFailed\"\r\n    />\r\n    <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n      <svg\r\n        class=\"validationSvg\"\r\n        viewBox=\"0 0 24 24\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n          fill=\"#FF0000\"\r\n          stroke=\"#FF0000\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 12.75L12 7.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n      </svg>\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 : todayDate\"\r\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n        [bsConfig]=\"{\r\n          withTimepicker: true,\r\n          keepDatepickerOpened: true,\r\n          rangeInputFormat: format,\r\n          dateInputFormat: format\r\n        }\"\r\n        bsDatepicker\r\n        [class.invalid]=\"validationFailed\"\r\n        [(ngModel)]=\"selectedDateAndTime\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\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 *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n      <svg\r\n        class=\"validationSvg\"\r\n        viewBox=\"0 0 24 24\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n          fill=\"#FF0000\"\r\n          stroke=\"#FF0000\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 12.75L12 7.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n      </svg>\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        [minDate]=\"minDate ? minDate : todayDate\"\r\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n        [bsConfig]=\"{\r\n          rangeInputFormat: format,\r\n          dateInputFormat: format,\r\n          showWeekNumbers: false\r\n        }\"\r\n        [(ngModel)]=\"selectedDateRange\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\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=\"validationFailed\" class=\"text-danger mt-2\">\r\n      <svg\r\n        class=\"validationSvg\"\r\n        viewBox=\"0 0 24 24\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n          fill=\"#FF0000\"\r\n          stroke=\"#FF0000\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 12.75L12 7.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n      </svg>\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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i3.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: i3.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }] }); }
 }
 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], template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <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 : todayDate\"\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\n        [bsConfig]=\"{ dateInputFormat: format }\"\n        [(ngModel)]=\"selectedDate\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\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=\"validationFailed\" class=\"text-danger mt-2\">\n      <svg\n        class=\"validationSvg\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n          fill=\"#FF0000\"\n          stroke=\"#FF0000\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M12 12.75L12 7.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n      </svg>\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\n    <!-- Time picker -->\n    <input\n      type=\"time\"\n      class=\"form-control height\"\n      (blur)=\"validateField()\"\n      [(ngModel)]=\"selectedTime\"\n      (ngModelChange)=\"validateField()\"\n      [class.invalid]=\"validationFailed\"\n    />\n    <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n      <svg\n        class=\"validationSvg\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n          fill=\"#FF0000\"\n          stroke=\"#FF0000\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M12 12.75L12 7.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n      </svg>\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 : todayDate\"\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\n        [bsConfig]=\"{\n          withTimepicker: true,\n          keepDatepickerOpened: true,\n          rangeInputFormat: format,\n          dateInputFormat: format\n        }\"\n        bsDatepicker\n        [class.invalid]=\"validationFailed\"\n        [(ngModel)]=\"selectedDateAndTime\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\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 *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n      <svg\n        class=\"validationSvg\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n          fill=\"#FF0000\"\n          stroke=\"#FF0000\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M12 12.75L12 7.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n      </svg>\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        [minDate]=\"minDate ? minDate : todayDate\"\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\n        [bsConfig]=\"{\n          rangeInputFormat: format,\n          dateInputFormat: format,\n          showWeekNumbers: false\n        }\"\n        [(ngModel)]=\"selectedDateRange\"\n        (blur)=\"validateField()\"\n        (ngModelChange)=\"validateField()\"\n        [class.invalid]=\"validationFailed\"\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=\"validationFailed\" class=\"text-danger mt-2\">\n      <svg\n        class=\"validationSvg\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n          fill=\"#FF0000\"\n          stroke=\"#FF0000\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M12 12.75L12 7.75\"\n          stroke=\"white\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n      </svg>\n      {{ validationMessage }}\n    </div>\n  </ng-container>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}\n"] }]
+            args: [{ selector: 'lib-date-time-fields', providers: [DatePipe], template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <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 : todayDate\"\r\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n        [bsConfig]=\"{ dateInputFormat: format }\"\r\n        [(ngModel)]=\"selectedDate\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\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=\"validationFailed\" class=\"text-danger mt-2\">\r\n      <svg\r\n        class=\"validationSvg\"\r\n        viewBox=\"0 0 24 24\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n          fill=\"#FF0000\"\r\n          stroke=\"#FF0000\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 12.75L12 7.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n      </svg>\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    <input\r\n      type=\"time\"\r\n      class=\"form-control height\"\r\n      (blur)=\"validateField()\"\r\n      [(ngModel)]=\"selectedTime\"\r\n      (ngModelChange)=\"validateField()\"\r\n      [class.invalid]=\"validationFailed\"\r\n    />\r\n    <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n      <svg\r\n        class=\"validationSvg\"\r\n        viewBox=\"0 0 24 24\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n          fill=\"#FF0000\"\r\n          stroke=\"#FF0000\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 12.75L12 7.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n      </svg>\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 : todayDate\"\r\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n        [bsConfig]=\"{\r\n          withTimepicker: true,\r\n          keepDatepickerOpened: true,\r\n          rangeInputFormat: format,\r\n          dateInputFormat: format\r\n        }\"\r\n        bsDatepicker\r\n        [class.invalid]=\"validationFailed\"\r\n        [(ngModel)]=\"selectedDateAndTime\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\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 *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n      <svg\r\n        class=\"validationSvg\"\r\n        viewBox=\"0 0 24 24\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n          fill=\"#FF0000\"\r\n          stroke=\"#FF0000\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 12.75L12 7.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n      </svg>\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        [minDate]=\"minDate ? minDate : todayDate\"\r\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n        [bsConfig]=\"{\r\n          rangeInputFormat: format,\r\n          dateInputFormat: format,\r\n          showWeekNumbers: false\r\n        }\"\r\n        [(ngModel)]=\"selectedDateRange\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\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=\"validationFailed\" class=\"text-danger mt-2\">\r\n      <svg\r\n        class=\"validationSvg\"\r\n        viewBox=\"0 0 24 24\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n          fill=\"#FF0000\"\r\n          stroke=\"#FF0000\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M12 12.75L12 7.75\"\r\n          stroke=\"white\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n      </svg>\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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DatePipe }]; }, propDecorators: { question: [{
                 type: Input
             }], datepicker: [{
@@ -1085,11 +1102,11 @@ class DropDownFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownFieldsComponent, deps: [{ token: FormService }, { token: i0.ChangeDetectorRef }], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <lib-dropdown\n    [items]=\"customOptions\"\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\n    (click)=\"selectItems()\"\n    [(selectedItems)]=\"selectedValue\"\n  ></lib-dropdown>\n  <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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: i3$1.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "scrollable", "selectedItems", "placeholder", "items", "showCreateNew", "selectedValues", "customButtons", "showBorder"], outputs: ["buttonClick", "selectedItemsChange", "onScroll", "onCreateNew", "onSearch"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <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  <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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: i3$1.DropdownComponent, selector: "lib-dropdown", inputs: ["selectedItems", "multiple", "scrollable", "placeholder", "items", "showCreateNew", "selectedValues", "customButtons", "showBorder"], outputs: ["buttonClick", "selectedItemsChange", "onScroll", "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 [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <lib-dropdown\n    [items]=\"customOptions\"\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\n    (click)=\"selectItems()\"\n    [(selectedItems)]=\"selectedValue\"\n  ></lib-dropdown>\n  <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+            args: [{ selector: 'lib-drop-down-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <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  <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
         }], ctorParameters: function () { return [{ type: FormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { question: [{
                 type: Input
             }] } });
@@ -1174,11 +1191,11 @@ class FilePickerFieldsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilePickerFieldsComponent, deps: [], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <lib-docUpload\n    [totalSize]=\"totalFileSize\"\n    [fileAllowed]=\"fileTypes\"\n    [multiple]=\"multiFileUploads\"\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 *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\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.DocUploadComponent, selector: "lib-docUpload", inputs: ["totalSize", "fileAllowed", "multiple", "avatarPicker", "attachments"], outputs: ["fileTypeNotAllowed", "fileSizeAllowed", "finalArray", "deleteFiles"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <lib-docUpload\r\n    [totalSize]=\"totalFileSize\"\r\n    [fileAllowed]=\"fileTypes\"\r\n    [multiple]=\"multiFileUploads\"\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 *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\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.DocUploadComponent, selector: "lib-docUpload", inputs: ["totalSize", "fileAllowed", "multiple", "avatarPicker", "attachments"], 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 [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <lib-docUpload\n    [totalSize]=\"totalFileSize\"\n    [fileAllowed]=\"fileTypes\"\n    [multiple]=\"multiFileUploads\"\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 *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\n"] }]
+            args: [{ selector: 'lib-file-picker-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <lib-docUpload\r\n    [totalSize]=\"totalFileSize\"\r\n    [fileAllowed]=\"fileTypes\"\r\n    [multiple]=\"multiFileUploads\"\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 *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }] } });
@@ -1242,11 +1259,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" }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["mapSearchField"], descendants: true }, { propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-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: "component", type: i2$2.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" }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["mapSearchField"], descendants: true }, { propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-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: "component", type: i2$2.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]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}\n"] }]
+            args: [{ selector: 'lib-location-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }], searchField: [{
@@ -1315,11 +1332,11 @@ class MailFieldsComponent {
         this.validateEmail();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MailFieldsComponent, deps: [], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <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  />\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: MailFieldsComponent, selector: "lib-mail-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <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  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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 [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <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  />\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+            args: [{ selector: 'lib-mail-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <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  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }] } });
@@ -1495,11 +1512,11 @@ class MobileFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileFieldsComponent, deps: [{ token: CountryService }], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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 mb-2\">\n    <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2\">\n      <lib-dropdown\n        [items]=\"countryDetails\"\n        [multiple]=\"false\"\n        [(selectedItems)]=\"selectedCountry\"\n        (selectedItemsChange)=\"onCountryChange()\"\n        (onScroll)=\"onScroll()\"\n      ></lib-dropdown>\n    </div>\n    <input\n      type=\"number\"\n      class=\"form-control col-xs-7 col-7 col-md-9 height mobileField\"\n      [placeholder]=\"placeholder\"\n      aria-label=\"Mobile Number\"\n      [class.invalid]=\"validationFailed\"\n      (blur)=\"validateMobile()\"\n      [(ngModel)]=\"mobileNumber\"\n      (ngModelChange)=\"onMobileNumberChange()\"\n    />\n  </div>\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}\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: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "scrollable", "selectedItems", "placeholder", "items", "showCreateNew", "selectedValues", "customButtons", "showBorder"], outputs: ["buttonClick", "selectedItemsChange", "onScroll", "onCreateNew", "onSearch"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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 mb-2\">\r\n    <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2\">\r\n      <lib-dropdown\r\n        [items]=\"countryDetails\"\r\n        [multiple]=\"false\"\r\n        [(selectedItems)]=\"selectedCountry\"\r\n        (selectedItemsChange)=\"onCountryChange()\"\r\n        (onScroll)=\"onScroll()\"\r\n      ></lib-dropdown>\r\n    </div>\r\n    <input\r\n      type=\"number\"\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      [class.invalid]=\"validationFailed\"\r\n      (blur)=\"validateMobile()\"\r\n      [(ngModel)]=\"mobileNumber\"\r\n      (ngModelChange)=\"onMobileNumberChange()\"\r\n    />\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}\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: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.DropdownComponent, selector: "lib-dropdown", inputs: ["selectedItems", "multiple", "scrollable", "placeholder", "items", "showCreateNew", "selectedValues", "customButtons", "showBorder"], outputs: ["buttonClick", "selectedItemsChange", "onScroll", "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 [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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 mb-2\">\n    <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2\">\n      <lib-dropdown\n        [items]=\"countryDetails\"\n        [multiple]=\"false\"\n        [(selectedItems)]=\"selectedCountry\"\n        (selectedItemsChange)=\"onCountryChange()\"\n        (onScroll)=\"onScroll()\"\n      ></lib-dropdown>\n    </div>\n    <input\n      type=\"number\"\n      class=\"form-control col-xs-7 col-7 col-md-9 height mobileField\"\n      [placeholder]=\"placeholder\"\n      aria-label=\"Mobile Number\"\n      [class.invalid]=\"validationFailed\"\n      (blur)=\"validateMobile()\"\n      [(ngModel)]=\"mobileNumber\"\n      (ngModelChange)=\"onMobileNumberChange()\"\n    />\n  </div>\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}\n"] }]
+            args: [{ selector: 'lib-mobile-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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 mb-2\">\r\n    <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2\">\r\n      <lib-dropdown\r\n        [items]=\"countryDetails\"\r\n        [multiple]=\"false\"\r\n        [(selectedItems)]=\"selectedCountry\"\r\n        (selectedItemsChange)=\"onCountryChange()\"\r\n        (onScroll)=\"onScroll()\"\r\n      ></lib-dropdown>\r\n    </div>\r\n    <input\r\n      type=\"number\"\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      [class.invalid]=\"validationFailed\"\r\n      (blur)=\"validateMobile()\"\r\n      [(ngModel)]=\"mobileNumber\"\r\n      (ngModelChange)=\"onMobileNumberChange()\"\r\n    />\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: CountryService }]; }, propDecorators: { question: [{
                 type: Input
             }] } });
@@ -1585,11 +1602,11 @@ class NumberFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberFieldsComponent, deps: [], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <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    (input)=\"validateInput($event)\"\n  />\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin: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: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: NumberFieldsComponent, selector: "lib-number-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <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    (input)=\"validateInput($event)\"\r\n  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin: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: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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 [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <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    (input)=\"validateInput($event)\"\n  />\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+            args: [{ selector: 'lib-number-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <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    (input)=\"validateInput($event)\"\r\n  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }] } });
@@ -1770,11 +1787,11 @@ class PasswordFieldsComponent {
         return lengthStrength + lowercaseStrength + uppercaseStrength + numberStrength + specialCharacterStrength;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PasswordFieldsComponent, deps: [], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"password-input-wrapper mb-2\">\n    <div class=\"input-wrapper\">\n      <div [innerHTML]=\"question.questionNumber\"></div>\n      &nbsp;&nbsp; <label for=\"passwordField\">{{ 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    <input\n      type=\"password\"\n      class=\"form-control mb-2 height\"\n      id=\"passwordField\"\n      (blur)=\"validatePassword()\"\n      [(ngModel)]=\"enteredPassword\"\n      [class.invalid]=\"validationFailed\"\n      (input)=\"validateInput($event)\"\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\"></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=\"validationFailed\" class=\"text-danger mb-2\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n\n  <div class=\"cnfrmPasswordWrapper\" *ngIf=\"confirmPassword\">\n    <label for=\"cnfrmPasswordField\">Confirm password</label>\n    <input\n      type=\"password\"\n      class=\"form-control mb-2 height\"\n      id=\"cnfrmPasswordField\"\n      (blur)=\"checkPasswordMatch()\"\n      [(ngModel)]=\"enteredCnfrmPassword\"\n      [class.invalid]=\"validatedCnfrmPassword\"\n      (input)=\"validateCnfrm($event)\"\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\"></i>\n    </button>\n  </div>\n  <div *ngIf=\"validatedCnfrmPassword\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ cnfrmValidationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}.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}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: PasswordFieldsComponent, selector: "lib-password-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"password-input-wrapper mb-2\">\r\n    <div class=\"input-wrapper\">\r\n      <div [innerHTML]=\"question.questionNumber\"></div>\r\n      &nbsp;&nbsp; <label for=\"passwordField\">{{ 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    <input\r\n      type=\"password\"\r\n      class=\"form-control mb-2 height\"\r\n      id=\"passwordField\"\r\n      (blur)=\"validatePassword()\"\r\n      [(ngModel)]=\"enteredPassword\"\r\n      [class.invalid]=\"validationFailed\"\r\n      (input)=\"validateInput($event)\"\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\"></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=\"validationFailed\" class=\"text-danger mb-2\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n\r\n  <div class=\"cnfrmPasswordWrapper\" *ngIf=\"confirmPassword\">\r\n    <label for=\"cnfrmPasswordField\">Confirm password</label>\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control mb-2 height\"\r\n      id=\"cnfrmPasswordField\"\r\n      (blur)=\"checkPasswordMatch()\"\r\n      [(ngModel)]=\"enteredCnfrmPassword\"\r\n      [class.invalid]=\"validatedCnfrmPassword\"\r\n      (input)=\"validateCnfrm($event)\"\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\"></i>\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"validatedCnfrmPassword\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ cnfrmValidationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}.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}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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 [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"password-input-wrapper mb-2\">\n    <div class=\"input-wrapper\">\n      <div [innerHTML]=\"question.questionNumber\"></div>\n      &nbsp;&nbsp; <label for=\"passwordField\">{{ 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    <input\n      type=\"password\"\n      class=\"form-control mb-2 height\"\n      id=\"passwordField\"\n      (blur)=\"validatePassword()\"\n      [(ngModel)]=\"enteredPassword\"\n      [class.invalid]=\"validationFailed\"\n      (input)=\"validateInput($event)\"\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\"></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=\"validationFailed\" class=\"text-danger mb-2\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n\n  <div class=\"cnfrmPasswordWrapper\" *ngIf=\"confirmPassword\">\n    <label for=\"cnfrmPasswordField\">Confirm password</label>\n    <input\n      type=\"password\"\n      class=\"form-control mb-2 height\"\n      id=\"cnfrmPasswordField\"\n      (blur)=\"checkPasswordMatch()\"\n      [(ngModel)]=\"enteredCnfrmPassword\"\n      [class.invalid]=\"validatedCnfrmPassword\"\n      (input)=\"validateCnfrm($event)\"\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\"></i>\n    </button>\n  </div>\n  <div *ngIf=\"validatedCnfrmPassword\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ cnfrmValidationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}.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}\n"] }]
+            args: [{ selector: 'lib-password-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"password-input-wrapper mb-2\">\r\n    <div class=\"input-wrapper\">\r\n      <div [innerHTML]=\"question.questionNumber\"></div>\r\n      &nbsp;&nbsp; <label for=\"passwordField\">{{ 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    <input\r\n      type=\"password\"\r\n      class=\"form-control mb-2 height\"\r\n      id=\"passwordField\"\r\n      (blur)=\"validatePassword()\"\r\n      [(ngModel)]=\"enteredPassword\"\r\n      [class.invalid]=\"validationFailed\"\r\n      (input)=\"validateInput($event)\"\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\"></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=\"validationFailed\" class=\"text-danger mb-2\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n\r\n  <div class=\"cnfrmPasswordWrapper\" *ngIf=\"confirmPassword\">\r\n    <label for=\"cnfrmPasswordField\">Confirm password</label>\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control mb-2 height\"\r\n      id=\"cnfrmPasswordField\"\r\n      (blur)=\"checkPasswordMatch()\"\r\n      [(ngModel)]=\"enteredCnfrmPassword\"\r\n      [class.invalid]=\"validatedCnfrmPassword\"\r\n      (input)=\"validateCnfrm($event)\"\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\"></i>\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"validatedCnfrmPassword\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ cnfrmValidationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}.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}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }] } });
@@ -1943,11 +1960,11 @@ class RadioButtonFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonFieldsComponent, deps: [{ token: FormService }], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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\n  <div class=\"checkboxField\" *ngFor=\"let option of customOptions\">\n    <input\n      class=\"formCheckbox mb-2\"\n      type=\"radio\"\n      [name]=\"question.id\"\n      [id]=\"option.value\"\n      [value]=\"option.value\"\n      [style.accent-color]=\"color\"\n      (blur)=\"validateInput()\"\n      [(ngModel)]=\"selectedOption\"\n      (ngModelChange)=\"validateInput()\"\n    />\n    <label\n      class=\"formCheckLabel ms-2 mb-2\"\n      [for]=\"option.value\"\n      *ngIf=\"optionType == 'OPTION'\"\n      >{{ option.value }}</label\n    >\n    <label\n      class=\"formCheckLabel ms-2 mb-2\"\n      [for]=\"option.value\"\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\n      >{{ option.label }}</label\n    >\n  </div>\n\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.formCheckbox,.formCheckLabel{cursor:pointer}.formCheckbox{width:15px;height:15px}\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: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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\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\"\r\n      [id]=\"option.value\"\r\n      [value]=\"option.value\"\r\n      [style.accent-color]=\"color\"\r\n      (blur)=\"validateInput()\"\r\n      [(ngModel)]=\"selectedOption\"\r\n      (ngModelChange)=\"validateInput()\"\r\n    />\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value\"\r\n      *ngIf=\"optionType == 'OPTION'\"\r\n      >{{ option.value }}</label\r\n    >\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value\"\r\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\r\n      >{{ option.label }}</label\r\n    >\r\n  </div>\r\n\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.formCheckbox,.formCheckLabel{cursor:pointer}.formCheckbox{width:15px;height:15px}\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: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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 [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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\n  <div class=\"checkboxField\" *ngFor=\"let option of customOptions\">\n    <input\n      class=\"formCheckbox mb-2\"\n      type=\"radio\"\n      [name]=\"question.id\"\n      [id]=\"option.value\"\n      [value]=\"option.value\"\n      [style.accent-color]=\"color\"\n      (blur)=\"validateInput()\"\n      [(ngModel)]=\"selectedOption\"\n      (ngModelChange)=\"validateInput()\"\n    />\n    <label\n      class=\"formCheckLabel ms-2 mb-2\"\n      [for]=\"option.value\"\n      *ngIf=\"optionType == 'OPTION'\"\n      >{{ option.value }}</label\n    >\n    <label\n      class=\"formCheckLabel ms-2 mb-2\"\n      [for]=\"option.value\"\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\n      >{{ option.label }}</label\n    >\n  </div>\n\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.formCheckbox,.formCheckLabel{cursor:pointer}.formCheckbox{width:15px;height:15px}\n"] }]
+            args: [{ selector: 'lib-radio-button-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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\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\"\r\n      [id]=\"option.value\"\r\n      [value]=\"option.value\"\r\n      [style.accent-color]=\"color\"\r\n      (blur)=\"validateInput()\"\r\n      [(ngModel)]=\"selectedOption\"\r\n      (ngModelChange)=\"validateInput()\"\r\n    />\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value\"\r\n      *ngIf=\"optionType == 'OPTION'\"\r\n      >{{ option.value }}</label\r\n    >\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value\"\r\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\r\n      >{{ option.label }}</label\r\n    >\r\n  </div>\r\n\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.formCheckbox,.formCheckLabel{cursor:pointer}.formCheckbox{width:15px;height:15px}\n"] }]
         }], ctorParameters: function () { return [{ type: FormService }]; }, propDecorators: { question: [{
                 type: Input
             }] } });
@@ -2026,11 +2043,11 @@ class RichTextEditorFieldsComponent {
         this.question.answer = content;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextEditorFieldsComponent, deps: [], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <angular-editor\n    [(ngModel)]=\"htmlContent\"\n    [config]=\"config\"\n    (input)=\"validateInput($event)\"\n    (blur)=\"validateEditor()\"\n    (ngModelChange)=\"updateAnswer($event)\"\n  ></angular-editor>\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <angular-editor\r\n    [(ngModel)]=\"htmlContent\"\r\n    [config]=\"config\"\r\n    (input)=\"validateInput($event)\"\r\n    (blur)=\"validateEditor()\"\r\n    (ngModelChange)=\"updateAnswer($event)\"\r\n  ></angular-editor>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }] }); }
 }
 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 [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <angular-editor\n    [(ngModel)]=\"htmlContent\"\n    [config]=\"config\"\n    (input)=\"validateInput($event)\"\n    (blur)=\"validateEditor()\"\n    (ngModelChange)=\"updateAnswer($event)\"\n  ></angular-editor>\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+            args: [{ selector: 'lib-rich-text-editor-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <angular-editor\r\n    [(ngModel)]=\"htmlContent\"\r\n    [config]=\"config\"\r\n    (input)=\"validateInput($event)\"\r\n    (blur)=\"validateEditor()\"\r\n    (ngModelChange)=\"updateAnswer($event)\"\r\n  ></angular-editor>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }] } });
@@ -2083,11 +2100,11 @@ class SelectionMatrixFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionMatrixFieldsComponent, deps: [], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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\n  <div>\n    <table class=\"selectionMatrix\">\n      <thead>\n        <tr>\n          <th></th>\n          <th class=\"text-center\" *ngFor=\"let column of selectionMatrixColumn\">{{column}}</th>\n        </tr>\n      </thead>\n      <tbody class=\"table-group-divider\">\n        <tr *ngFor=\"let label of selectionMatrixLabel; let rowIndex = index\">\n          <td>{{label}}</td>\n          <td *ngFor=\"let column of selectionMatrixColumn; let colIndex = index\" class=\"text-center\">\n            <input\n              type=\"radio\"\n              id=\"radio-{{rowIndex}}-{{colIndex}}\"\n              name=\"row-{{rowIndex}}\"\n              class=\"selectionRadio\"\n              [value]=\"label+'_'+column\"\n              [(ngModel)]=\"selectedOptions[rowIndex]\"\n              (ngModelChange)=\"onSelectionChange(rowIndex, label+'_'+column)\"\n            >\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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{border-right:1px solid #C9C8C8}.table-group-divider{border-top:1px solid #000000}.selectionRadio{cursor:pointer;width:18px;height:18px}\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: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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\r\n  <div>\r\n    <table class=\"selectionMatrix\">\r\n      <thead>\r\n        <tr>\r\n          <th></th>\r\n          <th class=\"text-center\" *ngFor=\"let column of selectionMatrixColumn\">{{column}}</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>{{label}}</td>\r\n          <td *ngFor=\"let column of selectionMatrixColumn; let colIndex = index\" class=\"text-center\">\r\n            <input\r\n              type=\"radio\"\r\n              id=\"radio-{{rowIndex}}-{{colIndex}}\"\r\n              name=\"row-{{rowIndex}}\"\r\n              class=\"selectionRadio\"\r\n              [value]=\"label+'_'+column\"\r\n              [(ngModel)]=\"selectedOptions[rowIndex]\"\r\n              (ngModelChange)=\"onSelectionChange(rowIndex, label+'_'+column)\"\r\n            >\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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{border-right:1px solid #C9C8C8}.table-group-divider{border-top:1px solid #000000}.selectionRadio{cursor:pointer;width:18px;height:18px}\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: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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 [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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\n  <div>\n    <table class=\"selectionMatrix\">\n      <thead>\n        <tr>\n          <th></th>\n          <th class=\"text-center\" *ngFor=\"let column of selectionMatrixColumn\">{{column}}</th>\n        </tr>\n      </thead>\n      <tbody class=\"table-group-divider\">\n        <tr *ngFor=\"let label of selectionMatrixLabel; let rowIndex = index\">\n          <td>{{label}}</td>\n          <td *ngFor=\"let column of selectionMatrixColumn; let colIndex = index\" class=\"text-center\">\n            <input\n              type=\"radio\"\n              id=\"radio-{{rowIndex}}-{{colIndex}}\"\n              name=\"row-{{rowIndex}}\"\n              class=\"selectionRadio\"\n              [value]=\"label+'_'+column\"\n              [(ngModel)]=\"selectedOptions[rowIndex]\"\n              (ngModelChange)=\"onSelectionChange(rowIndex, label+'_'+column)\"\n            >\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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{border-right:1px solid #C9C8C8}.table-group-divider{border-top:1px solid #000000}.selectionRadio{cursor:pointer;width:18px;height:18px}\n"] }]
+            args: [{ selector: 'lib-selection-matrix-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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\r\n  <div>\r\n    <table class=\"selectionMatrix\">\r\n      <thead>\r\n        <tr>\r\n          <th></th>\r\n          <th class=\"text-center\" *ngFor=\"let column of selectionMatrixColumn\">{{column}}</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>{{label}}</td>\r\n          <td *ngFor=\"let column of selectionMatrixColumn; let colIndex = index\" class=\"text-center\">\r\n            <input\r\n              type=\"radio\"\r\n              id=\"radio-{{rowIndex}}-{{colIndex}}\"\r\n              name=\"row-{{rowIndex}}\"\r\n              class=\"selectionRadio\"\r\n              [value]=\"label+'_'+column\"\r\n              [(ngModel)]=\"selectedOptions[rowIndex]\"\r\n              (ngModelChange)=\"onSelectionChange(rowIndex, label+'_'+column)\"\r\n            >\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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{border-right:1px solid #C9C8C8}.table-group-divider{border-top:1px solid #000000}.selectionRadio{cursor:pointer;width:18px;height:18px}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }] } });
@@ -2109,11 +2126,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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\n  <div class=\"input-wrapper\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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"] }] }); }
 }
 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]=\"'col-' + count\" class=\"mb-4 px-3\">\n  <div class=\"input-wrapper\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+            args: [{ selector: 'lib-signature-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }] } });
@@ -2150,7 +2167,7 @@ class SliderFieldsComponent {
         if (this.changeSliderColor) {
             this.sliderColor = this.question.formElement.appearance.sliderColor;
         }
-        if (this.question.answer) {
+        if (this.question.answer && Object.keys(this.question.answer).length > 0) {
             this.selectedValue = this.question?.answer;
         }
         else {
@@ -2161,11 +2178,11 @@ class SliderFieldsComponent {
         this.question.answer = String(this.selectedValue);
     }
     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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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=\"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        />\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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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=\"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        />\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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$3.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]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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=\"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        />\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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\n"] }]
+            args: [{ selector: 'lib-slider-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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=\"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        />\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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { question: [{
                 type: Input
             }] } });
@@ -2185,11 +2202,11 @@ class TermsAndConditionFieldsComponent {
         this.count;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermsAndConditionFieldsComponent, deps: [], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\n  <div class=\"input-wrapper\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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"] }] }); }
 }
 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]=\"'col-' + count\" class=\"mb-4 px-3\">\n  <div class=\"input-wrapper\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+            args: [{ selector: 'lib-terms-and-condition-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }] } });
@@ -2237,11 +2254,11 @@ class TextAreaFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaFieldsComponent, deps: [], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <textarea\n    class=\"form-control mb-2\"\n    [rows]=\"numberOfRows\"\n    (input)=\"validateInput($event)\"\n    (blur)=\"validateTextarea()\"\n    [(ngModel)]=\"enteredText\"\n    [class.invalid]=\"validationFailed\"\n    [maxlength]=\"characterCount\"\n  ></textarea>\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.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: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <textarea\r\n    class=\"form-control mb-2\"\r\n    [rows]=\"numberOfRows\"\r\n    (input)=\"validateInput($event)\"\r\n    (blur)=\"validateTextarea()\"\r\n    [(ngModel)]=\"enteredText\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [maxlength]=\"characterCount\"\r\n  ></textarea>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill: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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.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 [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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  <textarea\n    class=\"form-control mb-2\"\n    [rows]=\"numberOfRows\"\n    (input)=\"validateInput($event)\"\n    (blur)=\"validateTextarea()\"\n    [(ngModel)]=\"enteredText\"\n    [class.invalid]=\"validationFailed\"\n    [maxlength]=\"characterCount\"\n  ></textarea>\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+            args: [{ selector: 'lib-text-area-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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  <textarea\r\n    class=\"form-control mb-2\"\r\n    [rows]=\"numberOfRows\"\r\n    (input)=\"validateInput($event)\"\r\n    (blur)=\"validateTextarea()\"\r\n    [(ngModel)]=\"enteredText\"\r\n    [class.invalid]=\"validationFailed\"\r\n    [maxlength]=\"characterCount\"\r\n  ></textarea>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }] } });
@@ -2359,11 +2376,11 @@ class TextFieldsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextFieldsComponent, deps: [], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div  class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div> &nbsp;&nbsp;\n    <label>{{ question.question }}</label>&nbsp;\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\n      <svg class=\"hintSvg\" viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n  \n  <input\n    type=\"text\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [value]=\"defaultValue\"\n    [ngClass]=\"{\n      'bold': isBold,\n      'underline': isUnderline,\n      'italics': isItalics\n    }\"\n    [style.text-align]=\"textAlign\"\n    [style.font-family]=\"font\"\n    [style.font-size]=\"fontSize+'px'\"\n    [(ngModel)]=\"enteredText\"\n    (blur)=\"validatetextField()\"\n    (input)=\"validateInput($event)\"\n    [class.invalid]=\"validationFailed\"\n  />\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\n      </svg>\n      {{validationMessage}}</div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: TextFieldsComponent, selector: "lib-text-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div  class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div> &nbsp;&nbsp;\r\n    <label>{{ question.question }}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n      <svg class=\"hintSvg\" viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\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    [value]=\"defaultValue\"\r\n    [ngClass]=\"{\r\n      'bold': isBold,\r\n      'underline': isUnderline,\r\n      'italics': isItalics\r\n    }\"\r\n    [style.text-align]=\"textAlign\"\r\n    [style.font-family]=\"font\"\r\n    [style.font-size]=\"fontSize+'px'\"\r\n    [(ngModel)]=\"enteredText\"\r\n    (blur)=\"validatetextField()\"\r\n    (input)=\"validateInput($event)\"\r\n    [class.invalid]=\"validationFailed\"\r\n  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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 [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div  class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div> &nbsp;&nbsp;\n    <label>{{ question.question }}</label>&nbsp;\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\n      <svg class=\"hintSvg\" viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n  \n  <input\n    type=\"text\"\n    class=\"form-control mb-2 height\"\n    [placeholder]=\"placeholder\"\n    [value]=\"defaultValue\"\n    [ngClass]=\"{\n      'bold': isBold,\n      'underline': isUnderline,\n      'italics': isItalics\n    }\"\n    [style.text-align]=\"textAlign\"\n    [style.font-family]=\"font\"\n    [style.font-size]=\"fontSize+'px'\"\n    [(ngModel)]=\"enteredText\"\n    (blur)=\"validatetextField()\"\n    (input)=\"validateInput($event)\"\n    [class.invalid]=\"validationFailed\"\n  />\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\n      </svg>\n      {{validationMessage}}</div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\n"] }]
+            args: [{ selector: 'lib-text-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div  class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div> &nbsp;&nbsp;\r\n    <label>{{ question.question }}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n      <svg class=\"hintSvg\" viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path 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\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\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    [value]=\"defaultValue\"\r\n    [ngClass]=\"{\r\n      'bold': isBold,\r\n      'underline': isUnderline,\r\n      'italics': isItalics\r\n    }\"\r\n    [style.text-align]=\"textAlign\"\r\n    [style.font-family]=\"font\"\r\n    [style.font-size]=\"fontSize+'px'\"\r\n    [(ngModel)]=\"enteredText\"\r\n    (blur)=\"validatetextField()\"\r\n    (input)=\"validateInput($event)\"\r\n    [class.invalid]=\"validationFailed\"\r\n  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }] } });
@@ -2408,11 +2425,11 @@ class ToggleSwitchFieldsComponent {
             : this.question.formElement.appearance.labelOnColor;
     }
     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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-3 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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=\"mt-2\">\n    <label class=\"switch\">\n      <input type=\"checkbox\" id=\"togBtn\" (change)=\"toggleSliderColor($event)\" \n      [checked]=\"selectedValue == labelOnValue ? true : false \"/>\n      <div\n        class=\"slider round\"\n        [ngStyle]=\"{ 'background-color': toggleBackgroundColor }\"\n      >\n        <span class=\"on action-btn-text\">{{ labelOffValue }}</span>\n        <span class=\"off action-btn-text\">{{ labelOnValue }}</span>\n      </div>\n    </label>\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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;left:4px;right:59px;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}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%}\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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-3 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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=\"mt-2\">\r\n    <label class=\"switch\">\r\n      <input type=\"checkbox\" id=\"togBtn\" (change)=\"toggleSliderColor($event)\" \r\n      [checked]=\"selectedValue == labelOnValue ? true : false \"/>\r\n      <div\r\n        class=\"slider round\"\r\n        [ngStyle]=\"{ 'background-color': toggleBackgroundColor }\"\r\n      >\r\n        <span class=\"on action-btn-text\">{{ labelOffValue }}</span>\r\n        <span class=\"off action-btn-text\">{{ labelOnValue }}</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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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;left:4px;right:59px;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}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%}\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]=\"'col-' + count\" class=\"mb-3 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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=\"mt-2\">\n    <label class=\"switch\">\n      <input type=\"checkbox\" id=\"togBtn\" (change)=\"toggleSliderColor($event)\" \n      [checked]=\"selectedValue == labelOnValue ? true : false \"/>\n      <div\n        class=\"slider round\"\n        [ngStyle]=\"{ 'background-color': toggleBackgroundColor }\"\n      >\n        <span class=\"on action-btn-text\">{{ labelOffValue }}</span>\n        <span class=\"off action-btn-text\">{{ labelOnValue }}</span>\n      </div>\n    </label>\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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;left:4px;right:59px;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}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%}\n"] }]
+            args: [{ selector: 'lib-toggle-switch-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-3 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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=\"mt-2\">\r\n    <label class=\"switch\">\r\n      <input type=\"checkbox\" id=\"togBtn\" (change)=\"toggleSliderColor($event)\" \r\n      [checked]=\"selectedValue == labelOnValue ? true : false \"/>\r\n      <div\r\n        class=\"slider round\"\r\n        [ngStyle]=\"{ 'background-color': toggleBackgroundColor }\"\r\n      >\r\n        <span class=\"on action-btn-text\">{{ labelOffValue }}</span>\r\n        <span class=\"off action-btn-text\">{{ labelOnValue }}</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-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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;left:4px;right:59px;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}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%}\n"] }]
         }], propDecorators: { question: [{
                 type: Input
             }] } });
@@ -2461,11 +2478,11 @@ class UrlFieldsComponent {
         this.question.answer = event.target.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UrlFieldsComponent, deps: [], 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" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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      id=\"textField\"\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    />\n    <div class=\"ps-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=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: UrlFieldsComponent, selector: "lib-url-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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      id=\"textField\"\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    />\r\n    <div class=\"ps-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=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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 [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n  <div class=\"input-wrapper mb-2\">\n    <div [innerHTML]=\"question.questionNumber\"></div>\n    &nbsp;&nbsp; <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      id=\"textField\"\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    />\n    <div class=\"ps-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=\"validationFailed\" class=\"text-danger\">\n    <svg\n      class=\"validationSvg\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n        fill=\"#FF0000\"\n        stroke=\"#FF0000\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 12.75L12 7.75\"\n        stroke=\"white\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n    </svg>\n    {{ validationMessage }}\n  </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\n"] }]
+            args: [{ selector: 'lib-url-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <div [innerHTML]=\"question.questionNumber\"></div>\r\n    &nbsp;&nbsp; <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      id=\"textField\"\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    />\r\n    <div class=\"ps-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=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.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}.validationSvg{width:24px;height:24px;fill:none}.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}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { question: [{
                 type: Input
             }] } });
@@ -2475,11 +2492,11 @@ class SectionFieldsComponent {
         this.section = {};
     }
     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" }, ngImport: i0, template: "<div class=\"mb-4 px-3\">\n  <p class=\"sectionTitle\">{{ section.title }}</p>\n  <p [innerHTML]=\"section.description\" class=\"description\"></p>\n</div>\n", styles: [".sectionTitle{font-size:15px;font-weight:500}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: { section: "section" }, ngImport: i0, template: "<div class=\"mb-4 px-3\">\r\n  <p class=\"sectionTitle\">{{ section.title }}</p>\r\n  <p [innerHTML]=\"section.description\" class=\"description\"></p>\r\n</div>\r\n", styles: [".sectionTitle{font-size:15px;font-weight:500}\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\">\n  <p class=\"sectionTitle\">{{ section.title }}</p>\n  <p [innerHTML]=\"section.description\" class=\"description\"></p>\n</div>\n", styles: [".sectionTitle{font-size:15px;font-weight:500}\n"] }]
+            args: [{ selector: 'lib-section-fields', template: "<div class=\"mb-4 px-3\">\r\n  <p class=\"sectionTitle\">{{ section.title }}</p>\r\n  <p [innerHTML]=\"section.description\" class=\"description\"></p>\r\n</div>\r\n", styles: [".sectionTitle{font-size:15px;font-weight:500}\n"] }]
         }], propDecorators: { section: [{
                 type: Input
             }] } });
@@ -2489,11 +2506,11 @@ class ForthChildComponent {
         this.childLogics = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ForthChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ForthChildComponent, selector: "lib-forth-child", inputs: { childLogics: "childLogics" }, ngImport: i0, template: "<div *ngFor=\"let childLogic of childLogics\">\n  <div  *ngIf=\"childLogic.showLogic\">\n    <div *ngFor=\"let formElement of childLogic.formElements\">\n      <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n        <lib-check-box-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-check-box-fields>\n      <lib-date-time-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n        [question]=\"formElement.element\"\n        ></lib-date-time-fields>\n      <lib-drop-down-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n        [question]=\"formElement.element\"\n        ></lib-drop-down-fields>\n      <lib-file-picker-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n        [question]=\"formElement.element\"\n        ></lib-file-picker-fields>\n      <lib-location-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n        [question]=\"formElement.element\"\n        ></lib-location-fields>\n    \n      <lib-mail-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mail-fields>\n      <lib-mobile-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mobile-fields>\n      <lib-number-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-number-fields>\n      <lib-password-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-password-fields>\n      <lib-radio-button-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n        [question]=\"formElement.element\"\n        ></lib-radio-button-fields>\n      <lib-rich-text-editor-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n        [question]=\"formElement.element\"\n        ></lib-rich-text-editor-fields>\n      <lib-selection-matrix-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n        [question]=\"formElement.element\"\n        ></lib-selection-matrix-fields>\n      <lib-signature-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n        [question]=\"formElement.element\"\n        ></lib-signature-fields>\n      <lib-slider-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n        [question]=\"formElement.element\"\n        ></lib-slider-fields>\n      <lib-terms-and-condition-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n        [question]=\"formElement.element\"\n        ></lib-terms-and-condition-fields>\n      <lib-text-area-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n        [question]=\"formElement.element\"\n        ></lib-text-area-fields>\n      <lib-text-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-text-fields>\n      <lib-toggle-switch-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n        [question]=\"formElement.element\"\n        ></lib-toggle-switch-fields>\n      <lib-url-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n        [question]=\"formElement.element\"\n        ></lib-url-fields>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\n      </div>\n    </div>\n  </div>\n  </div>\n  \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: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ForthChildComponent, selector: "lib-forth-child", inputs: { childLogics: "childLogics" }, ngImport: i0, template: "<div *ngFor=\"let childLogic of childLogics\">\r\n  <div  *ngIf=\"childLogic.showLogic\">\r\n    <div *ngFor=\"let formElement of childLogic.formElements\">\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=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\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        >\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=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-radio-button-fields>\r\n      <lib-rich-text-editor-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-rich-text-editor-fields>\r\n      <lib-selection-matrix-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\r\n        [question]=\"formElement.element\"\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=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\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=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n        [question]=\"formElement.element\"\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      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\r\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\r\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n  \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: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ForthChildComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-forth-child', template: "<div *ngFor=\"let childLogic of childLogics\">\n  <div  *ngIf=\"childLogic.showLogic\">\n    <div *ngFor=\"let formElement of childLogic.formElements\">\n      <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n        <lib-check-box-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-check-box-fields>\n      <lib-date-time-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n        [question]=\"formElement.element\"\n        ></lib-date-time-fields>\n      <lib-drop-down-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n        [question]=\"formElement.element\"\n        ></lib-drop-down-fields>\n      <lib-file-picker-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n        [question]=\"formElement.element\"\n        ></lib-file-picker-fields>\n      <lib-location-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n        [question]=\"formElement.element\"\n        ></lib-location-fields>\n    \n      <lib-mail-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mail-fields>\n      <lib-mobile-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mobile-fields>\n      <lib-number-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-number-fields>\n      <lib-password-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-password-fields>\n      <lib-radio-button-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n        [question]=\"formElement.element\"\n        ></lib-radio-button-fields>\n      <lib-rich-text-editor-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n        [question]=\"formElement.element\"\n        ></lib-rich-text-editor-fields>\n      <lib-selection-matrix-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n        [question]=\"formElement.element\"\n        ></lib-selection-matrix-fields>\n      <lib-signature-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n        [question]=\"formElement.element\"\n        ></lib-signature-fields>\n      <lib-slider-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n        [question]=\"formElement.element\"\n        ></lib-slider-fields>\n      <lib-terms-and-condition-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n        [question]=\"formElement.element\"\n        ></lib-terms-and-condition-fields>\n      <lib-text-area-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n        [question]=\"formElement.element\"\n        ></lib-text-area-fields>\n      <lib-text-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-text-fields>\n      <lib-toggle-switch-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n        [question]=\"formElement.element\"\n        ></lib-toggle-switch-fields>\n      <lib-url-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n        [question]=\"formElement.element\"\n        ></lib-url-fields>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\n      </div>\n    </div>\n  </div>\n  </div>\n  \n" }]
+            args: [{ selector: 'lib-forth-child', template: "<div *ngFor=\"let childLogic of childLogics\">\r\n  <div  *ngIf=\"childLogic.showLogic\">\r\n    <div *ngFor=\"let formElement of childLogic.formElements\">\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=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\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        >\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=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-radio-button-fields>\r\n      <lib-rich-text-editor-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-rich-text-editor-fields>\r\n      <lib-selection-matrix-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\r\n        [question]=\"formElement.element\"\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=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\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=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n        [question]=\"formElement.element\"\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      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\r\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\r\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n  \r\n" }]
         }], propDecorators: { childLogics: [{
                 type: Input
             }] } });
@@ -2503,11 +2520,11 @@ class ThirdChildComponent {
         this.childLogics = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThirdChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ThirdChildComponent, selector: "lib-third-child", inputs: { childLogics: "childLogics" }, ngImport: i0, template: "<div *ngFor=\"let childLogic of childLogics\">\n  <div  *ngIf=\"childLogic.showLogic\">\n    <div *ngFor=\"let formElement of childLogic.formElements\">\n      <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n        <lib-check-box-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-check-box-fields>\n      <lib-date-time-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n        [question]=\"formElement.element\"\n        ></lib-date-time-fields>\n      <lib-drop-down-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n        [question]=\"formElement.element\"\n        ></lib-drop-down-fields>\n      <lib-file-picker-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n        [question]=\"formElement.element\"\n        ></lib-file-picker-fields>\n      <lib-location-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n        [question]=\"formElement.element\"\n        ></lib-location-fields>\n    \n      <lib-mail-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mail-fields>\n      <lib-mobile-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mobile-fields>\n      <lib-number-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-number-fields>\n      <lib-password-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-password-fields>\n      <lib-radio-button-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n        [question]=\"formElement.element\"\n        ></lib-radio-button-fields>\n      <lib-rich-text-editor-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n        [question]=\"formElement.element\"\n        ></lib-rich-text-editor-fields>\n      <lib-selection-matrix-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n        [question]=\"formElement.element\"\n        ></lib-selection-matrix-fields>\n      <lib-signature-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n        [question]=\"formElement.element\"\n        ></lib-signature-fields>\n      <lib-slider-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n        [question]=\"formElement.element\"\n        ></lib-slider-fields>\n      <lib-terms-and-condition-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n        [question]=\"formElement.element\"\n        ></lib-terms-and-condition-fields>\n      <lib-text-area-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n        [question]=\"formElement.element\"\n        ></lib-text-area-fields>\n      <lib-text-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-text-fields>\n      <lib-toggle-switch-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n        [question]=\"formElement.element\"\n        ></lib-toggle-switch-fields>\n      <lib-url-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n        [question]=\"formElement.element\"\n        ></lib-url-fields>\n      <lib-forth-child *ngIf=\"formElement.element.childLogics\"\n        [childLogics]=\"formElement.element.childLogics\"></lib-forth-child>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\n      </div>\n    </div>\n  </div>\n  </div>\n  \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: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: ForthChildComponent, selector: "lib-forth-child", inputs: ["childLogics"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ThirdChildComponent, selector: "lib-third-child", inputs: { childLogics: "childLogics" }, ngImport: i0, template: "<div *ngFor=\"let childLogic of childLogics\">\r\n  <div  *ngIf=\"childLogic.showLogic\">\r\n    <div *ngFor=\"let formElement of childLogic.formElements\">\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=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\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        >\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=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-radio-button-fields>\r\n      <lib-rich-text-editor-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-rich-text-editor-fields>\r\n      <lib-selection-matrix-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\r\n        [question]=\"formElement.element\"\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=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\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=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n        [question]=\"formElement.element\"\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-forth-child *ngIf=\"formElement.element.childLogics\"\r\n        [childLogics]=\"formElement.element.childLogics\"></lib-forth-child>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\r\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\r\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n  \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: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: ForthChildComponent, selector: "lib-forth-child", inputs: ["childLogics"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ThirdChildComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-third-child', template: "<div *ngFor=\"let childLogic of childLogics\">\n  <div  *ngIf=\"childLogic.showLogic\">\n    <div *ngFor=\"let formElement of childLogic.formElements\">\n      <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n        <lib-check-box-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-check-box-fields>\n      <lib-date-time-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n        [question]=\"formElement.element\"\n        ></lib-date-time-fields>\n      <lib-drop-down-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n        [question]=\"formElement.element\"\n        ></lib-drop-down-fields>\n      <lib-file-picker-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n        [question]=\"formElement.element\"\n        ></lib-file-picker-fields>\n      <lib-location-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n        [question]=\"formElement.element\"\n        ></lib-location-fields>\n    \n      <lib-mail-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mail-fields>\n      <lib-mobile-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mobile-fields>\n      <lib-number-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-number-fields>\n      <lib-password-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-password-fields>\n      <lib-radio-button-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n        [question]=\"formElement.element\"\n        ></lib-radio-button-fields>\n      <lib-rich-text-editor-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n        [question]=\"formElement.element\"\n        ></lib-rich-text-editor-fields>\n      <lib-selection-matrix-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n        [question]=\"formElement.element\"\n        ></lib-selection-matrix-fields>\n      <lib-signature-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n        [question]=\"formElement.element\"\n        ></lib-signature-fields>\n      <lib-slider-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n        [question]=\"formElement.element\"\n        ></lib-slider-fields>\n      <lib-terms-and-condition-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n        [question]=\"formElement.element\"\n        ></lib-terms-and-condition-fields>\n      <lib-text-area-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n        [question]=\"formElement.element\"\n        ></lib-text-area-fields>\n      <lib-text-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-text-fields>\n      <lib-toggle-switch-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n        [question]=\"formElement.element\"\n        ></lib-toggle-switch-fields>\n      <lib-url-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n        [question]=\"formElement.element\"\n        ></lib-url-fields>\n      <lib-forth-child *ngIf=\"formElement.element.childLogics\"\n        [childLogics]=\"formElement.element.childLogics\"></lib-forth-child>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\n      </div>\n    </div>\n  </div>\n  </div>\n  \n" }]
+            args: [{ selector: 'lib-third-child', template: "<div *ngFor=\"let childLogic of childLogics\">\r\n  <div  *ngIf=\"childLogic.showLogic\">\r\n    <div *ngFor=\"let formElement of childLogic.formElements\">\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=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\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        >\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=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-radio-button-fields>\r\n      <lib-rich-text-editor-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-rich-text-editor-fields>\r\n      <lib-selection-matrix-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\r\n        [question]=\"formElement.element\"\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=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\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=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n        [question]=\"formElement.element\"\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-forth-child *ngIf=\"formElement.element.childLogics\"\r\n        [childLogics]=\"formElement.element.childLogics\"></lib-forth-child>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\r\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\r\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n  \r\n" }]
         }], propDecorators: { childLogics: [{
                 type: Input
             }] } });
@@ -2517,11 +2534,11 @@ class SecondChildComponent {
         this.childLogics = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SecondChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SecondChildComponent, selector: "lib-second-child", inputs: { childLogics: "childLogics" }, ngImport: i0, template: "<div *ngFor=\"let childLogic of childLogics\">\n  <div  *ngIf=\"childLogic.showLogic\">\n    <div *ngFor=\"let formElement of childLogic.formElements\">\n      <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n        <lib-check-box-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-check-box-fields>\n      <lib-date-time-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n        [question]=\"formElement.element\"\n        ></lib-date-time-fields>\n      <lib-drop-down-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n        [question]=\"formElement.element\"\n        ></lib-drop-down-fields>\n      <lib-file-picker-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n        [question]=\"formElement.element\"\n        ></lib-file-picker-fields>\n      <lib-location-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n        [question]=\"formElement.element\"\n        ></lib-location-fields>\n    \n      <lib-mail-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mail-fields>\n      <lib-mobile-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mobile-fields>\n      <lib-number-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-number-fields>\n      <lib-password-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-password-fields>\n      <lib-radio-button-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n        [question]=\"formElement.element\"\n        ></lib-radio-button-fields>\n      <lib-rich-text-editor-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n        [question]=\"formElement.element\"\n        ></lib-rich-text-editor-fields>\n      <lib-selection-matrix-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n        [question]=\"formElement.element\"\n        ></lib-selection-matrix-fields>\n      <lib-signature-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n        [question]=\"formElement.element\"\n        ></lib-signature-fields>\n      <lib-slider-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n        [question]=\"formElement.element\"\n        ></lib-slider-fields>\n      <lib-terms-and-condition-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n        [question]=\"formElement.element\"\n        ></lib-terms-and-condition-fields>\n      <lib-text-area-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n        [question]=\"formElement.element\"\n        ></lib-text-area-fields>\n      <lib-text-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-text-fields>\n      <lib-toggle-switch-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n        [question]=\"formElement.element\"\n        ></lib-toggle-switch-fields>\n      <lib-url-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n        [question]=\"formElement.element\"\n        ></lib-url-fields>\n      <lib-third-child *ngIf=\"formElement.element.childLogics\"\n        [childLogics]=\"formElement.element.childLogics\"></lib-third-child>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\n      </div>\n    </div>\n  </div>\n  </div>\n  \n\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: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: ThirdChildComponent, selector: "lib-third-child", inputs: ["childLogics"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SecondChildComponent, selector: "lib-second-child", inputs: { childLogics: "childLogics" }, ngImport: i0, template: "<div *ngFor=\"let childLogic of childLogics\">\r\n  <div  *ngIf=\"childLogic.showLogic\">\r\n    <div *ngFor=\"let formElement of childLogic.formElements\">\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=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\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        >\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=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-radio-button-fields>\r\n      <lib-rich-text-editor-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-rich-text-editor-fields>\r\n      <lib-selection-matrix-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\r\n        [question]=\"formElement.element\"\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=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\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=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n        [question]=\"formElement.element\"\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-third-child *ngIf=\"formElement.element.childLogics\"\r\n        [childLogics]=\"formElement.element.childLogics\"></lib-third-child>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\r\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\r\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n  \r\n\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: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: ThirdChildComponent, selector: "lib-third-child", inputs: ["childLogics"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SecondChildComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-second-child', template: "<div *ngFor=\"let childLogic of childLogics\">\n  <div  *ngIf=\"childLogic.showLogic\">\n    <div *ngFor=\"let formElement of childLogic.formElements\">\n      <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n        <lib-check-box-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-check-box-fields>\n      <lib-date-time-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n        [question]=\"formElement.element\"\n        ></lib-date-time-fields>\n      <lib-drop-down-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n        [question]=\"formElement.element\"\n        ></lib-drop-down-fields>\n      <lib-file-picker-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n        [question]=\"formElement.element\"\n        ></lib-file-picker-fields>\n      <lib-location-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n        [question]=\"formElement.element\"\n        ></lib-location-fields>\n    \n      <lib-mail-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mail-fields>\n      <lib-mobile-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mobile-fields>\n      <lib-number-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-number-fields>\n      <lib-password-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-password-fields>\n      <lib-radio-button-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n        [question]=\"formElement.element\"\n        ></lib-radio-button-fields>\n      <lib-rich-text-editor-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n        [question]=\"formElement.element\"\n        ></lib-rich-text-editor-fields>\n      <lib-selection-matrix-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n        [question]=\"formElement.element\"\n        ></lib-selection-matrix-fields>\n      <lib-signature-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n        [question]=\"formElement.element\"\n        ></lib-signature-fields>\n      <lib-slider-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n        [question]=\"formElement.element\"\n        ></lib-slider-fields>\n      <lib-terms-and-condition-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n        [question]=\"formElement.element\"\n        ></lib-terms-and-condition-fields>\n      <lib-text-area-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n        [question]=\"formElement.element\"\n        ></lib-text-area-fields>\n      <lib-text-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-text-fields>\n      <lib-toggle-switch-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n        [question]=\"formElement.element\"\n        ></lib-toggle-switch-fields>\n      <lib-url-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n        [question]=\"formElement.element\"\n        ></lib-url-fields>\n      <lib-third-child *ngIf=\"formElement.element.childLogics\"\n        [childLogics]=\"formElement.element.childLogics\"></lib-third-child>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\n      </div>\n    </div>\n  </div>\n  </div>\n  \n\n" }]
+            args: [{ selector: 'lib-second-child', template: "<div *ngFor=\"let childLogic of childLogics\">\r\n  <div  *ngIf=\"childLogic.showLogic\">\r\n    <div *ngFor=\"let formElement of childLogic.formElements\">\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=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\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        >\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=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-radio-button-fields>\r\n      <lib-rich-text-editor-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-rich-text-editor-fields>\r\n      <lib-selection-matrix-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\r\n        [question]=\"formElement.element\"\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=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\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=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n        [question]=\"formElement.element\"\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-third-child *ngIf=\"formElement.element.childLogics\"\r\n        [childLogics]=\"formElement.element.childLogics\"></lib-third-child>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\r\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\r\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n  \r\n\r\n" }]
         }], propDecorators: { childLogics: [{
                 type: Input
             }] } });
@@ -2531,11 +2548,11 @@ class FirstChildComponent {
         this.childLogics = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FirstChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FirstChildComponent, selector: "lib-first-child", inputs: { childLogics: "childLogics" }, ngImport: i0, template: "<div *ngFor=\"let childLogic of childLogics\">\n  <div  *ngIf=\"childLogic.showLogic\">\n    <div *ngFor=\"let formElement of childLogic.formElements\">\n      <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n        <lib-check-box-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-check-box-fields>\n      <lib-date-time-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n        [question]=\"formElement.element\"\n        ></lib-date-time-fields>\n      <lib-drop-down-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n        [question]=\"formElement.element\"\n        ></lib-drop-down-fields>\n      <lib-file-picker-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n        [question]=\"formElement.element\"\n        ></lib-file-picker-fields>\n      <lib-location-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n        [question]=\"formElement.element\"\n        ></lib-location-fields>\n    \n      <lib-mail-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mail-fields>\n      <lib-mobile-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mobile-fields>\n      <lib-number-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-number-fields>\n      <lib-password-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-password-fields>\n      <lib-radio-button-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n        [question]=\"formElement.element\"\n        ></lib-radio-button-fields>\n      <lib-rich-text-editor-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n        [question]=\"formElement.element\"\n        ></lib-rich-text-editor-fields>\n      <lib-selection-matrix-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n        [question]=\"formElement.element\"\n        ></lib-selection-matrix-fields>\n      <lib-signature-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n        [question]=\"formElement.element\"\n        ></lib-signature-fields>\n      <lib-slider-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n        [question]=\"formElement.element\"\n        ></lib-slider-fields>\n      <lib-terms-and-condition-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n        [question]=\"formElement.element\"\n        ></lib-terms-and-condition-fields>\n      <lib-text-area-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n        [question]=\"formElement.element\"\n        ></lib-text-area-fields>\n      <lib-text-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-text-fields>\n      <lib-toggle-switch-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n        [question]=\"formElement.element\"\n        ></lib-toggle-switch-fields>\n      <lib-url-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n        [question]=\"formElement.element\"\n        ></lib-url-fields>\n      <lib-second-child *ngIf=\"formElement.element.childLogics\"\n        [childLogics]=\"formElement.element.childLogics\"></lib-second-child>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\n      </div>\n    </div>\n  </div>\n    \n  </div>\n  \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: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: SecondChildComponent, selector: "lib-second-child", inputs: ["childLogics"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FirstChildComponent, selector: "lib-first-child", inputs: { childLogics: "childLogics" }, ngImport: i0, template: "<div *ngFor=\"let childLogic of childLogics\">\r\n  <div  *ngIf=\"childLogic.showLogic\">\r\n    <div *ngFor=\"let formElement of childLogic.formElements\">\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=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\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        >\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=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-radio-button-fields>\r\n      <lib-rich-text-editor-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-rich-text-editor-fields>\r\n      <lib-selection-matrix-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\r\n        [question]=\"formElement.element\"\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=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\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=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n        [question]=\"formElement.element\"\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-second-child *ngIf=\"formElement.element.childLogics\"\r\n        [childLogics]=\"formElement.element.childLogics\"></lib-second-child>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\r\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\r\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n    \r\n  </div>\r\n  \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: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: SecondChildComponent, selector: "lib-second-child", inputs: ["childLogics"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FirstChildComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-first-child', template: "<div *ngFor=\"let childLogic of childLogics\">\n  <div  *ngIf=\"childLogic.showLogic\">\n    <div *ngFor=\"let formElement of childLogic.formElements\">\n      <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n        <lib-check-box-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-check-box-fields>\n      <lib-date-time-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n        [question]=\"formElement.element\"\n        ></lib-date-time-fields>\n      <lib-drop-down-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n        [question]=\"formElement.element\"\n        ></lib-drop-down-fields>\n      <lib-file-picker-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n        [question]=\"formElement.element\"\n        ></lib-file-picker-fields>\n      <lib-location-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n        [question]=\"formElement.element\"\n        ></lib-location-fields>\n    \n      <lib-mail-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mail-fields>\n      <lib-mobile-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-mobile-fields>\n      <lib-number-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-number-fields>\n      <lib-password-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n        [question]=\"formElement.element\"\n        >\n      </lib-password-fields>\n      <lib-radio-button-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n        [question]=\"formElement.element\"\n        ></lib-radio-button-fields>\n      <lib-rich-text-editor-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n        [question]=\"formElement.element\"\n        ></lib-rich-text-editor-fields>\n      <lib-selection-matrix-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n        [question]=\"formElement.element\"\n        ></lib-selection-matrix-fields>\n      <lib-signature-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n        [question]=\"formElement.element\"\n        ></lib-signature-fields>\n      <lib-slider-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n        [question]=\"formElement.element\"\n        ></lib-slider-fields>\n      <lib-terms-and-condition-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n        [question]=\"formElement.element\"\n        ></lib-terms-and-condition-fields>\n      <lib-text-area-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n        [question]=\"formElement.element\"\n        ></lib-text-area-fields>\n      <lib-text-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n        [question]=\"formElement.element\"\n        ></lib-text-fields>\n      <lib-toggle-switch-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n        [question]=\"formElement.element\"\n        ></lib-toggle-switch-fields>\n      <lib-url-fields\n        *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n        [question]=\"formElement.element\"\n        ></lib-url-fields>\n      <lib-second-child *ngIf=\"formElement.element.childLogics\"\n        [childLogics]=\"formElement.element.childLogics\"></lib-second-child>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n      </div>\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\n      </div>\n    </div>\n  </div>\n    \n  </div>\n  \n" }]
+            args: [{ selector: 'lib-first-child', template: "<div *ngFor=\"let childLogic of childLogics\">\r\n  <div  *ngIf=\"childLogic.showLogic\">\r\n    <div *ngFor=\"let formElement of childLogic.formElements\">\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=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\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        >\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=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-radio-button-fields>\r\n      <lib-rich-text-editor-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n        [question]=\"formElement.element\"\r\n        ></lib-rich-text-editor-fields>\r\n      <lib-selection-matrix-fields\r\n        *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\r\n        [question]=\"formElement.element\"\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=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\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=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n        [question]=\"formElement.element\"\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-second-child *ngIf=\"formElement.element.childLogics\"\r\n        [childLogics]=\"formElement.element.childLogics\"></lib-second-child>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SECTION'\">\r\n        <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\r\n      </div>\r\n      <div *ngIf=\"formElement.entityType === 'SUBFORM'\">\r\n        <!-- <lib-sub-form [subForm]=\"formElement.element\"></lib-sub-form> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n    \r\n  </div>\r\n  \r\n" }]
         }], propDecorators: { childLogics: [{
                 type: Input
             }] } });
@@ -2555,11 +2572,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", currentPageIndex: "currentPageIndex" }, outputs: { emitValidations: "emitValidations" }, ngImport: i0, template: "<div>\n  <lib-check-box-fields\n    *ngIf=\"question.formElement.elementType === 'CHECK_BOX'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-check-box-fields>\n  <lib-date-time-fields\n    *ngIf=\"question.formElement.elementType === 'DATE_TIME'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-date-time-fields>\n  <lib-drop-down-fields\n    *ngIf=\"question.formElement.elementType === 'DROP_DOWN'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-drop-down-fields>\n  <lib-file-picker-fields\n    *ngIf=\"question.formElement.elementType === 'FILE_PICKER'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-file-picker-fields>\n  <lib-location-fields\n    *ngIf=\"question.formElement.elementType === 'LOCATION'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-location-fields>\n\n  <lib-mail-fields\n    *ngIf=\"question.formElement.elementType === 'EMAIL'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\">\n  </lib-mail-fields>\n  <lib-mobile-fields\n    *ngIf=\"question.formElement.elementType === 'MOBILE'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\">\n  </lib-mobile-fields>\n  <lib-number-fields\n    *ngIf=\"question.formElement.elementType === 'NUMBER'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\">\n  </lib-number-fields>\n  <lib-password-fields\n    *ngIf=\"question.formElement.elementType === 'PASSWORD'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\">\n  </lib-password-fields>\n  <lib-radio-button-fields\n    *ngIf=\"question.formElement.elementType === 'RADIO_BUTTON'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-radio-button-fields>\n  <lib-rich-text-editor-fields\n    *ngIf=\"question.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-rich-text-editor-fields>\n  <lib-selection-matrix-fields\n    *ngIf=\"question.formElement.elementType === 'SELECTION_MATRIX'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-selection-matrix-fields>\n  <lib-signature-fields\n    *ngIf=\"question.formElement.elementType === 'SIGNATURE'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-signature-fields>\n  <lib-slider-fields\n    *ngIf=\"question.formElement.elementType === 'SLIDER'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-slider-fields>\n  <lib-terms-and-condition-fields\n    *ngIf=\"question.formElement.elementType === 'TERMS_AND_CONDITION'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-terms-and-condition-fields>\n  <lib-text-area-fields\n    *ngIf=\"question.formElement.elementType === 'TEXT_AREA'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-text-area-fields>\n  <lib-text-fields\n    *ngIf=\"question.formElement.elementType === 'TEXT_BOX'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-text-fields>\n  <lib-toggle-switch-fields\n    *ngIf=\"question.formElement.elementType === 'TOGGLE_SWITCH'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-toggle-switch-fields>\n  <lib-url-fields\n    *ngIf=\"question.formElement.elementType === 'URL'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-url-fields>\n  <lib-first-child *ngIf=\"question.childLogics\"\n    [childLogics]=\"question.childLogics\"></lib-first-child>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FirstChildComponent, selector: "lib-first-child", inputs: ["childLogics"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QuestionComponent, selector: "lib-question", inputs: { question: "question", edit: "edit", currentPageIndex: "currentPageIndex" }, outputs: { emitValidations: "emitValidations" }, ngImport: i0, template: "<div>\r\n  <lib-check-box-fields\r\n    *ngIf=\"question.formElement.elementType === 'CHECK_BOX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-check-box-fields>\r\n  <lib-date-time-fields\r\n    *ngIf=\"question.formElement.elementType === 'DATE_TIME'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-date-time-fields>\r\n  <lib-drop-down-fields\r\n    *ngIf=\"question.formElement.elementType === 'DROP_DOWN'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-drop-down-fields>\r\n  <lib-file-picker-fields\r\n    *ngIf=\"question.formElement.elementType === 'FILE_PICKER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-file-picker-fields>\r\n  <lib-location-fields\r\n    *ngIf=\"question.formElement.elementType === 'LOCATION'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-location-fields>\r\n\r\n  <lib-mail-fields\r\n    *ngIf=\"question.formElement.elementType === 'EMAIL'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-mail-fields>\r\n  <lib-mobile-fields\r\n    *ngIf=\"question.formElement.elementType === 'MOBILE'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-mobile-fields>\r\n  <lib-number-fields\r\n    *ngIf=\"question.formElement.elementType === 'NUMBER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-number-fields>\r\n  <lib-password-fields\r\n    *ngIf=\"question.formElement.elementType === 'PASSWORD'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-password-fields>\r\n  <lib-radio-button-fields\r\n    *ngIf=\"question.formElement.elementType === 'RADIO_BUTTON'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-radio-button-fields>\r\n  <lib-rich-text-editor-fields\r\n    *ngIf=\"question.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-rich-text-editor-fields>\r\n  <lib-selection-matrix-fields\r\n    *ngIf=\"question.formElement.elementType === 'SELECTION_MATRIX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-selection-matrix-fields>\r\n  <lib-signature-fields\r\n    *ngIf=\"question.formElement.elementType === 'SIGNATURE'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-signature-fields>\r\n  <lib-slider-fields\r\n    *ngIf=\"question.formElement.elementType === 'SLIDER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-slider-fields>\r\n  <lib-terms-and-condition-fields\r\n    *ngIf=\"question.formElement.elementType === 'TERMS_AND_CONDITION'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-terms-and-condition-fields>\r\n  <lib-text-area-fields\r\n    *ngIf=\"question.formElement.elementType === 'TEXT_AREA'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-text-area-fields>\r\n  <lib-text-fields\r\n    *ngIf=\"question.formElement.elementType === 'TEXT_BOX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-text-fields>\r\n  <lib-toggle-switch-fields\r\n    *ngIf=\"question.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-toggle-switch-fields>\r\n  <lib-url-fields\r\n    *ngIf=\"question.formElement.elementType === 'URL'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-url-fields>\r\n  <lib-first-child *ngIf=\"question.childLogics\"\r\n    [childLogics]=\"question.childLogics\"></lib-first-child>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FirstChildComponent, selector: "lib-first-child", inputs: ["childLogics"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question', template: "<div>\n  <lib-check-box-fields\n    *ngIf=\"question.formElement.elementType === 'CHECK_BOX'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-check-box-fields>\n  <lib-date-time-fields\n    *ngIf=\"question.formElement.elementType === 'DATE_TIME'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-date-time-fields>\n  <lib-drop-down-fields\n    *ngIf=\"question.formElement.elementType === 'DROP_DOWN'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-drop-down-fields>\n  <lib-file-picker-fields\n    *ngIf=\"question.formElement.elementType === 'FILE_PICKER'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-file-picker-fields>\n  <lib-location-fields\n    *ngIf=\"question.formElement.elementType === 'LOCATION'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-location-fields>\n\n  <lib-mail-fields\n    *ngIf=\"question.formElement.elementType === 'EMAIL'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\">\n  </lib-mail-fields>\n  <lib-mobile-fields\n    *ngIf=\"question.formElement.elementType === 'MOBILE'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\">\n  </lib-mobile-fields>\n  <lib-number-fields\n    *ngIf=\"question.formElement.elementType === 'NUMBER'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\">\n  </lib-number-fields>\n  <lib-password-fields\n    *ngIf=\"question.formElement.elementType === 'PASSWORD'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\">\n  </lib-password-fields>\n  <lib-radio-button-fields\n    *ngIf=\"question.formElement.elementType === 'RADIO_BUTTON'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-radio-button-fields>\n  <lib-rich-text-editor-fields\n    *ngIf=\"question.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-rich-text-editor-fields>\n  <lib-selection-matrix-fields\n    *ngIf=\"question.formElement.elementType === 'SELECTION_MATRIX'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-selection-matrix-fields>\n  <lib-signature-fields\n    *ngIf=\"question.formElement.elementType === 'SIGNATURE'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-signature-fields>\n  <lib-slider-fields\n    *ngIf=\"question.formElement.elementType === 'SLIDER'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-slider-fields>\n  <lib-terms-and-condition-fields\n    *ngIf=\"question.formElement.elementType === 'TERMS_AND_CONDITION'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-terms-and-condition-fields>\n  <lib-text-area-fields\n    *ngIf=\"question.formElement.elementType === 'TEXT_AREA'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-text-area-fields>\n  <lib-text-fields\n    *ngIf=\"question.formElement.elementType === 'TEXT_BOX'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-text-fields>\n  <lib-toggle-switch-fields\n    *ngIf=\"question.formElement.elementType === 'TOGGLE_SWITCH'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-toggle-switch-fields>\n  <lib-url-fields\n    *ngIf=\"question.formElement.elementType === 'URL'\"\n    [question]=\"question\"\n    (validate)=\"handleValidation($event)\"></lib-url-fields>\n  <lib-first-child *ngIf=\"question.childLogics\"\n    [childLogics]=\"question.childLogics\"></lib-first-child>\n</div>\n" }]
+            args: [{ selector: 'lib-question', template: "<div>\r\n  <lib-check-box-fields\r\n    *ngIf=\"question.formElement.elementType === 'CHECK_BOX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-check-box-fields>\r\n  <lib-date-time-fields\r\n    *ngIf=\"question.formElement.elementType === 'DATE_TIME'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-date-time-fields>\r\n  <lib-drop-down-fields\r\n    *ngIf=\"question.formElement.elementType === 'DROP_DOWN'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-drop-down-fields>\r\n  <lib-file-picker-fields\r\n    *ngIf=\"question.formElement.elementType === 'FILE_PICKER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-file-picker-fields>\r\n  <lib-location-fields\r\n    *ngIf=\"question.formElement.elementType === 'LOCATION'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-location-fields>\r\n\r\n  <lib-mail-fields\r\n    *ngIf=\"question.formElement.elementType === 'EMAIL'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-mail-fields>\r\n  <lib-mobile-fields\r\n    *ngIf=\"question.formElement.elementType === 'MOBILE'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-mobile-fields>\r\n  <lib-number-fields\r\n    *ngIf=\"question.formElement.elementType === 'NUMBER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-number-fields>\r\n  <lib-password-fields\r\n    *ngIf=\"question.formElement.elementType === 'PASSWORD'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-password-fields>\r\n  <lib-radio-button-fields\r\n    *ngIf=\"question.formElement.elementType === 'RADIO_BUTTON'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-radio-button-fields>\r\n  <lib-rich-text-editor-fields\r\n    *ngIf=\"question.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-rich-text-editor-fields>\r\n  <lib-selection-matrix-fields\r\n    *ngIf=\"question.formElement.elementType === 'SELECTION_MATRIX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-selection-matrix-fields>\r\n  <lib-signature-fields\r\n    *ngIf=\"question.formElement.elementType === 'SIGNATURE'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-signature-fields>\r\n  <lib-slider-fields\r\n    *ngIf=\"question.formElement.elementType === 'SLIDER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-slider-fields>\r\n  <lib-terms-and-condition-fields\r\n    *ngIf=\"question.formElement.elementType === 'TERMS_AND_CONDITION'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-terms-and-condition-fields>\r\n  <lib-text-area-fields\r\n    *ngIf=\"question.formElement.elementType === 'TEXT_AREA'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-text-area-fields>\r\n  <lib-text-fields\r\n    *ngIf=\"question.formElement.elementType === 'TEXT_BOX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-text-fields>\r\n  <lib-toggle-switch-fields\r\n    *ngIf=\"question.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-toggle-switch-fields>\r\n  <lib-url-fields\r\n    *ngIf=\"question.formElement.elementType === 'URL'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-url-fields>\r\n  <lib-first-child *ngIf=\"question.childLogics\"\r\n    [childLogics]=\"question.childLogics\"></lib-first-child>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { question: [{
                 type: Input
             }], edit: [{
@@ -2570,18 +2587,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+class SubmissionModalComponent {
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+    }
+    ngOnInit() {
+        this.subForm = this.data.subForm;
+    }
+    closeModal() {
+        this.dialogRef.close();
+    }
+    saveSubmission() {
+        this.dialogRef.close(this.subForm);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmissionModalComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubmissionModalComponent, selector: "lib-submission-modal", ngImport: i0, template: "<div class=\"mb-5\">\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 formElement of subForm.formElements\">\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          >\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          ></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          ></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-first-child\r\n            *ngIf=\"formElement.element.childLogics\"\r\n            [childLogics]=\"formElement.element.childLogics\"\r\n          ></lib-first-child>\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      </div>\r\n\r\n    <div class=\"okBtn me-4\">\r\n        <button\r\n          class=\"submitBtn 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:end;margin-left:auto;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: FirstChildComponent, selector: "lib-first-child", inputs: ["childLogics"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmissionModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-submission-modal', template: "<div class=\"mb-5\">\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 formElement of subForm.formElements\">\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          >\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          ></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          ></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-first-child\r\n            *ngIf=\"formElement.element.childLogics\"\r\n            [childLogics]=\"formElement.element.childLogics\"\r\n          ></lib-first-child>\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      </div>\r\n\r\n    <div class=\"okBtn me-4\">\r\n        <button\r\n          class=\"submitBtn 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:end;margin-left:auto;margin-bottom:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$2.MatDialogRef }]; } });
+
+class MultipleSubformComponent {
+    constructor(dialog) {
+        this.dialog = dialog;
+        this.subForm = {};
+        this.subFormChange = new EventEmitter();
+        this.submissions = [];
+        this.deletedSubmissions = [];
+    }
+    ngOnInit() {
+        if (this.subForm?.submissions) {
+            this.submissions = this.subForm.submissions;
+            this.subForm.deletedSubmissions = [];
+        }
+    }
+    subFormSubmission(subForm) {
+        const answers = [];
+        subForm.formElements.forEach((formElement) => {
+            const answer = {
+                questionId: formElement.element.id,
+                answer: formElement.element?.answer || '',
+                attachments: formElement.element.attachments,
+            };
+            answers.push(answer);
+            formElement.element.answer = {};
+        });
+        const submission = {
+            submissionId: '',
+            answers: answers,
+        };
+        this.submissions.push(submission);
+        this.updateSubFormWithSubmissions();
+    }
+    editSubFormSubmission(index, submission) {
+        const subForm = this.bindAnswers(this.subForm, submission);
+        const dialogConfig = new MatDialogConfig();
+        dialogConfig.position = { top: '5%' };
+        dialogConfig.width = '100%';
+        dialogConfig.data = {
+            subForm: subForm,
+        };
+        dialogConfig.hasBackdrop = true;
+        dialogConfig.disableClose = true;
+        dialogConfig.maxHeight = '80vh';
+        const dialogRef = this.dialog.open(SubmissionModalComponent, dialogConfig);
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.updateSubmission(result, index);
+            }
+        });
+    }
+    bindAnswers(subForm, submission) {
+        const updatedSubForm = { ...subForm };
+        updatedSubForm.formElements.forEach((formElement) => {
+            const answer = submission.answers.find(a => a.questionId === formElement.element.id);
+            if (answer) {
+                formElement.element.answer = answer.answer;
+                formElement.element.answerId = answer.answerId;
+                formElement.element.attachments = answer.attachments;
+            }
+        });
+        return updatedSubForm;
+    }
+    deleteSubForm(index) {
+        const submission = this.submissions[index];
+        if (submission.submissionId) {
+            this.deletedSubmissions.push(submission.submissionId);
+        }
+        this.submissions.splice(index, 1);
+        this.updateSubFormWithSubmissions();
+    }
+    addNewSubmission() {
+        const dialogConfig = new MatDialogConfig();
+        dialogConfig.position = { top: '5%' };
+        dialogConfig.width = '100%';
+        dialogConfig.data = {
+            subForm: this.subForm,
+        };
+        dialogConfig.hasBackdrop = true;
+        dialogConfig.disableClose = true;
+        dialogConfig.maxHeight = '80vh';
+        const dialogRef = this.dialog.open(SubmissionModalComponent, dialogConfig);
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.subForm = result;
+                this.subFormSubmission(result);
+            }
+        });
+    }
+    updateSubmission(result, index) {
+        this.submissions[index].answers = [];
+        result.formElements.forEach((formElement) => {
+            const answer = {
+                questionId: formElement.element.id,
+                answer: formElement.element?.answer || '',
+                answerId: formElement.element?.answerId || '',
+                attachments: formElement.element.attachments,
+            };
+            formElement.element.answer = {};
+            this.submissions[index].answers.push(answer);
+        });
+        this.updateSubFormWithSubmissions();
+    }
+    updateSubFormWithSubmissions() {
+        this.subForm.submissions = this.submissions;
+        this.subForm.deletedSubmissions = this.deletedSubmissions;
+        this.subFormChange.emit(this.subForm);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultipleSubformComponent, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultipleSubformComponent, selector: "lib-multiple-subform", inputs: { subForm: "subForm" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"mb-4\">\r\n  <table class=\"table table-bordered border border-2\">\r\n    <tr>\r\n      <th\r\n        class=\"border border-1\"\r\n        *ngFor=\"let formElement of subForm.formElements\"\r\n      >\r\n        {{ formElement.element.question }}\r\n      </th>\r\n      <th></th>\r\n    </tr>\r\n    <tr *ngFor=\"let submission of submissions; let i = index\">\r\n      <td class=\"border border-1\" *ngFor=\"let answer of submission.answers\">{{answer.answer}}</td>\r\n      <td class=\"text-center\">\r\n        <button class=\"border border-0 p-0 me-2\" (click)=\"editSubFormSubmission(i,submission)\">\r\n            <svg width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect x=\"0.5\" y=\"0.5\" width=\"28\" height=\"26.4737\" rx=\"5.5\" fill=\"white\" stroke=\"#D8D8D8\"/>\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.0009 19.0787H9.1582V16.2361C9.1582 15.9447 9.2739 15.6653 9.47999 15.4593L16.2224 8.71686C16.4284 8.5105 16.708 8.39453 16.9995 8.39453C17.2911 8.39453 17.5707 8.5105 17.7767 8.71686L19.5201 10.4603C19.7264 10.6663 19.8424 10.9458 19.8424 11.2374C19.8424 11.529 19.7264 11.8086 19.5201 12.0145L12.7777 18.757C12.5715 18.9628 12.2922 19.0785 12.0009 19.0787Z\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M15.1704 10.3984L17.8415 13.0695\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>   \r\n        </button>\r\n        <button class=\"border border-0 p-0\" (click) = \"deleteSubForm(i)\" >\r\n            <svg width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect x=\"0.5\" y=\"0.5\" width=\"27.6402\" height=\"26.1328\" rx=\"5.5\" fill=\"white\" stroke=\"#D8D8D8\"/>\r\n                <path d=\"M8.60449 9.20637H20.0354\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M19.2189 9.20703V17.7863C19.2189 18.6482 18.4881 19.3462 17.5859 19.3462H11.0539C10.1517 19.3462 9.4209 18.6482 9.4209 17.7863V9.20703\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M16.7696 6.67122H11.8706\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M12.6871 12.3242V16.2239\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M15.9532 12.3242V16.2239\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n                \r\n        </button>\r\n      </td>\r\n    </tr>\r\n  </table>\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\">Add New</a>\r\n    </div>\r\n  </div>\r\n  \r\n \r\n</div>\r\n", styles: [".footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultipleSubformComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-multiple-subform', template: "<div class=\"mb-4\">\r\n  <table class=\"table table-bordered border border-2\">\r\n    <tr>\r\n      <th\r\n        class=\"border border-1\"\r\n        *ngFor=\"let formElement of subForm.formElements\"\r\n      >\r\n        {{ formElement.element.question }}\r\n      </th>\r\n      <th></th>\r\n    </tr>\r\n    <tr *ngFor=\"let submission of submissions; let i = index\">\r\n      <td class=\"border border-1\" *ngFor=\"let answer of submission.answers\">{{answer.answer}}</td>\r\n      <td class=\"text-center\">\r\n        <button class=\"border border-0 p-0 me-2\" (click)=\"editSubFormSubmission(i,submission)\">\r\n            <svg width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect x=\"0.5\" y=\"0.5\" width=\"28\" height=\"26.4737\" rx=\"5.5\" fill=\"white\" stroke=\"#D8D8D8\"/>\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.0009 19.0787H9.1582V16.2361C9.1582 15.9447 9.2739 15.6653 9.47999 15.4593L16.2224 8.71686C16.4284 8.5105 16.708 8.39453 16.9995 8.39453C17.2911 8.39453 17.5707 8.5105 17.7767 8.71686L19.5201 10.4603C19.7264 10.6663 19.8424 10.9458 19.8424 11.2374C19.8424 11.529 19.7264 11.8086 19.5201 12.0145L12.7777 18.757C12.5715 18.9628 12.2922 19.0785 12.0009 19.0787Z\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M15.1704 10.3984L17.8415 13.0695\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>   \r\n        </button>\r\n        <button class=\"border border-0 p-0\" (click) = \"deleteSubForm(i)\" >\r\n            <svg width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect x=\"0.5\" y=\"0.5\" width=\"27.6402\" height=\"26.1328\" rx=\"5.5\" fill=\"white\" stroke=\"#D8D8D8\"/>\r\n                <path d=\"M8.60449 9.20637H20.0354\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M19.2189 9.20703V17.7863C19.2189 18.6482 18.4881 19.3462 17.5859 19.3462H11.0539C10.1517 19.3462 9.4209 18.6482 9.4209 17.7863V9.20703\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M16.7696 6.67122H11.8706\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M12.6871 12.3242V16.2239\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M15.9532 12.3242V16.2239\" stroke=\"#084FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n                \r\n        </button>\r\n      </td>\r\n    </tr>\r\n  </table>\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\">Add New</a>\r\n    </div>\r\n  </div>\r\n  \r\n \r\n</div>\r\n", styles: [".footer{display:flex;justify-content:flex-end;align-items:center;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialog }]; }, propDecorators: { subForm: [{
+                type: Input
+            }], subFormChange: [{
+                type: Output
+            }] } });
+
 class SubFormComponent {
     constructor() {
         this.subForm = {};
+        this.edit = false;
+        this.subFormChange = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.subForm.subFormStructure == 'single') {
+            this.bindAnswersToFormElements();
+        }
+    }
+    bindAnswersToFormElements() {
+        if (this.subForm && this.subForm.formElements && this.subForm.submissions) {
+            this.subForm.formElements.forEach((formElement) => {
+                if (formElement.entityType === 'QUESTION') {
+                    const submission = this.subForm.submissions.find((sub) => sub.answers.some((ans) => ans.questionId === formElement.element.id));
+                    if (submission) {
+                        const answer = submission.answers.find((ans) => ans.questionId === formElement.element.id);
+                        if (answer) {
+                            formElement.element.answer = answer.answer;
+                            formElement.element.answerId = answer.answerId;
+                            formElement.element.validation = true;
+                            formElement.element.attachments = answer.attachments;
+                            this.subForm.submissionId = submission.submissionId;
+                        }
+                    }
+                }
+            });
+        }
+    }
+    updateSubFormWithSubmissions(event) {
+        this.subForm = event;
+        this.subFormChange.emit(this.subForm);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubFormComponent, selector: "lib-sub-form", inputs: { subForm: "subForm" }, ngImport: i0, template: "<div class=\"outer-container mb-4 px-3\">\n  <div class=\"body container pt-3 pb-3 px-3\">\n    <div class=\"tab-content pt-4 pb-3 px-3\">\n      <p class=\"sectionTitle\">{{subForm.title}}</p>\n      <p [innerHTML]=\"subForm.description\" class=\"description mb-5\"></p>\n\n            <div *ngFor=\"let formElement of subForm.formElements\">\n              <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n                <lib-check-box-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n                [question]=\"formElement.element\"\n                ></lib-check-box-fields>\n              <lib-date-time-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n                [question]=\"formElement.element\"\n                ></lib-date-time-fields>\n              <lib-drop-down-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n                [question]=\"formElement.element\"\n                ></lib-drop-down-fields>\n              <lib-file-picker-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n                [question]=\"formElement.element\"\n                ></lib-file-picker-fields>\n              <lib-location-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n                [question]=\"formElement.element\"\n                ></lib-location-fields>\n            \n              <lib-mail-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-mail-fields>\n              <lib-mobile-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-mobile-fields>\n              <lib-number-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-number-fields>\n              <lib-password-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-password-fields>\n              <lib-radio-button-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n                [question]=\"formElement.element\"\n                ></lib-radio-button-fields>\n              <lib-rich-text-editor-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n                [question]=\"formElement.element\"\n                ></lib-rich-text-editor-fields>\n              <lib-selection-matrix-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n                [question]=\"formElement.element\"\n                ></lib-selection-matrix-fields>\n              <lib-signature-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n                [question]=\"formElement.element\"\n                ></lib-signature-fields>\n              <lib-slider-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n                [question]=\"formElement.element\"\n                ></lib-slider-fields>\n              <lib-terms-and-condition-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n                [question]=\"formElement.element\"\n                ></lib-terms-and-condition-fields>\n              <lib-text-area-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n                [question]=\"formElement.element\"\n                ></lib-text-area-fields>\n              <lib-text-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n                [question]=\"formElement.element\"\n                ></lib-text-fields>\n              <lib-toggle-switch-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n                [question]=\"formElement.element\"\n                ></lib-toggle-switch-fields>\n              <lib-url-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n                [question]=\"formElement.element\"\n                ></lib-url-fields>\n                <lib-first-child *ngIf=\"formElement.element.childLogics\"\n                [childLogics]=\"formElement.element.childLogics\"></lib-first-child>\n              </div>\n              <div *ngIf=\"formElement.entityType === 'SECTION'\">\n                <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n              </div>\n            </div>\n          \n        \n          \n\n          </div>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:15px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: FirstChildComponent, selector: "lib-first-child", inputs: ["childLogics"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubFormComponent, selector: "lib-sub-form", inputs: { subForm: "subForm", edit: "edit" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"outer-container mb-4 px-3\">\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\">{{ subForm.title }}</p>\r\n      <p [innerHTML]=\"subForm.description\" class=\"description mb-5\"></p>\r\n\r\n      <div *ngIf=\"subForm.subFormStructure == 'multiple'\">\r\n        <lib-multiple-subform\r\n        [subForm]=\"subForm\"\r\n        (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n        ></lib-multiple-subform>\r\n      </div>\r\n    <div *ngIf=\"subForm.subFormStructure == 'single'\">\r\n      <div *ngFor=\"let formElement of subForm.formElements\">\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          >\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          ></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          ></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-first-child\r\n            *ngIf=\"formElement.element.childLogics\"\r\n            [childLogics]=\"formElement.element.childLogics\"\r\n          ></lib-first-child>\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      </div>\r\n    </div>\r\n    </div>\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}}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:15px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: FirstChildComponent, selector: "lib-first-child", inputs: ["childLogics"] }, { kind: "component", type: MultipleSubformComponent, selector: "lib-multiple-subform", inputs: ["subForm"], outputs: ["subFormChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sub-form', template: "<div class=\"outer-container mb-4 px-3\">\n  <div class=\"body container pt-3 pb-3 px-3\">\n    <div class=\"tab-content pt-4 pb-3 px-3\">\n      <p class=\"sectionTitle\">{{subForm.title}}</p>\n      <p [innerHTML]=\"subForm.description\" class=\"description mb-5\"></p>\n\n            <div *ngFor=\"let formElement of subForm.formElements\">\n              <div *ngIf=\"formElement.entityType === 'QUESTION'\">\n                <lib-check-box-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'CHECK_BOX'\"\n                [question]=\"formElement.element\"\n                ></lib-check-box-fields>\n              <lib-date-time-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'DATE_TIME'\"\n                [question]=\"formElement.element\"\n                ></lib-date-time-fields>\n              <lib-drop-down-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'DROP_DOWN'\"\n                [question]=\"formElement.element\"\n                ></lib-drop-down-fields>\n              <lib-file-picker-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'FILE_PICKER'\"\n                [question]=\"formElement.element\"\n                ></lib-file-picker-fields>\n              <lib-location-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'LOCATION'\"\n                [question]=\"formElement.element\"\n                ></lib-location-fields>\n            \n              <lib-mail-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'EMAIL'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-mail-fields>\n              <lib-mobile-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'MOBILE'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-mobile-fields>\n              <lib-number-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'NUMBER'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-number-fields>\n              <lib-password-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'PASSWORD'\"\n                [question]=\"formElement.element\"\n                >\n              </lib-password-fields>\n              <lib-radio-button-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'RADIO_BUTTON'\"\n                [question]=\"formElement.element\"\n                ></lib-radio-button-fields>\n              <lib-rich-text-editor-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'RICH_TEXT_EDITOR'\"\n                [question]=\"formElement.element\"\n                ></lib-rich-text-editor-fields>\n              <lib-selection-matrix-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SELECTION_MATRIX'\"\n                [question]=\"formElement.element\"\n                ></lib-selection-matrix-fields>\n              <lib-signature-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SIGNATURE'\"\n                [question]=\"formElement.element\"\n                ></lib-signature-fields>\n              <lib-slider-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'SLIDER'\"\n                [question]=\"formElement.element\"\n                ></lib-slider-fields>\n              <lib-terms-and-condition-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TERMS_AND_CONDITION'\"\n                [question]=\"formElement.element\"\n                ></lib-terms-and-condition-fields>\n              <lib-text-area-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TEXT_AREA'\"\n                [question]=\"formElement.element\"\n                ></lib-text-area-fields>\n              <lib-text-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TEXT_BOX'\"\n                [question]=\"formElement.element\"\n                ></lib-text-fields>\n              <lib-toggle-switch-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'TOGGLE_SWITCH'\"\n                [question]=\"formElement.element\"\n                ></lib-toggle-switch-fields>\n              <lib-url-fields\n                *ngIf=\"formElement.element.formElement.elementType === 'URL'\"\n                [question]=\"formElement.element\"\n                ></lib-url-fields>\n                <lib-first-child *ngIf=\"formElement.element.childLogics\"\n                [childLogics]=\"formElement.element.childLogics\"></lib-first-child>\n              </div>\n              <div *ngIf=\"formElement.entityType === 'SECTION'\">\n                <lib-section-fields [section]=\"formElement.element\"></lib-section-fields>\n              </div>\n            </div>\n          \n        \n          \n\n          </div>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:15px;font-weight:500}\n"] }]
+            args: [{ selector: 'lib-sub-form', template: "<div class=\"outer-container mb-4 px-3\">\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\">{{ subForm.title }}</p>\r\n      <p [innerHTML]=\"subForm.description\" class=\"description mb-5\"></p>\r\n\r\n      <div *ngIf=\"subForm.subFormStructure == 'multiple'\">\r\n        <lib-multiple-subform\r\n        [subForm]=\"subForm\"\r\n        (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n        ></lib-multiple-subform>\r\n      </div>\r\n    <div *ngIf=\"subForm.subFormStructure == 'single'\">\r\n      <div *ngFor=\"let formElement of subForm.formElements\">\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          >\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          ></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          ></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-first-child\r\n            *ngIf=\"formElement.element.childLogics\"\r\n            [childLogics]=\"formElement.element.childLogics\"\r\n          ></lib-first-child>\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      </div>\r\n    </div>\r\n    </div>\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}}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:15px;font-weight:500}\n"] }]
         }], propDecorators: { subForm: [{
                 type: Input
+            }], edit: [{
+                type: Input
+            }], subFormChange: [{
+                type: Output
             }] } });
 
 class FormElementsComponent {
@@ -2589,19 +2784,25 @@ class FormElementsComponent {
         this.grid = {};
         this.currentPageIndex = 0;
         this.edit = false;
+        this.subFormChange = new EventEmitter();
+    }
+    updateSubFormWithSubmissions(event) {
+        this.subFormChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormElementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormElementsComponent, selector: "lib-form-elements", inputs: { grid: "grid", currentPageIndex: "currentPageIndex", edit: "edit" }, ngImport: i0, template: "<div *ngIf=\"grid.entityType === 'QUESTION'\">\n  <lib-question [question]=\"grid?.element\"\n  [currentPageIndex]=\"currentPageIndex\"\n  [edit]=\"edit\"\n  ></lib-question>\n</div>\n<div *ngIf=\"grid.entityType === 'SECTION'\">\n  <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\n</div>\n<div *ngIf=\"grid.entityType === 'SUBFORM'\">\n  <lib-sub-form [subForm]=\"grid.element\"></lib-sub-form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionComponent, selector: "lib-question", inputs: ["question", "edit", "currentPageIndex"], outputs: ["emitValidations"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: SubFormComponent, selector: "lib-sub-form", inputs: ["subForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormElementsComponent, selector: "lib-form-elements", inputs: { grid: "grid", currentPageIndex: "currentPageIndex", edit: "edit" }, outputs: { subFormChange: "subFormChange" }, ngImport: i0, template: "<div *ngIf=\"grid.entityType === 'QUESTION'\">\r\n  <lib-question [question]=\"grid?.element\"\r\n  [currentPageIndex]=\"currentPageIndex\"\r\n  [edit]=\"edit\"\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<div *ngIf=\"grid.entityType === 'SUBFORM'\">\r\n  <lib-sub-form [subForm]=\"grid.element\"\r\n  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n  ></lib-sub-form>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionComponent, selector: "lib-question", inputs: ["question", "edit", "currentPageIndex"], outputs: ["emitValidations"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: SubFormComponent, selector: "lib-sub-form", inputs: ["subForm", "edit"], outputs: ["subFormChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormElementsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-elements', template: "<div *ngIf=\"grid.entityType === 'QUESTION'\">\n  <lib-question [question]=\"grid?.element\"\n  [currentPageIndex]=\"currentPageIndex\"\n  [edit]=\"edit\"\n  ></lib-question>\n</div>\n<div *ngIf=\"grid.entityType === 'SECTION'\">\n  <lib-section-fields [section]=\"grid.element\"></lib-section-fields>\n</div>\n<div *ngIf=\"grid.entityType === 'SUBFORM'\">\n  <lib-sub-form [subForm]=\"grid.element\"></lib-sub-form>\n</div>\n" }]
+            args: [{ selector: 'lib-form-elements', template: "<div *ngIf=\"grid.entityType === 'QUESTION'\">\r\n  <lib-question [question]=\"grid?.element\"\r\n  [currentPageIndex]=\"currentPageIndex\"\r\n  [edit]=\"edit\"\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<div *ngIf=\"grid.entityType === 'SUBFORM'\">\r\n  <lib-sub-form [subForm]=\"grid.element\"\r\n  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n  ></lib-sub-form>\r\n</div>\r\n" }]
         }], propDecorators: { grid: [{
                 type: Input
             }], currentPageIndex: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], subFormChange: [{
+                type: Output
             }] } });
 
 class NavigationTabsComponent {
@@ -2611,6 +2812,10 @@ class NavigationTabsComponent {
         this.pageChanged = new EventEmitter();
         this.submitEmit = new EventEmitter();
         this.edit = false;
+        this.subFormChange = new EventEmitter();
+    }
+    updateSubFormWithSubmissions(event) {
+        this.subFormChange.emit(event);
     }
     setCurrentPage(index) {
         this.pageChanged.emit(index);
@@ -2619,11 +2824,11 @@ class NavigationTabsComponent {
         this.submitEmit.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: { pages: "pages", currentPageIndex: "currentPageIndex", edit: "edit" }, outputs: { pageChanged: "pageChanged", submitEmit: "submitEmit" }, ngImport: i0, template: "<div class=\"tab-inner-container\">\n  <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\n    <li\n      class=\"nav-item\"\n      role=\"presentation\"\n      *ngFor=\"let page of pages; let i = index\"\n    >\n      <button\n        class=\"nav-link\"\n        [class.active]=\"i === currentPageIndex\"\n        id=\"tab-{{ i }}\"\n        [attr.data-bs-toggle]=\"'tab'\"\n        [attr.data-bs-target]=\"'#content-' + i\"\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-controls]=\"'content-' + i\"\n        [attr.aria-selected]=\"i === 0\"\n        (click)=\"setCurrentPage(i)\"\n      >\n        {{ page.title }}\n      </button>\n    </li>\n  </ul>\n\n  <div class=\"tab-content pt-5 pb-3 px-1\">\n    <div\n      *ngFor=\"let page of pages; let i = index\"\n      class=\"tab-pane fade\"\n      [class.show]=\"i === 0\"\n      [class.active]=\"i === 0\"\n      id=\"content-{{ i }}\"\n      role=\"tabpanel\"\n      [attr.aria-labelledby]=\"'tab-' + i\"\n    >\n      <div *ngFor=\"let row of page.rows\">\n        <div class=\"margin\">\n          <div *ngFor=\"let grid of row.grid\">\n            <lib-form-elements\n              [grid]=\"grid\"\n              [edit]=\"edit\"\n            ></lib-form-elements>\n          </div>\n        </div>\n      </div>\n      <div\n        *ngIf=\"currentPageIndex == pages.length - 1\"\n        class=\"footerButton d-flex justify-content-end\"\n      >\n        <button\n          class=\"btn btn-primary me-md-2 rounded-pill\"\n          type=\"button\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important}.nav-item{background-color:#fff;border-radius:5px;margin-right:.5%}.nav-link{position:relative;margin-bottom:-2px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["grid", "currentPageIndex", "edit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: { pages: "pages", currentPageIndex: "currentPageIndex", edit: "edit" }, outputs: { pageChanged: "pageChanged", submitEmit: "submitEmit", subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"tab-inner-container\">\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 pages; let i = index\"\r\n    >\r\n      <button\r\n        class=\"nav-link\"\r\n        [class.active]=\"i === currentPageIndex\"\r\n        id=\"tab-{{ i }}\"\r\n        [attr.data-bs-toggle]=\"'tab'\"\r\n        [attr.data-bs-target]=\"'#content-' + i\"\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        [attr.aria-controls]=\"'content-' + i\"\r\n        [attr.aria-selected]=\"i === 0\"\r\n        (click)=\"setCurrentPage(i)\"\r\n      >\r\n        {{ page.title }}\r\n      </button>\r\n    </li>\r\n  </ul>\r\n\r\n  <div class=\"tab-content pt-5 pb-3 px-1\">\r\n    <div\r\n      *ngFor=\"let page of pages; let i = index\"\r\n      class=\"tab-pane fade\"\r\n      [class.show]=\"i === 0\"\r\n      [class.active]=\"i === 0\"\r\n      id=\"content-{{ i }}\"\r\n      role=\"tabpanel\"\r\n      [attr.aria-labelledby]=\"'tab-' + i\"\r\n    >\r\n      <div *ngFor=\"let row of page.rows\">\r\n        <div class=\"margin\">\r\n          <div *ngFor=\"let grid of row.grid\">\r\n            <lib-form-elements\r\n              [grid]=\"grid\"\r\n              [edit]=\"edit\"\r\n              (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n            ></lib-form-elements>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"currentPageIndex == pages.length - 1\"\r\n        class=\"footerButton d-flex justify-content-end\"\r\n      >\r\n        <button\r\n          class=\"btn btn-primary me-md-2 rounded-pill\"\r\n          type=\"button\"\r\n          (click)=\"submitForm()\"\r\n        >\r\n          Submit\r\n        </button>\r\n      </div>\r\n    </div>\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}}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important}.nav-item{background-color:#fff;border-radius:5px;margin-right:.5%}.nav-link{position:relative;margin-bottom:-2px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["grid", "currentPageIndex", "edit"], outputs: ["subFormChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-navigation-tabs', template: "<div class=\"tab-inner-container\">\n  <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\n    <li\n      class=\"nav-item\"\n      role=\"presentation\"\n      *ngFor=\"let page of pages; let i = index\"\n    >\n      <button\n        class=\"nav-link\"\n        [class.active]=\"i === currentPageIndex\"\n        id=\"tab-{{ i }}\"\n        [attr.data-bs-toggle]=\"'tab'\"\n        [attr.data-bs-target]=\"'#content-' + i\"\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-controls]=\"'content-' + i\"\n        [attr.aria-selected]=\"i === 0\"\n        (click)=\"setCurrentPage(i)\"\n      >\n        {{ page.title }}\n      </button>\n    </li>\n  </ul>\n\n  <div class=\"tab-content pt-5 pb-3 px-1\">\n    <div\n      *ngFor=\"let page of pages; let i = index\"\n      class=\"tab-pane fade\"\n      [class.show]=\"i === 0\"\n      [class.active]=\"i === 0\"\n      id=\"content-{{ i }}\"\n      role=\"tabpanel\"\n      [attr.aria-labelledby]=\"'tab-' + i\"\n    >\n      <div *ngFor=\"let row of page.rows\">\n        <div class=\"margin\">\n          <div *ngFor=\"let grid of row.grid\">\n            <lib-form-elements\n              [grid]=\"grid\"\n              [edit]=\"edit\"\n            ></lib-form-elements>\n          </div>\n        </div>\n      </div>\n      <div\n        *ngIf=\"currentPageIndex == pages.length - 1\"\n        class=\"footerButton d-flex justify-content-end\"\n      >\n        <button\n          class=\"btn btn-primary me-md-2 rounded-pill\"\n          type=\"button\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important}.nav-item{background-color:#fff;border-radius:5px;margin-right:.5%}.nav-link{position:relative;margin-bottom:-2px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}\n"] }]
+            args: [{ selector: 'lib-navigation-tabs', template: "<div class=\"tab-inner-container\">\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 pages; let i = index\"\r\n    >\r\n      <button\r\n        class=\"nav-link\"\r\n        [class.active]=\"i === currentPageIndex\"\r\n        id=\"tab-{{ i }}\"\r\n        [attr.data-bs-toggle]=\"'tab'\"\r\n        [attr.data-bs-target]=\"'#content-' + i\"\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        [attr.aria-controls]=\"'content-' + i\"\r\n        [attr.aria-selected]=\"i === 0\"\r\n        (click)=\"setCurrentPage(i)\"\r\n      >\r\n        {{ page.title }}\r\n      </button>\r\n    </li>\r\n  </ul>\r\n\r\n  <div class=\"tab-content pt-5 pb-3 px-1\">\r\n    <div\r\n      *ngFor=\"let page of pages; let i = index\"\r\n      class=\"tab-pane fade\"\r\n      [class.show]=\"i === 0\"\r\n      [class.active]=\"i === 0\"\r\n      id=\"content-{{ i }}\"\r\n      role=\"tabpanel\"\r\n      [attr.aria-labelledby]=\"'tab-' + i\"\r\n    >\r\n      <div *ngFor=\"let row of page.rows\">\r\n        <div class=\"margin\">\r\n          <div *ngFor=\"let grid of row.grid\">\r\n            <lib-form-elements\r\n              [grid]=\"grid\"\r\n              [edit]=\"edit\"\r\n              (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n            ></lib-form-elements>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"currentPageIndex == pages.length - 1\"\r\n        class=\"footerButton d-flex justify-content-end\"\r\n      >\r\n        <button\r\n          class=\"btn btn-primary me-md-2 rounded-pill\"\r\n          type=\"button\"\r\n          (click)=\"submitForm()\"\r\n        >\r\n          Submit\r\n        </button>\r\n      </div>\r\n    </div>\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}}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important}.nav-item{background-color:#fff;border-radius:5px;margin-right:.5%}.nav-link{position:relative;margin-bottom:-2px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}\n"] }]
         }], propDecorators: { pages: [{
                 type: Input
             }], currentPageIndex: [{
@@ -2634,6 +2839,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], edit: [{
                 type: Input
+            }], subFormChange: [{
+                type: Output
             }] } });
 
 class NextPrevNavigationComponent {
@@ -2647,6 +2854,10 @@ class NextPrevNavigationComponent {
         this.navigatePrevious = new EventEmitter();
         this.submitEmit = new EventEmitter();
         this.edit = false;
+        this.subFormChange = new EventEmitter();
+    }
+    updateSubFormWithSubmissions(event) {
+        this.subFormChange.emit(event);
     }
     onNavigateNext() {
         this.navigateNext.emit();
@@ -2658,11 +2869,11 @@ class NextPrevNavigationComponent {
         this.submitEmit.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextPrevNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: { currentPageIndex: "currentPageIndex", pages: "pages", previousPage: "previousPage", nextPage: "nextPage", currentPage: "currentPage", edit: "edit" }, outputs: { navigateNext: "navigateNext", navigatePrevious: "navigatePrevious", submitEmit: "submitEmit" }, ngImport: i0, template: "<div class=\"pageTitleDiv\">\n  <p class=\"pageTitle\">{{ currentPage.title }}</p>\n</div>\n<div class=\"button-inner-container rounded\">\n  <div class=\"tab-content pt-5 pb-3 row\">\n    <div *ngFor=\"let row of pages[currentPageIndex].rows\" class=\"marginSize\">\n      <div *ngFor=\"let grid of row.grid\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    <div class=\"footerButton\">\n      <div class=\"prevButtonDiv\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M4.51025 11.9883L19.5003 11.9883\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n          Previous | {{ previousPage.title }}\n        </button>\n      </div>\n      <div class=\"nextButtonDiv\">\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pages.length - 1\"\n        >\n          Next | {{ nextPage.title }}\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19.4897 12.0117L4.49975 12.0117\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n        <button\n          class=\"submitBtn me-md-2 rounded-pill\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pages.length - 1\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}.pageTitleDiv{padding-left:3rem;padding-top:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:0rem 3rem 3rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{background:#084fff;color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}.tab-content,.row{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["grid", "currentPageIndex", "edit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: { currentPageIndex: "currentPageIndex", pages: "pages", previousPage: "previousPage", nextPage: "nextPage", currentPage: "currentPage", edit: "edit" }, outputs: { navigateNext: "navigateNext", navigatePrevious: "navigatePrevious", submitEmit: "submitEmit", subFormChange: "subFormChange" }, ngImport: i0, template: "<div class=\"pageTitleDiv\">\r\n  <p class=\"pageTitle\">{{ currentPage.title }}</p>\r\n</div>\r\n<div class=\"button-inner-container rounded\">\r\n  <div class=\"tab-content pt-5 pb-3 row\">\r\n    <div *ngFor=\"let row of pages[currentPageIndex].rows\" class=\"marginSize\">\r\n      <div *ngFor=\"let grid of row.grid\">\r\n        <lib-form-elements\r\n          [grid]=\"grid\"\r\n          [currentPageIndex]=\"currentPageIndex\"\r\n          [edit]=\"edit\"\r\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n        ></lib-form-elements>\r\n      </div>\r\n    </div>\r\n    <div class=\"footerButton\">\r\n      <div class=\"prevButtonDiv\">\r\n        <button\r\n          class=\"me-md-2 rounded-pill navButton\"\r\n          type=\"button\"\r\n          (click)=\"onNavigatePrevious()\"\r\n          *ngIf=\"0 < currentPageIndex\"\r\n        >\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          Previous | {{ previousPage.title }}\r\n        </button>\r\n      </div>\r\n      <div class=\"nextButtonDiv\">\r\n        <button\r\n          class=\"md-2 rounded-pill navButton\"\r\n          type=\"button\"\r\n          (click)=\"onNavigateNext()\"\r\n          *ngIf=\"currentPageIndex < pages.length - 1\"\r\n        >\r\n          Next | {{ nextPage.title }}\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        </button>\r\n        <button\r\n          class=\"submitBtn me-md-2 rounded-pill\"\r\n          type=\"button\"\r\n          *ngIf=\"currentPageIndex == pages.length - 1\"\r\n          (click)=\"submitForm()\"\r\n        >\r\n          Submit\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".pageTitle{font-size:15px;font-weight:500}.pageTitleDiv{padding-left:3rem;padding-top:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:0rem 3rem 3rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{background:#084fff;color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}.tab-content,.row{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["grid", "currentPageIndex", "edit"], outputs: ["subFormChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextPrevNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-next-prev-navigation', template: "<div class=\"pageTitleDiv\">\n  <p class=\"pageTitle\">{{ currentPage.title }}</p>\n</div>\n<div class=\"button-inner-container rounded\">\n  <div class=\"tab-content pt-5 pb-3 row\">\n    <div *ngFor=\"let row of pages[currentPageIndex].rows\" class=\"marginSize\">\n      <div *ngFor=\"let grid of row.grid\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    <div class=\"footerButton\">\n      <div class=\"prevButtonDiv\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M4.51025 11.9883L19.5003 11.9883\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n          Previous | {{ previousPage.title }}\n        </button>\n      </div>\n      <div class=\"nextButtonDiv\">\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pages.length - 1\"\n        >\n          Next | {{ nextPage.title }}\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19.4897 12.0117L4.49975 12.0117\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <path\n              d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n              stroke=\"white\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n        <button\n          class=\"submitBtn me-md-2 rounded-pill\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pages.length - 1\"\n          (click)=\"submitForm()\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}.pageTitleDiv{padding-left:3rem;padding-top:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:0rem 3rem 3rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{background:#084fff;color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}.tab-content,.row{background-color:#fff}\n"] }]
+            args: [{ selector: 'lib-next-prev-navigation', template: "<div class=\"pageTitleDiv\">\r\n  <p class=\"pageTitle\">{{ currentPage.title }}</p>\r\n</div>\r\n<div class=\"button-inner-container rounded\">\r\n  <div class=\"tab-content pt-5 pb-3 row\">\r\n    <div *ngFor=\"let row of pages[currentPageIndex].rows\" class=\"marginSize\">\r\n      <div *ngFor=\"let grid of row.grid\">\r\n        <lib-form-elements\r\n          [grid]=\"grid\"\r\n          [currentPageIndex]=\"currentPageIndex\"\r\n          [edit]=\"edit\"\r\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n        ></lib-form-elements>\r\n      </div>\r\n    </div>\r\n    <div class=\"footerButton\">\r\n      <div class=\"prevButtonDiv\">\r\n        <button\r\n          class=\"me-md-2 rounded-pill navButton\"\r\n          type=\"button\"\r\n          (click)=\"onNavigatePrevious()\"\r\n          *ngIf=\"0 < currentPageIndex\"\r\n        >\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          Previous | {{ previousPage.title }}\r\n        </button>\r\n      </div>\r\n      <div class=\"nextButtonDiv\">\r\n        <button\r\n          class=\"md-2 rounded-pill navButton\"\r\n          type=\"button\"\r\n          (click)=\"onNavigateNext()\"\r\n          *ngIf=\"currentPageIndex < pages.length - 1\"\r\n        >\r\n          Next | {{ nextPage.title }}\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        </button>\r\n        <button\r\n          class=\"submitBtn me-md-2 rounded-pill\"\r\n          type=\"button\"\r\n          *ngIf=\"currentPageIndex == pages.length - 1\"\r\n          (click)=\"submitForm()\"\r\n        >\r\n          Submit\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".pageTitle{font-size:15px;font-weight:500}.pageTitleDiv{padding-left:3rem;padding-top:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:0rem 3rem 3rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{background:#084fff;color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}.tab-content,.row{background-color:#fff}\n"] }]
         }], propDecorators: { currentPageIndex: [{
                 type: Input
             }], pages: [{
@@ -2681,13 +2892,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], edit: [{
                 type: Input
+            }], subFormChange: [{
+                type: Output
             }] } });
 
 class SubmitFormComponent {
-    constructor(formService, toastr, router) {
+    constructor(formService, toastr) {
         this.formService = formService;
         this.toastr = toastr;
-        this.router = router;
         this.question = null;
         this.moduleName = '';
         this.edit = false;
@@ -2716,9 +2928,29 @@ class SubmitFormComponent {
         this.lastTab = false;
         this.questionAnswers = { answers: [], forms: [] };
         this.files = [];
-        const navigation = this.router.getCurrentNavigation();
-        this.submission = navigation?.extras.state?.['submission'];
-        console.log('submission', this.submission);
+        this.updateSubForm = (pages, updatedSubForm) => {
+            pages.forEach(page => {
+                page.rows.forEach((row) => {
+                    row.grid.forEach((element) => {
+                        if (element.entityType === 'SUBFORM' && element.element.id === updatedSubForm.formId) {
+                            // Update the existing subform with the new data
+                            element.element = updatedSubForm;
+                        }
+                        else if (element.entityType === 'SUBFORM' && element.element.id !== updatedSubForm.formId) {
+                            // Handle multiple subforms logic here if needed
+                        }
+                        else if (element.entityType === 'QUESTION' && element.element.childLogics) {
+                            // Recursively update child logics
+                            element.element.childLogics.forEach((logic) => {
+                                if (logic.showLogic) {
+                                    this.updateSubForm(logic.formElements, updatedSubForm);
+                                }
+                            });
+                        }
+                    });
+                });
+            });
+        };
     }
     ngOnInit() {
         if (this.edit && this.submissionId) {
@@ -2872,16 +3104,29 @@ class SubmitFormComponent {
                 }
                 else if (element.entityType === 'SUBFORM') {
                     const subformId = element.element.id;
-                    const subformQuestions = extractQuestions(element.element.formElements, subformId, true, forms.length);
-                    const subform = {
-                        formId: subformId,
-                        deletedSubmissions: [],
-                        submissions: [{
-                                submissionId: '',
-                                answers: subformQuestions.answers
-                            }]
-                    };
-                    forms.push(subform);
+                    const submissionId = element.element.submissionId;
+                    if (element.element.subFormStructure === 'single') {
+                        const subformQuestions = extractQuestions(element.element.formElements, subformId, true, forms.length);
+                        const subform = {
+                            formId: subformId,
+                            deletedSubmissions: [],
+                            submissions: [{
+                                    submissionId: submissionId,
+                                    answers: subformQuestions.answers
+                                }]
+                        };
+                        forms.push(subform);
+                    }
+                    else if (element.element.subFormStructure === 'multiple') {
+                        const subformQuestions = extractQuestions(element.element.formElements, subformId, true, forms.length);
+                        const existingSubform = forms.find(form => form.formId === subformId);
+                        const subform = {
+                            formId: subformId,
+                            deletedSubmissions: element.element.deletedSubmissions,
+                            submissions: element.element.submissions
+                        };
+                        forms.push(subform);
+                    }
                 }
             });
             return { answers: questions, forms: forms };
@@ -3077,13 +3322,16 @@ class SubmitFormComponent {
         }
         return { isValid: true, message: 'All required questions are answered.' };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitFormComponent, deps: [{ token: FormService }, { token: i2$3.ToastrService }, { token: i3$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubmitFormComponent, selector: "lib-submit-form", inputs: { moduleName: "moduleName", edit: "edit", submissionId: "submissionId" }, outputs: { submit: "submit" }, ngImport: i0, template: "<div class=\"outer-container\">\n  <div class=\"head container\">\n    <lib-header [name]=\"name\"></lib-header>\n  </div>\n  <div class=\"body container\">\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [currentPage]=\"currentPage\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n    ></lib-next-prev-navigation>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["name"] }, { kind: "component", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: ["pages", "currentPageIndex", "edit"], outputs: ["pageChanged", "submitEmit"] }, { kind: "component", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: ["currentPageIndex", "pages", "previousPage", "nextPage", "currentPage", "edit"], outputs: ["navigateNext", "navigatePrevious", "submitEmit"] }] }); }
+    updateSubFormWithSubmissions(event) {
+        this.updateSubForm(this.pages, event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitFormComponent, deps: [{ token: FormService }, { token: i2$3.ToastrService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubmitFormComponent, selector: "lib-submit-form", inputs: { moduleName: "moduleName", edit: "edit", submissionId: "submissionId" }, outputs: { submit: "submit" }, ngImport: i0, template: "<div class=\"outer-container\">\r\n  <div class=\"head container\">\r\n    <lib-header [name]=\"name\"></lib-header>\r\n  </div>\r\n  <div class=\"body container\">\r\n    <lib-navigation-tabs\r\n      *ngIf=\"navigation == 'TAB'\"\r\n      [pages]=\"pages\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      (pageChanged)=\"setCurrentPage($event)\"\r\n      (submitEmit)=\"submitForm()\"\r\n      [edit]=\"edit\"\r\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n    ></lib-navigation-tabs>\r\n    <lib-next-prev-navigation\r\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      [pages]=\"pages\"\r\n      [previousPage]=\"previousPage\"\r\n      [currentPage]=\"currentPage\"\r\n      [nextPage]=\"nextPage\"\r\n      (navigateNext)=\"navigateToNextPage()\"\r\n      (navigatePrevious)=\"navigateToPreviousPage()\"\r\n      (submitEmit)=\"submitForm()\"\r\n      [edit]=\"edit\"\r\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["name"] }, { kind: "component", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: ["pages", "currentPageIndex", "edit"], outputs: ["pageChanged", "submitEmit", "subFormChange"] }, { kind: "component", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: ["currentPageIndex", "pages", "previousPage", "nextPage", "currentPage", "edit"], outputs: ["navigateNext", "navigatePrevious", "submitEmit", "subFormChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-submit-form', template: "<div class=\"outer-container\">\n  <div class=\"head container\">\n    <lib-header [name]=\"name\"></lib-header>\n  </div>\n  <div class=\"body container\">\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [currentPage]=\"currentPage\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      (submitEmit)=\"submitForm()\"\n      [edit]=\"edit\"\n    ></lib-next-prev-navigation>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}\n"] }]
-        }], ctorParameters: function () { return [{ type: FormService }, { type: i2$3.ToastrService }, { type: i3$4.Router }]; }, propDecorators: { moduleName: [{
+            args: [{ selector: 'lib-submit-form', template: "<div class=\"outer-container\">\r\n  <div class=\"head container\">\r\n    <lib-header [name]=\"name\"></lib-header>\r\n  </div>\r\n  <div class=\"body container\">\r\n    <lib-navigation-tabs\r\n      *ngIf=\"navigation == 'TAB'\"\r\n      [pages]=\"pages\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      (pageChanged)=\"setCurrentPage($event)\"\r\n      (submitEmit)=\"submitForm()\"\r\n      [edit]=\"edit\"\r\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\r\n    ></lib-navigation-tabs>\r\n    <lib-next-prev-navigation\r\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      [pages]=\"pages\"\r\n      [previousPage]=\"previousPage\"\r\n      [currentPage]=\"currentPage\"\r\n      [nextPage]=\"nextPage\"\r\n      (navigateNext)=\"navigateToNextPage()\"\r\n      (navigatePrevious)=\"navigateToPreviousPage()\"\r\n      (submitEmit)=\"submitForm()\"\r\n      [edit]=\"edit\"\r\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\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}\n"] }]
+        }], ctorParameters: function () { return [{ type: FormService }, { type: i2$3.ToastrService }]; }, propDecorators: { moduleName: [{
                 type: Input
             }], edit: [{
                 type: Input
@@ -3109,11 +3357,11 @@ class FormSubmissionComponent {
         this.submitForm.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionComponent, deps: [{ token: DataService }], 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", submissionId: "submissionId" }, outputs: { submitForm: "submitForm" }, ngImport: i0, template: "<lib-submit-form\n  [moduleName]=\"formData.moduleName\"\n  [submissionId]=\"submissionId\"\n  [edit]=\"edit\"\n  (submit)=\"submit($event)\"\n></lib-submit-form>\n", styles: [""], dependencies: [{ kind: "component", type: SubmitFormComponent, selector: "lib-submit-form", inputs: ["moduleName", "edit", "submissionId"], outputs: ["submit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormSubmissionComponent, selector: "lib-formSubmission", inputs: { formData: "formData", edit: "edit", submissionId: "submissionId" }, outputs: { submitForm: "submitForm" }, ngImport: i0, template: "<lib-submit-form\r\n  [moduleName]=\"formData.moduleName\"\r\n  [submissionId]=\"submissionId\"\r\n  [edit]=\"edit\"\r\n  (submit)=\"submit($event)\"\r\n></lib-submit-form>\r\n", styles: [""], dependencies: [{ kind: "component", type: SubmitFormComponent, selector: "lib-submit-form", inputs: ["moduleName", "edit", "submissionId"], outputs: ["submit"] }] }); }
 }
 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\n  [moduleName]=\"formData.moduleName\"\n  [submissionId]=\"submissionId\"\n  [edit]=\"edit\"\n  (submit)=\"submit($event)\"\n></lib-submit-form>\n" }]
+            args: [{ selector: 'lib-formSubmission', template: "<lib-submit-form\r\n  [moduleName]=\"formData.moduleName\"\r\n  [submissionId]=\"submissionId\"\r\n  [edit]=\"edit\"\r\n  (submit)=\"submit($event)\"\r\n></lib-submit-form>\r\n" }]
         }], ctorParameters: function () { return [{ type: DataService }]; }, propDecorators: { formData: [{
                 type: Input
             }], edit: [{
@@ -3288,21 +3536,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class SubFormModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SubFormModule, declarations: [SubFormComponent], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SubFormModule, declarations: [SubFormComponent, MultipleSubformComponent, SubmissionModalComponent], imports: [CommonModule,
             FormFieldsModule,
-            LogicModule], exports: [SubFormComponent] }); }
+            LogicModule,
+            MatDialogModule], exports: [SubFormComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormModule, imports: [CommonModule,
             FormFieldsModule,
-            LogicModule] }); }
+            LogicModule,
+            MatDialogModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SubFormComponent],
+                    declarations: [SubFormComponent, MultipleSubformComponent, SubmissionModalComponent],
                     imports: [
                         CommonModule,
                         FormFieldsModule,
                         LogicModule,
+                        MatDialogModule
                     ],
                     exports: [SubFormComponent]
                 }]