@piserve-tech/form-submission 1.2.0 → 1.2.1

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

@@ -392,11 +392,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
             }] } });
@@ -435,6 +435,9 @@ class CheckBoxFieldsComponent {
         switch (this.optionType) {
             case 'OPTION':
                 this.customOptions = this.question.formElement.option.customOptions;
+                if (this.question.answer) {
+                    this.initializeCustomOption();
+                }
                 break;
             case 'LOOKUP':
                 this.lookupTable = this.question.formElement.option.lookupTable;
@@ -463,13 +466,13 @@ class CheckBoxFieldsComponent {
             this.minimumSelection = undefined;
             this.maximumSelection = undefined;
         }
-        if (this.question.answer) {
-            this.customOptions.forEach((option) => {
-                if (this.question.answer.find((a) => a.toString() === option.value)) {
-                    this.selectedOptions.push(option);
-                }
-            });
-        }
+    }
+    initializeCustomOption() {
+        this.customOptions.forEach((option) => {
+            if (this.question.answer.find((a) => a.toString() === option.value.toString())) {
+                this.selectedOptions.push(option);
+            }
+        });
     }
     onCheckboxChange(option, event) {
         if (this.selectionType === 'SINGLE') {
@@ -567,6 +570,9 @@ class CheckBoxFieldsComponent {
                 value: item.value,
                 label: item.label,
             }));
+            if (this.question.answer) {
+                this.initializeCustomOption();
+            }
         }, (error) => {
             console.error('HTTP Error:', error);
         });
@@ -579,6 +585,9 @@ class CheckBoxFieldsComponent {
                     value: item.value,
                     label: item.label,
                 }));
+                if (this.question.answer) {
+                    this.initializeCustomOption();
+                }
             }
             else {
                 console.error('Error fetching data from database:', response.message);
@@ -608,6 +617,9 @@ class CheckBoxFieldsComponent {
                 value: item[apiConfig.valueField],
                 label: item[apiConfig.labelField],
             }));
+            if (this.question.answer) {
+                this.initializeCustomOption();
+            }
         }, (error) => {
             console.error('HTTP Error:', error);
         });
@@ -668,11 +680,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 + 'Checkbox'\"\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 + 'Checkbox'\"\n      *ngIf=\"optionType == 'OPTION'\"\n      >{{ option.value }}</label\n    >\n    <label\n      class=\"formCheckLabel ms-2 mb-2\"\n      [for]=\"option.value + 'Checkbox'\"\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 + 'Checkbox'\"\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 + 'Checkbox'\"\n      *ngIf=\"optionType == 'OPTION'\"\n      >{{ option.value }}</label\n    >\n    <label\n      class=\"formCheckLabel ms-2 mb-2\"\n      [for]=\"option.value + 'Checkbox'\"\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
             }] } });
@@ -847,11 +859,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: [{
@@ -866,8 +878,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class DropDownFieldsComponent {
-    constructor(formService) {
+    constructor(formService, cdr) {
         this.formService = formService;
+        this.cdr = cdr;
         this.question = {};
         this.count = 0;
         this.required = false;
@@ -907,6 +920,9 @@ class DropDownFieldsComponent {
                     value: option.value,
                     image: '',
                 }));
+                if (this.question.answer) {
+                    this.initializeCustomOption();
+                }
                 break;
             case 'LOOKUP':
                 this.lookupTable = this.question.formElement.option.lookupTable;
@@ -923,13 +939,14 @@ class DropDownFieldsComponent {
             default:
                 console.warn('Unknown option type:', this.optionType);
         }
-        if (this.question.answer) {
-            this.customOptions.forEach((option) => {
-                if (this.question.answer.find((a) => a.toString() === option.value)) {
-                    this.selectedValue.push(option);
-                }
-            });
-        }
+    }
+    initializeCustomOption() {
+        this.customOptions.forEach((option) => {
+            if (this.question.answer.find((a) => a.toString() === option.value.toString())) {
+                this.selectedValue.push(option);
+            }
+        });
+        this.cdr.detectChanges();
     }
     transformDatabaseObject(database) {
         return {
@@ -952,6 +969,9 @@ class DropDownFieldsComponent {
                     value: item.value,
                     label: item.label,
                 }));
+                if (this.question.answer) {
+                    this.initializeCustomOption();
+                }
             }
             else {
                 console.error('Error fetching data from database:', response.message);
@@ -966,6 +986,9 @@ class DropDownFieldsComponent {
                 value: item.value,
                 label: item.label,
             }));
