@rangertechnologies/ngnxt 2.1.29 → 2.1.30

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -8,7 +8,7 @@ import { HttpHeaders } from '@angular/common/http';
 import * as i5 from '@angular/platform-browser';
 import * as i6$1 from 'ngx-spinner';
 import { NgxSpinnerModule } from 'ngx-spinner';
-import * as i7 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i8 from 'ngx-device-detector';
 import * as i2 from '@angular/common';
@@ -19,7 +19,7 @@ import * as i12 from 'ng-circle-progress';
 import { NgCircleProgressModule } from 'ng-circle-progress';
 import * as i4$1 from '@angular/google-maps';
 import { GoogleMapsModule } from '@angular/google-maps';
-import * as i2$1 from 'ng-pick-datetime';
+import * as i4$2 from 'ng-pick-datetime';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
 import * as i6 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -1181,7 +1181,7 @@ class PickLocationComponent {
         this.showModal = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PickLocationComponent, deps: [{ token: I18nService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PickLocationComponent, selector: "app-pick-location", inputs: { address: "address", question: "question", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<div>\n     <!-- <label class=\"she-label\">Location</label> -->\n    <!-- HA 19DEC23 For translation -->\n     <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"{{ 'enterLocation' | i18n:i18nService.currentLanguage }}\"\n        (keydown.enter)=\"$event.preventDefault()\" placeholder=\"{{ 'searchNearestLocation' | i18n:i18nService.currentLanguage }}\" autocorrect=\"off\"\n        autocapitalize=\"off\" spellcheck=\"off\" type=\"text\"  [(ngModel)]=\"address\"\n        >\n        <a (click)=\"openMap()\"\n        style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n        <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\n        <!-- HA 19DEC23 For translation -->\n        </i> {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\n</div>\n\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n  <div class=\"map-modal\">\n    <div class=\"map-modal-content\">\n      <div class=\"map-modal-header\">\n        <!-- HA 19DEC23 For translation -->\n        <h4>{{ 'pickYourLocation' | i18n:i18nService.currentLanguage }}</h4>\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n      </div>\n      <!-- Modal content goes here -->\n    <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\n    [fullscreenControl]=\"true\">\n    <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\n      (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\n    </agm-map> -->\n    <google-map [latitude]=\"latitude\"  [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\n      <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\n    </google-map>\n    </div>\n  </div>\n</div>\n\n\n\n\n\n\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4$1.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"], exportAs: ["mapMarker"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PickLocationComponent, selector: "app-pick-location", inputs: { address: "address", question: "question", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<div>\n     <!-- <label class=\"she-label\">Location</label> -->\n    <!-- HA 19DEC23 For translation -->\n     <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"{{ 'enterLocation' | i18n:i18nService.currentLanguage }}\"\n        (keydown.enter)=\"$event.preventDefault()\" placeholder=\"{{ 'searchNearestLocation' | i18n:i18nService.currentLanguage }}\" autocorrect=\"off\"\n        autocapitalize=\"off\" spellcheck=\"off\" type=\"text\"  [(ngModel)]=\"address\"\n        >\n        <a (click)=\"openMap()\"\n        style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n        <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\n        <!-- HA 19DEC23 For translation -->\n        </i> {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\n</div>\n\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n  <div class=\"map-modal\">\n    <div class=\"map-modal-content\">\n      <div class=\"map-modal-header\">\n        <!-- HA 19DEC23 For translation -->\n        <h4>{{ 'pickYourLocation' | i18n:i18nService.currentLanguage }}</h4>\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n      </div>\n      <!-- Modal content goes here -->\n    <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\n    [fullscreenControl]=\"true\">\n    <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\n      (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\n    </agm-map> -->\n    <google-map [latitude]=\"latitude\"  [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\n      <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\n    </google-map>\n    </div>\n  </div>\n</div>\n\n\n\n\n\n\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4$1.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"], exportAs: ["mapMarker"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PickLocationComponent, decorators: [{
             type: Component,
@@ -1252,11 +1252,11 @@ class CustomInputComponent {
         this.inputValue.emit(input.target.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomInputComponent, deps: [{ token: ChangeService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomInputComponent, selector: "app-custom-input", inputs: { value: "value", question: "question", disabled: "disabled", placeholder: "placeholder", error: "error", fromShengel: "fromShengel", readOnly: "readOnly", ngClassValue: "ngClassValue", idValue: "idValue", focusEvent: "focusEvent" }, outputs: { inputValue: "inputValue" }, ngImport: i0, template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n  <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n  <!-- HA 02FEB24 question input will hold the value to display -->\n  <!-- // VD 12Jun24 - readonly change-->\n  <input *ngIf=\"!fromShengel\" type=\"text\" \n       [(ngModel)]=\"question.input\" \n       [ngClass]=\"ngClassValue\"\n       class=\"she-line-input form-control\"\n       [id]=\"idValue\"\n       (focus)=\"focusEvent\"\n       [readOnly]=\"readOnly\"\n       [style.border-color]=\"error ? 'red' : ''\"\n       [style]=\"question?.Style__c?.inputStyle\"\n       [placeholder]=\"placeholder ? placeholder : ''\"\n       (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n       [(ngModel)]=\"question.input\"\n       type=\"text\" \n       [readOnly]=\"readOnly\"\n       class=\"she-line-input form-control\" \n       [placeholder]=\"placeholder ? placeholder : '' \"\n       [disabled]=\"disabled\"\n       [style]=\"question?.Style__c?.inputStyle\"\n       (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomInputComponent, selector: "app-custom-input", inputs: { value: "value", question: "question", disabled: "disabled", placeholder: "placeholder", error: "error", fromShengel: "fromShengel", readOnly: "readOnly", ngClassValue: "ngClassValue", idValue: "idValue", focusEvent: "focusEvent" }, outputs: { inputValue: "inputValue" }, ngImport: i0, template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n  <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n  <!-- HA 02FEB24 question input will hold the value to display -->\n  <!-- // VD 12Jun24 - readonly change-->\n  <input *ngIf=\"!fromShengel\" type=\"text\" \n       [(ngModel)]=\"question.input\" \n       [ngClass]=\"ngClassValue\"\n       class=\"she-line-input form-control\"\n       [id]=\"idValue\"\n       (focus)=\"focusEvent\"\n       [readOnly]=\"readOnly\"\n       [style.border-color]=\"error ? 'red' : ''\"\n       [style]=\"question?.Style__c?.inputStyle\"\n       [placeholder]=\"placeholder ? placeholder : ''\"\n       (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n       [(ngModel)]=\"question.input\"\n       type=\"text\" \n       [readOnly]=\"readOnly\"\n       class=\"she-line-input form-control\" \n       [placeholder]=\"placeholder ? placeholder : '' \"\n       [disabled]=\"disabled\"\n       [style]=\"question?.Style__c?.inputStyle\"\n       (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.Error_Message__c}}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-input', template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n  <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n  <!-- HA 02FEB24 question input will hold the value to display -->\n  <!-- // VD 12Jun24 - readonly change-->\n  <input *ngIf=\"!fromShengel\" type=\"text\" \n       [(ngModel)]=\"question.input\" \n       [ngClass]=\"ngClassValue\"\n       class=\"she-line-input form-control\"\n       [id]=\"idValue\"\n       (focus)=\"focusEvent\"\n       [readOnly]=\"readOnly\"\n       [style.border-color]=\"error ? 'red' : ''\"\n       [style]=\"question?.Style__c?.inputStyle\"\n       [placeholder]=\"placeholder ? placeholder : ''\"\n       (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n       [(ngModel)]=\"question.input\"\n       type=\"text\" \n       [readOnly]=\"readOnly\"\n       class=\"she-line-input form-control\" \n       [placeholder]=\"placeholder ? placeholder : '' \"\n       [disabled]=\"disabled\"\n       [style]=\"question?.Style__c?.inputStyle\"\n       (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
+            args: [{ selector: 'app-custom-input', template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n  <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n  <!-- HA 02FEB24 question input will hold the value to display -->\n  <!-- // VD 12Jun24 - readonly change-->\n  <input *ngIf=\"!fromShengel\" type=\"text\" \n       [(ngModel)]=\"question.input\" \n       [ngClass]=\"ngClassValue\"\n       class=\"she-line-input form-control\"\n       [id]=\"idValue\"\n       (focus)=\"focusEvent\"\n       [readOnly]=\"readOnly\"\n       [style.border-color]=\"error ? 'red' : ''\"\n       [style]=\"question?.Style__c?.inputStyle\"\n       [placeholder]=\"placeholder ? placeholder : ''\"\n       (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n       [(ngModel)]=\"question.input\"\n       type=\"text\" \n       [readOnly]=\"readOnly\"\n       class=\"she-line-input form-control\" \n       [placeholder]=\"placeholder ? placeholder : '' \"\n       [disabled]=\"disabled\"\n       [style]=\"question?.Style__c?.inputStyle\"\n       (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.Error_Message__c}}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
         }], ctorParameters: function () { return [{ type: ChangeService }, { type: I18nService }]; }, propDecorators: { value: [{
                 type: Input
             }], question: [{
@@ -1318,11 +1318,11 @@ class CustomTextAreaComponent {
         this.textareaValueChange.emit(event.target.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTextAreaComponent, deps: [{ token: I18nService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: { value: "value", placeholder: "placeholder", rows: "rows", error: "error", question: "question", readOnly: "readOnly" }, outputs: { textareaValueChange: "textareaValueChange" }, ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<textarea \n    [(ngModel)] =\"value\" \n    [rows]=\"rows\" \n    class=\"she-line-input form-control\" \n    [placeholder]=\"placeholder\"\n    [readOnly]=\"readOnly\"\n    (input)=\"onTextareaChange($event)\"\n></textarea>\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: { value: "value", placeholder: "placeholder", rows: "rows", error: "error", question: "question", readOnly: "readOnly" }, outputs: { textareaValueChange: "textareaValueChange" }, ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<textarea \n    [class]=\"error ? 'invalid' : ''\"\n    [(ngModel)] =\"value\" \n    [rows]=\"rows\" \n    class=\"she-line-input form-control\" \n    [placeholder]=\"placeholder\"\n    [readOnly]=\"readOnly\"\n    (input)=\"onTextareaChange($event)\"\n></textarea>\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ question?.Error_Message__c }}</span>", styles: [".invalid{border:1px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-text-area', template: "<!-- // VD 12Jun24 - readonly change-->\n<textarea \n    [(ngModel)] =\"value\" \n    [rows]=\"rows\" \n    class=\"she-line-input form-control\" \n    [placeholder]=\"placeholder\"\n    [readOnly]=\"readOnly\"\n    (input)=\"onTextareaChange($event)\"\n></textarea>\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>" }]
+            args: [{ selector: 'app-custom-text-area', template: "<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<textarea \n    [class]=\"error ? 'invalid' : ''\"\n    [(ngModel)] =\"value\" \n    [rows]=\"rows\" \n    class=\"she-line-input form-control\" \n    [placeholder]=\"placeholder\"\n    [readOnly]=\"readOnly\"\n    (input)=\"onTextareaChange($event)\"\n></textarea>\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ question?.Error_Message__c }}</span>", styles: [".invalid{border:1px solid red!important}\n"] }]
         }], ctorParameters: function () { return [{ type: I18nService }, { type: ChangeService }]; }, propDecorators: { value: [{
                 type: Input
             }], placeholder: [{
@@ -1522,7 +1522,7 @@ class CustomTableComponent {
         this.valueChange.emit(updatedTableData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTableComponent, deps: [{ token: ChangeService }, { token: I18nService }, { token: SalesforceService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTableComponent, selector: "app-custom-table", inputs: { question: "question", apiMeta: "apiMeta" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n  <thead>\n    <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n    <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n    <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + tableSize\">\n      {{ header.label }}\n    </th>\n    <th class=\"col-md-2\" colspan=\"2\">Actions</th>\n  </thead>\n  <tbody *ngIf=\"tableData\">\n    <tr *ngFor=\"let item of tableData; let i = index\">\n      <!-- <td><input type=\"checkbox\" [(ngModel)]=\"item.selected\" (change)=\"selectItem(item)\"></td> -->\n      <td *ngFor=\"let header of tableHeader; let j = index\">\n        <div *ngIf=\"header.fldType === 'imagetext'\" [class]=\"'col-md-' + header.size\" style=\"display: flex;\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n          <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'image'\" [class]=\"'col-md-' + header.size\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item[header.fieldName]\" [alt]=\"item.altText\">\n        </div>\n        <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"text\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName, item[header.apiName])\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n          <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\"  (click)=\"updateRadio(item, header.fieldName)\">\n        </div>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTableComponent, selector: "app-custom-table", inputs: { question: "question", apiMeta: "apiMeta" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n  <thead>\n    <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n    <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n    <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + tableSize\">\n      {{ header.label }}\n    </th>\n    <th class=\"col-md-2\" colspan=\"2\">Actions</th>\n  </thead>\n  <tbody *ngIf=\"tableData\">\n    <tr *ngFor=\"let item of tableData; let i = index\">\n      <!-- <td><input type=\"checkbox\" [(ngModel)]=\"item.selected\" (change)=\"selectItem(item)\"></td> -->\n      <td *ngFor=\"let header of tableHeader; let j = index\">\n        <div *ngIf=\"header.fldType === 'imagetext'\" [class]=\"'col-md-' + header.size\" style=\"display: flex;\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n          <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'image'\" [class]=\"'col-md-' + header.size\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item[header.fieldName]\" [alt]=\"item.altText\">\n        </div>\n        <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"text\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName, item[header.apiName])\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n          <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\"  (click)=\"updateRadio(item, header.fieldName)\">\n        </div>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTableComponent, decorators: [{
             type: Component,
@@ -1536,13 +1536,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class CustomDatePickerComponent {
+    i18nService;
     date;
     minDate;
     maxDate;
+    error;
+    errorMessage;
     readOnly = false; // VD 12Jun24 - readonly change
     dateChange = new EventEmitter();
     dateSelected;
-    constructor() { }
+    constructor(i18nService) {
+        this.i18nService = i18nService;
+    }
     ngOnInit() {
         console.log('read only check', this.readOnly);
         this.dateSelected = new Date(this.date);
@@ -1550,18 +1555,22 @@ class CustomDatePickerComponent {
     onDateChange(event) {
         this.dateChange.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: { date: "date", minDate: "minDate", maxDate: "maxDate", readOnly: "readOnly" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- <div class=\"date-picker-container\">\n    <label>{{label}}</label>\n    <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n    <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n<!--VD 12Jun24 - readonly change --> \n<p>\n    <input  class=\"input-shengel\"\n    [(ngModel)]=\"dateSelected\" \n    [owlDateTimeTrigger]=\"dt\" \n    [owlDateTime]=\"dt\"  \n    [min]=\"minDate\"\n    [disabled]=\"readOnly\"\n    placeholder=\"DD/MM/YYYY HH:MM\"\n    style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n    (dateTimeChange)=\"onDateChange($event)\">\n    <owl-date-time #dt></owl-date-time>\n</p>\n  ", styles: [""], dependencies: [{ kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i2$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i2$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDatePickerComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: { date: "date", minDate: "minDate", maxDate: "maxDate", error: "error", errorMessage: "errorMessage", readOnly: "readOnly" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- <div class=\"date-picker-container\">\n    <label>{{label}}</label>\n    <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n    <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n<!--VD 12Jun24 - readonly change --> \n<!-- VD 01Aug24 - validation change-->\n<p>\n    <input  \n    [class]=\"error ? 'invalid' : ''\"\n    [(ngModel)]=\"dateSelected\" \n    [owlDateTimeTrigger]=\"dt\" \n    [owlDateTime]=\"dt\"  \n    [min]=\"minDate\"\n    [disabled]=\"readOnly\"\n    placeholder=\"DD/MM/YYYY HH:MM\"\n    (input)=\"onDateChange($event)\"\n    style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n    (dateTimeChange)=\"onDateChange($event)\">\n    <owl-date-time #dt></owl-date-time>\n</p>\n<span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>\n  ", styles: [".invalid{border-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i4$2.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$2.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-date-picker', template: "<!-- <div class=\"date-picker-container\">\n    <label>{{label}}</label>\n    <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n    <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n<!--VD 12Jun24 - readonly change --> \n<p>\n    <input  class=\"input-shengel\"\n    [(ngModel)]=\"dateSelected\" \n    [owlDateTimeTrigger]=\"dt\" \n    [owlDateTime]=\"dt\"  \n    [min]=\"minDate\"\n    [disabled]=\"readOnly\"\n    placeholder=\"DD/MM/YYYY HH:MM\"\n    style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n    (dateTimeChange)=\"onDateChange($event)\">\n    <owl-date-time #dt></owl-date-time>\n</p>\n  " }]
-        }], ctorParameters: function () { return []; }, propDecorators: { date: [{
+            args: [{ selector: 'app-custom-date-picker', template: "<!-- <div class=\"date-picker-container\">\n    <label>{{label}}</label>\n    <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n    <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n<!--VD 12Jun24 - readonly change --> \n<!-- VD 01Aug24 - validation change-->\n<p>\n    <input  \n    [class]=\"error ? 'invalid' : ''\"\n    [(ngModel)]=\"dateSelected\" \n    [owlDateTimeTrigger]=\"dt\" \n    [owlDateTime]=\"dt\"  \n    [min]=\"minDate\"\n    [disabled]=\"readOnly\"\n    placeholder=\"DD/MM/YYYY HH:MM\"\n    (input)=\"onDateChange($event)\"\n    style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n    (dateTimeChange)=\"onDateChange($event)\">\n    <owl-date-time #dt></owl-date-time>\n</p>\n<span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>\n  ", styles: [".invalid{border-color:red!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { date: [{
                 type: Input
             }], minDate: [{
                 type: Input
             }], maxDate: [{
                 type: Input
+            }], error: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
             }], readOnly: [{
                 type: Input
             }], dateChange: [{
@@ -1587,7 +1596,7 @@ class DropdownWithFlagComponent {
         this.flagDropDownChange.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownWithFlagComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: { certified: "certified", JobPerformerCertificates: "JobPerformerCertificates" }, outputs: { flagDropDownChange: "flagDropDownChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"she-title\">\n    <label class=\"switch\">\n      <input  class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\n      <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \n      <span class=\"switch-handle\"></span> \n    </label> \n    <!-- HA 19DEC23 For translation -->\n    <ng-select *ngIf=\"certified\"\n      style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \n      [items]=\"JobPerformerCertificates\"\n      [(ngModel)]=\"selectedValue\"\n      (change)=\"onJobPerformerCertified($event)\"\n      placeholder=\"---{{ 'select' | i18n:i18nService.currentLanguage }}---\">\n    </ng-select>\n  </div>   ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:12px;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label:before,.switch-label:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label:before{content:attr(data-off);right:11px;color:#aaa;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input:checked~.switch-label{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input:checked~.switch-label:before{opacity:0}.switch-input:checked~.switch-label:after{opacity:1}.switch-handle{position:absolute;top:0;left:0;width:19px;height:22px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px #0003}.switch-handle:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input:checked~.switch-handle{left:86px;box-shadow:-1px 1px 5px #0003;border:2px solid aquamarine}.switch-label,.switch-handle{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: { certified: "certified", JobPerformerCertificates: "JobPerformerCertificates" }, outputs: { flagDropDownChange: "flagDropDownChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"she-title\">\n    <label class=\"switch\">\n      <input  class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\n      <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \n      <span class=\"switch-handle\"></span> \n    </label> \n    <!-- HA 19DEC23 For translation -->\n    <ng-select *ngIf=\"certified\"\n      style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \n      [items]=\"JobPerformerCertificates\"\n      [(ngModel)]=\"selectedValue\"\n      (change)=\"onJobPerformerCertified($event)\"\n      placeholder=\"---{{ 'select' | i18n:i18nService.currentLanguage }}---\">\n    </ng-select>\n  </div>   ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:12px;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label:before,.switch-label:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label:before{content:attr(data-off);right:11px;color:#aaa;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input:checked~.switch-label{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input:checked~.switch-label:before{opacity:0}.switch-input:checked~.switch-label:after{opacity:1}.switch-handle{position:absolute;top:0;left:0;width:19px;height:22px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px #0003}.switch-handle:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input:checked~.switch-handle{left:86px;box-shadow:-1px 1px 5px #0003;border:2px solid aquamarine}.switch-label,.switch-handle{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownWithFlagComponent, decorators: [{
             type: Component,
@@ -1686,8 +1695,8 @@ class CustomDropdownComponent {
         // console.log(event);
         let change = new ChangeWrapper(); // ChangeWrapper = JSON.parse('{}');
         change.fromQuestionId = this.id;
-        change.valueObj = event;
-        change.selectedObj = event[this.labelField];
+        change.valueObj = event ? event : '';
+        change.selectedObj = event ? event[this.labelField] : '';
         this.valueChange.emit(change);
         // once got value in dropdown remove the error validation
         if (event) {
@@ -1695,11 +1704,11 @@ class CustomDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n  [ngClass]=\"{\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n    'custom-select': !progressBar\n  }\" class=\"custom-select mr-sm-2 dd-height\" \n  [id]=\"id\" \n  [(ngModel)]=\"selectedValue\"\n  (change)=\"selectChange($event.target.value);\" \n  [style.borderColor]=\"error ? 'red' : '#858585'\"\n  [style.color]=\"error ? 'red' : ''\">\n    <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<ng-select\n            [class]=\"invalidFieldIds.includes(id) ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n            [(ngModel)]=\"selectedValue\" \n            [placeholder]=\"placeholder\"\n            [disabled]=\"readOnly\"\n            (change)=\"selectChange($event)\"\n            [id]=\"id\">\n<!-- HA 19-JAN-24 Correction in option value -->\n  <ng-option *ngFor=\"let option of options\" [value]=\"apiMeta !== undefined ? option : option.Value__c\">{{ apiMeta !== undefined ? option[labelField] : option.Value__c  }}</ng-option> \n  <!-- <ng-option *ngIf=\"errorMessage\"  value=\"\" disabled hidden>{{ errorMessage }}</ng-option> -->\n</ng-select>\n <!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i6.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n  [ngClass]=\"{\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n    'custom-select': !progressBar\n  }\" class=\"custom-select mr-sm-2 dd-height\" \n  [id]=\"id\" \n  [(ngModel)]=\"selectedValue\"\n  (change)=\"selectChange($event.target.value);\" \n  [style.borderColor]=\"error ? 'red' : '#858585'\"\n  [style.color]=\"error ? 'red' : ''\">\n    <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<ng-select\n            [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n            [(ngModel)]=\"selectedValue\" \n            [placeholder]=\"placeholder\"\n            [disabled]=\"readOnly\"\n            (change)=\"selectChange($event)\"\n            [id]=\"id\">\n<!-- HA 19-JAN-24 Correction in option value -->\n  <ng-option *ngFor=\"let option of options\" [value]=\"apiMeta !== undefined ? option : option.Value__c\">{{ apiMeta !== undefined ? option[labelField] : option.Value__c  }}</ng-option> \n  <!-- <ng-option *ngIf=\"errorMessage\"  value=\"\" disabled hidden>{{ errorMessage }}</ng-option> -->\n</ng-select>\n <!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i6.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-dropdown', template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n  [ngClass]=\"{\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n    'custom-select': !progressBar\n  }\" class=\"custom-select mr-sm-2 dd-height\" \n  [id]=\"id\" \n  [(ngModel)]=\"selectedValue\"\n  (change)=\"selectChange($event.target.value);\" \n  [style.borderColor]=\"error ? 'red' : '#858585'\"\n  [style.color]=\"error ? 'red' : ''\">\n    <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<ng-select\n            [class]=\"invalidFieldIds.includes(id) ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n            [(ngModel)]=\"selectedValue\" \n            [placeholder]=\"placeholder\"\n            [disabled]=\"readOnly\"\n            (change)=\"selectChange($event)\"\n            [id]=\"id\">\n<!-- HA 19-JAN-24 Correction in option value -->\n  <ng-option *ngFor=\"let option of options\" [value]=\"apiMeta !== undefined ? option : option.Value__c\">{{ apiMeta !== undefined ? option[labelField] : option.Value__c  }}</ng-option> \n  <!-- <ng-option *ngIf=\"errorMessage\"  value=\"\" disabled hidden>{{ errorMessage }}</ng-option> -->\n</ng-select>\n <!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"] }]
+            args: [{ selector: 'app-custom-dropdown', template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n  [ngClass]=\"{\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n    'custom-select': !progressBar\n  }\" class=\"custom-select mr-sm-2 dd-height\" \n  [id]=\"id\" \n  [(ngModel)]=\"selectedValue\"\n  (change)=\"selectChange($event.target.value);\" \n  [style.borderColor]=\"error ? 'red' : '#858585'\"\n  [style.color]=\"error ? 'red' : ''\">\n    <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<ng-select\n            [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n            [(ngModel)]=\"selectedValue\" \n            [placeholder]=\"placeholder\"\n            [disabled]=\"readOnly\"\n            (change)=\"selectChange($event)\"\n            [id]=\"id\">\n<!-- HA 19-JAN-24 Correction in option value -->\n  <ng-option *ngFor=\"let option of options\" [value]=\"apiMeta !== undefined ? option : option.Value__c\">{{ apiMeta !== undefined ? option[labelField] : option.Value__c  }}</ng-option> \n  <!-- <ng-option *ngIf=\"errorMessage\"  value=\"\" disabled hidden>{{ errorMessage }}</ng-option> -->\n</ng-select>\n <!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"] }]
         }], ctorParameters: function () { return [{ type: ChangeService }, { type: DataService }, { type: I18nService }]; }, propDecorators: { options: [{
                 type: Input
             }], placeholder: [{
@@ -3799,13 +3808,13 @@ class QuestionnaireComponent {
     getValue(item) {
         return Object.values(item)[0];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: i4.ActivatedRoute }, { token: i5.DomSanitizer }, { token: i6$1.NgxSpinnerService }, { token: i7.UntypedFormBuilder }, { token: i8.DeviceDetectorService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage" }, providers: [ChangeService], usesOnChanges: true, ngImport: i0, template: "<!-- Spinner -->\n<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n\n<!-- Back Processing -->\n<div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" [style.visibility]=\"questionStack.length >0 ? 'visible' : 'hidden'\">\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.Status__c == 'Completed' ? 'summary-volver':'app-back1'\">\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.Back__c }}\n    </button>\n  </div>\n</div>\n\n<!-- Question Hanlding -->\n<div *ngIf=\"questionItem\" [class]=\"qbItem.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.Title__c && qbItem.Progress_Bar__c\">\n    <h1 class=\"header1\">{{ questionItem?.Title__c }}</h1>\n    <div class=\"header2\">{{ questionItem?.SubTitle__c }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div [ngClass]=\"{ questiondiv2: !qbItem?.Progress_Bar__c }\">\n    <!-- Pie Chart Progress -->\n    <div [ngClass]=\"{ bgColor: qbItem?.Progress_Bar__c }\">\n      <div id=\"progress\" *ngIf=\"qbItem?.Progress_Bar__c\">\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n        [startFromZero]=\"false\" [responsive]=\"false\" >\n        </circle-progress>\n      </div>\n    </div>\n\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.Group__c && qbItem.Progress_Bar__c\"\n        [ngClass]=\"{ questionalign: !qbItem?.Progress_Bar__c }\">\n      <div class=\"largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.Group__c }}\n        </h3>\n        <div *ngIf=\"questionItem.Sub_Text__c != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.Sub_Text__c}}</div>\n        <div *ngIf=\"questionItem.Sub_Text__c === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.Sub_Text__c}}</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Question Handling -->\n  <div class=\"questiondiv2\">\n    <!-- Title -->\n    <div *ngIf=\"questionItem.Is_Title__c\">\n      <div *ngIf=\"questionItem.Type__c != 'Book' && questionItem.Question_No__c!='6' && questionItem.Question_No__c!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{questionItem?.Question_Text__c}}\n        </h3>\n      </div>\n    </div>\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n    <div *ngIf=\"!questionItem.Is_Title__c\" [class]=\"qbItem.isShengel__c ? 'header-style' : 'question-f-size'\">\n      <div [innerHTML]=\"getText(questionItem?.Question_Text__c)\" >\n        {{ questionItem?.Question_Text__c }}\n      </div>\n    </div>\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <div *ngIf=\"questionItem.Type__c == 'Book'\">\n      <div *ngIf=\"questionItem.Question_No__c=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{ questionItem?.Question_Text__c }}\n        </h3>\n      </div>\n    </div>\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <div *ngIf=\"questionItem.Type__c == 'File' \">\n      <div *ngIf=\"questionItem.Question_No__c=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{questionItem?.Question_Text__c}}\n        </h3>\n      </div>\n    </div>\n  </div>\n\n  <!-- Additional Info -->\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n  <div *ngIf=\"questionItem.Additional_Rich__c && qbItem.Progress_Bar__c\" >\n    <div\n      class=\"additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.Additional_Rich__c && !qbItem.Progress_Bar__c\">\n    <div class=\"info-alert ques-alert1\">\n      <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n    </div>\n  </div>\n\n  <!-- Dropdown-->\n  <div *ngIf=\"dropdownFlag\" >\n    <div class=\"dis-flex\">\n      <select \n        [ngClass]=\"{\n          'dt-line myt-align3 myt-align2 dpDown dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.Progress_Bar__c,\n          'custom-select': !qbItem?.Progress_Bar__c\n        }\" class=\"mr-sm-2 dd-height dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\" style=\"margin-left: 21.5rem !important;\">\n        <option *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"option\" value=\"{{ opt.Value__c }}\">\n          {{ opt.Value__c }}\n        </option>\n        <!-- HA 20DEC23 For Translation -->\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\n      </select>\n    </div>\n  </div>\n\n  <!-- Radio -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n      {{ questionItem?.Error_Message__c }}\n    </div>\n    <div class=\"dis-flex\">\n      <div *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"radio radioOption\" >\n        <label class=\"radiocontainer container  myt-font4\">{{ opt.Value__c }}\n          <input type=\"radio\" [id]=\"opt.Id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" value=\"{{ opt.Value__c }}\"\n            (change)=\"optionChange(opt.Value__c)\" />\n<!-- HA 20FEB24 Removed checkmark as it was causing styling issue in Radio -->\n          </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n      {{ questionItem?.Error_Message__c }}\n    </div>\n    <div class=\"dis-flex\">\n      <div *ngFor=\"let item of optionValues\" class=\"radio col-md-6 optiondiv\">\n        <label class=\" container1 \" >{{ item.Value__c }}\n          <input type=\"checkbox\" [id]=\"item.Id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n<!-- HA 20FEB24 Removed checkmark1 as it was causing styling issue in Radio -->\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\" class=\"col-md-12 myt-book1\">\n    <!-- HA 31-JAN-24 To reduce the margin -->\n    <div class=\"col-md-12\" class=\"dis-flex myt-align2\" [class]=\"'col-md-' + questionItem?.Size__c + ' paddingnone'\">\n      <input type=\"text\" [(ngModel)]=\"inpValue\" [ngClass]=\"{\n          'boxoutline myt-font1 myt-book1': qbItem?.Progress_Bar__c,\n          textBox1: !qbItem?.Progress_Bar__c\n        }\" id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <textarea class=\"ta-input\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0 && taFocusOut\n            ? '#87be1c'\n            : ''\n        }}\" (focusout)=\"taFocusOut = true\"\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n      <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\"></i>\n    </div>\n  </div>\n\n  <!-- CC Number Format -->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\"\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\n        *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n  <!-- END-->\n\n  <!-- AlphaNumeric -->\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n    <div style=\"position:relative;\">\n      <!-- HA 20DEC23 For Translation -->\n      <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n    </div>\n  </div>\n\n  <!-- Email -->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\n        *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- DateTime -->\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero myt-time1\" >\n    <!-- Error Handling -->\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n    <!-- Date -->\n    <div *ngIf=\"dateFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n        <div class=\"dis-flex\">\n          <!-- HA 20DEC23 For Translation -->\n          <!-- HA 02FEB24 Additional param to update the question -->\n          <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, '')\"\n            [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\n          </my-date-picker>\n        </div>\n      </div>\n    </div>\n\n    <!-- Time -->\n    <div *ngIf=\"timeFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n        <div class=\"dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n                           dateandTime: !qbItem?.Progress_Bar__c}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n            (focus)=\"clearError()\">\n            <option value=\"\">HH</option>\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n              {{ hour }}\n            </option>\n          </select>\n          <span class=\"colon\"> : </span>\n          <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n            (focus)=\"clearError()\">\n            <option value=\"\">MM</option>\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n              {{ minute }}\n            </option>\n          </select>\n          <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem?.X24_Hours__c == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.Progress_Bar__c, 'dateandTime': !qbItem.Progress_Bar__c}\"></div> -->\n          </div>\n        </div>\n      </div>\n      </div>\n      <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- Attachment / File -->\n  <div *ngIf=\"fileFlag\">\n    <div *ngIf=\"!qbItem.Progress_Bar__c\">\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n        <label class=\"picture-upload\" for=\"file-upload\">\n          <span class=\"picture-upload-child\">\n            <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n          </span>\n          <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\n            <i class=\"\" aria-hidden=\"true\"></i>\n          </span>\n        </label>\n      </div>\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.Type__c === 'File' &&\n        !qbItem?.Progress_Bar__c\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName\n        }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.Progress_Bar__c\">\n      <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\n      </div>\n      <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n      \n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\"> {{ questionItem?.Question_Text__c}}</span>\n        <label class=\"file-label \">\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n          <!-- HA 20DEC23 For Translation -->\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n            class=\"file-upload-btn\">\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\" [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.Id\">\n          <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\n            <span>{{ ques?.Question_Text__c }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero myt-dateTimeNew\" *ngIf=\"ques.Type__c === 'Time' || ques.Type__c === 'Date'\">\n            <div *ngIf=\"ques.Type__c === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n                <div class=\"dateandtime\">\n                  <!-- HA 20DEC23 For Translation -->\n                  <!-- HA 02FEB24 Additional param to update the question -->\n                  <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\n                    [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\"  (focus)=\"clearError()\" >\n                  </my-date-picker>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n                <div class=\"dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n                                  dateandTime: !qbItem?.Progress_Bar__c}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">HH</option>\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n                      {{ hour }}\n                    </option>\n                  </select>\n                  <span class=\"colon\"> : </span>\n                  <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">MM</option>\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n                      {{ minute }}\n                    </option>\n                  </select>\n                  <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem.X24_Hours__c == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n                      <option value=\"AM\">AM</option>\n                      <option value=\"PM\">PM</option>\n                    </select>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'DateTime'\">\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Text'\">\n            <app-custom-input\n                  [value]=\"ques?.input\"\n                  [ngClassValue]=\"{\n                      'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                      textBox: !qbItem.Progress_Bar__c\n                  }\"\n                  [question]=\"ques\" \n                  [idValue]=\"ques?.Tracking_ID__c\"\n                  [focusEvent]=\"clearSQError(ques?.Id)\"\n                  [error]=\"ques?.error\"\n                  [placeholder]=\"ques?.Question__c\"\n                  (inputValue)=\"selectedInput($event,ques)\">\n            </app-custom-input>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- for pick location -->\n            <!-- HA10012024 Added Api key as input -->\n            <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n          </div>\n          <!-- for  text area   -->\n          <div *ngIf=\"ques.Type__c === 'TextArea'\">\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n          </div>\n\n          <!-- Email -->\n          <div *ngIf=\"ques.Type__c === 'Email'\">\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n          </div>\n\n          <div *ngIf=\"ques.Type__c === 'File'\">\n            <div *ngIf=\"!qbItem.Progress_Bar__c\">\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n                <span class=\"picture-upload-child\">\n                  <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n                </span>\n                <span class=\"\n                    fa fa-plus fa-2x\n                    picture-upload-child\n                    pic-upload\n                    icolor\n                  \">\n                  <i class=\"\" aria-hidden=\"true\"></i>\n                </span>\n              </label>\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n            </div>\n\n            <ul *ngIf=\"\n                attachments?.length > 0 &&\n                ques.Type__c === 'File' &&\n                !qbItem.Progress_Bar__c\n              \" class=\"attach-ulist col-md-12\">\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n                {{ attachment.attachmentName\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n              </li>\n            </ul>\n            <div class=\"myt-box\" *ngIf=\"qbItem.Progress_Bar__c\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\n              </div>\n              <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.Question__c }}</span>\n                <label class=\"file-label \">\n                  <span style=\"color: #c5281c;text-decoration:underline\">\n                    {{'attach' | i18n:i18nService.currentLanguage}}\n                  </span>\n                  <!-- HA 20DEC23 For Translation -->\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n                    class=\"file-upload-btn\">\n                </label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Table -->\n          <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n            <app-custom-table \n              [question]=\"ques\"\n              (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n            </app-custom-table>\n          </div>\n\n          <!-- Dropdown -->\n          <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\n            <!-- for common dropdown -->\n            <!-- HA 20DEC23 For Translation -->\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\"\n                    [options]=\"ques.Question_Options__r.records\"\n                    [apiMeta]=\"ques.Sub_Text__c\"\n                    [id]=\"ques.Name\"\n                    [selectedValue]=\"ques.input\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques?.Error_Message__c\"\n                    [error]=\"ques?.error\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n            </app-custom-dropdown>\n            <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\"  [certified]=\"ques.certifiedFlag\"  [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\n            <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n          </div>          \n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!--List start-->\n  <div *ngIf=\"listFlag\">\n    <div class=\"form-group\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div class=\"myt-align3\" [class]=\"'col-md-' + ques.Size__c + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.Id);let i = index\">\n          <div>\n            <span class=\"dis-flex myt-font3 myt-font7\">{{ ques?.Question__c }}</span>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n             textBox: !qbItem.Progress_Bar__c\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\"\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n          </div>\n        </div>\n        <div class=\"\" *ngIf=\"addFlag\">\n          <!-- HA 20DEC23 For Translation -->\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.Id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\n         </div>\n      </div>\n    </div>\n  </div>\n  <!--List End-->\n\n  <!-- Actions -->\n  <div *ngIf=\"individualBookButton\" class=\"flexer\">\n    <!-- Backward / Back -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"backbutton\" [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\"\n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.Back__c\">\n      <div [ngClass]=\"{}\">\n        <button [ngClass]=\"{\n            'left-bt': qbItem.Progress_Bar__c,\n            'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n              !qbItem.Progress_Bar__c\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.Back__c }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Forward / Next -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\" *ngIf=\"qbItem.Next__c\">\n      <div>\n        <button [ngClass]=\"{\n            'rusty': qbItem.Progress_Bar__c,\n            'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n              !qbItem.Progress_Bar__c\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.Next__c }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.Progress_Bar__c\n               }\">\n    <h1 class=\"header1 summarypadd\" >{{ qbItem.SubTitle__c }}</h1>         \n  <div id=\"progress2\" *ngIf=\"!qbItem.Progress_Bar__c && this.abItem.Status__c != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.Progress_Bar__c }\">\n          <div [ngClass]=\"{ summary:  !qbItem.Progress_Bar__c }\">\n           <div *ngIf=\"!qbItem.Edit__c\"\n              [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c\"\n              [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.Status__c === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n                  {{ qa.ansValue }}\n                </div>\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\n                <div *ngIf=\"qa.qTyp == 'Book'\">\n                  <div *ngFor=\"let val of qa.myVal\">\n                    <p>{{ val.Question_Text__c }}: <span>{{ val.input }}</span></p>\n                  </div>\n                </div>\n                <!-- HA 02FEB24 Displaying the value for direct question -->\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.Question_Text__c }}: <span></span>{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"this.abItem.Status__c === 'Completed'\" class=\"col-lg-12\">\n    <div class=\"panel-group panel-group-joined\" id=\"ePTW-details\">\n      <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n          <h4 class=\"panel-title\">\n            <!-- HA 20DEC23 For Translation -->\n            <a data-toggle=\"collapse\" data-parent=\"#ePTW-details\" href=\"#collapseOne\" class=\"collapsed\">\n              {{'details' | i18n:i18nService.currentLanguage}}\n            </a>\n          </h4>\n        </div>\n        <div id=\"collapseOne\" class=\"panel-collapse collapse\">\n          <div class=\"panel-body\">\n            <div class=\"row\">\n              <ng-container *ngFor=\"let item of summaryData; let i = index\">\n                <ng-container *ngIf=\"i % 2 === 0\">\n                  <div class=\"col-lg-6 m-b-30\">\n                    <label>{{ getKey(item) }}</label>\n                    <p class=\"font-size\">{{ getValue(item) || 'N/A' }}</p>\n                  </div>\n                  <div class=\"col-lg-6\" *ngIf=\"summaryData[i + 1]\">\n                    <label>{{ getKey(summaryData[i + 1]) }}</label>\n                    <p class=\"font-size\">{{ getValue(summaryData[i + 1]) || 'N/A' }}</p>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div id=\"progress2\" *ngIf=\"qbItem.Progress_Bar__c \">\n    <div [ngClass]=\"{'bgColor summary-top' : qbItem.Progress_Bar__c }\" >\n      <div id=\"progress-summary\" *ngIf=\"qbItem.Progress_Bar__c\">\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n        [startFromZero]=\"false\" [responsive]=\"false\" >\n      </circle-progress>\n      \n      <div *ngIf=\"qbItem.Summary_Text__c && qbItem.Progress_Bar__c\" \n      [ngClass]=\"{ summaryTitle: qbItem.Progress_Bar__c }\">\n        <h3 class=\"subTitle\" >{{ qbItem.Summary_Text__c }}</h3>\n        <div *ngIf=\"abItem.Status__c != 'Completed'\" class=\"subTitle1\" >{{ qbItem.Summary_Sub_Text__c}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.Progress_Bar__c\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.Summary_Text__c }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n    <div class=\"summary-groupText myt-font2\">\n      <!-- <p>Informe de da\u00F1o</p> -->\n    </div>\n    <div *ngFor=\"let qa of summary\" >\n        <div [ngClass]=\"{ non:  qbItem.Progress_Bar__c }\">\n          <div [ngClass]=\"{ summary: this.abItem.Status__c != 'Completed' && !qbItem.Progress_Bar__c }\">\n            <div *ngIf=\"!qbItem.Edit__c\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.Status__c === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"answer \" >\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n                {{ qa.ansValue }}\n              </div>\n              <div *ngIf=\"qa.qTyp != 'File'\">\n                {{ qa.ansValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Answer Book -->\n  <div class=\"flexer1\" *ngIf=\"abItem\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"\" *ngIf=\"abItem.Status__c == 'Completed' && qbItem.Cancel__c\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.Cancel__c }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.Status__c != 'Completed'\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.Submit__c\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.Submit__c }}\n      </button>\n    </div>\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.Edit__c\">\n      <button [ngClass]=\"{'grey': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.Edit__c }}\n      </button>\n    </div>\n  </div>\n\n</div>", styles: [".rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.edit{background-color:#dedddd;border:none;color:#c5281c;text-decoration:underline;margin-left:50%;font-size:16px;vertical-align:super;font-weight:700}.icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.icon-edit1,.icon-edit-summary{width:29px;height:28px}.questiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.questiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.questiondiv2{padding-left:0!important;padding-bottom:0!important}@media screen and (min-width: 689px){#progress,#progress-summary{padding-left:12px}.backicon{display:none}.dt-time{background-position:98%!important}}.bgColor{text-align:center;background-color:#dedddd}.questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.largeTitle{padding-left:16px;padding-top:12px}.question-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1.5;padding:.5rem 1rem;width:100%;cursor:pointer;outline:0}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.radiotext{margin-top:-30px}.radiocontainer{display:flex;flex-direction:row-reverse;border:1px solid none;border-radius:.3em;padding:0;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#a3a2a2}.radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.myt-time{width:-moz-fit-content!important;width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.showminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.myt-dateTimeNew{margin-left:-14px}.myt-hour{width:-moz-fit-content;width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.date-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.dis-flex{display:flex;justify-content:center}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin-left:-17px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.question{padding:10px;font-size:14px;color:#007bff}.question1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.answer{display:flex;align-items:baseline;padding:5px 5px 10px;font-size:14px;font-weight:400;word-wrap:break-word;width:97%;justify-content:space-between}.answer1{max-width:55%;margin-left:auto;margin-right:auto;color:#a3a2a2;margin-top:0%;padding-bottom:0;font-size:14px;font-weight:400;word-wrap:break-word;text-align:left;background:#dedddd;border-bottom:1px solid #fff}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.sum-ques{width:55%;margin:auto}.sum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#F8F8F8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.file-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.file-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.subTitle1{color:#560d05;font-size:14px;font-weight:500}.check-icon{color:#87be1c;margin-left:-2rem;z-index:1;padding:5px;margin-top:.4rem}.check-icon2{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:.6rem;line-height:3}.check-icon3{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.grey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.btn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.btn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;width:100%;display:flex;justify-content:center}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.down{margin-left:0;width:57%}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.dropbox{margin-left:21.5rem}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.summary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.myt-align{margin-left:4%;line-height:2}.myt-align1{margin-left:-29px}.myt-align2{margin-left:-15px}.myt-align3{width:100%}.myt-book1{margin-top:-20px}.colorf{color:#555}.bookText{width:57%;margin-left:21.5%;background-color:#dedddd}.book{width:32.6%;margin-left:34%;background-color:#dedddd}.summary-completed{padding-left:2%;margin-top:20px}.town{margin:0;background-color:#dedddd}.town-drop{margin:auto;width:57%}.questiondiv1.padd-bottom{padding-bottom:6rem!important;padding-top:2rem!important}@media (max-width: 1090px){.icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (max-width: 768px){.radioOption{width:8%}.grey{width:78%;margin-left:17.5rem;height:68px!important;font-size:20px!important;font-weight:700!important}.answer{margin-top:-4%!important}}@media screen and (max-width: 672px){.header1{font-size:23px!important}.summarypadd{padding-top:50px!important}.answer{margin-top:-5%!important}.icon-edit{margin:0 6px 0 -13%!important}.subTitle1{width:95%!important}.additional{margin-left:6%!important;padding:0!important}.container1{margin-left:-35%}.town-drop{margin:auto;width:100%!important}.dis-flex{display:flex;justify-content:left}.check{display:inherit;width:-moz-max-content;width:max-content;margin-left:6%}.rusty{width:28rem;margin-left:0rem;height:68px!important;font-size:20px!important;font-weight:700!important;margin-bottom:37px}.left-bt{width:28rem;margin-left:-28rem;height:68px!important;font-size:20px!important;font-weight:700!important}.questionalign{text-align:center}.questionalign{margin-top:1rem!important}.largeTitle{padding-left:0!important}.myt-align{margin-left:0%!important}.myt-text1{margin-top:-22px}.myt-text2{margin-top:-20px}.myt-text3{margin-bottom:21px}.date-picker,.dt-time{width:100%}.showminute{margin-top:-.5%}.radioOption{width:auto;margin-top:0;margin-left:7%;margin-right:-3%}.myt-font7{padding-left:0rem;margin-left:-1.5%}.down,.bookText,.book{width:100%;margin-left:0rem}.town{margin-left:0rem;width:100%}.file-upload-box,.file-uploading-box{max-width:85%;margin-left:20px}.question{margin-left:0rem}.btn-text2{width:28rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:28rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 580px){.rusty{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:27rem;margin-left:-27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-24%}.showminute{margin-top:.5%}.bookText,.book{width:100%;margin-left:0rem}.btn-text2{width:27rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:27rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 672px){.questiondiv1{padding:0}}@media screen and (max-width: 525px){.rusty{width:26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-9%}.left-bt{width:26rem;margin-left:-26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.dateandtime{padding-left:10px!important}}@media screen and (max-width: 480px){.answer{margin-top:-7%!important}.icon-edit{margin:0 6px 4px -35%!important}.rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.file-upload-box,.file-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.answer{margin-top:-9%!important}.icon-edit{margin:-9px 1px 4px 4%!important}.rusty,.btn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:0%}.file-upload-box,.file-uploading-box{max-width:100%}.myt-dateTimeNew{margin-left:-10px!important}.form-row{padding-left:8px!important}.dateandtime{padding-left:0!important}.dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.grey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 368px){.icon-edit{margin:0 6px 3px 35%!important}.icon-editios{margin-bottom:4px}.rusty{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:19rem;margin-left:-19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:15%}.radiotext{margin-top:-45px}.file-upload-box,.file-uploading-box{max-width:100%}.grey{width:19rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:19rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.check{display:block}.header2{font-size:20px;font-weight:300;text-align:center;font-stretch:normal;font-style:normal;line-height:1.5;letter-spacing:normal;color:#560d05;max-width:1100px;margin:auto;padding-bottom:10px}.header1{font-size:32px;font-weight:700;text-align:center;font-stretch:normal;font-style:normal;line-height:1.25;letter-spacing:normal;color:#dd2e13}.container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.container1 input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.selbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.selbtngroup{padding-left:.9%!important}}@media (min-width: 481px) and (max-width: 580px){.selbtngroup{padding-left:.2%!important}}@media screen and (min-width: 871px){.selbtngroup{padding-right:4px!important}}@media screen and (max-width: 689px){.answer{max-width:95%!important;margin-left:0!important;margin-right:15px}#progress2{margin-left:8.5px!important}.edit{margin-left:85%!important;margin-bottom:0%!important}.sum-ques,.sum-ques1{width:100%!important;margin:auto}.summary-completed{padding-left:0!important;padding-bottom:17px;margin-top:9px}.summary-top{margin-top:10%}.subTitle1{font-size:18px!important;line-height:1.38!important;text-align:center;letter-spacing:normal;color:#560d05!important;font-weight:300}.backbutton{display:none}.rusty{margin-bottom:37px}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}@media screen and (max-width: 689px){.app-back1{line-height:1.5;cursor:pointer;width:100%;max-width:1200px;margin-right:auto;margin-left:-10px;display:flex;font-family:Helvetica;font-size:21px;font-weight:700;align-items:center;font-stretch:normal;font-style:normal;letter-spacing:normal;color:#dd2e13;z-index:1;position:fixed;background-color:#dedddd;border-radius:0!important;margin-top:-12px;padding-top:.8rem}.header1{padding-top:75px}.dt-time{background-position:100%!important}}.summary-volver{display:none}@media ((min-width: 1200px)){.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.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: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i7.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.MyDatePicker, selector: "my-date-picker", inputs: ["placeholder", "locale", "disabled", "options", "defaultMonth", "selDate", "selector"], outputs: ["dateChanged", "inputFieldChanged", "calendarViewChanged", "calendarToggle", "inputFocusBlur"], exportAs: ["mydatepicker"] }, { kind: "component", type: i6$1.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: i12.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: ["certified", "JobPerformerCertificates"], outputs: ["flagDropDownChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: i4.ActivatedRoute }, { token: i5.DomSanitizer }, { token: i6$1.NgxSpinnerService }, { token: i3.UntypedFormBuilder }, { token: i8.DeviceDetectorService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage" }, providers: [ChangeService], usesOnChanges: true, ngImport: i0, template: "<!-- Spinner -->\n<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n\n<!-- Back Processing -->\n<div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" [style.visibility]=\"questionStack.length >0 ? 'visible' : 'hidden'\">\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.Status__c == 'Completed' ? 'summary-volver':'app-back1'\">\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.Back__c }}\n    </button>\n  </div>\n</div>\n\n<!-- Question Hanlding -->\n<div *ngIf=\"questionItem\" [class]=\"qbItem.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.Title__c && qbItem.Progress_Bar__c\">\n    <h1 class=\"header1\">{{ questionItem?.Title__c }}</h1>\n    <div class=\"header2\">{{ questionItem?.SubTitle__c }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div [ngClass]=\"{ questiondiv2: !qbItem?.Progress_Bar__c }\">\n    <!-- Pie Chart Progress -->\n    <div [ngClass]=\"{ bgColor: qbItem?.Progress_Bar__c }\">\n      <div id=\"progress\" *ngIf=\"qbItem?.Progress_Bar__c\">\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n        [startFromZero]=\"false\" [responsive]=\"false\" >\n        </circle-progress>\n      </div>\n    </div>\n\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.Group__c && qbItem.Progress_Bar__c\"\n        [ngClass]=\"{ questionalign: !qbItem?.Progress_Bar__c }\">\n      <div class=\"largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.Group__c }}\n        </h3>\n        <div *ngIf=\"questionItem.Sub_Text__c != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.Sub_Text__c}}</div>\n        <div *ngIf=\"questionItem.Sub_Text__c === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.Sub_Text__c}}</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Question Handling -->\n  <div class=\"questiondiv2\">\n    <!-- Title -->\n    <div *ngIf=\"questionItem.Is_Title__c\">\n      <div *ngIf=\"questionItem.Type__c != 'Book' && questionItem.Question_No__c!='6' && questionItem.Question_No__c!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{questionItem?.Question_Text__c}}\n        </h3>\n      </div>\n    </div>\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n    <div *ngIf=\"!questionItem.Is_Title__c\" [class]=\"qbItem.isShengel__c ? 'header-style' : 'question-f-size'\">\n      <div [innerHTML]=\"getText(questionItem?.Question_Text__c)\" >\n        {{ questionItem?.Question_Text__c }}\n      </div>\n    </div>\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <div *ngIf=\"questionItem.Type__c == 'Book'\">\n      <div *ngIf=\"questionItem.Question_No__c=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{ questionItem?.Question_Text__c }}\n        </h3>\n      </div>\n    </div>\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <div *ngIf=\"questionItem.Type__c == 'File' \">\n      <div *ngIf=\"questionItem.Question_No__c=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{questionItem?.Question_Text__c}}\n        </h3>\n      </div>\n    </div>\n  </div>\n\n  <!-- Additional Info -->\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n  <div *ngIf=\"questionItem.Additional_Rich__c && qbItem.Progress_Bar__c\" >\n    <div\n      class=\"additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.Additional_Rich__c && !qbItem.Progress_Bar__c\">\n    <div class=\"info-alert ques-alert1\">\n      <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n    </div>\n  </div>\n\n  <!-- Dropdown-->\n  <div *ngIf=\"dropdownFlag\" >\n    <div class=\"dis-flex\">\n      <select \n        [ngClass]=\"{\n          'dt-line myt-align3 myt-align2 dpDown dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.Progress_Bar__c,\n          'custom-select': !qbItem?.Progress_Bar__c\n        }\" class=\"mr-sm-2 dd-height dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\" style=\"margin-left: 21.5rem !important;\">\n        <option *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"option\" value=\"{{ opt.Value__c }}\">\n          {{ opt.Value__c }}\n        </option>\n        <!-- HA 20DEC23 For Translation -->\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\n      </select>\n    </div>\n  </div>\n\n  <!-- Radio -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n      {{ questionItem?.Error_Message__c }}\n    </div>\n    <div class=\"dis-flex\">\n      <div *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"radio radioOption\" >\n        <label class=\"radiocontainer container  myt-font4\">{{ opt.Value__c }}\n          <input type=\"radio\" [id]=\"opt.Id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" value=\"{{ opt.Value__c }}\"\n            (change)=\"optionChange(opt.Value__c)\" />\n<!-- HA 20FEB24 Removed checkmark as it was causing styling issue in Radio -->\n          </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n      {{ questionItem?.Error_Message__c }}\n    </div>\n    <div class=\"dis-flex\">\n      <div *ngFor=\"let item of optionValues\" class=\"radio col-md-6 optiondiv\">\n        <label class=\" container1 \" >{{ item.Value__c }}\n          <input type=\"checkbox\" [id]=\"item.Id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n<!-- HA 20FEB24 Removed checkmark1 as it was causing styling issue in Radio -->\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\" class=\"col-md-12 myt-book1\">\n    <!-- HA 31-JAN-24 To reduce the margin -->\n    <div class=\"col-md-12\" class=\"dis-flex myt-align2\" [class]=\"'col-md-' + questionItem?.Size__c + ' paddingnone'\">\n      <input type=\"text\" [(ngModel)]=\"inpValue\" [ngClass]=\"{\n          'boxoutline myt-font1 myt-book1': qbItem?.Progress_Bar__c,\n          textBox1: !qbItem?.Progress_Bar__c\n        }\" id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <textarea class=\"ta-input\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0 && taFocusOut\n            ? '#87be1c'\n            : ''\n        }}\" (focusout)=\"taFocusOut = true\"\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n      <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\"></i>\n    </div>\n  </div>\n\n  <!-- CC Number Format -->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\"\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\n        *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n  <!-- END-->\n\n  <!-- AlphaNumeric -->\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n    <div style=\"position:relative;\">\n      <!-- HA 20DEC23 For Translation -->\n      <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n    </div>\n  </div>\n\n  <!-- Email -->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\n        *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- DateTime -->\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero myt-time1\" >\n    <!-- Error Handling -->\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n    <!-- Date -->\n    <div *ngIf=\"dateFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n        <div class=\"dis-flex\">\n          <!-- HA 20DEC23 For Translation -->\n          <!-- HA 02FEB24 Additional param to update the question -->\n          <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, '')\"\n            [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\n          </my-date-picker>\n        </div>\n      </div>\n    </div>\n\n    <!-- Time -->\n    <div *ngIf=\"timeFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n        <div class=\"dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n                           dateandTime: !qbItem?.Progress_Bar__c}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n            (focus)=\"clearError()\">\n            <option value=\"\">HH</option>\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n              {{ hour }}\n            </option>\n          </select>\n          <span class=\"colon\"> : </span>\n          <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n            (focus)=\"clearError()\">\n            <option value=\"\">MM</option>\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n              {{ minute }}\n            </option>\n          </select>\n          <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem?.X24_Hours__c == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.Progress_Bar__c, 'dateandTime': !qbItem.Progress_Bar__c}\"></div> -->\n          </div>\n        </div>\n      </div>\n      </div>\n      <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- Attachment / File -->\n  <div *ngIf=\"fileFlag\">\n    <div *ngIf=\"!qbItem.Progress_Bar__c\">\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n        <label class=\"picture-upload\" for=\"file-upload\">\n          <span class=\"picture-upload-child\">\n            <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n          </span>\n          <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\n            <i class=\"\" aria-hidden=\"true\"></i>\n          </span>\n        </label>\n      </div>\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.Type__c === 'File' &&\n        !qbItem?.Progress_Bar__c\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName\n        }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.Progress_Bar__c\">\n      <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\n      </div>\n      <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n      \n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\"> {{ questionItem?.Question_Text__c}}</span>\n        <label class=\"file-label \">\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n          <!-- HA 20DEC23 For Translation -->\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n            class=\"file-upload-btn\">\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\" [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.Id\">\n          <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\n            <span>{{ ques?.Question_Text__c }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero myt-dateTimeNew\" *ngIf=\"ques.Type__c === 'Time' || ques.Type__c === 'Date'\">\n            <div *ngIf=\"ques.Type__c === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n                <div class=\"dateandtime\">\n                  <!-- HA 20DEC23 For Translation -->\n                  <!-- HA 02FEB24 Additional param to update the question -->\n                  <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\n                    [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\"  (focus)=\"clearError()\" >\n                  </my-date-picker>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n                <div class=\"dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n                                  dateandTime: !qbItem?.Progress_Bar__c}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">HH</option>\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n                      {{ hour }}\n                    </option>\n                  </select>\n                  <span class=\"colon\"> : </span>\n                  <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">MM</option>\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n                      {{ minute }}\n                    </option>\n                  </select>\n                  <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem.X24_Hours__c == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n                      <option value=\"AM\">AM</option>\n                      <option value=\"PM\">PM</option>\n                    </select>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'DateTime'\">\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Text'\">\n            <app-custom-input\n                  [value]=\"ques?.input\"\n                  [ngClassValue]=\"{\n                      'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                      textBox: !qbItem.Progress_Bar__c\n                  }\"\n                  [question]=\"ques\" \n                  [idValue]=\"ques?.Tracking_ID__c\"\n                  [focusEvent]=\"clearSQError(ques?.Id)\"\n                  [error]=\"ques?.error\"\n                  [placeholder]=\"ques?.Question__c\"\n                  (inputValue)=\"selectedInput($event,ques)\">\n            </app-custom-input>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- for pick location -->\n            <!-- HA10012024 Added Api key as input -->\n            <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n          </div>\n          <!-- for  text area   -->\n          <div *ngIf=\"ques.Type__c === 'TextArea'\">\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n          </div>\n\n          <!-- Email -->\n          <div *ngIf=\"ques.Type__c === 'Email'\">\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n          </div>\n\n          <div *ngIf=\"ques.Type__c === 'File'\">\n            <div *ngIf=\"!qbItem.Progress_Bar__c\">\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n                <span class=\"picture-upload-child\">\n                  <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n                </span>\n                <span class=\"\n                    fa fa-plus fa-2x\n                    picture-upload-child\n                    pic-upload\n                    icolor\n                  \">\n                  <i class=\"\" aria-hidden=\"true\"></i>\n                </span>\n              </label>\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n            </div>\n\n            <ul *ngIf=\"\n                attachments?.length > 0 &&\n                ques.Type__c === 'File' &&\n                !qbItem.Progress_Bar__c\n              \" class=\"attach-ulist col-md-12\">\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n                {{ attachment.attachmentName\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n              </li>\n            </ul>\n            <div class=\"myt-box\" *ngIf=\"qbItem.Progress_Bar__c\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\n              </div>\n              <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.Question__c }}</span>\n                <label class=\"file-label \">\n                  <span style=\"color: #c5281c;text-decoration:underline\">\n                    {{'attach' | i18n:i18nService.currentLanguage}}\n                  </span>\n                  <!-- HA 20DEC23 For Translation -->\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n                    class=\"file-upload-btn\">\n                </label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Table -->\n          <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n            <app-custom-table \n              [question]=\"ques\"\n              (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n            </app-custom-table>\n          </div>\n\n          <!-- Dropdown -->\n          <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\n            <!-- for common dropdown -->\n            <!-- HA 20DEC23 For Translation -->\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\"\n                    [options]=\"ques.Question_Options__r.records\"\n                    [apiMeta]=\"ques.Sub_Text__c\"\n                    [id]=\"ques.Name\"\n                    [selectedValue]=\"ques.input\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques?.Error_Message__c\"\n                    [error]=\"ques?.error\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n            </app-custom-dropdown>\n            <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\"  [certified]=\"ques.certifiedFlag\"  [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\n            <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n          </div>          \n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!--List start-->\n  <div *ngIf=\"listFlag\">\n    <div class=\"form-group\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div class=\"myt-align3\" [class]=\"'col-md-' + ques.Size__c + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.Id);let i = index\">\n          <div>\n            <span class=\"dis-flex myt-font3 myt-font7\">{{ ques?.Question__c }}</span>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n             textBox: !qbItem.Progress_Bar__c\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\"\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n          </div>\n        </div>\n        <div class=\"\" *ngIf=\"addFlag\">\n          <!-- HA 20DEC23 For Translation -->\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.Id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\n         </div>\n      </div>\n    </div>\n  </div>\n  <!--List End-->\n\n  <!-- Actions -->\n  <div *ngIf=\"individualBookButton\" class=\"flexer\">\n    <!-- Backward / Back -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"backbutton\" [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\"\n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.Back__c\">\n      <div [ngClass]=\"{}\">\n        <button [ngClass]=\"{\n            'left-bt': qbItem.Progress_Bar__c,\n            'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n              !qbItem.Progress_Bar__c\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.Back__c }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Forward / Next -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\" *ngIf=\"qbItem.Next__c\">\n      <div>\n        <button [ngClass]=\"{\n            'rusty': qbItem.Progress_Bar__c,\n            'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n              !qbItem.Progress_Bar__c\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.Next__c }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.Progress_Bar__c\n               }\">\n    <h1 class=\"header1 summarypadd\" >{{ qbItem.SubTitle__c }}</h1>         \n  <div id=\"progress2\" *ngIf=\"!qbItem.Progress_Bar__c && this.abItem.Status__c != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.Progress_Bar__c }\">\n          <div [ngClass]=\"{ summary:  !qbItem.Progress_Bar__c }\">\n           <div *ngIf=\"!qbItem.Edit__c\"\n              [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c\"\n              [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.Status__c === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n                  {{ qa.ansValue }}\n                </div>\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\n                <div *ngIf=\"qa.qTyp == 'Book'\">\n                  <div *ngFor=\"let val of qa.myVal\">\n                    <p>{{ val.Question_Text__c }}: <span>{{ val.input }}</span></p>\n                  </div>\n                </div>\n                <!-- HA 02FEB24 Displaying the value for direct question -->\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.Question_Text__c }}: <span></span>{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"this.abItem.Status__c === 'Completed'\" class=\"col-lg-12\">\n    <div class=\"panel-group panel-group-joined\" id=\"ePTW-details\">\n      <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n          <h4 class=\"panel-title\">\n            <!-- HA 20DEC23 For Translation -->\n            <a data-toggle=\"collapse\" data-parent=\"#ePTW-details\" href=\"#collapseOne\" class=\"collapsed\">\n              {{'details' | i18n:i18nService.currentLanguage}}\n            </a>\n          </h4>\n        </div>\n        <div id=\"collapseOne\" class=\"panel-collapse collapse\">\n          <div class=\"panel-body\">\n            <div class=\"row\">\n              <ng-container *ngFor=\"let item of summaryData; let i = index\">\n                <ng-container *ngIf=\"i % 2 === 0\">\n                  <div class=\"col-lg-6 m-b-30\">\n                    <label>{{ getKey(item) }}</label>\n                    <p class=\"font-size\">{{ getValue(item) || 'N/A' }}</p>\n                  </div>\n                  <div class=\"col-lg-6\" *ngIf=\"summaryData[i + 1]\">\n                    <label>{{ getKey(summaryData[i + 1]) }}</label>\n                    <p class=\"font-size\">{{ getValue(summaryData[i + 1]) || 'N/A' }}</p>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div id=\"progress2\" *ngIf=\"qbItem.Progress_Bar__c \">\n    <div [ngClass]=\"{'bgColor summary-top' : qbItem.Progress_Bar__c }\" >\n      <div id=\"progress-summary\" *ngIf=\"qbItem.Progress_Bar__c\">\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n        [startFromZero]=\"false\" [responsive]=\"false\" >\n      </circle-progress>\n      \n      <div *ngIf=\"qbItem.Summary_Text__c && qbItem.Progress_Bar__c\" \n      [ngClass]=\"{ summaryTitle: qbItem.Progress_Bar__c }\">\n        <h3 class=\"subTitle\" >{{ qbItem.Summary_Text__c }}</h3>\n        <div *ngIf=\"abItem.Status__c != 'Completed'\" class=\"subTitle1\" >{{ qbItem.Summary_Sub_Text__c}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.Progress_Bar__c\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.Summary_Text__c }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n    <div class=\"summary-groupText myt-font2\">\n      <!-- <p>Informe de da\u00F1o</p> -->\n    </div>\n    <div *ngFor=\"let qa of summary\" >\n        <div [ngClass]=\"{ non:  qbItem.Progress_Bar__c }\">\n          <div [ngClass]=\"{ summary: this.abItem.Status__c != 'Completed' && !qbItem.Progress_Bar__c }\">\n            <div *ngIf=\"!qbItem.Edit__c\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.Status__c === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"answer \" >\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n                {{ qa.ansValue }}\n              </div>\n              <div *ngIf=\"qa.qTyp != 'File'\">\n                {{ qa.ansValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Answer Book -->\n  <div class=\"flexer1\" *ngIf=\"abItem\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"\" *ngIf=\"abItem.Status__c == 'Completed' && qbItem.Cancel__c\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.Cancel__c }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.Status__c != 'Completed'\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.Submit__c\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.Submit__c }}\n      </button>\n    </div>\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.Edit__c\">\n      <button [ngClass]=\"{'grey': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.Edit__c }}\n      </button>\n    </div>\n  </div>\n\n</div>", styles: [".rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.edit{background-color:#dedddd;border:none;color:#c5281c;text-decoration:underline;margin-left:50%;font-size:16px;vertical-align:super;font-weight:700}.icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.icon-edit1,.icon-edit-summary{width:29px;height:28px}.questiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.questiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.questiondiv2{padding-left:0!important;padding-bottom:0!important}@media screen and (min-width: 689px){#progress,#progress-summary{padding-left:12px}.backicon{display:none}.dt-time{background-position:98%!important}}.bgColor{text-align:center;background-color:#dedddd}.questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.largeTitle{padding-left:16px;padding-top:12px}.question-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1.5;padding:.5rem 1rem;width:100%;cursor:pointer;outline:0}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.radiotext{margin-top:-30px}.radiocontainer{display:flex;flex-direction:row-reverse;border:1px solid none;border-radius:.3em;padding:0;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#a3a2a2}.radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.myt-time{width:-moz-fit-content!important;width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.showminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.myt-dateTimeNew{margin-left:-14px}.myt-hour{width:-moz-fit-content;width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.date-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.dis-flex{display:flex;justify-content:center}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin-left:-17px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.question{padding:10px;font-size:14px;color:#007bff}.question1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.answer{display:flex;align-items:baseline;padding:5px 5px 10px;font-size:14px;font-weight:400;word-wrap:break-word;width:97%;justify-content:space-between}.answer1{max-width:55%;margin-left:auto;margin-right:auto;color:#a3a2a2;margin-top:0%;padding-bottom:0;font-size:14px;font-weight:400;word-wrap:break-word;text-align:left;background:#dedddd;border-bottom:1px solid #fff}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.sum-ques{width:55%;margin:auto}.sum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#F8F8F8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.file-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.file-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.subTitle1{color:#560d05;font-size:14px;font-weight:500}.check-icon{color:#87be1c;margin-left:-2rem;z-index:1;padding:5px;margin-top:.4rem}.check-icon2{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:.6rem;line-height:3}.check-icon3{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.grey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.btn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.btn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;width:100%;display:flex;justify-content:center}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.down{margin-left:0;width:57%}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.dropbox{margin-left:21.5rem}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.summary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.myt-align{margin-left:4%;line-height:2}.myt-align1{margin-left:-29px}.myt-align2{margin-left:-15px}.myt-align3{width:100%}.myt-book1{margin-top:-20px}.colorf{color:#555}.bookText{width:57%;margin-left:21.5%;background-color:#dedddd}.book{width:32.6%;margin-left:34%;background-color:#dedddd}.summary-completed{padding-left:2%;margin-top:20px}.town{margin:0;background-color:#dedddd}.town-drop{margin:auto;width:57%}.questiondiv1.padd-bottom{padding-bottom:6rem!important;padding-top:2rem!important}@media (max-width: 1090px){.icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (max-width: 768px){.radioOption{width:8%}.grey{width:78%;margin-left:17.5rem;height:68px!important;font-size:20px!important;font-weight:700!important}.answer{margin-top:-4%!important}}@media screen and (max-width: 672px){.header1{font-size:23px!important}.summarypadd{padding-top:50px!important}.answer{margin-top:-5%!important}.icon-edit{margin:0 6px 0 -13%!important}.subTitle1{width:95%!important}.additional{margin-left:6%!important;padding:0!important}.container1{margin-left:-35%}.town-drop{margin:auto;width:100%!important}.dis-flex{display:flex;justify-content:left}.check{display:inherit;width:-moz-max-content;width:max-content;margin-left:6%}.rusty{width:28rem;margin-left:0rem;height:68px!important;font-size:20px!important;font-weight:700!important;margin-bottom:37px}.left-bt{width:28rem;margin-left:-28rem;height:68px!important;font-size:20px!important;font-weight:700!important}.questionalign{text-align:center}.questionalign{margin-top:1rem!important}.largeTitle{padding-left:0!important}.myt-align{margin-left:0%!important}.myt-text1{margin-top:-22px}.myt-text2{margin-top:-20px}.myt-text3{margin-bottom:21px}.date-picker,.dt-time{width:100%}.showminute{margin-top:-.5%}.radioOption{width:auto;margin-top:0;margin-left:7%;margin-right:-3%}.myt-font7{padding-left:0rem;margin-left:-1.5%}.down,.bookText,.book{width:100%;margin-left:0rem}.town{margin-left:0rem;width:100%}.file-upload-box,.file-uploading-box{max-width:85%;margin-left:20px}.question{margin-left:0rem}.btn-text2{width:28rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:28rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 580px){.rusty{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:27rem;margin-left:-27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-24%}.showminute{margin-top:.5%}.bookText,.book{width:100%;margin-left:0rem}.btn-text2{width:27rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:27rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 672px){.questiondiv1{padding:0}}@media screen and (max-width: 525px){.rusty{width:26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-9%}.left-bt{width:26rem;margin-left:-26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.dateandtime{padding-left:10px!important}}@media screen and (max-width: 480px){.answer{margin-top:-7%!important}.icon-edit{margin:0 6px 4px -35%!important}.rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.file-upload-box,.file-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.answer{margin-top:-9%!important}.icon-edit{margin:-9px 1px 4px 4%!important}.rusty,.btn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:0%}.file-upload-box,.file-uploading-box{max-width:100%}.myt-dateTimeNew{margin-left:-10px!important}.form-row{padding-left:8px!important}.dateandtime{padding-left:0!important}.dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.grey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 368px){.icon-edit{margin:0 6px 3px 35%!important}.icon-editios{margin-bottom:4px}.rusty{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:19rem;margin-left:-19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:15%}.radiotext{margin-top:-45px}.file-upload-box,.file-uploading-box{max-width:100%}.grey{width:19rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:19rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.check{display:block}.header2{font-size:20px;font-weight:300;text-align:center;font-stretch:normal;font-style:normal;line-height:1.5;letter-spacing:normal;color:#560d05;max-width:1100px;margin:auto;padding-bottom:10px}.header1{font-size:32px;font-weight:700;text-align:center;font-stretch:normal;font-style:normal;line-height:1.25;letter-spacing:normal;color:#dd2e13}.container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.container1 input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.selbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.selbtngroup{padding-left:.9%!important}}@media (min-width: 481px) and (max-width: 580px){.selbtngroup{padding-left:.2%!important}}@media screen and (min-width: 871px){.selbtngroup{padding-right:4px!important}}@media screen and (max-width: 689px){.answer{max-width:95%!important;margin-left:0!important;margin-right:15px}#progress2{margin-left:8.5px!important}.edit{margin-left:85%!important;margin-bottom:0%!important}.sum-ques,.sum-ques1{width:100%!important;margin:auto}.summary-completed{padding-left:0!important;padding-bottom:17px;margin-top:9px}.summary-top{margin-top:10%}.subTitle1{font-size:18px!important;line-height:1.38!important;text-align:center;letter-spacing:normal;color:#560d05!important;font-weight:300}.backbutton{display:none}.rusty{margin-bottom:37px}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}@media screen and (max-width: 689px){.app-back1{line-height:1.5;cursor:pointer;width:100%;max-width:1200px;margin-right:auto;margin-left:-10px;display:flex;font-family:Helvetica;font-size:21px;font-weight:700;align-items:center;font-stretch:normal;font-style:normal;letter-spacing:normal;color:#dd2e13;z-index:1;position:fixed;background-color:#dedddd;border-radius:0!important;margin-top:-12px;padding-top:.8rem}.header1{padding-top:75px}.dt-time{background-position:100%!important}}.summary-volver{display:none}@media ((min-width: 1200px)){.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.MyDatePicker, selector: "my-date-picker", inputs: ["placeholder", "locale", "disabled", "options", "defaultMonth", "selDate", "selector"], outputs: ["dateChanged", "inputFieldChanged", "calendarViewChanged", "calendarToggle", "inputFocusBlur"], exportAs: ["mydatepicker"] }, { kind: "component", type: i6$1.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: i12.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: ["certified", "JobPerformerCertificates"], outputs: ["flagDropDownChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionnaireComponent, decorators: [{
             type: Component,
             args: [{ selector: "lib-questionnaire", encapsulation: ViewEncapsulation.None, providers: [ChangeService], template: "<!-- Spinner -->\n<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n\n<!-- Back Processing -->\n<div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" [style.visibility]=\"questionStack.length >0 ? 'visible' : 'hidden'\">\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.Status__c == 'Completed' ? 'summary-volver':'app-back1'\">\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.Back__c }}\n    </button>\n  </div>\n</div>\n\n<!-- Question Hanlding -->\n<div *ngIf=\"questionItem\" [class]=\"qbItem.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.Title__c && qbItem.Progress_Bar__c\">\n    <h1 class=\"header1\">{{ questionItem?.Title__c }}</h1>\n    <div class=\"header2\">{{ questionItem?.SubTitle__c }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div [ngClass]=\"{ questiondiv2: !qbItem?.Progress_Bar__c }\">\n    <!-- Pie Chart Progress -->\n    <div [ngClass]=\"{ bgColor: qbItem?.Progress_Bar__c }\">\n      <div id=\"progress\" *ngIf=\"qbItem?.Progress_Bar__c\">\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n        [startFromZero]=\"false\" [responsive]=\"false\" >\n        </circle-progress>\n      </div>\n    </div>\n\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.Group__c && qbItem.Progress_Bar__c\"\n        [ngClass]=\"{ questionalign: !qbItem?.Progress_Bar__c }\">\n      <div class=\"largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.Group__c }}\n        </h3>\n        <div *ngIf=\"questionItem.Sub_Text__c != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.Sub_Text__c}}</div>\n        <div *ngIf=\"questionItem.Sub_Text__c === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.Sub_Text__c}}</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Question Handling -->\n  <div class=\"questiondiv2\">\n    <!-- Title -->\n    <div *ngIf=\"questionItem.Is_Title__c\">\n      <div *ngIf=\"questionItem.Type__c != 'Book' && questionItem.Question_No__c!='6' && questionItem.Question_No__c!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{questionItem?.Question_Text__c}}\n        </h3>\n      </div>\n    </div>\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n    <div *ngIf=\"!questionItem.Is_Title__c\" [class]=\"qbItem.isShengel__c ? 'header-style' : 'question-f-size'\">\n      <div [innerHTML]=\"getText(questionItem?.Question_Text__c)\" >\n        {{ questionItem?.Question_Text__c }}\n      </div>\n    </div>\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <div *ngIf=\"questionItem.Type__c == 'Book'\">\n      <div *ngIf=\"questionItem.Question_No__c=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{ questionItem?.Question_Text__c }}\n        </h3>\n      </div>\n    </div>\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <div *ngIf=\"questionItem.Type__c == 'File' \">\n      <div *ngIf=\"questionItem.Question_No__c=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{questionItem?.Question_Text__c}}\n        </h3>\n      </div>\n    </div>\n  </div>\n\n  <!-- Additional Info -->\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n  <div *ngIf=\"questionItem.Additional_Rich__c && qbItem.Progress_Bar__c\" >\n    <div\n      class=\"additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.Additional_Rich__c && !qbItem.Progress_Bar__c\">\n    <div class=\"info-alert ques-alert1\">\n      <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n    </div>\n  </div>\n\n  <!-- Dropdown-->\n  <div *ngIf=\"dropdownFlag\" >\n    <div class=\"dis-flex\">\n      <select \n        [ngClass]=\"{\n          'dt-line myt-align3 myt-align2 dpDown dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.Progress_Bar__c,\n          'custom-select': !qbItem?.Progress_Bar__c\n        }\" class=\"mr-sm-2 dd-height dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\" style=\"margin-left: 21.5rem !important;\">\n        <option *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"option\" value=\"{{ opt.Value__c }}\">\n          {{ opt.Value__c }}\n        </option>\n        <!-- HA 20DEC23 For Translation -->\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\n      </select>\n    </div>\n  </div>\n\n  <!-- Radio -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n      {{ questionItem?.Error_Message__c }}\n    </div>\n    <div class=\"dis-flex\">\n      <div *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"radio radioOption\" >\n        <label class=\"radiocontainer container  myt-font4\">{{ opt.Value__c }}\n          <input type=\"radio\" [id]=\"opt.Id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" value=\"{{ opt.Value__c }}\"\n            (change)=\"optionChange(opt.Value__c)\" />\n<!-- HA 20FEB24 Removed checkmark as it was causing styling issue in Radio -->\n          </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n      {{ questionItem?.Error_Message__c }}\n    </div>\n    <div class=\"dis-flex\">\n      <div *ngFor=\"let item of optionValues\" class=\"radio col-md-6 optiondiv\">\n        <label class=\" container1 \" >{{ item.Value__c }}\n          <input type=\"checkbox\" [id]=\"item.Id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n<!-- HA 20FEB24 Removed checkmark1 as it was causing styling issue in Radio -->\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\" class=\"col-md-12 myt-book1\">\n    <!-- HA 31-JAN-24 To reduce the margin -->\n    <div class=\"col-md-12\" class=\"dis-flex myt-align2\" [class]=\"'col-md-' + questionItem?.Size__c + ' paddingnone'\">\n      <input type=\"text\" [(ngModel)]=\"inpValue\" [ngClass]=\"{\n          'boxoutline myt-font1 myt-book1': qbItem?.Progress_Bar__c,\n          textBox1: !qbItem?.Progress_Bar__c\n        }\" id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <textarea class=\"ta-input\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0 && taFocusOut\n            ? '#87be1c'\n            : ''\n        }}\" (focusout)=\"taFocusOut = true\"\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n      <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\"></i>\n    </div>\n  </div>\n\n  <!-- CC Number Format -->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\"\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\n        *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n  <!-- END-->\n\n  <!-- AlphaNumeric -->\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n    <div style=\"position:relative;\">\n      <!-- HA 20DEC23 For Translation -->\n      <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n    </div>\n  </div>\n\n  <!-- Email -->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\n        *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- DateTime -->\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero myt-time1\" >\n    <!-- Error Handling -->\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n    <!-- Date -->\n    <div *ngIf=\"dateFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n        <div class=\"dis-flex\">\n          <!-- HA 20DEC23 For Translation -->\n          <!-- HA 02FEB24 Additional param to update the question -->\n          <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, '')\"\n            [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\n          </my-date-picker>\n        </div>\n      </div>\n    </div>\n\n    <!-- Time -->\n    <div *ngIf=\"timeFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n        <div class=\"dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n                           dateandTime: !qbItem?.Progress_Bar__c}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n            (focus)=\"clearError()\">\n            <option value=\"\">HH</option>\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n              {{ hour }}\n            </option>\n          </select>\n          <span class=\"colon\"> : </span>\n          <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n            (focus)=\"clearError()\">\n            <option value=\"\">MM</option>\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n              {{ minute }}\n            </option>\n          </select>\n          <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem?.X24_Hours__c == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.Progress_Bar__c, 'dateandTime': !qbItem.Progress_Bar__c}\"></div> -->\n          </div>\n        </div>\n      </div>\n      </div>\n      <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- Attachment / File -->\n  <div *ngIf=\"fileFlag\">\n    <div *ngIf=\"!qbItem.Progress_Bar__c\">\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n        <label class=\"picture-upload\" for=\"file-upload\">\n          <span class=\"picture-upload-child\">\n            <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n          </span>\n          <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\n            <i class=\"\" aria-hidden=\"true\"></i>\n          </span>\n        </label>\n      </div>\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.Type__c === 'File' &&\n        !qbItem?.Progress_Bar__c\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName\n        }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.Progress_Bar__c\">\n      <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\n      </div>\n      <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n      \n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\"> {{ questionItem?.Question_Text__c}}</span>\n        <label class=\"file-label \">\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n          <!-- HA 20DEC23 For Translation -->\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n            class=\"file-upload-btn\">\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\" [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.Id\">\n          <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\n            <span>{{ ques?.Question_Text__c }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero myt-dateTimeNew\" *ngIf=\"ques.Type__c === 'Time' || ques.Type__c === 'Date'\">\n            <div *ngIf=\"ques.Type__c === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n                <div class=\"dateandtime\">\n                  <!-- HA 20DEC23 For Translation -->\n                  <!-- HA 02FEB24 Additional param to update the question -->\n                  <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\n                    [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\"  (focus)=\"clearError()\" >\n                  </my-date-picker>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n                <div class=\"dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n                                  dateandTime: !qbItem?.Progress_Bar__c}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">HH</option>\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n                      {{ hour }}\n                    </option>\n                  </select>\n                  <span class=\"colon\"> : </span>\n                  <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">MM</option>\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n                      {{ minute }}\n                    </option>\n                  </select>\n                  <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem.X24_Hours__c == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n                      <option value=\"AM\">AM</option>\n                      <option value=\"PM\">PM</option>\n                    </select>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'DateTime'\">\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Text'\">\n            <app-custom-input\n                  [value]=\"ques?.input\"\n                  [ngClassValue]=\"{\n                      'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                      textBox: !qbItem.Progress_Bar__c\n                  }\"\n                  [question]=\"ques\" \n                  [idValue]=\"ques?.Tracking_ID__c\"\n                  [focusEvent]=\"clearSQError(ques?.Id)\"\n                  [error]=\"ques?.error\"\n                  [placeholder]=\"ques?.Question__c\"\n                  (inputValue)=\"selectedInput($event,ques)\">\n            </app-custom-input>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- for pick location -->\n            <!-- HA10012024 Added Api key as input -->\n            <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n          </div>\n          <!-- for  text area   -->\n          <div *ngIf=\"ques.Type__c === 'TextArea'\">\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n          </div>\n\n          <!-- Email -->\n          <div *ngIf=\"ques.Type__c === 'Email'\">\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n          </div>\n\n          <div *ngIf=\"ques.Type__c === 'File'\">\n            <div *ngIf=\"!qbItem.Progress_Bar__c\">\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n                <span class=\"picture-upload-child\">\n                  <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n                </span>\n                <span class=\"\n                    fa fa-plus fa-2x\n                    picture-upload-child\n                    pic-upload\n                    icolor\n                  \">\n                  <i class=\"\" aria-hidden=\"true\"></i>\n                </span>\n              </label>\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n            </div>\n\n            <ul *ngIf=\"\n                attachments?.length > 0 &&\n                ques.Type__c === 'File' &&\n                !qbItem.Progress_Bar__c\n              \" class=\"attach-ulist col-md-12\">\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n                {{ attachment.attachmentName\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n              </li>\n            </ul>\n            <div class=\"myt-box\" *ngIf=\"qbItem.Progress_Bar__c\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\n              </div>\n              <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.Question__c }}</span>\n                <label class=\"file-label \">\n                  <span style=\"color: #c5281c;text-decoration:underline\">\n                    {{'attach' | i18n:i18nService.currentLanguage}}\n                  </span>\n                  <!-- HA 20DEC23 For Translation -->\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n                    class=\"file-upload-btn\">\n                </label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Table -->\n          <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n            <app-custom-table \n              [question]=\"ques\"\n              (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n            </app-custom-table>\n          </div>\n\n          <!-- Dropdown -->\n          <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\n            <!-- for common dropdown -->\n            <!-- HA 20DEC23 For Translation -->\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\"\n                    [options]=\"ques.Question_Options__r.records\"\n                    [apiMeta]=\"ques.Sub_Text__c\"\n                    [id]=\"ques.Name\"\n                    [selectedValue]=\"ques.input\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques?.Error_Message__c\"\n                    [error]=\"ques?.error\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n            </app-custom-dropdown>\n            <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\"  [certified]=\"ques.certifiedFlag\"  [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\n            <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n          </div>          \n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!--List start-->\n  <div *ngIf=\"listFlag\">\n    <div class=\"form-group\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div class=\"myt-align3\" [class]=\"'col-md-' + ques.Size__c + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.Id);let i = index\">\n          <div>\n            <span class=\"dis-flex myt-font3 myt-font7\">{{ ques?.Question__c }}</span>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n             textBox: !qbItem.Progress_Bar__c\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\"\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n          </div>\n        </div>\n        <div class=\"\" *ngIf=\"addFlag\">\n          <!-- HA 20DEC23 For Translation -->\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.Id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\n         </div>\n      </div>\n    </div>\n  </div>\n  <!--List End-->\n\n  <!-- Actions -->\n  <div *ngIf=\"individualBookButton\" class=\"flexer\">\n    <!-- Backward / Back -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"backbutton\" [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\"\n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.Back__c\">\n      <div [ngClass]=\"{}\">\n        <button [ngClass]=\"{\n            'left-bt': qbItem.Progress_Bar__c,\n            'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n              !qbItem.Progress_Bar__c\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.Back__c }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Forward / Next -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\" *ngIf=\"qbItem.Next__c\">\n      <div>\n        <button [ngClass]=\"{\n            'rusty': qbItem.Progress_Bar__c,\n            'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n              !qbItem.Progress_Bar__c\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.Next__c }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.Progress_Bar__c\n               }\">\n    <h1 class=\"header1 summarypadd\" >{{ qbItem.SubTitle__c }}</h1>         \n  <div id=\"progress2\" *ngIf=\"!qbItem.Progress_Bar__c && this.abItem.Status__c != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.Progress_Bar__c }\">\n          <div [ngClass]=\"{ summary:  !qbItem.Progress_Bar__c }\">\n           <div *ngIf=\"!qbItem.Edit__c\"\n              [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c\"\n              [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.Status__c === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n                  {{ qa.ansValue }}\n                </div>\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\n                <div *ngIf=\"qa.qTyp == 'Book'\">\n                  <div *ngFor=\"let val of qa.myVal\">\n                    <p>{{ val.Question_Text__c }}: <span>{{ val.input }}</span></p>\n                  </div>\n                </div>\n                <!-- HA 02FEB24 Displaying the value for direct question -->\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.Question_Text__c }}: <span></span>{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"this.abItem.Status__c === 'Completed'\" class=\"col-lg-12\">\n    <div class=\"panel-group panel-group-joined\" id=\"ePTW-details\">\n      <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n          <h4 class=\"panel-title\">\n            <!-- HA 20DEC23 For Translation -->\n            <a data-toggle=\"collapse\" data-parent=\"#ePTW-details\" href=\"#collapseOne\" class=\"collapsed\">\n              {{'details' | i18n:i18nService.currentLanguage}}\n            </a>\n          </h4>\n        </div>\n        <div id=\"collapseOne\" class=\"panel-collapse collapse\">\n          <div class=\"panel-body\">\n            <div class=\"row\">\n              <ng-container *ngFor=\"let item of summaryData; let i = index\">\n                <ng-container *ngIf=\"i % 2 === 0\">\n                  <div class=\"col-lg-6 m-b-30\">\n                    <label>{{ getKey(item) }}</label>\n                    <p class=\"font-size\">{{ getValue(item) || 'N/A' }}</p>\n                  </div>\n                  <div class=\"col-lg-6\" *ngIf=\"summaryData[i + 1]\">\n                    <label>{{ getKey(summaryData[i + 1]) }}</label>\n                    <p class=\"font-size\">{{ getValue(summaryData[i + 1]) || 'N/A' }}</p>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div id=\"progress2\" *ngIf=\"qbItem.Progress_Bar__c \">\n    <div [ngClass]=\"{'bgColor summary-top' : qbItem.Progress_Bar__c }\" >\n      <div id=\"progress-summary\" *ngIf=\"qbItem.Progress_Bar__c\">\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n        [startFromZero]=\"false\" [responsive]=\"false\" >\n      </circle-progress>\n      \n      <div *ngIf=\"qbItem.Summary_Text__c && qbItem.Progress_Bar__c\" \n      [ngClass]=\"{ summaryTitle: qbItem.Progress_Bar__c }\">\n        <h3 class=\"subTitle\" >{{ qbItem.Summary_Text__c }}</h3>\n        <div *ngIf=\"abItem.Status__c != 'Completed'\" class=\"subTitle1\" >{{ qbItem.Summary_Sub_Text__c}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.Progress_Bar__c\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.Summary_Text__c }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n    <div class=\"summary-groupText myt-font2\">\n      <!-- <p>Informe de da\u00F1o</p> -->\n    </div>\n    <div *ngFor=\"let qa of summary\" >\n        <div [ngClass]=\"{ non:  qbItem.Progress_Bar__c }\">\n          <div [ngClass]=\"{ summary: this.abItem.Status__c != 'Completed' && !qbItem.Progress_Bar__c }\">\n            <div *ngIf=\"!qbItem.Edit__c\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.Status__c === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"answer \" >\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n                {{ qa.ansValue }}\n              </div>\n              <div *ngIf=\"qa.qTyp != 'File'\">\n                {{ qa.ansValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Answer Book -->\n  <div class=\"flexer1\" *ngIf=\"abItem\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"\" *ngIf=\"abItem.Status__c == 'Completed' && qbItem.Cancel__c\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.Cancel__c }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.Status__c != 'Completed'\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.Submit__c\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.Submit__c }}\n      </button>\n    </div>\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.Edit__c\">\n      <button [ngClass]=\"{'grey': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.Edit__c }}\n      </button>\n    </div>\n  </div>\n\n</div>", styles: [".rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.edit{background-color:#dedddd;border:none;color:#c5281c;text-decoration:underline;margin-left:50%;font-size:16px;vertical-align:super;font-weight:700}.icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.icon-edit1,.icon-edit-summary{width:29px;height:28px}.questiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.questiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.questiondiv2{padding-left:0!important;padding-bottom:0!important}@media screen and (min-width: 689px){#progress,#progress-summary{padding-left:12px}.backicon{display:none}.dt-time{background-position:98%!important}}.bgColor{text-align:center;background-color:#dedddd}.questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.largeTitle{padding-left:16px;padding-top:12px}.question-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1.5;padding:.5rem 1rem;width:100%;cursor:pointer;outline:0}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.radiotext{margin-top:-30px}.radiocontainer{display:flex;flex-direction:row-reverse;border:1px solid none;border-radius:.3em;padding:0;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#a3a2a2}.radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.myt-time{width:-moz-fit-content!important;width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.showminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.myt-dateTimeNew{margin-left:-14px}.myt-hour{width:-moz-fit-content;width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.date-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.dis-flex{display:flex;justify-content:center}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin-left:-17px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.question{padding:10px;font-size:14px;color:#007bff}.question1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.answer{display:flex;align-items:baseline;padding:5px 5px 10px;font-size:14px;font-weight:400;word-wrap:break-word;width:97%;justify-content:space-between}.answer1{max-width:55%;margin-left:auto;margin-right:auto;color:#a3a2a2;margin-top:0%;padding-bottom:0;font-size:14px;font-weight:400;word-wrap:break-word;text-align:left;background:#dedddd;border-bottom:1px solid #fff}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.sum-ques{width:55%;margin:auto}.sum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#F8F8F8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.file-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.file-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.subTitle1{color:#560d05;font-size:14px;font-weight:500}.check-icon{color:#87be1c;margin-left:-2rem;z-index:1;padding:5px;margin-top:.4rem}.check-icon2{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:.6rem;line-height:3}.check-icon3{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.grey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.btn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.btn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;width:100%;display:flex;justify-content:center}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.down{margin-left:0;width:57%}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.dropbox{margin-left:21.5rem}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.summary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.myt-align{margin-left:4%;line-height:2}.myt-align1{margin-left:-29px}.myt-align2{margin-left:-15px}.myt-align3{width:100%}.myt-book1{margin-top:-20px}.colorf{color:#555}.bookText{width:57%;margin-left:21.5%;background-color:#dedddd}.book{width:32.6%;margin-left:34%;background-color:#dedddd}.summary-completed{padding-left:2%;margin-top:20px}.town{margin:0;background-color:#dedddd}.town-drop{margin:auto;width:57%}.questiondiv1.padd-bottom{padding-bottom:6rem!important;padding-top:2rem!important}@media (max-width: 1090px){.icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (max-width: 768px){.radioOption{width:8%}.grey{width:78%;margin-left:17.5rem;height:68px!important;font-size:20px!important;font-weight:700!important}.answer{margin-top:-4%!important}}@media screen and (max-width: 672px){.header1{font-size:23px!important}.summarypadd{padding-top:50px!important}.answer{margin-top:-5%!important}.icon-edit{margin:0 6px 0 -13%!important}.subTitle1{width:95%!important}.additional{margin-left:6%!important;padding:0!important}.container1{margin-left:-35%}.town-drop{margin:auto;width:100%!important}.dis-flex{display:flex;justify-content:left}.check{display:inherit;width:-moz-max-content;width:max-content;margin-left:6%}.rusty{width:28rem;margin-left:0rem;height:68px!important;font-size:20px!important;font-weight:700!important;margin-bottom:37px}.left-bt{width:28rem;margin-left:-28rem;height:68px!important;font-size:20px!important;font-weight:700!important}.questionalign{text-align:center}.questionalign{margin-top:1rem!important}.largeTitle{padding-left:0!important}.myt-align{margin-left:0%!important}.myt-text1{margin-top:-22px}.myt-text2{margin-top:-20px}.myt-text3{margin-bottom:21px}.date-picker,.dt-time{width:100%}.showminute{margin-top:-.5%}.radioOption{width:auto;margin-top:0;margin-left:7%;margin-right:-3%}.myt-font7{padding-left:0rem;margin-left:-1.5%}.down,.bookText,.book{width:100%;margin-left:0rem}.town{margin-left:0rem;width:100%}.file-upload-box,.file-uploading-box{max-width:85%;margin-left:20px}.question{margin-left:0rem}.btn-text2{width:28rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:28rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 580px){.rusty{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:27rem;margin-left:-27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-24%}.showminute{margin-top:.5%}.bookText,.book{width:100%;margin-left:0rem}.btn-text2{width:27rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:27rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 672px){.questiondiv1{padding:0}}@media screen and (max-width: 525px){.rusty{width:26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-9%}.left-bt{width:26rem;margin-left:-26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.dateandtime{padding-left:10px!important}}@media screen and (max-width: 480px){.answer{margin-top:-7%!important}.icon-edit{margin:0 6px 4px -35%!important}.rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.file-upload-box,.file-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.answer{margin-top:-9%!important}.icon-edit{margin:-9px 1px 4px 4%!important}.rusty,.btn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:0%}.file-upload-box,.file-uploading-box{max-width:100%}.myt-dateTimeNew{margin-left:-10px!important}.form-row{padding-left:8px!important}.dateandtime{padding-left:0!important}.dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.grey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 368px){.icon-edit{margin:0 6px 3px 35%!important}.icon-editios{margin-bottom:4px}.rusty{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:19rem;margin-left:-19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:15%}.radiotext{margin-top:-45px}.file-upload-box,.file-uploading-box{max-width:100%}.grey{width:19rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:19rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.check{display:block}.header2{font-size:20px;font-weight:300;text-align:center;font-stretch:normal;font-style:normal;line-height:1.5;letter-spacing:normal;color:#560d05;max-width:1100px;margin:auto;padding-bottom:10px}.header1{font-size:32px;font-weight:700;text-align:center;font-stretch:normal;font-style:normal;line-height:1.25;letter-spacing:normal;color:#dd2e13}.container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.container1 input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.selbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.selbtngroup{padding-left:.9%!important}}@media (min-width: 481px) and (max-width: 580px){.selbtngroup{padding-left:.2%!important}}@media screen and (min-width: 871px){.selbtngroup{padding-right:4px!important}}@media screen and (max-width: 689px){.answer{max-width:95%!important;margin-left:0!important;margin-right:15px}#progress2{margin-left:8.5px!important}.edit{margin-left:85%!important;margin-bottom:0%!important}.sum-ques,.sum-ques1{width:100%!important;margin:auto}.summary-completed{padding-left:0!important;padding-bottom:17px;margin-top:9px}.summary-top{margin-top:10%}.subTitle1{font-size:18px!important;line-height:1.38!important;text-align:center;letter-spacing:normal;color:#560d05!important;font-weight:300}.backbutton{display:none}.rusty{margin-bottom:37px}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}@media screen and (max-width: 689px){.app-back1{line-height:1.5;cursor:pointer;width:100%;max-width:1200px;margin-right:auto;margin-left:-10px;display:flex;font-family:Helvetica;font-size:21px;font-weight:700;align-items:center;font-stretch:normal;font-style:normal;letter-spacing:normal;color:#dd2e13;z-index:1;position:fixed;background-color:#dedddd;border-radius:0!important;margin-top:-12px;padding-top:.8rem}.header1{padding-top:75px}.dt-time{background-position:100%!important}}.summary-volver{display:none}@media ((min-width: 1200px)){.form-row{display:flex;flex-wrap:wrap}}\n"] }]
-        }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: i4.ActivatedRoute }, { type: i5.DomSanitizer }, { type: i6$1.NgxSpinnerService }, { type: i7.UntypedFormBuilder }, { type: i8.DeviceDetectorService }, { type: i0.ElementRef }, { type: I18nService }]; }, propDecorators: { qbId: [{
+        }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: i4.ActivatedRoute }, { type: i5.DomSanitizer }, { type: i6$1.NgxSpinnerService }, { type: i3.UntypedFormBuilder }, { type: i8.DeviceDetectorService }, { type: i0.ElementRef }, { type: I18nService }]; }, propDecorators: { qbId: [{
                 type: Input
             }], insuranceStartDate: [{
                 type: Input
@@ -3859,6 +3868,241 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+class CustomModelComponent {
+    constructor() { }
+    modalTitle;
+    isModalOpen = false;
+    modalSize = '';
+    saveButtonValue = 'Save';
+    modalFooter = true;
+    saveButtonEmit = new EventEmitter();
+    cancelButtonEmit = new EventEmitter();
+    onSave() {
+        this.saveButtonEmit.emit();
+    }
+    onCancel() {
+        this.cancelButtonEmit.emit();
+    }
+    ngOnInit() {
+    }
+    closeModal() {
+        this.cancelButtonEmit.emit(false);
+    }
+    saveModal() {
+        this.saveButtonEmit.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomModelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomModelComponent, selector: "app-custom-model", inputs: { modalTitle: "modalTitle", isModalOpen: "isModalOpen", modalSize: "modalSize", saveButtonValue: "saveButtonValue", modalFooter: "modalFooter" }, outputs: { saveButtonEmit: "saveButtonEmit", cancelButtonEmit: "cancelButtonEmit" }, ngImport: i0, template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n        <h2>{{ modalTitle }}</h2>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n        <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n        <button (click)=\"onCancel()\">Cancel</button>\n      </div>\n    </div>\n  </div>\n  ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#000;background-color:#0006}.modal-content{background-color:#fefefe;margin:10% auto;padding:20px;border:1px solid #888;width:70%}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomModelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-model', template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n        <h2>{{ modalTitle }}</h2>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n        <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n        <button (click)=\"onCancel()\">Cancel</button>\n      </div>\n    </div>\n  </div>\n  ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#000;background-color:#0006}.modal-content{background-color:#fefefe;margin:10% auto;padding:20px;border:1px solid #888;width:70%}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { modalTitle: [{
+                type: Input
+            }], isModalOpen: [{
+                type: Input
+            }], modalSize: [{
+                type: Input
+            }], saveButtonValue: [{
+                type: Input
+            }], modalFooter: [{
+                type: Input
+            }], saveButtonEmit: [{
+                type: Output
+            }], cancelButtonEmit: [{
+                type: Output
+            }] } });
+
+class CustomCalendarComponent {
+    eventSelected = new EventEmitter();
+    allEvents = [];
+    question;
+    entries = [];
+    referenceQuestions = [];
+    qbRefrenceBook;
+    calendarQuestion = [];
+    currentDate = new Date();
+    calendarDays = [];
+    daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    newEventTitle = '';
+    newEventTime = '';
+    newDescription = '';
+    newLink = '';
+    selectedDay = null;
+    isModalOpen = false;
+    modalTitle = 'Custom Modal';
+    modalSize = 'large';
+    saveButtonValue = 'Save';
+    modalFooter = true;
+    editingEventId;
+    ngOnInit() {
+        if (this.question?.input) {
+            this.allEvents = this.question.input;
+        }
+        this.processQuestion();
+        this.generateCalendar();
+    }
+    processQuestion() {
+        this.entries = JSON.parse(this.question['Fields_Meta__c']);
+        this.qbRefrenceBook = JSON.parse(this.question['QB_Reference_Questions__c']);
+        let title = this.qbRefrenceBook?.questionbook?.Title__c;
+        this.modalTitle = title;
+        this.referenceQuestions = [];
+        if (this.entries.length > 0) {
+            this.entries.forEach(element => {
+                if (element.questionReference) {
+                    let qReference = JSON.parse(element.questionReference);
+                    this.referenceQuestions.push(qReference?.question);
+                }
+            });
+        }
+        console.log('entries-->');
+        console.log('question-->');
+        console.log(this.entries);
+        console.log(this.referenceQuestions);
+    }
+    generateCalendar() {
+        const year = this.currentDate.getFullYear();
+        const month = this.currentDate.getMonth();
+        const startOfMonth = new Date(year, month, 1);
+        const endOfMonth = new Date(year, month + 1, 0);
+        const startDayOfWeek = startOfMonth.getDay();
+        const endDayOfWeek = endOfMonth.getDay();
+        const startDate = new Date(startOfMonth);
+        startDate.setDate(startDate.getDate() - startDayOfWeek);
+        const endDate = new Date(endOfMonth);
+        endDate.setDate(endDate.getDate() + (6 - endDayOfWeek));
+        const today = new Date(new Date().setHours(0, 0, 0, 0));
+        this.calendarDays = [];
+        for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
+            const date = new Date(d);
+            this.calendarDays.push({
+                date: date,
+                events: [],
+                isCurrentMonth: d.getMonth() === month,
+                isPast: date < today,
+                isToday: date.getTime() === today.getTime(),
+                isFuture: date > today,
+            });
+        }
+        // Populate calendar with events from allEvents array
+        this.calendarDays.forEach(day => {
+            day.events = this.allEvents.filter(event => event.date.toDateString() === day.date.toDateString());
+        });
+        this.eventSelected.emit(this.allEvents);
+    }
+    selectDay(day) {
+        console.log(day);
+        this.selectedDay = day;
+        // this.eventSelected.emit(day?.events);
+        const previouslySelectedDay = this.calendarDays.find(d => d.isSelected);
+        if (previouslySelectedDay) {
+            previouslySelectedDay.isSelected = false;
+        }
+        // Select the clicked day
+        day.isSelected = true;
+    }
+    previousMonth() {
+        this.currentDate.setMonth(this.currentDate.getMonth() - 1);
+        this.currentDate = new Date(this.currentDate); // Ensure the date object is updated
+        this.generateCalendar();
+    }
+    nextMonth() {
+        this.currentDate.setMonth(this.currentDate.getMonth() + 1);
+        this.currentDate = new Date(this.currentDate); // Ensure the date object is updated
+        this.generateCalendar();
+    }
+    addAppointment() {
+        this.isModalOpen = true;
+        this.calendarQuestion = this.referenceQuestions.map(q => ({ ...q, input: '' }));
+        this.referenceQuestions.forEach(ques => {
+            // clear the input
+            if (ques.input) {
+                delete ques.input;
+            }
+        });
+        console.log(' console.log(this.referenceQuestions);');
+        console.log(this.referenceQuestions);
+        this.editingEventId = null;
+    }
+    editEvent(event) {
+        this.isModalOpen = true;
+        // this.calendarQuestion = event.entries.map(q => ({ ...q }));
+        this.referenceQuestions = event.entries.map(q => ({ ...q }));
+        this.editingEventId = event.id;
+        this.generateCalendar();
+    }
+    deleteEvent(day, eventId) {
+        day.events = day.events.filter(event => event.id !== eventId);
+        this.allEvents = this.allEvents.filter(event => event.id !== eventId);
+        this.generateCalendar();
+    }
+    closeModal() {
+        this.isModalOpen = false;
+    }
+    addEvent(day, entryQues) {
+        const newEvent = {
+            id: this.generateId(),
+            date: day.date,
+            entries: entryQues.map(q => ({ ...q }))
+        };
+        day.events.push(newEvent);
+        this.allEvents.push(newEvent);
+        this.generateCalendar();
+        console.log('allEvents');
+        console.log(this.allEvents);
+        this.generateCalendar();
+    }
+    onSave() {
+        if (this.editingEventId !== null) {
+            const event = this.allEvents.find(e => e.id === this.editingEventId);
+            if (event) {
+                event.entries = this.calendarQuestion.map(q => ({ ...q }));
+            }
+        }
+        else {
+            if (this.selectedDay) {
+                this.addEvent(this.selectedDay, this.calendarQuestion);
+            }
+        }
+        this.closeModal();
+        this.generateCalendar();
+    }
+    onCancel() {
+        console.log('Cancel button clicked');
+        this.closeModal();
+    }
+    handleQuestionEvent(ques) {
+        // Update the questions array with the new question
+        const index = this.calendarQuestion.findIndex(q => q.Id === ques.Id);
+        if (index > -1) {
+            // If question already exists, update it
+            this.calendarQuestion[index] = ques;
+        }
+        else {
+            // If question doesn't exist, add it to the array
+            this.calendarQuestion.push(ques);
+        }
+        console.log('calender question');
+        console.log(this.calendarQuestion);
+    }
+    generateId() {
+        return '_' + Math.random().toString(36).substr(2, 9);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: { allEvents: "allEvents", question: "question" }, outputs: { eventSelected: "eventSelected" }, ngImport: i0, template: "<div class=\"align-calendar\">\n    <div class=\"calendar-container\">\n        <div class=\"calendar-header\">\n          <button (click)=\"previousMonth()\"><< Previous >></button>\n          <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\n          <button (click)=\"nextMonth()\"><< Next >></button>\n        </div>\n        <div class=\"calendar-grid\">\n          <!-- Days of the Week Header -->\n          <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n      \n          <!-- Calendar Days -->\n          <div\n            class=\"calendar-day\"\n            *ngFor=\"let day of calendarDays\"\n            [class.not-current-month]=\"!day.isCurrentMonth\"\n            [class.past]=\"day.isPast\"\n            [class.today]=\"day.isToday\"\n            [class.future]=\"day.isFuture\"\n            [class.selected]=\"day.isSelected\" \n            (click)=\"selectDay(day)\"\n          >\n            <div class=\"day-number\">{{ day.date.getDate() }}</div>\n            <div *ngFor=\"let event of day.events\" class=\"event\">\n              <div  *ngFor=\"let entry of event?.entries\">\n                <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'shortTime'  }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n    <div class=\"appoinappointment\">\n        <div class=\"appointments-container\">\n            <h4>Add Appointment</h4>\n            <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\n          </div>\n          <div class=\"appointments-container\">\n            <h4 *ngIf=\"selectedDay?.events.length > 0\">Appointments</h4>\n            <div class=\"event\" *ngFor=\"let event of selectedDay?.events\">\n                <div class=\"event-info\">\n                  <div>\n                    <div  *ngFor=\"let entry of event?.entries\">\n                      <div *ngIf=\"entry.Type__c != 'Time'\">{{ entry.input }}</div>\n                      <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'mediumDate'  }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"event-actions\">\n                  <button  (click)=\"editEvent(event)\">Edit</button>\n                  <button (click)=\"deleteEvent(selectedDay, event.id)\">Delete</button>\n                </div>\n              </div>          \n          </div>\n    </div>\n</div>\n\n<app-custom-model\n  [modalTitle]=\"modalTitle\"\n  [isModalOpen]=\"isModalOpen\"\n  [modalSize]=\"modalSize\"\n  [saveButtonValue]=\"saveButtonValue\"\n  [modalFooter]=\"modalFooter\"\n  (saveButtonEmit)=\"onSave()\"\n  (cancelButtonEmit)=\"onCancel()\"\n>\n<app-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></app-questionbook>\n</app-custom-model>\n\n\n  \n  \n  ", styles: [".calendar-container{flex:1}.appoinappointment{flex:2;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day-of-week{text-align:center;font-weight:700;padding:5px;background-color:#f0f0f0;border:1px solid #ccc}.calendar-day{border:1px solid #ccc;padding:5px;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;position:relative;cursor:pointer}.calendar-day.not-current-month{background-color:#f0f0f0}.calendar-day.past{color:#aaa}.calendar-day.today{background-color:#e6ffe6;font-weight:700}.calendar-day.future{color:#000}.day-number{font-size:1.2em;margin-bottom:5px}.event{background-color:#d1e7dd;border-left:4px solid #0f5132;margin:5px 0;padding:2px 5px;border-radius:3px}.event-title{font-weight:700}.event-time{font-size:.8em}input[type=text],input[type=time]{width:100%;margin-top:5px;box-sizing:border-box}button{margin-top:5px;align-self:stretch;margin-left:0!important}.calendar-header button{margin-top:5px;align-self:stretch;margin-left:0!important;border:none;background:none}.align-calendar{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-calendar', template: "<div class=\"align-calendar\">\n    <div class=\"calendar-container\">\n        <div class=\"calendar-header\">\n          <button (click)=\"previousMonth()\"><< Previous >></button>\n          <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\n          <button (click)=\"nextMonth()\"><< Next >></button>\n        </div>\n        <div class=\"calendar-grid\">\n          <!-- Days of the Week Header -->\n          <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n      \n          <!-- Calendar Days -->\n          <div\n            class=\"calendar-day\"\n            *ngFor=\"let day of calendarDays\"\n            [class.not-current-month]=\"!day.isCurrentMonth\"\n            [class.past]=\"day.isPast\"\n            [class.today]=\"day.isToday\"\n            [class.future]=\"day.isFuture\"\n            [class.selected]=\"day.isSelected\" \n            (click)=\"selectDay(day)\"\n          >\n            <div class=\"day-number\">{{ day.date.getDate() }}</div>\n            <div *ngFor=\"let event of day.events\" class=\"event\">\n              <div  *ngFor=\"let entry of event?.entries\">\n                <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'shortTime'  }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n    <div class=\"appoinappointment\">\n        <div class=\"appointments-container\">\n            <h4>Add Appointment</h4>\n            <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\n          </div>\n          <div class=\"appointments-container\">\n            <h4 *ngIf=\"selectedDay?.events.length > 0\">Appointments</h4>\n            <div class=\"event\" *ngFor=\"let event of selectedDay?.events\">\n                <div class=\"event-info\">\n                  <div>\n                    <div  *ngFor=\"let entry of event?.entries\">\n                      <div *ngIf=\"entry.Type__c != 'Time'\">{{ entry.input }}</div>\n                      <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'mediumDate'  }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"event-actions\">\n                  <button  (click)=\"editEvent(event)\">Edit</button>\n                  <button (click)=\"deleteEvent(selectedDay, event.id)\">Delete</button>\n                </div>\n              </div>          \n          </div>\n    </div>\n</div>\n\n<app-custom-model\n  [modalTitle]=\"modalTitle\"\n  [isModalOpen]=\"isModalOpen\"\n  [modalSize]=\"modalSize\"\n  [saveButtonValue]=\"saveButtonValue\"\n  [modalFooter]=\"modalFooter\"\n  (saveButtonEmit)=\"onSave()\"\n  (cancelButtonEmit)=\"onCancel()\"\n>\n<app-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></app-questionbook>\n</app-custom-model>\n\n\n  \n  \n  ", styles: [".calendar-container{flex:1}.appoinappointment{flex:2;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day-of-week{text-align:center;font-weight:700;padding:5px;background-color:#f0f0f0;border:1px solid #ccc}.calendar-day{border:1px solid #ccc;padding:5px;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;position:relative;cursor:pointer}.calendar-day.not-current-month{background-color:#f0f0f0}.calendar-day.past{color:#aaa}.calendar-day.today{background-color:#e6ffe6;font-weight:700}.calendar-day.future{color:#000}.day-number{font-size:1.2em;margin-bottom:5px}.event{background-color:#d1e7dd;border-left:4px solid #0f5132;margin:5px 0;padding:2px 5px;border-radius:3px}.event-title{font-weight:700}.event-time{font-size:.8em}input[type=text],input[type=time]{width:100%;margin-top:5px;box-sizing:border-box}button{margin-top:5px;align-self:stretch;margin-left:0!important}.calendar-header button{margin-top:5px;align-self:stretch;margin-left:0!important;border:none;background:none}.align-calendar{display:flex;width:100%}\n"] }]
+        }], propDecorators: { eventSelected: [{
+                type: Output
+            }], allEvents: [{
+                type: Input
+            }], question: [{
+                type: Input
+            }] } });
+
 class SearchBoxComponent {
     sfService;
     dataService;
@@ -3954,7 +4198,7 @@ class SearchBoxComponent {
         this.searchValueChange.emit(change);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchBoxComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: i4.ActivatedRoute }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\">\n    <input #auto id=\"searchbox-style\"\n            (blur)=\"clearList()\" \n            [(ngModel)]=\"filterName\" \n            type=\"text\" \n            name=\"name\" \n            [readOnly]=\"readOnly\"\n            [placeholder]=\"placeHolderText\" \n            style=\"margin: 0 !important;\" \n            class=\"searchInput she-line-input form-control\" \n            (focusin)=\"getSourceDataLocal($event)\" \n            (input)=\"getSourceDataLocal($event)\">\n    <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n    <div *ngIf=\"finalResults.length > 0 && showSuggestion\" \n        style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \n        class=\"suggestions-container\">\n        <!-- HA 20DEC23 Uncommented the logic -->\n         <!-- VD 03May- search changes -->\n        <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n          <!-- VD 26Jun24 - id condition removed -->\n            <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\n                <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                    <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n                </div>\n                <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n                  <!--// VD 26JUN24 - pipe changes -->\n                    <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\n                </div>\n            </div>\n        </div>\n        <!-- HA 20DEC23 For Commented this for future purpose -->\n        <!-- <table class=\"table table-striped table-bordered\">\n            <thead>\n              <tr>\n                <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n                <td>{{ item.firstName }}</td>\n                <td>{{ item.lastName }}</td>\n                <td>{{ item.division }}</td>\n                <td>{{ item.numberPlate }}</td>\n              </tr>\n            </tbody>\n          </table> -->\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\">\n    <input #auto id=\"searchbox-style\"\n            (blur)=\"clearList()\" \n            [(ngModel)]=\"filterName\" \n            type=\"text\" \n            name=\"name\" \n            [readOnly]=\"readOnly\"\n            [placeholder]=\"placeHolderText\" \n            style=\"margin: 0 !important;\" \n            class=\"searchInput she-line-input form-control\" \n            (focusin)=\"getSourceDataLocal($event)\" \n            (input)=\"getSourceDataLocal($event)\">\n    <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n    <div *ngIf=\"finalResults.length > 0 && showSuggestion\" \n        style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \n        class=\"suggestions-container\">\n        <!-- HA 20DEC23 Uncommented the logic -->\n         <!-- VD 03May- search changes -->\n        <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n          <!-- VD 26Jun24 - id condition removed -->\n            <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\n                <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                    <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n                </div>\n                <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n                  <!--// VD 26JUN24 - pipe changes -->\n                    <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\n                </div>\n            </div>\n        </div>\n        <!-- HA 20DEC23 For Commented this for future purpose -->\n        <!-- <table class=\"table table-striped table-bordered\">\n            <thead>\n              <tr>\n                <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n                <td>{{ item.firstName }}</td>\n                <td>{{ item.lastName }}</td>\n                <td>{{ item.division }}</td>\n                <td>{{ item.numberPlate }}</td>\n              </tr>\n            </tbody>\n          </table> -->\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchBoxComponent, decorators: [{
             type: Component,
@@ -4075,6 +4319,7 @@ class FileUploadComponent {
     isShowNoFileIcon;
     tableFile; // file Upload from table
     question;
+    error;
     selectedFileNameArray = [];
     copyOfInputAllFiles;
     copyOfFileUploadingLimit;
@@ -4105,47 +4350,94 @@ class FileUploadComponent {
     }
     uploadMultipleFiles(event) {
         console.log('File uploader initiated');
-        const inputFiles = this.copyOfInputAllFiles ? this.copyOfInputAllFiles : [];
+        let inputFiles = this.copyOfInputAllFiles ? this.copyOfInputAllFiles : [];
         const selectedFileData = [];
         const uploadedFiles = event.target.files;
         if (uploadedFiles.length + inputFiles.length <= this.copyOfFileUploadingLimit) {
+            const readFilesPromises = [];
             for (const eachUploadedFile of uploadedFiles) {
-                const reader = new FileReader();
                 const file = eachUploadedFile;
                 const format = file.name.split('.')[1];
-                reader.readAsDataURL(file);
-                reader.onload = () => {
-                    selectedFileData.push({
-                        doc: reader.result,
-                        name: file.name,
-                        type: file.type,
-                        format,
-                        id: null,
-                    });
-                    inputFiles.push({
-                        doc: reader.result,
-                        name: file.name,
-                        type: file.type,
-                        format,
-                        id: null,
-                    });
-                };
-            }
+                // Create a promise for each file read
+                const fileReadPromise = new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.readAsDataURL(file);
+                    reader.onload = () => {
+                        const fileData = {
+                            doc: reader.result,
+                            name: file.name,
+                            type: file.type,
+                            format,
+                            id: null,
+                        };
+                        selectedFileData.push(fileData);
+                        inputFiles.push(fileData);
+                        resolve();
+                    };
+                    reader.onerror = () => {
+                        reject();
+                    };
+                });
+                readFilesPromises.push(fileReadPromise);
+            }
+            // Wait for all promises to resolve
+            Promise.all(readFilesPromises).then(() => {
+                this.copyOfInputAllFiles = inputFiles;
+                console.log('uploadedFiles', inputFiles);
+                this.selectedFileData.emit(inputFiles);
+            }).catch(() => {
+                console.error('Error reading files');
+            });
         }
         else {
             console.warn('You can upload max 5 files');
-            //this.toastr.warning(TOASTER_MESSAGES.MAX_FIVE_FILES, TOASTER_MESSAGES.WARNING_TITLE);
+            // this.toastr.warning(TOASTER_MESSAGES.MAX_FIVE_FILES, TOASTER_MESSAGES.WARNING_TITLE);
         }
         event.target.value = '';
-        this.copyOfInputAllFiles = inputFiles;
-        console.log('uploadedFiles', inputFiles);
-        this.selectedFileData.emit(inputFiles);
     }
+    // uploadMultipleFiles(event: any) {
+    //   console.log('File uploader initiated');
+    //   let inputFiles: any[] = this.copyOfInputAllFiles ? this.copyOfInputAllFiles : [];
+    //   const selectedFileData = [];
+    //   const uploadedFiles = event.target.files;
+    //   if (uploadedFiles.length + inputFiles.length <= this.copyOfFileUploadingLimit) {
+    //     for (const eachUploadedFile of uploadedFiles) {
+    //       const reader = new FileReader();
+    //       const file: File = eachUploadedFile;
+    //       const format = file.name.split('.')[1];
+    //       reader.readAsDataURL(file);
+    //       reader.onload = () => {
+    //         selectedFileData.push({
+    //           doc: reader.result,
+    //           name: file.name,
+    //           type: file.type,
+    //           format,
+    //           id: null,
+    //         });
+    //         inputFiles.push({
+    //           doc: reader.result,
+    //           name: file.name,
+    //           type: file.type,
+    //           format,
+    //           id: null,
+    //         });
+    //       };
+    //     }
+    //   } else {
+    //     console.warn('You can upload max 5 files');
+    //     //this.toastr.warning(TOASTER_MESSAGES.MAX_FIVE_FILES, TOASTER_MESSAGES.WARNING_TITLE);
+    //   }
+    //   event.target.value = '';
+    //   this.copyOfInputAllFiles = inputFiles;
+    //   console.log('uploadedFiles',inputFiles);
+    //   this.selectedFileData.emit(inputFiles);
+    // }
     deleteFile(currentFileIndex) {
         const deletedFileName = this.selectedFileNameArray.splice(currentFileIndex, 1);
         const deletedFile = this.copyOfInputAllFiles.splice(currentFileIndex, 1);
         console.log('emit', deletedFile[0]);
         this.deletedFileData.emit(deletedFile[0]);
+        this.selectedFileData.emit(this.copyOfInputAllFiles);
     }
     // viewFile(currentFile) {
     //   // Display file here
@@ -4206,11 +4498,11 @@ class FileUploadComponent {
         this.showFile = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: SharedService }, { token: DataService }, { token: i5.DomSanitizer }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FileUploadComponent, selector: "app-file-upload", inputs: { allFiles: "allFiles", limitFileUploading: "limitFileUploading", isDeleteFileButtonVisible: "isDeleteFileButtonVisible", isShowNoFileIcon: "isShowNoFileIcon", tableFile: "tableFile", question: "question" }, outputs: { selectedFileData: "selectedFileData", deletedFileData: "deletedFileData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" style=\"margin: 0;\">\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n    <!-- HA 19DEC23 For translation -->\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n  </div>\n  <div class=\"col-lg-3 document-cnt m-t-10 m-b-10 hover-pointer\"\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n     <div *ngIf=\"!tableFile\" class=\"row\"> <!-- (click)=\"viewFile(eachFile)\"  -->\n      <div class=\"col-lg-3 document_image\">\n        <img [src]=\"getDocIcon(eachFile?.name)\" style=\"margin-right: 10px;height: 40px;\">\n    </div>\n      <div class=\"col-lg-9 document_name\">\n        {{eachFile?.name}}\n      </div>\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n      </div>\n      <!-- VD 20May24 - preview changes-->\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n      </div>\n    </div>\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n      <div class=\"col-lg-3 document_image\">\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n      </div>\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n          {{eachFile?.name}}\n      </div>\n  </div>\n  </div>\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n    <!-- HA 19DEC23 For translation -->\n    <!-- VD 03May24 file upload fix-->\n    <button class=\"she-btn-primary-bordered\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n    [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n    >{{ 'chooseFiles' | i18n:i18nService.currentLanguage }}</button>\n\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n<!-- HA 19DEC23 For translation -->\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n  </label>\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\n  formControl?.documents?.errors?.required\">\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n  </span> -->\n</div>\n<!-- VD 20May24 - preview changes-->\n<!-- model -->\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n  <div class=\"nxt-file-map-modal\">\n    <div class=\"nxt-file-model-content\">\n      <div class=\"nxt-file-model-header\">\n        <!-- HA 19DEC23 For translation -->\n        <h4>{{fileName}}</h4>\n        <button class=\"close-button\" (click)=\"close()\">X</button>\n      </div>\n      <ng-container *ngIf=\"isImage; else otherFile\">\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n      </ng-container>\n      <ng-template #otherFile>\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"400px\"></iframe>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".nav.nav-tabs+.tab-content{background:transparent}.row_cnt_folder{background:#fff;padding:50px 30px}.row-recent-file{border-top:1px solid #EBEBEB;padding:20px 0;cursor:pointer}p{margin-bottom:0}.floating_button{position:fixed;right:20px;bottom:20px;z-index:10;cursor:pointer}.floating_button img{height:60px}.form-cnt{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.section-header{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px}.document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px;margin-top:10px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px;overflow:hidden}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.nxt-file-map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.nxt-file-model-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.nxt-file-model-header h3{margin:0}.nxt-file-model-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}.preview-icon{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FileUploadComponent, selector: "app-file-upload", inputs: { allFiles: "allFiles", limitFileUploading: "limitFileUploading", isDeleteFileButtonVisible: "isDeleteFileButtonVisible", isShowNoFileIcon: "isShowNoFileIcon", tableFile: "tableFile", question: "question", error: "error" }, outputs: { selectedFileData: "selectedFileData", deletedFileData: "deletedFileData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" style=\"margin: 0;\">\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n    <!-- HA 19DEC23 For translation -->\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n  </div>\n  <div class=\"col-lg-3 document-cnt m-t-10 m-b-10 hover-pointer\"\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n     <div *ngIf=\"!tableFile\" class=\"row\"> <!-- (click)=\"viewFile(eachFile)\"  -->\n      <div class=\"col-lg-3 document_image\">\n        <img [src]=\"getDocIcon(eachFile?.name)\" style=\"margin-right: 10px;height: 40px;\">\n    </div>\n      <div class=\"col-lg-9 document_name\">\n        {{eachFile?.name}}\n      </div>\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n      </div>\n      <!-- VD 20May24 - preview changes-->\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n      </div>\n    </div>\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n      <div class=\"col-lg-3 document_image\">\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n      </div>\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n          {{eachFile?.name}}\n      </div>\n  </div>\n  </div>\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n    <!-- HA 19DEC23 For translation -->\n    <!-- VD 03May24 file upload fix-->\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n    [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n    >{{ 'chooseFiles' | i18n:i18nService.currentLanguage }}</button>\n\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n<!-- HA 19DEC23 For translation -->\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n  </label>\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\n  formControl?.documents?.errors?.required\">\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n  </span> -->\n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.Error_Message__c}}</div>\n<!-- VD 20May24 - preview changes-->\n<!-- model -->\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n  <div class=\"nxt-file-map-modal\">\n    <div class=\"nxt-file-model-content\">\n      <div class=\"nxt-file-model-header\">\n        <!-- HA 19DEC23 For translation -->\n        <h4>{{fileName}}</h4>\n        <button class=\"close-button\" (click)=\"close()\">X</button>\n      </div>\n      <ng-container *ngIf=\"isImage; else otherFile\">\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n      </ng-container>\n      <ng-template #otherFile>\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"400px\"></iframe>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".nav.nav-tabs+.tab-content{background:transparent}.row_cnt_folder{background:#fff;padding:50px 30px}.row-recent-file{border-top:1px solid #EBEBEB;padding:20px 0;cursor:pointer}p{margin-bottom:0}.floating_button{position:fixed;right:20px;bottom:20px;z-index:10;cursor:pointer}.floating_button img{height:60px}.form-cnt{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.section-header{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px}.document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px;margin-top:10px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px;overflow:hidden}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.nxt-file-map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.nxt-file-model-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.nxt-file-model-header h3{margin:0}.nxt-file-model-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}.preview-icon{cursor:pointer}.Invalid{border:1px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-file-upload', template: "<div class=\"row\" style=\"margin: 0;\">\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n    <!-- HA 19DEC23 For translation -->\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n  </div>\n  <div class=\"col-lg-3 document-cnt m-t-10 m-b-10 hover-pointer\"\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n     <div *ngIf=\"!tableFile\" class=\"row\"> <!-- (click)=\"viewFile(eachFile)\"  -->\n      <div class=\"col-lg-3 document_image\">\n        <img [src]=\"getDocIcon(eachFile?.name)\" style=\"margin-right: 10px;height: 40px;\">\n    </div>\n      <div class=\"col-lg-9 document_name\">\n        {{eachFile?.name}}\n      </div>\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n      </div>\n      <!-- VD 20May24 - preview changes-->\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n      </div>\n    </div>\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n      <div class=\"col-lg-3 document_image\">\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n      </div>\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n          {{eachFile?.name}}\n      </div>\n  </div>\n  </div>\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n    <!-- HA 19DEC23 For translation -->\n    <!-- VD 03May24 file upload fix-->\n    <button class=\"she-btn-primary-bordered\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n    [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n    >{{ 'chooseFiles' | i18n:i18nService.currentLanguage }}</button>\n\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n<!-- HA 19DEC23 For translation -->\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n  </label>\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\n  formControl?.documents?.errors?.required\">\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n  </span> -->\n</div>\n<!-- VD 20May24 - preview changes-->\n<!-- model -->\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n  <div class=\"nxt-file-map-modal\">\n    <div class=\"nxt-file-model-content\">\n      <div class=\"nxt-file-model-header\">\n        <!-- HA 19DEC23 For translation -->\n        <h4>{{fileName}}</h4>\n        <button class=\"close-button\" (click)=\"close()\">X</button>\n      </div>\n      <ng-container *ngIf=\"isImage; else otherFile\">\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n      </ng-container>\n      <ng-template #otherFile>\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"400px\"></iframe>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".nav.nav-tabs+.tab-content{background:transparent}.row_cnt_folder{background:#fff;padding:50px 30px}.row-recent-file{border-top:1px solid #EBEBEB;padding:20px 0;cursor:pointer}p{margin-bottom:0}.floating_button{position:fixed;right:20px;bottom:20px;z-index:10;cursor:pointer}.floating_button img{height:60px}.form-cnt{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.section-header{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px}.document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px;margin-top:10px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px;overflow:hidden}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.nxt-file-map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.nxt-file-model-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.nxt-file-model-header h3{margin:0}.nxt-file-model-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}.preview-icon{cursor:pointer}\n"] }]
+            args: [{ selector: 'app-file-upload', template: "<div class=\"row\" style=\"margin: 0;\">\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n    <!-- HA 19DEC23 For translation -->\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n  </div>\n  <div class=\"col-lg-3 document-cnt m-t-10 m-b-10 hover-pointer\"\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n     <div *ngIf=\"!tableFile\" class=\"row\"> <!-- (click)=\"viewFile(eachFile)\"  -->\n      <div class=\"col-lg-3 document_image\">\n        <img [src]=\"getDocIcon(eachFile?.name)\" style=\"margin-right: 10px;height: 40px;\">\n    </div>\n      <div class=\"col-lg-9 document_name\">\n        {{eachFile?.name}}\n      </div>\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n      </div>\n      <!-- VD 20May24 - preview changes-->\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n      </div>\n    </div>\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n      <div class=\"col-lg-3 document_image\">\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n      </div>\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n          {{eachFile?.name}}\n      </div>\n  </div>\n  </div>\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n    <!-- HA 19DEC23 For translation -->\n    <!-- VD 03May24 file upload fix-->\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n    [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n    >{{ 'chooseFiles' | i18n:i18nService.currentLanguage }}</button>\n\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n<!-- HA 19DEC23 For translation -->\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n  </label>\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\n  formControl?.documents?.errors?.required\">\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n  </span> -->\n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.Error_Message__c}}</div>\n<!-- VD 20May24 - preview changes-->\n<!-- model -->\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n  <div class=\"nxt-file-map-modal\">\n    <div class=\"nxt-file-model-content\">\n      <div class=\"nxt-file-model-header\">\n        <!-- HA 19DEC23 For translation -->\n        <h4>{{fileName}}</h4>\n        <button class=\"close-button\" (click)=\"close()\">X</button>\n      </div>\n      <ng-container *ngIf=\"isImage; else otherFile\">\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n      </ng-container>\n      <ng-template #otherFile>\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"400px\"></iframe>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".nav.nav-tabs+.tab-content{background:transparent}.row_cnt_folder{background:#fff;padding:50px 30px}.row-recent-file{border-top:1px solid #EBEBEB;padding:20px 0;cursor:pointer}p{margin-bottom:0}.floating_button{position:fixed;right:20px;bottom:20px;z-index:10;cursor:pointer}.floating_button img{height:60px}.form-cnt{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.section-header{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px}.document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px;margin-top:10px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px;overflow:hidden}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.nxt-file-map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.nxt-file-model-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.nxt-file-model-header h3{margin:0}.nxt-file-model-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}.preview-icon{cursor:pointer}.Invalid{border:1px solid red!important}\n"] }]
         }], ctorParameters: function () { return [{ type: SharedService }, { type: DataService }, { type: i5.DomSanitizer }, { type: I18nService }]; }, propDecorators: { selectedFileData: [{
                 type: Output
             }], deletedFileData: [{
@@ -4227,6 +4519,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], question: [{
                 type: Input
+            }], error: [{
+                type: Input
             }] } });
 
 class DependentTableComponent {
@@ -4386,7 +4680,7 @@ class TableAppendixComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableAppendixComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableAppendixComponent, selector: "app-table-appendix", inputs: { question: "question" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n    <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\n      <th></th>\n      <th>{{ tableInfo.tableHeader }}</th>\n      <th></th>\n    </thead>\n    <thead>\n      <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\n        {{ header.label }}\n      </th>\n    </thead>\n    <tbody id=\"safetyMeasuresTableBody\">\n      <tr *ngFor=\"let item of tableData; let i = index\">\n        <td *ngFor=\"let header of tableHeader; let j = index\">\n          <div *ngIf=\"header.type === 'text'\">\n            <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('number')\">\n            <!-- HA 19DEC23 For translation -->\n            <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type === 'dropdown'\">\n            <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \n            [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\n            (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type === 'textcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\"  style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\n                <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n          <div *ngIf=\"header.type === 'labelcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <!-- HA 19DEC23 For translation -->\n              <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\n                <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\n        <td colspan=\"1\">\n          <!-- HA 19DEC23 For translation -->\n          <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\n        <td colspan=\"3\">\n          <!-- HA 19DEC23 For translation -->\n          <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\n        </td>\n        <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">\n          +\n        </td>\n      </tr>\n      <tr  *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\n        <td *ngFor=\"let header of tableHeader; let l = index\">\n          <div *ngIf=\"header.type === 'text'\" >\n            <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\n            <!-- HA 19DEC23 For translation -->\n            <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \n            [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n            (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\n            <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\n            (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\n            placeholder=\"DD/MM/YYYY HH:MM\">\n          </div>\n          <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\n            <label class=\"switch2\">\n              <input  class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \n              type=\"checkbox\"\n              [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\n              <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n              <span class=\"switch-handle2\"></span> \n            </label> \n          </div>\n          <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\n            <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\n            (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\n            [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:rgba(175,172,172,.5);color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:rgb(2,173,2);border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableAppendixComponent, selector: "app-table-appendix", inputs: { question: "question" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n    <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\n      <th></th>\n      <th>{{ tableInfo.tableHeader }}</th>\n      <th></th>\n    </thead>\n    <thead>\n      <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\n        {{ header.label }}\n      </th>\n    </thead>\n    <tbody id=\"safetyMeasuresTableBody\">\n      <tr *ngFor=\"let item of tableData; let i = index\">\n        <td *ngFor=\"let header of tableHeader; let j = index\">\n          <div *ngIf=\"header.type === 'text'\">\n            <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('number')\">\n            <!-- HA 19DEC23 For translation -->\n            <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type === 'dropdown'\">\n            <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \n            [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\n            (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type === 'textcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\"  style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\n                <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n          <div *ngIf=\"header.type === 'labelcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <!-- HA 19DEC23 For translation -->\n              <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\n                <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\n        <td colspan=\"1\">\n          <!-- HA 19DEC23 For translation -->\n          <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\n        <td colspan=\"3\">\n          <!-- HA 19DEC23 For translation -->\n          <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\n        </td>\n        <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">\n          +\n        </td>\n      </tr>\n      <tr  *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\n        <td *ngFor=\"let header of tableHeader; let l = index\">\n          <div *ngIf=\"header.type === 'text'\" >\n            <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\n            <!-- HA 19DEC23 For translation -->\n            <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \n            [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n            (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\n            <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\n            (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\n            placeholder=\"DD/MM/YYYY HH:MM\">\n          </div>\n          <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\n            <label class=\"switch2\">\n              <input  class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \n              type=\"checkbox\"\n              [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\n              <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n              <span class=\"switch-handle2\"></span> \n            </label> \n          </div>\n          <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\n            <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\n            (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\n            [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:rgba(175,172,172,.5);color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:rgb(2,173,2);border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableAppendixComponent, decorators: [{
             type: Component,
@@ -4398,53 +4692,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class CustomDateComponent {
+    i18nService;
     date;
     readOnly = false; // VD 12Jun24 - readonly change
+    error;
+    errorMessage;
     dateChange = new EventEmitter();
     dateSelected;
-    constructor() { }
+    constructor(i18nService) {
+        this.i18nService = i18nService;
+    }
     ngOnInit() {
         this.dateSelected = new Date(this.date);
     }
     onDateChange(event) {
         this.dateChange.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDateComponent, selector: "app-custom-date", inputs: { date: "date", readOnly: "readOnly" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<p>\n    <input\n      class=\"input-shengel\"\n      [(ngModel)]=\"dateSelected\"\n      [owlDateTimeTrigger]=\"dt1\"\n      [owlDateTime]=\"dt1\"\n      [disabled]=\"readOnly\"\n      placeholder=\"DD/MM/YYYY\"\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onDateChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n  </p>", styles: [""], dependencies: [{ kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i2$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i2$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDateComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDateComponent, selector: "app-custom-date", inputs: { date: "date", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<p>\n    <input\n      [class]=\"error ? 'invalid' : ''\"\n      [(ngModel)]=\"dateSelected\"\n      [owlDateTimeTrigger]=\"dt1\"\n      [owlDateTime]=\"dt1\"\n      [disabled]=\"readOnly\"\n      placeholder=\"DD/MM/YYYY\"\n      (input)=\"onDateChange($event)\"\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onDateChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n  </p>\n  <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i4$2.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$2.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-date', template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<p>\n    <input\n      class=\"input-shengel\"\n      [(ngModel)]=\"dateSelected\"\n      [owlDateTimeTrigger]=\"dt1\"\n      [owlDateTime]=\"dt1\"\n      [disabled]=\"readOnly\"\n      placeholder=\"DD/MM/YYYY\"\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onDateChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n  </p>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { date: [{
+            args: [{ selector: 'app-custom-date', template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<p>\n    <input\n      [class]=\"error ? 'invalid' : ''\"\n      [(ngModel)]=\"dateSelected\"\n      [owlDateTimeTrigger]=\"dt1\"\n      [owlDateTime]=\"dt1\"\n      [disabled]=\"readOnly\"\n      placeholder=\"DD/MM/YYYY\"\n      (input)=\"onDateChange($event)\"\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onDateChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n  </p>\n  <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { date: [{
                 type: Input
             }], readOnly: [{
                 type: Input
+            }], error: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
             }], dateChange: [{
                 type: Output
             }] } });
 
 class CustomTimeComponent {
+    i18nService;
     time;
     readOnly = false; // VD 12Jun24 - readonly change
+    error;
+    errorMessage;
     timeChange = new EventEmitter();
     timeSelected;
-    constructor() { }
+    constructor(i18nService) {
+        this.i18nService = i18nService;
+    }
     ngOnInit() {
-        this.timeSelected = new Date(this.time);
+        if (this.time) {
+            this.time = this.time['value'] ? this.time['value'] : this.time;
+            this.timeSelected = new Date(this.time);
+        }
+        else {
+            // if no time set null value
+            this.timeSelected = null;
+        }
+    }
+    ngOnChanges(changes) {
+        // update on changes
+        if (changes['time']) {
+            if (this.time) {
+                this.time = this.time['value'] ? this.time['value'] : this.time;
+                this.timeSelected = new Date(this.time);
+            }
+            else {
+                this.timeSelected = null;
+            }
+        }
     }
     onTimeChange(event) {
         this.timeChange.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTimeComponent, selector: "app-custom-time", inputs: { time: "time", readOnly: "readOnly" }, outputs: { timeChange: "timeChange" }, ngImport: i0, template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n  <p>\n    <input\n      class=\"input-shengel\"\n      [(ngModel)]=\"timeSelected\"\n      [owlDateTimeTrigger]=\"dt2\"\n      [owlDateTime]=\"dt2\"\n      placeholder=\"HH:MM\"\n      [readOnly]=\"readOnly\" \n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onTimeChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\n  </p>", styles: [""], dependencies: [{ kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i2$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i2$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTimeComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTimeComponent, selector: "app-custom-time", inputs: { time: "time", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { timeChange: "timeChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n  <p>\n    <input\n      [class]=\"error ? 'invalid' : ''\"\n      [(ngModel)]=\"timeSelected\"\n      [owlDateTimeTrigger]=\"dt2\"\n      [owlDateTime]=\"dt2\"\n      placeholder=\"HH:MM\"\n      [readOnly]=\"readOnly\" \n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onTimeChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\n  </p>\n  <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i4$2.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$2.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-time', template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n  <p>\n    <input\n      class=\"input-shengel\"\n      [(ngModel)]=\"timeSelected\"\n      [owlDateTimeTrigger]=\"dt2\"\n      [owlDateTime]=\"dt2\"\n      placeholder=\"HH:MM\"\n      [readOnly]=\"readOnly\" \n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onTimeChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\n  </p>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { time: [{
+            args: [{ selector: 'app-custom-time', template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n  <p>\n    <input\n      [class]=\"error ? 'invalid' : ''\"\n      [(ngModel)]=\"timeSelected\"\n      [owlDateTimeTrigger]=\"dt2\"\n      [owlDateTime]=\"dt2\"\n      placeholder=\"HH:MM\"\n      [readOnly]=\"readOnly\" \n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onTimeChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\n  </p>\n  <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { time: [{
                 type: Input
             }], readOnly: [{
                 type: Input
+            }], error: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
             }], timeChange: [{
                 type: Output
             }] } });
@@ -4501,6 +4832,7 @@ class QuestionbookComponent {
     labelValue;
     token; // VD 19JAN24 - getting token as input
     handleDropDown = new EventEmitter();
+    handleQuestion = new EventEmitter(); // VD 19Jul01 - get updated question
     dropDownData;
     subQuestions;
     selectedFileData = [];
@@ -4529,26 +4861,28 @@ class QuestionbookComponent {
         if (this.qbItem?.Style__c) {
             // HA 28DEC23 Added styling and logics to load the book type questions 
             this.qbItem.Style__c = typeof this.qbItem.Style__c === 'string' ? JSON.parse('' + this.qbItem?.Style__c) : this.qbItem.Style__c;
-            this.qbItem.Style__c.labelClass = this.qbItem.Style__c.labelClass ? this.qbItem.Style__c.labelClass : "";
-            this.qbItem.Style__c.labelStyle = this.qbItem.Style__c.labelStyle ? this.qbItem.Style__c.labelStyle : "";
-            this.qbItem.Style__c.inputClass = this.qbItem.Style__c.inputClass ? this.qbItem.Style__c.inputClass : "";
-            this.qbItem.Style__c.inputStyle = this.qbItem.Style__c.inputStyle ? this.qbItem.Style__c.inputStyle : "";
-            this.qbItem.Style__c.bookStyle = this.qbItem.Style__c.bookStyle ? this.qbItem.Style__c.bookStyle : "";
-            this.qbItem.Style__c.showLabel = this.qbItem.Style__c.showLabel ? this.qbItem.Style__c.showLabel : true;
+            this.qbItem.Style__c.labelClass = this.qbItem.Style__c?.labelClass ? this.qbItem.Style__c?.labelClass : "";
+            this.qbItem.Style__c.labelStyle = this.qbItem.Style__c?.labelStyle ? this.qbItem.Style__c?.labelStyle : "";
+            this.qbItem.Style__c.inputClass = this.qbItem.Style__c?.inputClass ? this.qbItem.Style__c?.inputClass : "";
+            this.qbItem.Style__c.inputStyle = this.qbItem.Style__c.inputStyle ? this.qbItem.Style__c?.inputStyle : "";
+            this.qbItem.Style__c.bookStyle = this.qbItem.Style__c?.bookStyle ? this.qbItem.Style__c?.bookStyle : "";
+            this.qbItem.Style__c.showLabel = this.qbItem.Style__c?.showLabel ? this.qbItem.Style__c?.showLabel : true;
         }
         else {
-            this.qbItem.Style__c = {
-                "labelClass": "",
-                "labelStyle": "",
-                "inputClass": "",
-                "inputStyle": "",
-                "bookStyle": "",
-                "showLabel": true,
-                "direction": "ltr",
-                "questionStyle": ""
-            };
+            if (this.qbItem) {
+                this.qbItem.Style__c = {
+                    "labelClass": "",
+                    "labelStyle": "",
+                    "inputClass": "",
+                    "inputStyle": "",
+                    "bookStyle": "",
+                    "showLabel": true,
+                    "direction": "ltr",
+                    "questionStyle": ""
+                };
+            }
         }
-        this.qbItem.Style__c.questionStyle = this.qbItem?.Style__c?.questionStyle ? this.qbItem.Style__c.questionStyle : "";
+        this.qbItem.Style__c.questionStyle = this.qbItem?.Style__c?.questionStyle ? this.qbItem?.Style__c.questionStyle : "";
         this.langDirection = this.qbItem.Style__c.direction = this.qbItem?.Style__c?.direction ? this.qbItem?.Style__c?.direction : 'ltr';
         this.bookStyle = this.qbItem?.Style__c?.bookStyle;
         this.questions.forEach(element => {
@@ -4656,24 +4990,30 @@ class QuestionbookComponent {
             ques.input = this.selectedFileData = event;
         }
         else if (ques.Type__c == 'Date' || ques.Type__c == 'DateTime') { // HA 24JAN24 Converting Date and DateTime to UTC
-            let d = new Date(event.value);
-            // Convert to ISO string with timezone offset
-            let utcString = d.toISOString();
-            // console.log('utcString', utcString);
-            ques.input = utcString;
+            if (event.value) {
+                let d = new Date(event.value);
+                let utcString = d.toISOString();
+                ques.input = utcString;
+            }
+            else {
+                ques.input = '';
+            }
         }
         else {
             ques.input = event;
         }
         // validating   error message
-        if (ques.Error_Message__c && !ques.input) {
-            ques.error = new ErrorWrapper;
-        }
-        else {
-            ques.error = null;
-        }
+        const hasError = ques.Error_Message__c && ((ques.Type__c === 'File' && ques.input.length == 0) || (ques.Type__c != 'File' && !ques.input));
+        ques.error = hasError ? new ErrorWrapper() : null;
+        // if(ques.Is_Optional__c && !ques.input){
+        //   ques.error = new ErrorWrapper
+        // }else{
+        //   ques.error = null;  
+        // }
         // Once the right value is stored in ques.input store the ques (with input) in storageService
         this.storageService.update(ques);
+        // VD 19Jul01 - get updated question
+        this.handleQuestion.emit(ques);
     }
     deleteFile(fileData) {
         console.log('fileDATA', fileData);
@@ -4682,11 +5022,11 @@ class QuestionbookComponent {
         this.hadleDropDownDependent.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: I18nService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", hadleDropDownDependent: "hadleDropDownDependent" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <div\n            [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.Is_Hide__c\">\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n            </div>\n            <!-- VD 20JUN24 - help text changes-->\n            <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c.showLabel\" [style]=\"ques.Style__c.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\">{{ ques?.Question_Text__c }} <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n            </div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n\n             <!-- Date-->\n             <div *ngIf=\"ques.Type__c === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n\n             <!-- Time-->\n             <div *ngIf=\"ques.Type__c === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n\n            <!-- Text -->\n            <div *ngIf=\"ques.Type__c === 'Text'\">\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                        textBox: !qbItem.Progress_Bar__c\n                    }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n                </app-custom-input>\n            </div>\n            \n            <!-- for pick location -->\n            <!--   VD 21DEC23 - dependent field change -->\n            <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n            </div>\n\n            <!-- for  text area   -->\n            <div *ngIf=\"ques.Type__c === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.Type__c === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n            </div>\n\n            <!-- Table -->\n            <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-table>\n            </div>\n\n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-table-appendix>\n            </div>\n             <!-- list -->\n             <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\"  [selectedValue]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-search-box>\n            </div>\n\n            <!-- Dropdown -->\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n            <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-dropdown>\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n            </div>\n\n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n                <app-file-upload [limitFileUploading]=\"5\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n                <app-custom-label [labelValue]=\"labelValue\">\n                </app-custom-label>\n            </div>\n            <!-- 08NOV23 - button type question added -->\n             <!-- Button -->\n            <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"  \n                [width]=\"'150px'\" \n                [buttonText]=\"ques?.Question__c\"\n                [value]=\"ques?.Question__c\"\n                (buttonValue)=\"childEventCapture($event, ques)\"\n                >\n                </app-custom-button>\n            </div>\n            <!-- HA 20DEC23  This is to load book type questions-->\n            <div *ngIf=\"ques.Type__c === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "hadleDropDownDependent"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", hadleDropDownDependent: "hadleDropDownDependent" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <div\n            [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.Is_Hide__c\">\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n            </div>\n            <!-- VD 20JUN24 - help text changes-->\n            <!-- VD 01Aug24 - validation change-->\n            <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c.showLabel\" [style]=\"ques.Style__c.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\">{{ ques?.Question_Text__c }} \n                    <div  *ngIf=\"ques.Is_Optional__c\" style=\"color: red;\">*</div>\n                    <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n            </div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n\n             <!-- Date-->\n             <div *ngIf=\"ques.Type__c === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n\n             <!-- Time-->\n             <div *ngIf=\"ques.Type__c === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.Type__c === 'Calendar'\">\n                <app-custom-calendar [question]=\"ques\"  (eventSelected)=\"childEventCapture($event, ques)\"></app-custom-calendar>\n            </div>\n\n            <!-- Text -->\n            <div *ngIf=\"ques.Type__c === 'Text'\">\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                        textBox: !qbItem.Progress_Bar__c\n                    }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n                </app-custom-input>\n            </div>\n            \n            <!-- for pick location -->\n            <!--   VD 21DEC23 - dependent field change -->\n            <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n            </div>\n\n            <!-- for  text area   -->\n            <div *ngIf=\"ques.Type__c === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.Type__c === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n            </div>\n\n            <!-- Table -->\n            <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-table>\n            </div>\n\n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-table-appendix>\n            </div>\n             <!-- list -->\n             <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\"  [selectedValue]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-search-box>\n            </div>\n\n            <!-- Dropdown -->\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n            <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-dropdown>\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n            </div>\n\n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n                <app-custom-label [labelValue]=\"labelValue\">\n                </app-custom-label>\n            </div>\n            <!-- 08NOV23 - button type question added -->\n             <!-- Button -->\n            <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"  \n                [width]=\"'150px'\" \n                [buttonText]=\"ques?.Question__c\"\n                [value]=\"ques?.Question__c\"\n                (buttonValue)=\"childEventCapture($event, ques)\"\n                >\n                </app-custom-button>\n            </div>\n            <!-- HA 20DEC23  This is to load book type questions-->\n            <div *ngIf=\"ques.Type__c === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question"], outputs: ["eventSelected"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly", "error", "errorMessage"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly", "error", "errorMessage"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionbookComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <div\n            [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.Is_Hide__c\">\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n            </div>\n            <!-- VD 20JUN24 - help text changes-->\n            <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c.showLabel\" [style]=\"ques.Style__c.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\">{{ ques?.Question_Text__c }} <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n            </div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n\n             <!-- Date-->\n             <div *ngIf=\"ques.Type__c === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n\n             <!-- Time-->\n             <div *ngIf=\"ques.Type__c === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n\n            <!-- Text -->\n            <div *ngIf=\"ques.Type__c === 'Text'\">\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                        textBox: !qbItem.Progress_Bar__c\n                    }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n                </app-custom-input>\n            </div>\n            \n            <!-- for pick location -->\n            <!--   VD 21DEC23 - dependent field change -->\n            <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n            </div>\n\n            <!-- for  text area   -->\n            <div *ngIf=\"ques.Type__c === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.Type__c === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n            </div>\n\n            <!-- Table -->\n            <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-table>\n            </div>\n\n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-table-appendix>\n            </div>\n             <!-- list -->\n             <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\"  [selectedValue]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-search-box>\n            </div>\n\n            <!-- Dropdown -->\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n            <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-dropdown>\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n            </div>\n\n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n                <app-file-upload [limitFileUploading]=\"5\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n                <app-custom-label [labelValue]=\"labelValue\">\n                </app-custom-label>\n            </div>\n            <!-- 08NOV23 - button type question added -->\n             <!-- Button -->\n            <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"  \n                [width]=\"'150px'\" \n                [buttonText]=\"ques?.Question__c\"\n                [value]=\"ques?.Question__c\"\n                (buttonValue)=\"childEventCapture($event, ques)\"\n                >\n                </app-custom-button>\n            </div>\n            <!-- HA 20DEC23  This is to load book type questions-->\n            <div *ngIf=\"ques.Type__c === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"] }]
+            args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <div\n            [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.Is_Hide__c\">\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n            </div>\n            <!-- VD 20JUN24 - help text changes-->\n            <!-- VD 01Aug24 - validation change-->\n            <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c.showLabel\" [style]=\"ques.Style__c.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\">{{ ques?.Question_Text__c }} \n                    <div  *ngIf=\"ques.Is_Optional__c\" style=\"color: red;\">*</div>\n                    <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n            </div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n\n             <!-- Date-->\n             <div *ngIf=\"ques.Type__c === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n\n             <!-- Time-->\n             <div *ngIf=\"ques.Type__c === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.Type__c === 'Calendar'\">\n                <app-custom-calendar [question]=\"ques\"  (eventSelected)=\"childEventCapture($event, ques)\"></app-custom-calendar>\n            </div>\n\n            <!-- Text -->\n            <div *ngIf=\"ques.Type__c === 'Text'\">\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                        textBox: !qbItem.Progress_Bar__c\n                    }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n                </app-custom-input>\n            </div>\n            \n            <!-- for pick location -->\n            <!--   VD 21DEC23 - dependent field change -->\n            <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n            </div>\n\n            <!-- for  text area   -->\n            <div *ngIf=\"ques.Type__c === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.Type__c === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n            </div>\n\n            <!-- Table -->\n            <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-table>\n            </div>\n\n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-table-appendix>\n            </div>\n             <!-- list -->\n             <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\"  [selectedValue]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-search-box>\n            </div>\n\n            <!-- Dropdown -->\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n            <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-dropdown>\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n            </div>\n\n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n                <app-custom-label [labelValue]=\"labelValue\">\n                </app-custom-label>\n            </div>\n            <!-- 08NOV23 - button type question added -->\n             <!-- Button -->\n            <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"  \n                [width]=\"'150px'\" \n                [buttonText]=\"ques?.Question__c\"\n                [value]=\"ques?.Question__c\"\n                (buttonValue)=\"childEventCapture($event, ques)\"\n                >\n                </app-custom-button>\n            </div>\n            <!-- HA 20DEC23  This is to load book type questions-->\n            <div *ngIf=\"ques.Type__c === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"] }]
         }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: I18nService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -4706,6 +5046,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], handleDropDown: [{
                 type: Output
+            }], handleQuestion: [{
+                type: Output
             }], dropDownData: [{
                 type: Input
             }], hadleDropDownDependent: [{
@@ -4915,6 +5257,7 @@ class BookletComponent {
         this.dataBind = []; // HA 12FEB24 Clearing dataBind upon button action so that dataBind value will not override the changed value
         console.log(action);
         let dataToParent = {};
+        let validForm = true; // VD 01Aug24 - validation change
         // HA 22JAN24 this change to make close event work
         dataToParent['action'] = action.eventtoemit;
         if (!(action.eventtoemit === 'close' || action.eventtoemit === 'print')) {
@@ -4931,7 +5274,10 @@ class BookletComponent {
             for (let key in dataToParent['jsonBook'].bookQuestionsMap) {
                 const currentBook = dataToParent['jsonBook'].bookQuestionsMap[key];
                 currentBook.Questions__r.records.forEach(element => {
-                    if (element.Error_Message__c && dataToParent['action'] == 'submit' && !element.input) {
+                    // VD 01Aug24 - validation change
+                    if (element.Is_Optional__c && dataToParent['action'] == 'submit' && !element.input) {
+                        element.error = true;
+                        validForm = false;
                         this.changeService.submitChange(element.Id);
                     }
                 });
@@ -4942,7 +5288,14 @@ class BookletComponent {
             dataToParent['actionData'] = action['data'];
         }
         // HA 23JAN24 To call the action on any event
-        this.handleBookletActionEvent.emit(dataToParent);
+        //  VD 01Aug24 - validation change
+        if (validForm) {
+            this.handleBookletActionEvent.emit(dataToParent);
+        }
+        else {
+            dataToParent['action'] = 'error';
+            this.handleBookletActionEvent.emit(dataToParent);
+        }
     }
     // HA 18-JAN-24 handleCompleteBooklet is to simplify the logic
     handleCompleteBooklet(completeBooklet) {
@@ -5076,7 +5429,7 @@ class BookletComponent {
         this.hadleDropDownDependent.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BookletComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: StorageService }, { token: i4.ActivatedRoute }, { token: i5.DomSanitizer }, { token: ChangeService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.Questions__r?.records; else elseBlock\">\n        <div *ngFor=\"let ques of qb.Questions__r.records\" [class]=\"qb.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n            <div class=\"questiondiv2\">\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(ques?.Question_Text__c)\" *ngIf=\"ques?.Question_Text__c\" > \n                        {{ ques?.Question_Text__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"ques\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div [class]=\"qb.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n            <div class=\"questiondiv2\">\n                <div *ngIf=\"!qb.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(qb?.Question_Text__c)\" *ngIf=\"qb?.Question_Text__c\" > \n                        {{ qb?.Question_Text__c }}\n                        {{ qb?.Title__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n</div>\n\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.Status__c != 'Completed'\" [ngClass]=\"langDirection\">\n    <div *ngFor=\"let action of actions; let i = index\">\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n            {{ action.name }}\n        </button>\n    </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "hadleDropDownDependent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.Questions__r?.records; else elseBlock\">\n        <div *ngFor=\"let ques of qb.Questions__r.records\" [class]=\"qb.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n            <div class=\"questiondiv2\">\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(ques?.Question_Text__c)\" *ngIf=\"ques?.Question_Text__c\" > \n                        {{ ques?.Question_Text__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"ques\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div [class]=\"qb.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n            <div class=\"questiondiv2\">\n                <div *ngIf=\"!qb.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(qb?.Question_Text__c)\" *ngIf=\"qb?.Question_Text__c\" > \n                        {{ qb?.Question_Text__c }}\n                        {{ qb?.Title__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n</div>\n\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.Status__c != 'Completed'\" [ngClass]=\"langDirection\">\n    <div *ngFor=\"let action of actions; let i = index\">\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n            {{ action.name }}\n        </button>\n    </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BookletComponent, decorators: [{
             type: Component,
@@ -5410,6 +5763,7 @@ class NxtAppModule {
             CustomInputComponent,
             CustomTextAreaComponent,
             CustomTableComponent,
+            CustomCalendarComponent,
             CustomDatePickerComponent,
             DropdownWithFlagComponent,
             CustomDropdownComponent,
@@ -5425,6 +5779,7 @@ class NxtAppModule {
             CustomDateComponent,
             CustomTimeComponent,
             CustomButtonComponent,
+            CustomModelComponent,
             I18nComponent,
             I18nPipe], imports: [CommonModule, FormsModule,
             MyDatePickerModule,
@@ -5549,6 +5904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         CustomInputComponent,
                         CustomTextAreaComponent,
                         CustomTableComponent,
+                        CustomCalendarComponent,
                         CustomDatePickerComponent,
                         DropdownWithFlagComponent,
                         CustomDropdownComponent,
@@ -5564,6 +5920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         CustomDateComponent,
                         CustomTimeComponent,
                         CustomButtonComponent,
+                        CustomModelComponent,
                         I18nComponent,
                         I18nPipe
                     ],