master-control 0.4.55 → 0.4.56

package/fesm2022/master-control.mjs

@@ -3925,6 +3925,9 @@ class MedialQuestionsComponent {
         "controlType": "hrLine"
     };
     previewFile = null;
+    // Validation state tracking
+    fieldErrors = {};
+    fieldTouched = {};
     constructor(ngZone, masterService) {
         this.ngZone = ngZone;
         this.masterService = masterService;
@@ -4793,6 +4796,71 @@ class MedialQuestionsComponent {
             this.saveQuestionDetails();
         }
     }
+    validateField(questionId, question) {
+        this.fieldTouched[questionId] = true;
+        const validators = this.getField(question)?.validators;
+        const value = this.personUwAnswers[questionId];
+        // Initialize errors object for this field
+        this.fieldErrors[questionId] = {};
+        // Required validation
+        if (validators?.isRequired && this.checkIfValueIsEmpty(value)) {
+            this.fieldErrors[questionId]['required'] = true;
+        }
+        // Skip other validations if value is empty
+        if (this.checkIfValueIsEmpty(value))
+            return;
+        // Type validation from JSON (Numeric, AlphaNumeric)
+        if (validators?.pattern) {
+            const regex = new RegExp(validators.pattern);
+            if (!regex.test(value.toString())) {
+                this.fieldErrors[questionId]['type'] = true;
+            }
+        }
+        // MinValue validation from JSON
+        if (validators?.minLength && validators.maxLength && value) {
+            const minVal = validators.minLength;
+            const maxVal = validators.maxLength;
+            if (validators.pattern == '^[0-9]+$') {
+                // For numeric, compare as numbers
+                if (parseInt(value) < minVal || parseInt(value) > maxVal) {
+                    this.fieldErrors[questionId]['range'] = true;
+                }
+            }
+            else {
+                // For other types, compare string length
+                if (value.toString().length < minVal || value.toString().length > maxVal) {
+                    this.fieldErrors[questionId]['range'] = true;
+                }
+            }
+        }
+        console.log('Validation errors for', questionId, this.fieldErrors[questionId]);
+    }
+    hasAnyFieldError(questionId) {
+        return this.fieldTouched[questionId] &&
+            this.fieldErrors[questionId] &&
+            Object.keys(this.fieldErrors[questionId]).length > 0;
+    }
+    getFieldErrorMessage(questionId, question) {
+        if (!this.fieldTouched[questionId] || !this.fieldErrors[questionId])
+            return '';
+        if (this.fieldErrors[questionId]) {
+            const errors = this.fieldErrors[questionId];
+            const validators = question?.field?.validators;
+            if (errors['required']) {
+                if (question?.field?.controlType === 'radio') {
+                    return validators?.requiredMessage || `Please select any one option`;
+                }
+                return validators?.requiredMessage || `Please enter ${question?.questionText || 'this field'}`;
+            }
+            if (errors['type']) {
+                return validators?.patternMessage || 'Invalid input type';
+            }
+            if (errors['range']) {
+                return `Please enter a valid ${question?.questionText || 'value'}`;
+            }
+        }
+        return '';
+    }
     checkIfValueIsEmpty(value) {
         if (typeof value === 'string') {
             value = value.trim();
@@ -5051,6 +5119,14 @@ class MedialQuestionsComponent {
         }
         this.questionList.sort((a, b) => a['step'] - b['step']);
         console.log('questions list', this.questionList);
+        if (this.personUwAnswers) {
+            Object.keys(this.personUwAnswers).forEach((questionId) => {
+                const errorsForField = this.fieldErrors[questionId];
+                if (errorsForField && Object.keys(errorsForField).length > 0) {
+                    this.personUwAnswers[questionId] = '';
+                }
+            });
+        }
         console.log('questions answers', this.personUwAnswers);
         this.saveQuestionDetails();
         this.questionsValueChange.emit(this.personUwAnswers);
@@ -6331,7 +6407,7 @@ class MedialQuestionsComponent {
         return window;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, deps: [{ token: i0.NgZone }, { token: MasterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { clusterId: { classPropertyName: "clusterId", publicName: "clusterId", isSignal: true, isRequired: false, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: true, isRequired: false, transformFunction: null }, personUWOpenQuoteResponse: { classPropertyName: "personUWOpenQuoteResponse", publicName: "personUWOpenQuoteResponse", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, personType: { classPropertyName: "personType", publicName: "personType", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { questionsValueChange: "questionsValueChange" }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div *ngFor=\"let section of questionList\">\n    <div\n      *ngIf=\"\n        !checkIfValueIsEmpty(section['questions']) &&\n        section['showSection']\n      \"\n      class=\"card p-3 mb-4\"\n      id=\"personUwMedicalQuestions\"\n    >\n      <h6 class=\"page-title bold-label\">\n        {{ getTitleCase(section[\"sectionName\"]) }}\n      </h6>\n      <lib-hr-line [field]=\"horizontalLineObj\" />\n      <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n        <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n          <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n          <h3 [innerHTML]=\"questions['questionText']\"></h3>\n        </div> -->\n\n        <div\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'FREE TEXT' &&\n            questions['cammundaQuestionCode'] !== 'QHT' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <!-- <label class=\"field-lable d-block\"\n            >{{ questions[\"questionText\"] }}\n            <span\n              *ngIf=\"\n                questions.optionalQuestion === 'N'\n              \"\n              style=\"color: #ee0000\"\n              >&#42;</span\n            >\n          </label> -->\n          <div class=\"col-12 px-0 my-1\">\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\n          </div>\n        </div>\n\n        <div\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'HEIGHTINPUT' &&\n            questions['cammundaQuestionCode'] === 'QHTF' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <label class=\"card-topic d-block field-lable\"\n            >Height\n            <span\n              style=\"color: #ee0000\"\n              >&#42;</span\n            >\n          </label>\n          <div\n            [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n            id=\"medicalQuestionsHeightInput\"\n          >\n            <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n              <div class=\"col-7 py-0 heightInputs\">\n                <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHT']['field']\"   />\n              </div>\n              <div class=\"col-5\">\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n              </div>\n            </div>\n            <div\n              class=\"row\"\n              *ngIf=\"\n                personUwAnswers[\n                  'medicalQuestionsHeightUnit'\n                ] === 'FEET'\n              \"\n            >\n              <div class=\"col-4 py-0 my-1\">\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTF']['field']\" />\n              </div>\n              <div class=\"col-4 py-0 my-1\">\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTI']['field']\" />\n              </div>\n              <div\n                class=\"col-4 py-0 my-1\"\n              >\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          class=\"row mt-0 pt-0\"\n          *ngIf=\"\n            questions['questionType'] === 'MAP' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n\n\n          <div class=\"map-container\">\n            <div class=\"address-search-container mb-3\">\n\n    <div class=\"row mb-3\">\n      <div class=\"col-6\">\n        <label class=\"form-label card-topic\">Longitude</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          autocomplete=\"off\"\n          [(ngModel)]=\"longitude\"\n          placeholder=\"Enter longitude\"\n          step=\"any\"\n          readonly\n        >\n      </div>\n      <div class=\"col-6\">\n        <label class=\"form-label card-topic\">Latitude</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          autocomplete=\"off\"\n          [(ngModel)]=\"latitude\"\n          placeholder=\"Enter latitude\"\n          step=\"any\"\n          readonly\n        >\n      </div>\n    </div>\n\n      <input\n        #addressInput\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"Search for address\"\n        (keyup)=\"onAddressInputKeyup($event)\"\n        (focus)=\"showDropdown = true\"\n        (blur)=\"onInputBlur()\"\n        autocomplete=\"off\"\n      >\n      <div\n    *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n    class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n    style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\"\n  >\n    <div\n      *ngFor=\"let suggestion of addressSuggestions; let i = index\"\n      class=\"dropdown-item p-2\"\n      style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\n      (mousedown)=\"selectAddress(suggestion)\"\n      (mouseenter)=\"hoveredIndex = i\"\n      [class.bg-light]=\"hoveredIndex === i\"\n    >\n      <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n      <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n    </div>\n  </div>\n      <small class=\"text-muted\">Start typing to search for addresses</small>\n    </div>\n            <google-map [center]=\"center\" [zoom]=\"zoom\">\n              <map-marker [position]=\"currentCoordinates\"></map-marker>\n            </google-map>\n          </div>\n        </div>\n\n\n        <div\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            (questions['questionType'] === 'RADIO BUTTON' ||\n              questions['questionType'] === 'ADDMORE') &&\n              questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n        </div>\n\n        <div\n          class=\"my-1\"\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'CHECKBOX' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\n        </div>\n\n        <div\n          class=\"my-1\"\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'DECLARATION' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n        </div>\n\n        <div\n          class=\"my-1\"\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'DROPDOWN' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\n        </div>\n\n        <div\n          class=\"my-1\"\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'CALENDAR' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\n        </div>\n\n        <!-- <div\n          class=\"\"\n          *ngIf=\"\n            questions['questionType'] === 'HEIGHTINPUT' &&\n            questions['cammundaQuestionCode'] === 'QHTF' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n        </div> -->\n        <div\n          class=\"my-1\"\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'DOCUPLOAD' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\" />\n          <lib-file-preview\n            *ngIf=\"previewFile\"\n            [field]=\"questions['field']\"\n            [file]=\"previewFile\"\n            (closed)=\"closeFilePreview()\">\n          </lib-file-preview>\n        </div>\n\n\n        <div\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'PASSPORT_UPLOAD' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n        <!-- pending -->\n        </div>\n      </div>\n    </div>\n  </div>\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["documentUploaderField", "openQuoteImageObj", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i4$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "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"] }, { kind: "directive", type: i4$3.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: FilePreviewComponent, selector: "lib-file-preview", inputs: ["field", "file"], outputs: ["closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { clusterId: { classPropertyName: "clusterId", publicName: "clusterId", isSignal: true, isRequired: false, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: true, isRequired: false, transformFunction: null }, personUWOpenQuoteResponse: { classPropertyName: "personUWOpenQuoteResponse", publicName: "personUWOpenQuoteResponse", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, personType: { classPropertyName: "personType", publicName: "personType", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { questionsValueChange: "questionsValueChange" }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let section of questionList\">\n  <div *ngIf=\"\n        !checkIfValueIsEmpty(section['questions']) &&\n        section['showSection']\n      \" class=\"card p-3 mb-4\" id=\"personUwMedicalQuestions\">\n    <h6 class=\"page-title bold-label\">\n      {{ getTitleCase(section[\"sectionName\"]) }}\n    </h6>\n    <lib-hr-line [field]=\"horizontalLineObj\" />\n    <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n      <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n          <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n          <h3 [innerHTML]=\"questions['questionText']\"></h3>\n        </div> -->\n\n      <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'FREE TEXT' &&\n            questions['cammundaQuestionCode'] !== 'QHT' &&\n            questions['isShowQuestionInUI']\n          \">\n        <div class=\"col-12 px-0 my-1\">\n          <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n            (blur)=\"validateField(questions.questionId, questions); removeSubQuestionValues()\" />\n          <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n            {{ getFieldErrorMessage(questions.questionId, questions) }}\n          </div>\n        </div>\n      </div>\n\n      <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'HEIGHTINPUT' &&\n            questions['cammundaQuestionCode'] === 'QHTF' &&\n            questions['isShowQuestionInUI']\n          \">\n        <label class=\"card-topic d-block field-lable\">Height\n          <span style=\"color: #ee0000\">&#42;</span>\n        </label>\n        <div [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n          id=\"medicalQuestionsHeightInput\" (focusout)=\"validateField(questions.questionId, questions)\">\n          <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n            <div class=\"col-7 py-0 heightInputs\">\n              <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\"\n                (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues()\"\n                [field]=\"medQuestionObj['QHT']['field']\" />\n            </div>\n            <div class=\"col-5\">\n              <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n                [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n                (ngModelChange)=\"validateField(questions.questionId, questions); checkAndUpdateHeightUnit()\" />\n            </div>\n          </div>\n          <div class=\"row\" *ngIf=\"\n                personUwAnswers[\n                  'medicalQuestionsHeightUnit'\n                ] === 'FEET'\n              \">\n            <div class=\"col-4 py-0 my-1\">\n              <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\"\n                (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues()\"\n                [field]=\"medQuestionObj['QHTF']['field']\" />\n            </div>\n            <div class=\"col-4 py-0 my-1\">\n              <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\"\n                (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues()\"\n                [field]=\"medQuestionObj['QHTI']['field']\" />\n            </div>\n            <div class=\"col-4 py-0 my-1\">\n              <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n                [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n                (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n            </div>\n          </div>\n          <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n            {{ getFieldErrorMessage(questions.questionId, questions) }}\n          </div>\n        </div>\n      </div>\n      <div class=\"row mt-0 pt-0\" *ngIf=\"\n            questions['questionType'] === 'MAP' &&\n            questions['isShowQuestionInUI']\n          \">\n\n\n        <div class=\"map-container\">\n          <div class=\"address-search-container mb-3\">\n\n            <div class=\"row mb-3\">\n              <div class=\"col-6\">\n                <label class=\"form-label card-topic\">Longitude</label>\n                <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"longitude\"\n                  placeholder=\"Enter longitude\" step=\"any\" readonly\n                  (blur)=\"validateField(questions.questionId, questions)\">\n              </div>\n              <div class=\"col-6\">\n                <label class=\"form-label card-topic\">Latitude</label>\n                <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"latitude\"\n                  placeholder=\"Enter latitude\" step=\"any\" readonly\n                  (blur)=\"validateField(questions.questionId, questions)\">\n              </div>\n            </div>\n\n            <input #addressInput type=\"text\" class=\"form-control\" placeholder=\"Search for address\"\n              (keyup)=\"onAddressInputKeyup($event)\" (focus)=\"showDropdown = true\" (blur)=\"onInputBlur()\"\n              autocomplete=\"off\">\n            <div *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n              class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n              style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n              <div *ngFor=\"let suggestion of addressSuggestions; let i = index\" class=\"dropdown-item p-2\"\n                style=\"cursor: pointer; border-bottom: 1px solid #eee;\" (mousedown)=\"selectAddress(suggestion)\"\n                (mouseenter)=\"hoveredIndex = i\" [class.bg-light]=\"hoveredIndex === i\">\n                <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n                <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n              </div>\n            </div>\n            <small class=\"text-muted\">Start typing to search for addresses</small>\n          </div>\n          <google-map [center]=\"center\" [zoom]=\"zoom\">\n            <map-marker [position]=\"currentCoordinates\"></map-marker>\n          </google-map>\n        </div>\n      </div>\n\n\n      <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            (questions['questionType'] === 'RADIO BUTTON' ||\n              questions['questionType'] === 'ADDMORE') &&\n              questions['isShowQuestionInUI']\n          \">\n        <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n          (blur)=\"validateField(questions.questionId, questions)\"\n          (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues()\"\n          [field]=\"questions['field']\" />\n        <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n          {{ getFieldErrorMessage(questions.questionId, questions) }}\n        </div>\n      </div>\n\n      <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'CHECKBOX' &&\n            questions['isShowQuestionInUI']\n          \">\n        <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n          (blur)=\"validateField(questions.questionId, questions)\"\n          (ngModelChange)=\"validateField(questions.questionId, questions); valueChangeForMultiselect(questions)\"\n          [field]=\"questions['field']\" />\n        <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n          {{ getFieldErrorMessage(questions.questionId, questions) }}\n        </div>\n      </div>\n\n      <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'DECLARATION' &&\n            questions['isShowQuestionInUI']\n          \">\n        <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n          (blur)=\"validateField(questions.questionId, questions)\"\n          (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues()\"\n          [field]=\"questions['field']\" />\n        <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n          {{ getFieldErrorMessage(questions.questionId, questions) }}\n        </div>\n      </div>\n\n      <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'DROPDOWN' &&\n            questions['isShowQuestionInUI']\n         \" (focusout)=\"validateField(questions.questionId, questions)\">\n        <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n          (blur)=\"validateField(questions.questionId, questions)\"\n          (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues()\" />\n        <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n          {{ getFieldErrorMessage(questions.questionId, questions) }}\n        </div>\n      </div>\n\n      <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'CALENDAR' &&\n            questions['isShowQuestionInUI']\n          \">\n        <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n          (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues()\" />\n        <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n          {{ getFieldErrorMessage(questions.questionId, questions) }}\n        </div>\n      </div>\n\n      <!-- <div\n          class=\"\"\n          *ngIf=\"\n            questions['questionType'] === 'HEIGHTINPUT' &&\n            questions['cammundaQuestionCode'] === 'QHTF' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n        </div> -->\n      <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'DOCUPLOAD' &&\n            questions['isShowQuestionInUI']\n          \">\n        <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\"\n          (blur)=\"validateField(questions.questionId, questions);\" />\n        <lib-file-preview *ngIf=\" previewFile\" [field]=\"questions['field']\" [file]=\"previewFile\"\n          (closed)=\"closeFilePreview()\">\n        </lib-file-preview>\n      </div>\n\n\n      <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'PASSPORT_UPLOAD' &&\n            questions['isShowQuestionInUI']\n          \">\n        <!-- pending -->\n      </div>\n    </div>\n  </div>\n</div>", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}.error-message{font-size:12px;color:#dc3545;margin-top:4px;font-weight:400}.text-danger{color:#dc3545!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["documentUploaderField", "openQuoteImageObj", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i4$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "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"] }, { kind: "directive", type: i4$3.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: FilePreviewComponent, selector: "lib-file-preview", inputs: ["field", "file"], outputs: ["closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, decorators: [{
             type: Component,
@@ -6349,7 +6425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         GoogleMapsModule,
                         HrLineComponent,
                         FilePreviewComponent
-                    ], template: "\n<div *ngFor=\"let section of questionList\">\n    <div\n      *ngIf=\"\n        !checkIfValueIsEmpty(section['questions']) &&\n        section['showSection']\n      \"\n      class=\"card p-3 mb-4\"\n      id=\"personUwMedicalQuestions\"\n    >\n      <h6 class=\"page-title bold-label\">\n        {{ getTitleCase(section[\"sectionName\"]) }}\n      </h6>\n      <lib-hr-line [field]=\"horizontalLineObj\" />\n      <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n        <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n          <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n          <h3 [innerHTML]=\"questions['questionText']\"></h3>\n        </div> -->\n\n        <div\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'FREE TEXT' &&\n            questions['cammundaQuestionCode'] !== 'QHT' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <!-- <label class=\"field-lable d-block\"\n            >{{ questions[\"questionText\"] }}\n            <span\n              *ngIf=\"\n                questions.optionalQuestion === 'N'\n              \"\n              style=\"color: #ee0000\"\n              >&#42;</span\n            >\n          </label> -->\n          <div class=\"col-12 px-0 my-1\">\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\n          </div>\n        </div>\n\n        <div\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'HEIGHTINPUT' &&\n            questions['cammundaQuestionCode'] === 'QHTF' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <label class=\"card-topic d-block field-lable\"\n            >Height\n            <span\n              style=\"color: #ee0000\"\n              >&#42;</span\n            >\n          </label>\n          <div\n            [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n            id=\"medicalQuestionsHeightInput\"\n          >\n            <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n              <div class=\"col-7 py-0 heightInputs\">\n                <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHT']['field']\"   />\n              </div>\n              <div class=\"col-5\">\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n              </div>\n            </div>\n            <div\n              class=\"row\"\n              *ngIf=\"\n                personUwAnswers[\n                  'medicalQuestionsHeightUnit'\n                ] === 'FEET'\n              \"\n            >\n              <div class=\"col-4 py-0 my-1\">\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTF']['field']\" />\n              </div>\n              <div class=\"col-4 py-0 my-1\">\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTI']['field']\" />\n              </div>\n              <div\n                class=\"col-4 py-0 my-1\"\n              >\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        <div\n          class=\"row mt-0 pt-0\"\n          *ngIf=\"\n            questions['questionType'] === 'MAP' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n\n\n          <div class=\"map-container\">\n            <div class=\"address-search-container mb-3\">\n\n    <div class=\"row mb-3\">\n      <div class=\"col-6\">\n        <label class=\"form-label card-topic\">Longitude</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          autocomplete=\"off\"\n          [(ngModel)]=\"longitude\"\n          placeholder=\"Enter longitude\"\n          step=\"any\"\n          readonly\n        >\n      </div>\n      <div class=\"col-6\">\n        <label class=\"form-label card-topic\">Latitude</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          autocomplete=\"off\"\n          [(ngModel)]=\"latitude\"\n          placeholder=\"Enter latitude\"\n          step=\"any\"\n          readonly\n        >\n      </div>\n    </div>\n\n      <input\n        #addressInput\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"Search for address\"\n        (keyup)=\"onAddressInputKeyup($event)\"\n        (focus)=\"showDropdown = true\"\n        (blur)=\"onInputBlur()\"\n        autocomplete=\"off\"\n      >\n      <div\n    *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n    class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n    style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\"\n  >\n    <div\n      *ngFor=\"let suggestion of addressSuggestions; let i = index\"\n      class=\"dropdown-item p-2\"\n      style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\n      (mousedown)=\"selectAddress(suggestion)\"\n      (mouseenter)=\"hoveredIndex = i\"\n      [class.bg-light]=\"hoveredIndex === i\"\n    >\n      <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n      <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n    </div>\n  </div>\n      <small class=\"text-muted\">Start typing to search for addresses</small>\n    </div>\n            <google-map [center]=\"center\" [zoom]=\"zoom\">\n              <map-marker [position]=\"currentCoordinates\"></map-marker>\n            </google-map>\n          </div>\n        </div>\n\n\n        <div\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            (questions['questionType'] === 'RADIO BUTTON' ||\n              questions['questionType'] === 'ADDMORE') &&\n              questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n        </div>\n\n        <div\n          class=\"my-1\"\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'CHECKBOX' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\n        </div>\n\n        <div\n          class=\"my-1\"\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'DECLARATION' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n        </div>\n\n        <div\n          class=\"my-1\"\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'DROPDOWN' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\n        </div>\n\n        <div\n          class=\"my-1\"\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'CALENDAR' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\n        </div>\n\n        <!-- <div\n          class=\"\"\n          *ngIf=\"\n            questions['questionType'] === 'HEIGHTINPUT' &&\n            questions['cammundaQuestionCode'] === 'QHTF' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n        </div> -->\n        <div\n          class=\"my-1\"\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'DOCUPLOAD' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n          <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\" />\n          <lib-file-preview\n            *ngIf=\"previewFile\"\n            [field]=\"questions['field']\"\n            [file]=\"previewFile\"\n            (closed)=\"closeFilePreview()\">\n          </lib-file-preview>\n        </div>\n\n\n        <div\n          [ngClass]=\"questions?.field?.cssClass\"\n          *ngIf=\"\n            questions['questionType'] === 'PASSPORT_UPLOAD' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n        <!-- pending -->\n        </div>\n      </div>\n    </div>\n  </div>\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}\n"] }]
+                    ], template: "<div *ngFor=\"let section of questionList\">\n  <div *ngIf=\"\n        !checkIfValueIsEmpty(section['questions']) &&\n        section['showSection']\n      \" class=\"card p-3 mb-4\" id=\"personUwMedicalQuestions\">\n    <h6 class=\"page-title bold-label\">\n      {{ getTitleCase(section[\"sectionName\"]) }}\n    </h6>\n    <lib-hr-line [field]=\"horizontalLineObj\" />\n    <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n      <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n          <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n          <h3 [innerHTML]=\"questions['questionText']\"></h3>\n        </div> -->\n\n      <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'FREE TEXT' &&\n            questions['cammundaQuestionCode'] !== 'QHT' &&\n            questions['isShowQuestionInUI']\n          \">\n        <div class=\"col-12 px-0 my-1\">\n          <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n            (blur)=\"validateField(questions.questionId, questions); removeSubQuestionValues()\" />\n          <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n            {{ getFieldErrorMessage(questions.questionId, questions) }}\n          </div>\n        </div>\n      </div>\n\n      <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'HEIGHTINPUT' &&\n            questions['cammundaQuestionCode'] === 'QHTF' &&\n            questions['isShowQuestionInUI']\n          \">\n        <label class=\"card-topic d-block field-lable\">Height\n          <span style=\"color: #ee0000\">&#42;</span>\n        </label>\n        <div [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n          id=\"medicalQuestionsHeightInput\" (focusout)=\"validateField(questions.questionId, questions)\">\n          <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n            <div class=\"col-7 py-0 heightInputs\">\n              <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\"\n                (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues()\"\n                [field]=\"medQuestionObj['QHT']['field']\" />\n            </div>\n            <div class=\"col-5\">\n              <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n                [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n                (ngModelChange)=\"validateField(questions.questionId, questions); checkAndUpdateHeightUnit()\" />\n            </div>\n          </div>\n          <div class=\"row\" *ngIf=\"\n                personUwAnswers[\n                  'medicalQuestionsHeightUnit'\n                ] === 'FEET'\n              \">\n            <div class=\"col-4 py-0 my-1\">\n              <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\"\n                (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues()\"\n                [field]=\"medQuestionObj['QHTF']['field']\" />\n            </div>\n            <div class=\"col-4 py-0 my-1\">\n              <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\"\n                (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues()\"\n                [field]=\"medQuestionObj['QHTI']['field']\" />\n            </div>\n            <div class=\"col-4 py-0 my-1\">\n              <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n                [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n                (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n            </div>\n          </div>\n          <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n            {{ getFieldErrorMessage(questions.questionId, questions) }}\n          </div>\n        </div>\n      </div>\n      <div class=\"row mt-0 pt-0\" *ngIf=\"\n            questions['questionType'] === 'MAP' &&\n            questions['isShowQuestionInUI']\n          \">\n\n\n        <div class=\"map-container\">\n          <div class=\"address-search-container mb-3\">\n\n            <div class=\"row mb-3\">\n              <div class=\"col-6\">\n                <label class=\"form-label card-topic\">Longitude</label>\n                <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"longitude\"\n                  placeholder=\"Enter longitude\" step=\"any\" readonly\n                  (blur)=\"validateField(questions.questionId, questions)\">\n              </div>\n              <div class=\"col-6\">\n                <label class=\"form-label card-topic\">Latitude</label>\n                <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"latitude\"\n                  placeholder=\"Enter latitude\" step=\"any\" readonly\n                  (blur)=\"validateField(questions.questionId, questions)\">\n              </div>\n            </div>\n\n            <input #addressInput type=\"text\" class=\"form-control\" placeholder=\"Search for address\"\n              (keyup)=\"onAddressInputKeyup($event)\" (focus)=\"showDropdown = true\" (blur)=\"onInputBlur()\"\n              autocomplete=\"off\">\n            <div *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n              class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n              style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n              <div *ngFor=\"let suggestion of addressSuggestions; let i = index\" class=\"dropdown-item p-2\"\n                style=\"cursor: pointer; border-bottom: 1px solid #eee;\" (mousedown)=\"selectAddress(suggestion)\"\n                (mouseenter)=\"hoveredIndex = i\" [class.bg-light]=\"hoveredIndex === i\">\n                <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n                <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n              </div>\n            </div>\n            <small class=\"text-muted\">Start typing to search for addresses</small>\n          </div>\n          <google-map [center]=\"center\" [zoom]=\"zoom\">\n            <map-marker [position]=\"currentCoordinates\"></map-marker>\n          </google-map>\n        </div>\n      </div>\n\n\n      <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            (questions['questionType'] === 'RADIO BUTTON' ||\n              questions['questionType'] === 'ADDMORE') &&\n              questions['isShowQuestionInUI']\n          \">\n        <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n          (blur)=\"validateField(questions.questionId, questions)\"\n          (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues()\"\n          [field]=\"questions['field']\" />\n        <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n          {{ getFieldErrorMessage(questions.questionId, questions) }}\n        </div>\n      </div>\n\n      <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'CHECKBOX' &&\n            questions['isShowQuestionInUI']\n          \">\n        <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n          (blur)=\"validateField(questions.questionId, questions)\"\n          (ngModelChange)=\"validateField(questions.questionId, questions); valueChangeForMultiselect(questions)\"\n          [field]=\"questions['field']\" />\n        <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n          {{ getFieldErrorMessage(questions.questionId, questions) }}\n        </div>\n      </div>\n\n      <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'DECLARATION' &&\n            questions['isShowQuestionInUI']\n          \">\n        <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n          (blur)=\"validateField(questions.questionId, questions)\"\n          (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues()\"\n          [field]=\"questions['field']\" />\n        <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n          {{ getFieldErrorMessage(questions.questionId, questions) }}\n        </div>\n      </div>\n\n      <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'DROPDOWN' &&\n            questions['isShowQuestionInUI']\n         \" (focusout)=\"validateField(questions.questionId, questions)\">\n        <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n          (blur)=\"validateField(questions.questionId, questions)\"\n          (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues()\" />\n        <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n          {{ getFieldErrorMessage(questions.questionId, questions) }}\n        </div>\n      </div>\n\n      <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'CALENDAR' &&\n            questions['isShowQuestionInUI']\n          \">\n        <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n          (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues()\" />\n        <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n          {{ getFieldErrorMessage(questions.questionId, questions) }}\n        </div>\n      </div>\n\n      <!-- <div\n          class=\"\"\n          *ngIf=\"\n            questions['questionType'] === 'HEIGHTINPUT' &&\n            questions['cammundaQuestionCode'] === 'QHTF' &&\n            questions['isShowQuestionInUI']\n          \"\n        >\n        </div> -->\n      <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'DOCUPLOAD' &&\n            questions['isShowQuestionInUI']\n          \">\n        <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\"\n          (blur)=\"validateField(questions.questionId, questions);\" />\n        <lib-file-preview *ngIf=\" previewFile\" [field]=\"questions['field']\" [file]=\"previewFile\"\n          (closed)=\"closeFilePreview()\">\n        </lib-file-preview>\n      </div>\n\n\n      <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n            questions['questionType'] === 'PASSPORT_UPLOAD' &&\n            questions['isShowQuestionInUI']\n          \">\n        <!-- pending -->\n      </div>\n    </div>\n  </div>\n</div>", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}.error-message{font-size:12px;color:#dc3545;margin-top:4px;font-weight:400}.text-danger{color:#dc3545!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: MasterService }], propDecorators: { questionsValueChange: [{
                 type: Output
             }], triggerValidation: [{