+            if (this.question.answer) {
+                this.initializeCustomOption();
+            }
         }, (error) => {
             console.error('HTTP Error:', error);
         });
@@ -978,6 +1001,9 @@ class DropDownFieldsComponent {
                 value: item[apiConfig.valueField],
                 label: item[apiConfig.labelField],
             }));
+            if (this.question.answer) {
+                this.initializeCustomOption();
+            }
         }, (error) => {
             console.error('HTTP Error:', error);
         });
@@ -1033,16 +1059,11 @@ class DropDownFieldsComponent {
         }
     }
     evaluateCondition(answer, condition, inputValue) {
-        const stringInputValue = Array.isArray(inputValue) ? inputValue.map(val => val.toString()) : inputValue;
         switch (condition) {
             case "!=":
-                return answer != stringInputValue;
+                return answer != inputValue;
             case "=":
-                return answer == stringInputValue;
-            case "IN":
-                return stringInputValue.includes(answer);
-            case "NOT IN":
-                return !(stringInputValue.includes(answer));
+                return answer == inputValue;
             default:
                 return false;
         }
@@ -1062,13 +1083,13 @@ class DropDownFieldsComponent {
                 return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownFieldsComponent, deps: [{ token: FormService }], 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.ɵ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\">\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"] }]
-        }], ctorParameters: function () { return [{ type: FormService }]; }, propDecorators: { question: [{
+            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
             }] } });
 
@@ -1092,12 +1113,10 @@ class FilePickerFieldsComponent {
         this.selectedFiles = [];
     }
     handleFileTypeNotAllowed(fileType) {
-        console.log(`File type not allowed in app: ${fileType}`);
         this.validationFailed = true;
         this.validationMessage = 'File type not allowed';
     }
     handleFileSize(fileType) {
-        console.log(`maximum limit app: ${fileType}`);
     }
     handleFinalArray(fileType) {
         const extractedData = fileType.map((item) => ({
@@ -1154,11 +1173,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
             }] } });
@@ -1222,11 +1241,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: [{
@@ -1295,11 +1314,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
             }] } });
@@ -1409,19 +1428,14 @@ class MobileFieldsComponent {
             this.question.formElement.validation.countryWiseValidation;
         this.questionId = this.question.id;
         this.loadCountry(this.questionId, this.currentPage, this.size, this.searchKey);
-        if (this.question.answer) {
-            this.initializeAnswer();
-        }
     }
     initializeAnswer() {
-        setTimeout(() => {
-            const [countryCode, mobileNumber] = this.question.answer.split(' ');
-            this.mobileNumber = mobileNumber || '';
-            const matchedCountry = this.countryDetails.find(country => country.value === countryCode);
-            if (matchedCountry) {
-                this.selectedCountry.push(matchedCountry);
-            }
-        }, 10000);
+        const [countryCode, mobileNumber] = this.question.answer.split(' ');
+        this.mobileNumber = mobileNumber || '';
+        const matchedCountry = this.countryDetails.find(country => country.value === countryCode);
+        if (matchedCountry) {
+            this.selectedCountry.push(matchedCountry);
+        }
     }
     onCountryChange() {
         this.validationFailed = false;
@@ -1468,6 +1482,9 @@ class MobileFieldsComponent {
             //   this.currentPage++;
             //   this.loadCountry(this.questionId, this.currentPage, this.size, this.searchKey);
             // }
+            if (this.question.answer) {
+                this.initializeAnswer();
+            }
         });
     }
     onScroll() {
@@ -1477,11 +1494,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
             }] } });
@@ -1567,11 +1584,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
             }] } });
@@ -1752,11 +1769,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
             }] } });
@@ -1776,8 +1793,7 @@ class RadioButtonFieldsComponent {
         this.customOptions = [];
         this.database = {};
         this.api = {};
-        this.apiOptions = []; // Assuming you have a property to store API options
-        this.selectedOption = '';
+        this.apiOptions = [];
         this.validationMessage = '';
     }
     ngOnInit() {
@@ -1792,6 +1808,7 @@ class RadioButtonFieldsComponent {
         switch (this.optionType) {
             case 'OPTION':
                 this.customOptions = this.question.formElement.option.customOptions;
+                this.initializeOption();
                 break;
             case 'LOOKUP':
                 this.lookupTable = this.question.formElement.option.lookupTable;
@@ -1808,7 +1825,26 @@ class RadioButtonFieldsComponent {
             default:
                 console.warn('Unknown option type:', this.optionType);
         }
-        this.selectedOption = this.question.answer;
+    }
+    initializeOption() {
+        if (this.question.answer) {
+            const dataType = typeof this.customOptions[0]?.value;
+            let convertedAnswer;
+            switch (dataType) {
+                case 'number':
+                    convertedAnswer = Number(this.question.answer);
+                    break;
+                case 'boolean':
+                    convertedAnswer = (this.question.answer === 'true');
+                    break;
+                case 'string':
+                    convertedAnswer = String(this.question.answer);
+                    break;
+                default:
+                    convertedAnswer = this.question.answer;
+            }
+            this.selectedOption = convertedAnswer;
+        }
     }
     fetchDataFromLookup() {
         this.formService.fetchDataFromLookup(this.lookupTable).subscribe((response) => {
@@ -1816,6 +1852,7 @@ class RadioButtonFieldsComponent {
                 value: item.value,
                 label: item.label,
             }));
+            this.initializeOption();
         }, (error) => {
             console.error('HTTP Error:', error);
         });
@@ -1828,6 +1865,7 @@ class RadioButtonFieldsComponent {
                     value: item.value,
                     label: item.label,
                 }));
+                this.initializeOption();
             }
             else {
                 console.error('Error fetching data from database:', response.message);
@@ -1857,6 +1895,7 @@ class RadioButtonFieldsComponent {
                 value: item[apiConfig.valueField],
                 label: item[apiConfig.labelField],
             }));
+            this.initializeOption();
         }, (error) => {
             console.error('HTTP Error:', error);
         });
@@ -1868,7 +1907,7 @@ class RadioButtonFieldsComponent {
         this.question.answer = this.selectedOption;
         this.validationFailed = false;
         this.validationMessage = '';
-        if (this.required && this.selectedOption == '') {
+        if (this.required && !this.selectedOption) {
             this.validationFailed = true;
             this.validationMessage = 'This is a required question';
             this.question.validation = false;
@@ -1903,11 +1942,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
             }] } });
@@ -1986,11 +2025,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
             }] } });
@@ -2043,11 +2082,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
             }] } });
@@ -2069,11 +2108,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
             }] } });
@@ -2121,11 +2160,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
             }] } });
@@ -2145,11 +2184,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
             }] } });
@@ -2197,11 +2236,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
             }] } });
@@ -2319,11 +2358,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
             }] } });
@@ -2368,11 +2407,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
             }] } });
@@ -2421,11 +2460,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
             }] } });
@@ -2435,11 +2474,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
             }] } });
@@ -2449,11 +2488,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
             }] } });
@@ -2463,11 +2502,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
             }] } });
@@ -2477,11 +2516,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
             }] } });
@@ -2491,11 +2530,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
             }] } });
@@ -2515,11 +2554,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: [{
@@ -2535,11 +2574,11 @@ class SubFormComponent {
         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" }, 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 *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=\"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-first-child *ngIf=\"formElement.element.childLogics\"\r\n                [childLogics]=\"formElement.element.childLogics\"></lib-first-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>\r\n          \r\n        \r\n          \r\n\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"] }] }); }
 }
 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 *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=\"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-first-child *ngIf=\"formElement.element.childLogics\"\r\n                [childLogics]=\"formElement.element.childLogics\"></lib-first-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>\r\n          \r\n        \r\n          \r\n\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
             }] } });
@@ -2551,11 +2590,11 @@ class FormElementsComponent {
         this.edit = false;
     }
     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" }, 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\"></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"] }] }); }
 }
 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\"></lib-sub-form>\r\n</div>\r\n" }]
         }], propDecorators: { grid: [{
                 type: Input
             }], currentPageIndex: [{
@@ -2579,11 +2618,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" }, 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            ></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"] }] }); }
 }
 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            ></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: [{
@@ -2618,11 +2657,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" }, 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        ></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"] }] }); }
 }
 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        ></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: [{
@@ -2673,7 +2712,7 @@ class SubmitFormComponent {
         this.currentPage = {};
         this.nextPage = {};
         this.lastTab = false;
-        this.questionAnswers = [];
+        this.questionAnswers = { answers: [], forms: [] };
         this.files = [];
     }
     ngOnInit() {
@@ -2779,8 +2818,9 @@ class SubmitFormComponent {
     }
     generateQuestionAnswers() {
         this.files = [];
-        const extractQuestions = (formElements) => {
+        const extractQuestions = (formElements, parentFormId = null, isInSubForm = false, subFormIndex = 0) => {
             const questions = [];
+            const forms = [];
             formElements.forEach((element) => {
                 if (element.entityType === 'QUESTION') {
                     let baseQuestion;
@@ -2790,8 +2830,11 @@ class SubmitFormComponent {
                             answer: ''
                         };
                         if (Array.isArray(element.element.answer)) {
+                            const questionId = isInSubForm
+                                ? `${parentFormId}_${subFormIndex}_${element.element.id}`
+                                : element.element.id;
                             this.files.push({
-                                questionId: element.element.id,
+                                questionId: questionId,
                                 file: element.element.answer,
                             });
                         }
@@ -2815,29 +2858,46 @@ class SubmitFormComponent {
                     if (element.element.childLogics) {
                         for (let logic of element.element.childLogics) {
                             if (logic.showLogic) {
-                                questions.push(...extractQuestions(logic.formElements));
+                                const result = extractQuestions(logic.formElements, parentFormId, isInSubForm, subFormIndex);
+                                questions.push(...result.answers);
+                                forms.push(...result.forms);
                             }
                         }
                     }
                 }
                 else if (element.entityType === 'SUBFORM') {
-                    if (element.element.formElements) {
-                        questions.push(...extractQuestions(element.element.formElements));
-                    }
+                    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);
                 }
             });
-            return questions;
+            return { answers: questions, forms: forms };
         };
         const processPages = (pages) => {
             const questions = [];
+            const forms = [];
             pages.forEach((page) => {
                 page.rows.forEach((row) => {
-                    questions.push(...extractQuestions(row.grid));
+                    const result = extractQuestions(row.grid);
+                    questions.push(...result.answers);
+                    forms.push(...result.forms);
                 });
             });
-            return questions;
+            return { answers: questions, forms: forms };
+        };
+        const result = processPages(this.pages);
+        this.questionAnswers = {
+            answers: result.answers,
+            forms: result.forms
         };
-        this.questionAnswers = processPages(this.pages);
     }
     submitForm() {
         let validationResponse = this.validateForm(this.pages);
@@ -3013,11 +3073,11 @@ 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 }], 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"] }] }); }
+    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    ></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    ></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"] }, { kind: "component", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: ["currentPageIndex", "pages", "previousPage", "nextPage", "currentPage", "edit"], outputs: ["navigateNext", "navigatePrevious", "submitEmit"] }] }); }
 }
 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"] }]
+            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    ></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    ></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: [{
@@ -3044,11 +3104,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: [{