@rangertechnologies/ngnxt 2.1.90 → 2.1.92

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -50,18 +50,18 @@ class NxtAppComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtAppComponent, selector: "lib-nxt-app", ngImport: i0, template: `
-    <p>
-      nxt-app works!
-    </p>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtAppComponent, selector: "lib-nxt-app", ngImport: i0, template: `
+    <p>
+      nxt-app works!
+    </p>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtAppComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-nxt-app', template: `
-    <p>
-      nxt-app works!
-    </p>
+            args: [{ selector: 'lib-nxt-app', template: `
+    <p>
+      nxt-app works!
+    </p>
   ` }]
         }], ctorParameters: () => [] });
 
@@ -4428,11 +4428,11 @@ class CustomRichTextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRichTextComponent, deps: [{ token: I18nService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRichTextComponent, isStandalone: true, selector: "app-custom-rich-text", inputs: { value: "value", placeholder: "placeholder", error: "error", question: "question", rows: "rows", readOnly: "readOnly", minLength: "minLength", maxLength: "maxLength" }, outputs: { textValueChange: "textValueChange" }, ngImport: i0, template: "<!-- RS 06JAN25 -->\n<div class=\"rich-text-container\">\n  <quill-editor\n    [(ngModel)]=\"value\"\n    [placeholder]=\"placeholder\"\n    [modules]=\"quillConfiguration\"\n    [readOnly]=\"readOnly\"\n    (focusout)=\"onEditorFocusOut()\"\n    [class.error]=\"error\">\n  </quill-editor>\n  <div *ngIf=\"error\" class=\"error-message\">\n    {{ error }}\n  </div>\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"], dependencies: [{ kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRichTextComponent, isStandalone: true, selector: "app-custom-rich-text", inputs: { value: "value", placeholder: "placeholder", error: "error", question: "question", rows: "rows", readOnly: "readOnly", minLength: "minLength", maxLength: "maxLength" }, outputs: { textValueChange: "textValueChange" }, ngImport: i0, template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (focusout)=\"onEditorFocusOut()\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"], dependencies: [{ kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRichTextComponent, decorators: [{
             type: Component,
-            args: [{ imports: [QuillEditorComponent, FormsModule, CommonModule], selector: 'app-custom-rich-text', standalone: true, template: "<!-- RS 06JAN25 -->\n<div class=\"rich-text-container\">\n  <quill-editor\n    [(ngModel)]=\"value\"\n    [placeholder]=\"placeholder\"\n    [modules]=\"quillConfiguration\"\n    [readOnly]=\"readOnly\"\n    (focusout)=\"onEditorFocusOut()\"\n    [class.error]=\"error\">\n  </quill-editor>\n  <div *ngIf=\"error\" class=\"error-message\">\n    {{ error }}\n  </div>\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"] }]
+            args: [{ imports: [QuillEditorComponent, FormsModule, CommonModule], selector: 'app-custom-rich-text', standalone: true, template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (focusout)=\"onEditorFocusOut()\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: I18nService }, { type: ChangeService }], propDecorators: { value: [{
                 type: Input
             }], placeholder: [{
@@ -4675,11 +4675,11 @@ class PickLocationComponent {
         this.showModal = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickLocationComponent, deps: [{ token: I18nService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }], usesOnChanges: 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.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n     <!-- <label class=\"she-label\">Location</label> -->\r\n    <!-- HA 19DEC23 For translation -->\r\n     <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"{{ 'enterLocation' | i18n:i18nService.currentLanguage }}\"\r\n        (keydown.enter)=\"$event.preventDefault()\" placeholder=\"{{ 'searchNearestLocation' | i18n:i18nService.currentLanguage }}\" autocorrect=\"off\"\r\n        autocapitalize=\"off\" spellcheck=\"off\" type=\"text\"  [(ngModel)]=\"address\"\r\n        >\r\n        <a (click)=\"openMap()\"\r\n        style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\r\n        <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\r\n        <!-- HA 19DEC23 For translation -->\r\n        </i> {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\r\n</div>\r\n\r\n<div class=\"map-overlay\" *ngIf=\"showModal\">\r\n  <div class=\"map-modal\">\r\n    <div class=\"map-modal-content\">\r\n      <div class=\"map-modal-header\">\r\n        <!-- HA 19DEC23 For translation -->\r\n        <h4>{{ 'pickYourLocation' | i18n:i18nService.currentLanguage }}</h4>\r\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\r\n      </div>\r\n      <!-- Modal content goes here -->\r\n    <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\r\n    [fullscreenControl]=\"true\">\r\n    <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\r\n      (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\r\n    </agm-map> -->\r\n    <google-map [latitude]=\"latitude\"  [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\r\n      <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n    </google-map>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\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.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickLocationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pick-location', 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"] }]
+            args: [{ selector: 'app-pick-location', template: "<div>\r\n     <!-- <label class=\"she-label\">Location</label> -->\r\n    <!-- HA 19DEC23 For translation -->\r\n     <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"{{ 'enterLocation' | i18n:i18nService.currentLanguage }}\"\r\n        (keydown.enter)=\"$event.preventDefault()\" placeholder=\"{{ 'searchNearestLocation' | i18n:i18nService.currentLanguage }}\" autocorrect=\"off\"\r\n        autocapitalize=\"off\" spellcheck=\"off\" type=\"text\"  [(ngModel)]=\"address\"\r\n        >\r\n        <a (click)=\"openMap()\"\r\n        style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\r\n        <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\r\n        <!-- HA 19DEC23 For translation -->\r\n        </i> {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\r\n</div>\r\n\r\n<div class=\"map-overlay\" *ngIf=\"showModal\">\r\n  <div class=\"map-modal\">\r\n    <div class=\"map-modal-content\">\r\n      <div class=\"map-modal-header\">\r\n        <!-- HA 19DEC23 For translation -->\r\n        <h4>{{ 'pickYourLocation' | i18n:i18nService.currentLanguage }}</h4>\r\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\r\n      </div>\r\n      <!-- Modal content goes here -->\r\n    <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\r\n    [fullscreenControl]=\"true\">\r\n    <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\r\n      (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\r\n    </agm-map> -->\r\n    <google-map [latitude]=\"latitude\"  [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\r\n      <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n    </google-map>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\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"] }]
         }], ctorParameters: () => [{ type: I18nService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { searchElementRef: [{
                 type: ViewChild,
                 args: ['search', { static: true }]
@@ -4750,11 +4750,11 @@ class CustomInputComponent {
         this.inputValue.emit(input.target.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomInputComponent, deps: [{ token: ChangeService }, { token: I18nService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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  <!-- RS 09DEC24 Changed keys--> \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 !important' : ''\"\n       [style]=\"question?.style?.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?.inputStyle\"\n       (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.errorMessage}}*</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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 -->\r\n  <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\r\n  <!-- HA 02FEB24 question input will hold the value to display -->\r\n  <!-- // VD 12Jun24 - readonly change-->\r\n  <!-- RS 09DEC24 Changed keys--> \r\n  <input *ngIf=\"!fromShengel\" type=\"text\" \r\n       [(ngModel)]=\"question.input\" \r\n       [ngClass]=\"ngClassValue\"\r\n       class=\"she-line-input form-control\"\r\n       [id]=\"idValue\"\r\n       (focus)=\"focusEvent\"\r\n       [readOnly]=\"readOnly\"\r\n       [style.border-color]=\"error ? 'red !important' : ''\"\r\n       [style]=\"question?.style?.inputStyle\"\r\n       [placeholder]=\"placeholder ? placeholder : ''\"\r\n       (input)=\"onInputChange($event)\" />\r\n\r\n<input *ngIf=\"fromShengel\" \r\n       [(ngModel)]=\"question.input\"\r\n       type=\"text\" \r\n       [readOnly]=\"readOnly\"\r\n       class=\"she-line-input form-control\" \r\n       [placeholder]=\"placeholder ? placeholder : '' \"\r\n       [disabled]=\"disabled\"\r\n       [style]=\"question?.style?.inputStyle\"\r\n       (input)=\"onInputChange($event)\" />\r\n<!-- HA 19DEC23 For translation -->\r\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.errorMessage}}*</span>\r\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: "18.2.13", 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  <!-- RS 09DEC24 Changed keys--> \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 !important' : ''\"\n       [style]=\"question?.style?.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?.inputStyle\"\n       (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.errorMessage}}*</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 -->\r\n  <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\r\n  <!-- HA 02FEB24 question input will hold the value to display -->\r\n  <!-- // VD 12Jun24 - readonly change-->\r\n  <!-- RS 09DEC24 Changed keys--> \r\n  <input *ngIf=\"!fromShengel\" type=\"text\" \r\n       [(ngModel)]=\"question.input\" \r\n       [ngClass]=\"ngClassValue\"\r\n       class=\"she-line-input form-control\"\r\n       [id]=\"idValue\"\r\n       (focus)=\"focusEvent\"\r\n       [readOnly]=\"readOnly\"\r\n       [style.border-color]=\"error ? 'red !important' : ''\"\r\n       [style]=\"question?.style?.inputStyle\"\r\n       [placeholder]=\"placeholder ? placeholder : ''\"\r\n       (input)=\"onInputChange($event)\" />\r\n\r\n<input *ngIf=\"fromShengel\" \r\n       [(ngModel)]=\"question.input\"\r\n       type=\"text\" \r\n       [readOnly]=\"readOnly\"\r\n       class=\"she-line-input form-control\" \r\n       [placeholder]=\"placeholder ? placeholder : '' \"\r\n       [disabled]=\"disabled\"\r\n       [style]=\"question?.style?.inputStyle\"\r\n       (input)=\"onInputChange($event)\" />\r\n<!-- HA 19DEC23 For translation -->\r\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.errorMessage}}*</span>\r\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
         }], ctorParameters: () => [{ type: ChangeService }, { type: I18nService }, { type: DataService }], propDecorators: { value: [{
                 type: Input
             }], question: [{
@@ -4817,11 +4817,11 @@ class CustomTextAreaComponent {
         this.textareaValueChange.emit(event.target.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTextAreaComponent, deps: [{ token: I18nService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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<!-- RS 09DEC24 Changed keys--> \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?.errorMessage }}</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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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-->\r\n<!-- VD 01Aug24 - validation change-->\r\n<!-- RS 09DEC24 Changed keys--> \r\n<textarea \r\n    [class]=\"error ? 'invalid' : ''\"\r\n    [(ngModel)] =\"value\" \r\n    [rows]=\"rows\" \r\n    class=\"she-line-input form-control\" \r\n    [placeholder]=\"placeholder\"\r\n    [readOnly]=\"readOnly\"\r\n    (input)=\"onTextareaChange($event)\"\r\n></textarea>\r\n<!-- HA 19DEC23 For translation -->\r\n<span *ngIf=\"error\" class=\"error-msg\">{{ question?.errorMessage }}</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: "18.2.13", ngImport: i0, type: CustomTextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-text-area', template: "<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<!-- RS 09DEC24 Changed keys--> \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?.errorMessage }}</span>", styles: [".invalid{border:1px solid red!important}\n"] }]
+            args: [{ selector: 'app-custom-text-area', template: "<!-- // VD 12Jun24 - readonly change-->\r\n<!-- VD 01Aug24 - validation change-->\r\n<!-- RS 09DEC24 Changed keys--> \r\n<textarea \r\n    [class]=\"error ? 'invalid' : ''\"\r\n    [(ngModel)] =\"value\" \r\n    [rows]=\"rows\" \r\n    class=\"she-line-input form-control\" \r\n    [placeholder]=\"placeholder\"\r\n    [readOnly]=\"readOnly\"\r\n    (input)=\"onTextareaChange($event)\"\r\n></textarea>\r\n<!-- HA 19DEC23 For translation -->\r\n<span *ngIf=\"error\" class=\"error-msg\">{{ question?.errorMessage }}</span>", styles: [".invalid{border:1px solid red!important}\n"] }]
         }], ctorParameters: () => [{ type: I18nService }, { type: ChangeService }], propDecorators: { value: [{
                 type: Input
             }], placeholder: [{
@@ -4893,9 +4893,18 @@ class CustomTableComponent {
     dataService;
     question;
     valueChange = new EventEmitter();
+    saveTableData = new EventEmitter();
     tableInfo;
     tableHeader = [];
     tableData = [];
+    filteredData = []; // New property for filtered data
+    //RS 03FEB2025
+    // Default UI configurations to control row addition, pagination, actions column visibility, search functionality, and the number of items per page.
+    showAddRow = true;
+    showPagination = true;
+    showActions = true;
+    showSearch = true;
+    itemsPerPage = 5;
     addRowColSpan;
     tableSize; // HA 28DEC23 table size declaration
     objName;
@@ -4908,6 +4917,13 @@ class CustomTableComponent {
     isDisabled = true;
     subscription;
     labelField;
+    //RS 03FEB2025
+    // New properties for search and pagination
+    searchTerm = '';
+    currentPage = 1;
+    totalItems = 0;
+    pages = [];
+    Math = Math;
     constructor(changeService, i18nService, sfService, dataService) {
         this.changeService = changeService;
         this.i18nService = i18nService;
@@ -4915,84 +4931,191 @@ class CustomTableComponent {
         this.dataService = dataService;
     }
     // RS 09DEC24 Changed keys
+    // Add new properties for save functionality
+    hasUnsavedChanges = false;
+    savedData = [];
     ngOnInit() {
-        this.tableHeader = JSON.parse(this.question['fieldsMeta']);
-        this.tableSize = 10 / this.tableHeader.length;
-        // 12JUN24 - default table value
-        if (this.question?.input) {
-            this.tableData = this.question?.input;
-        }
-        if (this.apiMeta !== undefined) {
-            this.options = [];
-            let apiObj = JSON.parse(this.apiMeta);
-            this.labelField = apiObj.field;
-            if (apiObj.endpoint) {
-                this.dataService.apiResponse(apiObj.endpoint)?.subscribe((apiResponse) => {
-                    let responses;
-                    if (apiObj.variable) {
-                        // VD 22May24 - handling multiple child objects
-                        responses = this.dataService.getValue(apiResponse, apiObj.variable);
-                        let results = [];
-                        // HA 19JAN24 To avoid undefined error in console
-                        for (let i = 0; i < responses?.length; i++) {
-                            var resp = responses[i];
-                            results.push(resp);
-                        }
-                        this.options = results;
-                    }
-                    else { // VD 19JAN24 - if response has value(which is array) only
-                        responses = apiResponse;
-                        this.options = responses;
-                    }
-                    this.options = this.options.map((obj) => ({ ...obj, edit: false }));
-                    // Reference https://www.npmjs.com/package/@ng-select/ng-select
-                    this.tableData = this.options;
-                    console.log('tableData', this.tableData);
-                });
+        // this.tableData = [];
+        // Clear any existing data first
+        this.resetComponentState();
+        setTimeout(() => console.log('After reset:', this.tableData), 2000);
+        try {
+            const parsedMeta = JSON.parse(this.question['fieldsMeta']);
+            if (!parsedMeta || !Array.isArray(parsedMeta) || parsedMeta.length === 0) {
+                console.warn('No valid metadata provided');
+                return;
             }
-            // VD NOV23 - handle the dependent update for dropdown
-            let sourceId = apiObj.sourceQuestionId;
-            let field = apiObj.field; // VD 13MAY24 - dynamic field changes
-            if (sourceId) {
-                // // VD 10May24 Subscribe for the changes
-                this.subscription = this.changeService.changeAnnounced$.subscribe((changeValue) => {
-                    if (changeValue != undefined) {
-                        if (changeValue.valueObj != undefined && changeValue.fromQuestionId == apiObj.sourceQuestionId) {
-                            console.log('changes happen');
-                            this.options = this.options.map((obj) => ({ ...obj, edit: false }));
-                            let item = changeValue.valueObj;
-                            let validItem = true;
-                            // VD 13MAY24 - bind dynamic field
-                            if (this.tableData.length > 0) {
-                                this.tableData.forEach(element => {
-                                    // VD 26Jun24 - to handle multiple objects
-                                    const objElementValue = this.dataService.getValue(element, field);
-                                    const objItemValue = this.dataService.getValue(item, field);
-                                    if (objElementValue == objItemValue) {
-                                        validItem = false;
-                                    }
-                                });
+            //RS 03FEB2025
+            // Extracts table configuration settings dynamically from metadata and applies them, ensuring flexibility in UI customization
+            if (parsedMeta[0]?.tableConfig) {
+                const config = parsedMeta[0].tableConfig;
+                this.showAddRow = config.showAddRow !== false;
+                this.showPagination = config.showPagination !== false;
+                this.showActions = config.showActions !== false;
+                this.showSearch = config.showSearch !== false;
+                this.itemsPerPage = config.itemsPerPage || 5;
+                // Remove the config object from headers
+                this.tableHeader = parsedMeta.slice(1);
+            }
+            else {
+                // If no config object found, use all objects as headers
+                this.tableHeader = parsedMeta;
+            }
+            // this.tableHeader = JSON.parse(this.question['fieldsMeta']);
+            this.tableSize = 10 / this.tableHeader.length;
+            // 12JUN24 - default table value
+            if (this.question?.input) {
+                this.tableData = this.question?.input;
+                this.filteredData = [...this.tableData];
+                this.updatePagination();
+            }
+            if (this.apiMeta !== undefined) {
+                this.options = [];
+                let apiObj = JSON.parse(this.apiMeta);
+                this.labelField = apiObj.field;
+                if (apiObj.endpoint) {
+                    this.dataService.apiResponse(apiObj.endpoint)?.subscribe((apiResponse) => {
+                        let responses;
+                        if (apiObj.variable) {
+                            // VD 22May24 - handling multiple child objects
+                            responses = this.dataService.getValue(apiResponse, apiObj.variable);
+                            let results = [];
+                            // HA 19JAN24 To avoid undefined error in console
+                            for (let i = 0; i < responses?.length; i++) {
+                                var resp = responses[i];
+                                results.push(resp);
                             }
-                            if (validItem) {
+                            this.options = results;
+                        }
+                        else { // VD 19JAN24 - if response has value(which is array) only
+                            responses = apiResponse;
+                            this.options = responses;
+                        }
+                        this.options = this.options.map((obj) => ({ ...obj, edit: false }));
+                        // Reference https://www.npmjs.com/package/@ng-select/ng-select
+                        this.tableData = this.options;
+                        console.log('tableData', this.tableData);
+                    });
+                }
+                // VD NOV23 - handle the dependent update for dropdown
+                let sourceId = apiObj.sourceQuestionId;
+                let field = apiObj.field; // VD 13MAY24 - dynamic field changes
+                if (sourceId) {
+                    // // VD 10May24 Subscribe for the changes
+                    this.subscription = this.changeService.changeAnnounced$.subscribe((changeValue) => {
+                        if (changeValue != undefined) {
+                            if (changeValue.valueObj != undefined && changeValue.fromQuestionId == apiObj.sourceQuestionId) {
+                                console.log('changes happen');
+                                this.options = this.options.map((obj) => ({ ...obj, edit: false }));
+                                let item = changeValue.valueObj;
+                                let validItem = true;
+                                // VD 13MAY24 - bind dynamic field
                                 if (this.tableData.length > 0) {
-                                    this.tableData = [...this.tableData, item];
-                                    this.emitTableDataValue(this.tableData);
+                                    this.tableData.forEach(element => {
+                                        // VD 26Jun24 - to handle multiple objects
+                                        const objElementValue = this.dataService.getValue(element, field);
+                                        const objItemValue = this.dataService.getValue(item, field);
+                                        if (objElementValue == objItemValue) {
+                                            validItem = false;
+                                        }
+                                    });
                                 }
-                                else {
-                                    this.tableData.push(item);
-                                    this.emitTableDataValue(this.tableData);
+                                if (validItem) {
+                                    if (this.tableData.length > 0) {
+                                        this.tableData = [...this.tableData, item];
+                                        this.emitTableDataValue(this.tableData);
+                                    }
+                                    else {
+                                        this.tableData.push(item);
+                                        this.emitTableDataValue(this.tableData);
+                                    }
                                 }
                             }
+                            this.changeService.confirmChange(apiObj.sourceQuestionId);
                         }
-                        this.changeService.confirmChange(apiObj.sourceQuestionId);
-                    }
-                });
+                    });
+                }
             }
+            this.updatePagination();
+            //RS 03FEB2025
+            //Handles errors during metadata parsing by setting default values to ensure the table functions properly
+        }
+        catch (error) {
+            console.error('Error parsing fieldsMeta:', error);
+            this.showAddRow = true;
+            this.showPagination = true;
+            this.showActions = true;
+            this.showSearch = true;
+            this.itemsPerPage = 5;
+        }
+        //RS 03FEB2025
+        // Initialize saved data
+        if (this.question?.input) {
+            this.savedData = JSON.parse(JSON.stringify(this.question.input));
         }
         console.log('tableData', this.tableData);
         console.log('tableHeader', this.tableHeader);
         console.log('tableInfo', this.tableInfo);
     }
+    //RS 03FEB2025
+    // → Filters table data based on user input and updates pagination accordingly.
+    search() {
+        if (!this.searchTerm.trim()) {
+            this.filteredData = [...this.tableData];
+        }
+        else {
+            const searchTermLower = this.searchTerm.toLowerCase();
+            this.filteredData = this.tableData.filter(item => {
+                return this.tableHeader.some(header => {
+                    const value = this.dataService.getValue(item, header.apiName);
+                    return value && value.toString().toLowerCase().includes(searchTermLower);
+                });
+            });
+        }
+        this.currentPage = 1;
+        this.updatePagination();
+    }
+    //RS 03FEB2025
+    // Calculates total pages, updates the page list, and ensures the current page is within valid bounds.
+    updatePagination() {
+        this.totalItems = this.filteredData.length;
+        const totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+        this.pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+        if (this.currentPage > totalPages) {
+            this.currentPage = totalPages || 1;
+        }
+    }
+    //RS 03FEB2025
+    //Returns a paginated subset of filteredData based on the current page and items per page
+    get paginatedData() {
+        const startIndex = (this.currentPage - 1) * this.itemsPerPage;
+        return this.filteredData.slice(startIndex, startIndex + this.itemsPerPage);
+    }
+    //RS 03FEB2025
+    //Updates currentPage when the user selects a different page
+    setPage(page) {
+        if (page >= 1 && page <= this.pages.length) {
+            this.currentPage = page;
+        }
+    }
+    //RS 03FEB2025
+    //Resets table data, filters, pagination, UI settings, and unsubscribes from any subscriptions.
+    resetComponentState() {
+        this.tableData = [];
+        this.filteredData = [];
+        this.tableHeader = [];
+        this.options = [];
+        this.searchTerm = '';
+        this.currentPage = 1;
+        this.showAddRow = true;
+        this.showPagination = true;
+        this.showActions = true;
+        this.showSearch = true;
+        this.itemsPerPage = 5;
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
     addRow() {
         let newItem = {};
         this.tableHeader.forEach(item => {
@@ -5000,21 +5123,55 @@ class CustomTableComponent {
                 newItem[item.apiName] = "";
             }
         });
-        const updatedTableData = [...this.tableData, newItem];
-        this.tableData = updatedTableData;
-        this.emitTableDataValue(updatedTableData);
+        // const updatedTableData = [...this.tableData, newItem];
+        // this.tableData = updatedTableData;
+        // this.emitTableDataValue(updatedTableData);
+        this.tableData.push(newItem);
+        this.filteredData = [...this.tableData];
+        this.updatePagination();
+        this.hasUnsavedChanges = true;
+        this.emitTableDataValue(this.tableData);
     }
     updateRadio(item, value) {
         item.value = value;
         this.emitTableDataValue(this.tableData);
     }
     // VD 23Aug24 handle  Type
+    // updateLabel(rowIndex: number, label: string, value: any): void {
+    //   this.tableData[rowIndex][label] = value;
+    //   this.emitTableDataValue(this.tableData);
+    // }
+    // Modified update methods to track changes
     updateLabel(rowIndex, label, value) {
         this.tableData[rowIndex][label] = value;
+        this.hasUnsavedChanges = true;
         this.emitTableDataValue(this.tableData);
     }
+    //RS 03FEB2025
     deleteRow(rowIndex) {
-        this.tableData.splice(rowIndex, 1);
+        // this.tableData.splice(rowIndex, 1);
+        const actualIndex = (this.currentPage - 1) * this.itemsPerPage + rowIndex;
+        this.tableData.splice(actualIndex, 1);
+        this.filteredData = [...this.tableData];
+        this.updatePagination();
+        this.hasUnsavedChanges = true;
+        this.emitTableDataValue(this.tableData);
+    }
+    //RS 03FEB2025
+    // Saves the current table data state, resets the hasUnsavedChanges flag, and emits the updated data.
+    saveTable() {
+        this.savedData = JSON.parse(JSON.stringify(this.tableData));
+        this.hasUnsavedChanges = false;
+        this.saveTableData.emit(this.tableData);
+    }
+    //RS 03FEB2025
+    //  Restores the last saved state of the table and resets the pagination and UI state
+    revertChanges() {
+        this.tableData = JSON.parse(JSON.stringify(this.savedData));
+        this.filteredData = [...this.tableData];
+        this.hasUnsavedChanges = false;
+        this.updatePagination();
+        this.emitTableDataValue(this.tableData);
     }
     editRow(rowIndex) {
         var a = 0;
@@ -5032,16 +5189,24 @@ class CustomTableComponent {
     emitTableDataValue(updatedTableData) {
         this.valueChange.emit(updatedTableData);
     }
+    //RS 03FEB2025
+    // Cleans up resources and resets the component state when the component is destroyed to prevent memory leaks
+    ngOnDestroy() {
+        this.resetComponentState();
+        console.log('Component Destroyed');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", 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        <!--VD 23Aug24 handle readOnly  -->\n        <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"text\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" class=\"she-line-input table-input\">\n        </div>\n        <!--VD 23Aug24 handle Number Type -->\n        <div *ngIf=\"header.fldType === 'Number' || header.fldType === 'Number'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"Number\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" 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.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: "pipe", type: GetValuePipe, name: "getValue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomTableComponent, selector: "app-custom-table", inputs: { question: "question", apiMeta: "apiMeta" }, outputs: { valueChange: "valueChange", saveTableData: "saveTableData" }, ngImport: i0, template: "<!-- RS 03FEB2025 -->\r\n<!-- Search Bar -->\r\n<!-- Search, Revert & Save in Same Line -->\r\n<div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n  <!-- Search Bar -->\r\n  <div class=\"search-container me-auto\">\r\n    <div class=\"input-group\">\r\n      <input \r\n        type=\"text\" \r\n        class=\"form-control search-input\"\r\n        [(ngModel)]=\"searchTerm\"\r\n        (input)=\"search()\"\r\n        placeholder=\"Search...\"\r\n      >\r\n      <div class=\"search-icon\">\r\n    <!-- RS 03FEB2025 -->\r\n    <!-- Search icon for user input -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Buttons -->\r\n  <div>\r\n    <!-- RS 03FEB2025 --><!-- Cancel button (visible only when changes are unsaved) -->\r\n    <button \r\n      class=\"btn btn-secondary me-2\" \r\n      *ngIf=\"hasUnsavedChanges\" \r\n      (click)=\"revertChanges()\"\r\n    >\r\n      Cancel\r\n    </button>\r\n    <!-- Save button (disabled if no unsaved changes) --><!-- RS 03FEB2025 -->\r\n    <button \r\n      class=\"btn btn-primary\" \r\n      [disabled]=\"!hasUnsavedChanges\"\r\n      (click)=\"saveTable()\"\r\n    >\r\n      Save Table\r\n    </button>\r\n  </div>\r\n</div>\r\n<!-- Table Container -->\r\n<div class=\"table-container\">\r\n  <table class=\"table table-striped table-bordered\">\r\n    <thead>\r\n        <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\r\n    <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\r\n      <tr>\r\n        <th *ngFor=\"let header of tableHeader\" [style.width]=\"header.width || 'auto'\">\r\n          {{ header.label }}\r\n        </th>\r\n        <!-- Actions column (only if showActions is true) --><!-- RS 03FEB2025 -->\r\n        <th *ngIf=\"showActions\" style=\"width: 140px\" class=\"actions-columns\">Actions</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let item of paginatedData; let i = index\">\r\n        <td *ngFor=\"let header of tableHeader\">\r\n          <!-- Image with text input -->\r\n          <ng-container *ngIf=\"header.fldType === 'imagetext'\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <img [src]=\"item.imageSrc\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px; margin-right: 5px;\">\r\n              <input type=\"text\" \r\n                [(ngModel)]=\"item[header.fieldName]\" \r\n                (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" \r\n                class=\"she-line-input table-input\">\r\n            </div>\r\n          </ng-container>\r\n\r\n          <!-- Image only -->\r\n          <ng-container *ngIf=\"header.fldType === 'image'\">\r\n            <img [src]=\"item[header.fieldName]\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px;\">\r\n          </ng-container>\r\n        <!--VD 23Aug24 handle readOnly  -->\r\n          <!-- Text input -->\r\n          <ng-container *ngIf=\"header.fldType === 'Text'\">\r\n            <input type=\"text\" \r\n              [readonly]=\"header.readOnly\" \r\n              [disabled]=\"!item.edit\" \r\n              [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n              [ngModel]=\"'' | getValue: item : header.apiName\" \r\n              (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n              class=\"she-line-input table-input\">\r\n          </ng-container>\r\n        <!--VD 23Aug24 handle Number Type -->\r\n        <!-- Number input -->\r\n        <!-- VD 26Jun24 - pipe change to handle multiple objects-->\r\n          <ng-container *ngIf=\"header.fldType === 'Number'\">\r\n            <input type=\"number\" \r\n              [readonly]=\"header.readOnly\" \r\n              [disabled]=\"!item.edit\" \r\n              [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n              [ngModel]=\"'' | getValue: item : header.apiName\" \r\n              (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n              class=\"she-line-input table-input\">\r\n          </ng-container>\r\n\r\n          <!-- Radio input -->\r\n          <ng-container *ngIf=\"header.fldType === 'radio'\">\r\n            <input type=\"radio\" \r\n              [name]=\"item.name\" \r\n              [checked]=\"item.value == header.fieldName\"  \r\n              (click)=\"updateRadio(item, header.fieldName)\">\r\n          </ng-container>\r\n        </td>\r\n        <!-- Actions column --><!-- RS 03FEB2025 -->\r\n        <td *ngIf=\"showActions\" class=\"actions-column\">\r\n          <div class=\"d-flex justify-content-around\">\r\n            <button class=\"btn btn-link p-0\" (click)=\"editRow(i)\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#03A9F4\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 20h9\" />\r\n                <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z\" />\r\n                <path d=\"m15 5 3 3\" />\r\n              </svg>\r\n                                         Edit\r\n            </button>\r\n            <button class=\"btn btn-link p-0\" (click)=\"deleteRow(i)\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F44336\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M3 6h18\" />\r\n                <path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />\r\n                <path d=\"m10 11 1 6\" />\r\n                <path d=\"m14 11-1 6\" />\r\n                <path d=\"M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14\" />\r\n              </svg>\r\n              \r\n                            Delete\r\n            </button>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<!-- Pagination --><!-- RS 03FEB2025 -->\r\n<div *ngIf=\"showPagination\" class=\"pagination-container\">\r\n  <div class=\"d-flex justify-content-end align-items-center\">\r\n    <div class=\"items-per-page\">\r\n      <span>Items per page:</span>\r\n      <select [(ngModel)]=\"itemsPerPage\" (change)=\"updatePagination()\" class=\"form-select form-select-sm\">\r\n        <option value=\"5\">5</option>\r\n        <option value=\"10\">10</option>\r\n        <option value=\"20\">20</option>\r\n        <option value=\"50\">50</option>\r\n      </select>\r\n    </div>\r\n    <div class=\"page-info ms-3 me-3\">\r\n      {{((currentPage - 1) * itemsPerPage + 1)}} - {{Math.min(currentPage * itemsPerPage, totalItems)}} of {{totalItems}}\r\n    </div>\r\n    <nav aria-label=\"Table pagination\">\r\n      <!-- First page --><!-- RS 03FEB2025 -->\r\n      <ul class=\"pagination mb-0\">\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n          <a class=\"page-link\" (click)=\"setPage(1)\">\u00AB</a>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n          <a class=\"page-link\" (click)=\"setPage(currentPage - 1)\">\u2039</a>\r\n        </li>\r\n        <!-- Dynamic pagination --><!-- RS 03FEB2025 -->\r\n        <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\r\n          <a class=\"page-link\" (click)=\"setPage(page)\">{{page}}</a>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n          <a class=\"page-link\" (click)=\"setPage(currentPage + 1)\">\u203A</a>\r\n        </li>\r\n        <!-- Last page -->\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n          <a class=\"page-link\" (click)=\"setPage(pages.length)\">\u00BB</a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n<!-- RS 03FEB2025 -->\r\n<!-- Add Row Button -->\r\n<div *ngIf=\"showAddRow\"  (click)=\"addRow()\" class=\"addRowClass\">\r\n  <div class=\"circle-button\">+</div>\r\n</div>\r\n", styles: [".table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse}.table-container{max-height:400px;overflow-y:auto;overflow-x:auto;position:relative;margin-bottom:1rem}.table th,.table td{padding:3px 5px;line-height:1.2;vertical-align:middle;border:1px solid #dee2e6;white-space:nowrap}.table-bordered{border:1px solid #ddd}.table-striped tbody tr:nth-of-type(odd){background-color:#f9f9f9!important}thead{background-color:#03a9f4;position:sticky;top:0;z-index:10}thead th{color:#fff;font-size:14px;text-align:center;vertical-align:bottom;border-bottom:2px solid #dee2e6;padding:12px!important}thead .permission,.permission_yes,.permission_no,.permission_na{text-align:center}th{text-align:left}tbody{color:#797979}tbody td{font-size:12px}.none-border th{border:none}.actions-column{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#fff}.actions-columns{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#03a9f4}.actions-column .btn-link{font-size:11px;color:#797979;text-decoration:none}th.actions-column{background-color:#03a9f4}tr:nth-of-type(odd) .actions-column{background-color:#f9f9f9!important}tr:nth-of-type(2n) .actions-column{background-color:#fff!important}.table-input{width:100%;padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.editInput{background-color:#fff;border-bottom:1px solid red!important;border-color:#80bdff}.search-container{margin-bottom:1rem}.search-container .input-group{max-width:300px;position:relative}.search-input{padding-right:35px;border-radius:4px!important}.search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:4;color:#666;pointer-events:none}.pagination-container{padding:.5rem 1rem;background-color:#f8f9fa;border-top:1px solid #dee2e6}.pagination-container .d-flex{justify-content:flex-end!important}.items-per-page{margin-right:20px;font-size:12px}.items-per-page select{width:60px;margin-left:8px}.page-info{margin-right:15px;font-size:12px;color:#6c757d}.pagination{margin:0}.page-link{padding:.25rem .5rem;font-size:12px}.page-item.disabled .page-link{cursor:not-allowed}.addRowClass{float:right;margin-top:1rem;margin-right:15%;text-align:center;cursor:pointer}.circle-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#007bff;color:#fff;cursor:pointer;font-size:24px;line-height:1;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#0056b3}.small-icon{width:16px;height:16px;margin-right:4px}.action{min-width:80px;text-align:center;cursor:pointer}.action:hover{color:red}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][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.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: "18.2.13", ngImport: i0, type: CustomTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-table', 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        <!--VD 23Aug24 handle readOnly  -->\n        <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"text\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" class=\"she-line-input table-input\">\n        </div>\n        <!--VD 23Aug24 handle Number Type -->\n        <div *ngIf=\"header.fldType === 'Number' || header.fldType === 'Number'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"Number\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" 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"] }]
+            args: [{ selector: 'app-custom-table', template: "<!-- RS 03FEB2025 -->\r\n<!-- Search Bar -->\r\n<!-- Search, Revert & Save in Same Line -->\r\n<div class=\"d-flex align-items-center justify-content-between mb-3\">\r\n  <!-- Search Bar -->\r\n  <div class=\"search-container me-auto\">\r\n    <div class=\"input-group\">\r\n      <input \r\n        type=\"text\" \r\n        class=\"form-control search-input\"\r\n        [(ngModel)]=\"searchTerm\"\r\n        (input)=\"search()\"\r\n        placeholder=\"Search...\"\r\n      >\r\n      <div class=\"search-icon\">\r\n    <!-- RS 03FEB2025 -->\r\n    <!-- Search icon for user input -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Buttons -->\r\n  <div>\r\n    <!-- RS 03FEB2025 --><!-- Cancel button (visible only when changes are unsaved) -->\r\n    <button \r\n      class=\"btn btn-secondary me-2\" \r\n      *ngIf=\"hasUnsavedChanges\" \r\n      (click)=\"revertChanges()\"\r\n    >\r\n      Cancel\r\n    </button>\r\n    <!-- Save button (disabled if no unsaved changes) --><!-- RS 03FEB2025 -->\r\n    <button \r\n      class=\"btn btn-primary\" \r\n      [disabled]=\"!hasUnsavedChanges\"\r\n      (click)=\"saveTable()\"\r\n    >\r\n      Save Table\r\n    </button>\r\n  </div>\r\n</div>\r\n<!-- Table Container -->\r\n<div class=\"table-container\">\r\n  <table class=\"table table-striped table-bordered\">\r\n    <thead>\r\n        <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\r\n    <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\r\n      <tr>\r\n        <th *ngFor=\"let header of tableHeader\" [style.width]=\"header.width || 'auto'\">\r\n          {{ header.label }}\r\n        </th>\r\n        <!-- Actions column (only if showActions is true) --><!-- RS 03FEB2025 -->\r\n        <th *ngIf=\"showActions\" style=\"width: 140px\" class=\"actions-columns\">Actions</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let item of paginatedData; let i = index\">\r\n        <td *ngFor=\"let header of tableHeader\">\r\n          <!-- Image with text input -->\r\n          <ng-container *ngIf=\"header.fldType === 'imagetext'\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <img [src]=\"item.imageSrc\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px; margin-right: 5px;\">\r\n              <input type=\"text\" \r\n                [(ngModel)]=\"item[header.fieldName]\" \r\n                (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" \r\n                class=\"she-line-input table-input\">\r\n            </div>\r\n          </ng-container>\r\n\r\n          <!-- Image only -->\r\n          <ng-container *ngIf=\"header.fldType === 'image'\">\r\n            <img [src]=\"item[header.fieldName]\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px;\">\r\n          </ng-container>\r\n        <!--VD 23Aug24 handle readOnly  -->\r\n          <!-- Text input -->\r\n          <ng-container *ngIf=\"header.fldType === 'Text'\">\r\n            <input type=\"text\" \r\n              [readonly]=\"header.readOnly\" \r\n              [disabled]=\"!item.edit\" \r\n              [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n              [ngModel]=\"'' | getValue: item : header.apiName\" \r\n              (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n              class=\"she-line-input table-input\">\r\n          </ng-container>\r\n        <!--VD 23Aug24 handle Number Type -->\r\n        <!-- Number input -->\r\n        <!-- VD 26Jun24 - pipe change to handle multiple objects-->\r\n          <ng-container *ngIf=\"header.fldType === 'Number'\">\r\n            <input type=\"number\" \r\n              [readonly]=\"header.readOnly\" \r\n              [disabled]=\"!item.edit\" \r\n              [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\r\n              [ngModel]=\"'' | getValue: item : header.apiName\" \r\n              (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \r\n              class=\"she-line-input table-input\">\r\n          </ng-container>\r\n\r\n          <!-- Radio input -->\r\n          <ng-container *ngIf=\"header.fldType === 'radio'\">\r\n            <input type=\"radio\" \r\n              [name]=\"item.name\" \r\n              [checked]=\"item.value == header.fieldName\"  \r\n              (click)=\"updateRadio(item, header.fieldName)\">\r\n          </ng-container>\r\n        </td>\r\n        <!-- Actions column --><!-- RS 03FEB2025 -->\r\n        <td *ngIf=\"showActions\" class=\"actions-column\">\r\n          <div class=\"d-flex justify-content-around\">\r\n            <button class=\"btn btn-link p-0\" (click)=\"editRow(i)\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#03A9F4\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 20h9\" />\r\n                <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z\" />\r\n                <path d=\"m15 5 3 3\" />\r\n              </svg>\r\n                                         Edit\r\n            </button>\r\n            <button class=\"btn btn-link p-0\" (click)=\"deleteRow(i)\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F44336\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M3 6h18\" />\r\n                <path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />\r\n                <path d=\"m10 11 1 6\" />\r\n                <path d=\"m14 11-1 6\" />\r\n                <path d=\"M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14\" />\r\n              </svg>\r\n              \r\n                            Delete\r\n            </button>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<!-- Pagination --><!-- RS 03FEB2025 -->\r\n<div *ngIf=\"showPagination\" class=\"pagination-container\">\r\n  <div class=\"d-flex justify-content-end align-items-center\">\r\n    <div class=\"items-per-page\">\r\n      <span>Items per page:</span>\r\n      <select [(ngModel)]=\"itemsPerPage\" (change)=\"updatePagination()\" class=\"form-select form-select-sm\">\r\n        <option value=\"5\">5</option>\r\n        <option value=\"10\">10</option>\r\n        <option value=\"20\">20</option>\r\n        <option value=\"50\">50</option>\r\n      </select>\r\n    </div>\r\n    <div class=\"page-info ms-3 me-3\">\r\n      {{((currentPage - 1) * itemsPerPage + 1)}} - {{Math.min(currentPage * itemsPerPage, totalItems)}} of {{totalItems}}\r\n    </div>\r\n    <nav aria-label=\"Table pagination\">\r\n      <!-- First page --><!-- RS 03FEB2025 -->\r\n      <ul class=\"pagination mb-0\">\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n          <a class=\"page-link\" (click)=\"setPage(1)\">\u00AB</a>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\r\n          <a class=\"page-link\" (click)=\"setPage(currentPage - 1)\">\u2039</a>\r\n        </li>\r\n        <!-- Dynamic pagination --><!-- RS 03FEB2025 -->\r\n        <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\r\n          <a class=\"page-link\" (click)=\"setPage(page)\">{{page}}</a>\r\n        </li>\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n          <a class=\"page-link\" (click)=\"setPage(currentPage + 1)\">\u203A</a>\r\n        </li>\r\n        <!-- Last page -->\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\r\n          <a class=\"page-link\" (click)=\"setPage(pages.length)\">\u00BB</a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n<!-- RS 03FEB2025 -->\r\n<!-- Add Row Button -->\r\n<div *ngIf=\"showAddRow\"  (click)=\"addRow()\" class=\"addRowClass\">\r\n  <div class=\"circle-button\">+</div>\r\n</div>\r\n", styles: [".table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse}.table-container{max-height:400px;overflow-y:auto;overflow-x:auto;position:relative;margin-bottom:1rem}.table th,.table td{padding:3px 5px;line-height:1.2;vertical-align:middle;border:1px solid #dee2e6;white-space:nowrap}.table-bordered{border:1px solid #ddd}.table-striped tbody tr:nth-of-type(odd){background-color:#f9f9f9!important}thead{background-color:#03a9f4;position:sticky;top:0;z-index:10}thead th{color:#fff;font-size:14px;text-align:center;vertical-align:bottom;border-bottom:2px solid #dee2e6;padding:12px!important}thead .permission,.permission_yes,.permission_no,.permission_na{text-align:center}th{text-align:left}tbody{color:#797979}tbody td{font-size:12px}.none-border th{border:none}.actions-column{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#fff}.actions-columns{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#03a9f4}.actions-column .btn-link{font-size:11px;color:#797979;text-decoration:none}th.actions-column{background-color:#03a9f4}tr:nth-of-type(odd) .actions-column{background-color:#f9f9f9!important}tr:nth-of-type(2n) .actions-column{background-color:#fff!important}.table-input{width:100%;padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.editInput{background-color:#fff;border-bottom:1px solid red!important;border-color:#80bdff}.search-container{margin-bottom:1rem}.search-container .input-group{max-width:300px;position:relative}.search-input{padding-right:35px;border-radius:4px!important}.search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:4;color:#666;pointer-events:none}.pagination-container{padding:.5rem 1rem;background-color:#f8f9fa;border-top:1px solid #dee2e6}.pagination-container .d-flex{justify-content:flex-end!important}.items-per-page{margin-right:20px;font-size:12px}.items-per-page select{width:60px;margin-left:8px}.page-info{margin-right:15px;font-size:12px;color:#6c757d}.pagination{margin:0}.page-link{padding:.25rem .5rem;font-size:12px}.page-item.disabled .page-link{cursor:not-allowed}.addRowClass{float:right;margin-top:1rem;margin-right:15%;text-align:center;cursor:pointer}.circle-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#007bff;color:#fff;cursor:pointer;font-size:24px;line-height:1;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#0056b3}.small-icon{width:16px;height:16px;margin-right:4px}.action{min-width:80px;text-align:center;cursor:pointer}.action:hover{color:red}\n"] }]
         }], ctorParameters: () => [{ type: ChangeService }, { type: I18nService }, { type: SalesforceService }, { type: DataService }], propDecorators: { question: [{
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], saveTableData: [{
+                type: Output
             }], apiMeta: [{
                 type: Input
             }] } });
@@ -5067,11 +5232,11 @@ class CustomDatePickerComponent {
         this.dateChange.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDatePickerComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\">\r\n    <label>{{label}}</label>\r\n    <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\r\n</div> -->\r\n<!-- <mat-form-field>\r\n    <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker #picker></mat-datepicker>\r\n</mat-form-field> -->\r\n<!--VD 12Jun24 - readonly change --> \r\n<!-- VD 01Aug24 - validation change-->\r\n<p>\r\n    <input  \r\n    [class]=\"error ? 'invalid' : ''\"\r\n    [(ngModel)]=\"dateSelected\" \r\n    [owlDateTimeTrigger]=\"dt\" \r\n    [owlDateTime]=\"dt\"  \r\n    [min]=\"minDate\"\r\n    [disabled]=\"readOnly\"\r\n    placeholder=\"DD/MM/YYYY HH:MM\"\r\n    (input)=\"onDateChange($event)\"\r\n    style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\r\n    (dateTimeChange)=\"onDateChange($event)\">\r\n    <owl-date-time #dt></owl-date-time>\r\n</p>\r\n<span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>\r\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$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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<!-- 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"] }]
+            args: [{ selector: 'app-custom-date-picker', template: "<!-- <div class=\"date-picker-container\">\r\n    <label>{{label}}</label>\r\n    <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\r\n</div> -->\r\n<!-- <mat-form-field>\r\n    <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker #picker></mat-datepicker>\r\n</mat-form-field> -->\r\n<!--VD 12Jun24 - readonly change --> \r\n<!-- VD 01Aug24 - validation change-->\r\n<p>\r\n    <input  \r\n    [class]=\"error ? 'invalid' : ''\"\r\n    [(ngModel)]=\"dateSelected\" \r\n    [owlDateTimeTrigger]=\"dt\" \r\n    [owlDateTime]=\"dt\"  \r\n    [min]=\"minDate\"\r\n    [disabled]=\"readOnly\"\r\n    placeholder=\"DD/MM/YYYY HH:MM\"\r\n    (input)=\"onDateChange($event)\"\r\n    style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\r\n    (dateTimeChange)=\"onDateChange($event)\">\r\n    <owl-date-time #dt></owl-date-time>\r\n</p>\r\n<span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>\r\n  ", styles: [".invalid{border-color:red!important}\n"] }]
         }], ctorParameters: () => [{ type: I18nService }], propDecorators: { date: [{
                 type: Input
             }], minDate: [{
@@ -5107,11 +5272,11 @@ class DropdownWithFlagComponent {
         this.flagDropDownChange.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithFlagComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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,#eee,#fff 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;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;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,#fff 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,#eee,#fff);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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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: "18.2.13", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: { certified: "certified", JobPerformerCertificates: "JobPerformerCertificates" }, outputs: { flagDropDownChange: "flagDropDownChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"she-title\">\r\n    <label class=\"switch\">\r\n      <input  class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\r\n      <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \r\n      <span class=\"switch-handle\"></span> \r\n    </label> \r\n    <!-- HA 19DEC23 For translation -->\r\n    <ng-select *ngIf=\"certified\"\r\n      style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \r\n      [items]=\"JobPerformerCertificates\"\r\n      [(ngModel)]=\"selectedValue\"\r\n      (change)=\"onJobPerformerCertified($event)\"\r\n      placeholder=\"---{{ 'select' | i18n:i18nService.currentLanguage }}---\">\r\n    </ng-select>\r\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,#eee,#fff 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;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;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,#fff 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,#eee,#fff);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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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: "18.2.13", ngImport: i0, type: DropdownWithFlagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dropdown-with-flag', 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,#eee,#fff 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;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;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,#fff 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,#eee,#fff);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"] }]
+            args: [{ selector: 'app-dropdown-with-flag', template: "<div class=\"she-title\">\r\n    <label class=\"switch\">\r\n      <input  class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\r\n      <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \r\n      <span class=\"switch-handle\"></span> \r\n    </label> \r\n    <!-- HA 19DEC23 For translation -->\r\n    <ng-select *ngIf=\"certified\"\r\n      style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \r\n      [items]=\"JobPerformerCertificates\"\r\n      [(ngModel)]=\"selectedValue\"\r\n      (change)=\"onJobPerformerCertified($event)\"\r\n      placeholder=\"---{{ 'select' | i18n:i18nService.currentLanguage }}---\">\r\n    </ng-select>\r\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,#eee,#fff 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;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;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,#fff 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,#eee,#fff);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"] }]
         }], ctorParameters: () => [{ type: I18nService }], propDecorators: { certified: [{
                 type: Input
             }], JobPerformerCertificates: [{
@@ -5295,11 +5460,11 @@ class CustomDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", question: "question", 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\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.value }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<!-- VD 07Aug24 - isDependentField change-->\n<!-- VD 25Oct24 - changes-->\n<!-- RS 09DEC24 Changed keys--> \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  (click)=\"getOptions()\"\n  (change)=\"selectChange($event)\"\n  [id]=\"id\">\n  <ng-option \n    *ngFor=\"let option of options\" \n    [value]=\"apiObj && !apiObj.isDependentField ? option : option?.value\">\n    {{ apiObj && !apiObj.isDependentField && option ? option[labelField] : option?.value }}\n  </ng-option> \n</ng-select>\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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i6.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", question: "question", 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 -->\r\n<!-- <select\r\n  [ngClass]=\"{\r\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\r\n    'custom-select': !progressBar\r\n  }\" class=\"custom-select mr-sm-2 dd-height\" \r\n  [id]=\"id\" \r\n  [(ngModel)]=\"selectedValue\"\r\n  (change)=\"selectChange($event.target.value);\" \r\n  [style.borderColor]=\"error ? 'red' : '#858585'\"\r\n  [style.color]=\"error ? 'red' : ''\">\r\n    <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.value\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.value }}</option>\r\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\r\n</select> -->\r\n<!-- // VD 12Jun24 - readonly change-->\r\n<!-- VD 01Aug24 - validation change-->\r\n<!-- VD 07Aug24 - isDependentField change-->\r\n<!-- VD 25Oct24 - changes-->\r\n<!-- RS 09DEC24 Changed keys--> \r\n<ng-select\r\n  [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\r\n  [(ngModel)]=\"selectedValue\" \r\n  [placeholder]=\"placeholder\"\r\n  [disabled]=\"readOnly\"\r\n  (click)=\"getOptions()\"\r\n  (change)=\"selectChange($event)\"\r\n  [id]=\"id\">\r\n  <ng-option \r\n    *ngFor=\"let option of options\" \r\n    [value]=\"apiObj && !apiObj.isDependentField ? option : option?.value\">\r\n    {{ apiObj && !apiObj.isDependentField && option ? option[labelField] : option?.value }}\r\n  </ng-option> \r\n</ng-select>\r\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\r\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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i6.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.value }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<!-- VD 07Aug24 - isDependentField change-->\n<!-- VD 25Oct24 - changes-->\n<!-- RS 09DEC24 Changed keys--> \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  (click)=\"getOptions()\"\n  (change)=\"selectChange($event)\"\n  [id]=\"id\">\n  <ng-option \n    *ngFor=\"let option of options\" \n    [value]=\"apiObj && !apiObj.isDependentField ? option : option?.value\">\n    {{ apiObj && !apiObj.isDependentField && option ? option[labelField] : option?.value }}\n  </ng-option> \n</ng-select>\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"] }]
+            args: [{ selector: 'app-custom-dropdown', template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\r\n<!-- <select\r\n  [ngClass]=\"{\r\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\r\n    'custom-select': !progressBar\r\n  }\" class=\"custom-select mr-sm-2 dd-height\" \r\n  [id]=\"id\" \r\n  [(ngModel)]=\"selectedValue\"\r\n  (change)=\"selectChange($event.target.value);\" \r\n  [style.borderColor]=\"error ? 'red' : '#858585'\"\r\n  [style.color]=\"error ? 'red' : ''\">\r\n    <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.value\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.value }}</option>\r\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\r\n</select> -->\r\n<!-- // VD 12Jun24 - readonly change-->\r\n<!-- VD 01Aug24 - validation change-->\r\n<!-- VD 07Aug24 - isDependentField change-->\r\n<!-- VD 25Oct24 - changes-->\r\n<!-- RS 09DEC24 Changed keys--> \r\n<ng-select\r\n  [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\r\n  [(ngModel)]=\"selectedValue\" \r\n  [placeholder]=\"placeholder\"\r\n  [disabled]=\"readOnly\"\r\n  (click)=\"getOptions()\"\r\n  (change)=\"selectChange($event)\"\r\n  [id]=\"id\">\r\n  <ng-option \r\n    *ngFor=\"let option of options\" \r\n    [value]=\"apiObj && !apiObj.isDependentField ? option : option?.value\">\r\n    {{ apiObj && !apiObj.isDependentField && option ? option[labelField] : option?.value }}\r\n  </ng-option> \r\n</ng-select>\r\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\r\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"] }]
         }], ctorParameters: () => [{ type: ChangeService }, { type: DataService }, { type: I18nService }], propDecorators: { options: [{
                 type: Input
             }], placeholder: [{
@@ -5338,11 +5503,11 @@ class CustomLabelComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomLabelComponent, selector: "app-custom-label", inputs: { labelValue: "labelValue", labelStyle: "labelStyle" }, ngImport: i0, template: "\n<div style={{labelStyle}}>{{ labelValue }}</div>\n", styles: [".label{margin-top:8px;margin-left:7px}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomLabelComponent, selector: "app-custom-label", inputs: { labelValue: "labelValue", labelStyle: "labelStyle" }, ngImport: i0, template: "\r\n<div style={{labelStyle}}>{{ labelValue }}</div>\r\n", styles: [".label{margin-top:8px;margin-left:7px}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-label', template: "\n<div style={{labelStyle}}>{{ labelValue }}</div>\n", styles: [".label{margin-top:8px;margin-left:7px}\n"] }]
+            args: [{ selector: 'app-custom-label', template: "\r\n<div style={{labelStyle}}>{{ labelValue }}</div>\r\n", styles: [".label{margin-top:8px;margin-left:7px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { labelValue: [{
                 type: Input
             }], labelStyle: [{
@@ -7680,11 +7845,11 @@ class QuestionnaireComponent {
         return Object.values(item)[0];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: SharedService }, { token: i1.ActivatedRoute }, { token: i6$1.DomSanitizer }, { token: i7.NgxSpinnerService }, { token: i3.UntypedFormBuilder }, { token: i9.DeviceDetectorService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, providers: [ChangeService], usesOnChanges: true, ngImport: i0, template: "<!-- Spinner -->\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- custom loader -->\n<!-- <app-loader></app-loader> -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" >\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == '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 }}\n    </button>\n  </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.title\">\n    <h1>{{ questionItem?.title }}</h1>\n    <div>{{ questionItem?.subTitle }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div>\n    <!-- Pie Chart Progress -->\n    <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\n      <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\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    <!-- RS 09DEC24 Changed keys-->\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n      <div class=\"nxt-largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.groupName }}\n        </h3>\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Question Handling -->\n    <!-- VD 10Aug24- question no -->\n  <div>\n    <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\n      <span>{{questionItem?.questionNumber}}.</span>\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n       {{questionItem?.questionText}}\n      </p>\n    </div>\n    <!-- Title -->\n    <!-- <div *ngIf=\"questionItem.isTitle\">\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n        {{ questionItem?.questionText }}\n      </div>\n    </div> -->\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{ questionItem?.questionText }}\n        </h3>\n      </div>\n    </div> -->\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\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.additionalRichContent && qbItem.progressBar\" >\n    <div\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\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=\"nxt-dis-flex\">\n      <select class=\"nxtdropdown\"\n        [ngClass]=\"{\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n          'custom-select': !qbItem?.progressBar\n        }\" class=\"mr-sm-2 dd-height nxt-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' : '' }}\">\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n          {{ opt.value }}\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  <!--VD Radio update -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n    <div class=\"nxt-custom-radio-container\">\n      <div *ngFor=\"let opt of questionItem.options\" \n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n        <input\n          type=\"radio\"\n          [id]=\"opt.value\"\n          [(ngModel)]=\"inpValue\"\n          name=\"inpValue\"\n          [value]=\"opt.value\"\n          (change)=\"optionChange(opt.value)\"\n        />\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n      </div>\n    </div>\n\n    <!-- <div class=\"nxt-dis-flex\">\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n        <label class=\"nxt-radiocontainer container myt-font4\">\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n            (change)=\"optionChange(opt.value)\" />\n          {{ opt.value }}\n        </label>\n      </div>\n    </div> -->\n  </div>  \n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n      {{ questionItem?.errorMessage }}\n    </div>\n    <div class=\"nxt-checkbox-container\">\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n        <label class=\"nxt-container1\">\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\">\n    <!-- HA 31-JAN-24 To reduce the margin -->\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" >\n    <div>\n      <textarea class=\"nxt-input nxt-text-area\" 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 nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n    </div>\n  </div>\n\n\n  <!-- RS 06JAN25 -->\n   <!-- for rich text -->\n  <div *ngIf=\"rtaFlag\">\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n      <app-custom-rich-text\n        [value]=\"inpValue\"\n        [question]=\"questionItem\"\n        [error]=\"questionItem?.error\"\n        (textValueChange)=\"handleRichTextChange($event)\">\n      </app-custom-rich-text>\n    </div>\n  </div>\n  \n        \n  <!-- <div *ngIf=\"ques.type === 'RichTextArea'\">\n\n    <app-custom-rich-text\n      [value]=\"ques.input\"\n      [rows]=\"3\"\n      [error]=\"ques.error\"                [placeholder]=\"ques.question \" \n      (textValueChange)=\"handleRichTextChange($event)\">\n    </app-custom-rich-text>\n</div> -->\n  <!-- CC Number Format -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\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  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(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 nxtmyt-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?.dateText }}</label> -->\n        <div class=\"nxt-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, questionItem)\"\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?.timeText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                           dateandTime: !qbItem?.progressBar}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-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 nxtshowminute nxtmyt-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?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></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.progressBar\">\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,this.questionItem)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.type === 'File' &&\n        !qbItem?.progressBar\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.progressBar\">\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-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=\"nxtfile-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?.questionText)\"> {{ questionItem?.questionText}}</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  <!-- RS 09DEC24 Changed keys-->\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel ? '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 ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n            <span>{{ ques?.questionText }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n            <div *ngIf=\"ques.type === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</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 === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n                <div class=\"dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                                  dateandTime: !qbItem?.progressBar}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-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 nxtshowminute nxtmyt-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?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"nxtmyt-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 === 'DateTime'\">\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n          </div>\n          <!-- VD to show lable-->\n          <div *ngIf=\"ques.type === 'Label'\">\n            <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n            </app-custom-label>\n          </div>\n          <div *ngIf=\"ques.type === 'Text'\">\n            <label>{{ ques.questionText }}</label>\n            <app-custom-input\n                  [value]=\"ques?.input\"\n                  [question]=\"ques\" \n                  [idValue]=\"ques?.trackingId\"\n                  [focusEvent]=\"clearSQError(ques?.id)\"\n                  [error]=\"ques?.error\"\n                  [placeholder]=\"ques?.question\"\n                  (inputValue)=\"selectedInput($event,ques)\">\n            </app-custom-input>\n          </div>\n          <div *ngIf=\"ques.type === 'Location'\">\n            <!-- for pick location -->\n            <!-- HA10012024 Added Api key as input -->\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n          </div>\n          <!-- for  text area   -->\n          <div *ngIf=\"ques.type === 'TextArea'\">\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n          </div>\n\n          <!-- Email -->\n          <div *ngIf=\"ques.type === '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 }}\" />\n          </div>\n\n          <div *ngIf=\"ques.type === 'File'\">\n            <div *ngIf=\"!qbItem.progressBar\">\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 === 'File' &&\n                !qbItem.progressBar\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.progressBar\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-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=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.question }}</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 === '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 === 'Dropdown'\" class=\"nxtdropdown\">\n            <!-- for common dropdown -->\n            <!-- HA 20DEC23 For Translation -->\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\n                    [options]=\"ques.options\"\n                    [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.Name\"\n                    [selectedValue]=\"ques.input\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques?.errorMessage\"\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=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n          <div>\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\n          </div>\n          <div *ngIf=\"ques.type === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n             textBox: !qbItem.progressBar\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\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  <!-- VD button condition removed-->\n  <div class=\"flexer\">\n    <!-- Backward / Back -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n     <!--VD disabled -->\n    <div class=\"backbutton\" \n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-left-bt': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.back }}\n        </button>\n    </div>\n\n    <!-- Forward / Next -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div  *ngIf=\"qbItem.next\" >\n      <div class=\"nxtbutton\">\n         <!--VD disabled -->\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-rusty': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.next }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n  <h2>{{this.qbItem.summaryText}}</h2>\n  <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.progressBar\n               }\">\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\n           <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n            </div>\n            <!-- VD Question No added -->\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"nxt-answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-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.questionText }}:<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.questionText }} <span></span>{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"nxt-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=\"nxt-icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n\n\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\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.summaryText && qbItem.progressBar\" \n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.progressBar\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.summaryText }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\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.progressBar }\">\n          <div class=\"summary\">\n            <!-- <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div> -->\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"nxt-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=\"nxt-icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"nxt-answer\">\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-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  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.cancel }}\n        </button>\n      </div>\n    </div>\n  </div> -->\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.submit }}\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\">\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.edit }}\n      </button>\n    </div> -->\n  </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-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}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{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}.nxt-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}.nxtdate-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}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.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;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.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}.nxtsum-ques{width:55%;margin:auto}.nxtsum-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}.nxtfile-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}.nxtfile-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}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;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}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-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%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.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}.nxt-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}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-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%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;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}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.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){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@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}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"], dependencies: [{ kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { 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.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: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "component", type: i13.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", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, providers: [ChangeService], usesOnChanges: true, ngImport: i0, template: "<!-- Spinner -->\r\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- custom loader -->\r\n<!-- <app-loader></app-loader> -->\r\n<!-- Back Processing -->\r\n<!-- <div *ngIf=\"backicon == false\" >\r\n  <div class=\"backicon\" >\r\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\r\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\r\n    </button>\r\n  </div>\r\n</div> -->\r\n\r\n<!-- Question Hanlding -->\r\n<!-- VD removed unwanted condition -->\r\n<!-- RS 09DEC24 Changed keys-->\r\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\r\n  <!-- Progress Bar & Title -->\r\n  <div *ngIf=\"questionItem.title\">\r\n    <h1>{{ questionItem?.title }}</h1>\r\n    <div>{{ questionItem?.subTitle }}</div>\r\n  </div>\r\n\r\n  <!-- Progress & Grouping -->\r\n  <div>\r\n    <!-- Pie Chart Progress -->\r\n    <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\r\n      <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n        </circle-progress>\r\n      </div>\r\n    </div>\r\n    <!-- RS 09DEC24 Changed keys-->\r\n    <!-- Show the Group/Module related to the Progress -->\r\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\r\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\r\n      <div class=\"nxt-largeTitle\">\r\n        <h3 class=\"myt-font6 myt-text3\">\r\n          {{ questionItem?.groupName }}\r\n        </h3>\r\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\r\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Question Handling -->\r\n    <!-- VD 10Aug24- question no -->\r\n  <div>\r\n    <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\r\n      <span>{{questionItem?.questionNumber}}.</span>\r\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n       {{questionItem?.questionText}}\r\n      </p>\r\n    </div>\r\n    <!-- Title -->\r\n    <!-- <div *ngIf=\"questionItem.isTitle\">\r\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \r\n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\r\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\r\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\r\n        {{ questionItem?.questionText }}\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\r\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\r\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{ questionItem?.questionText }}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    \r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\r\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\r\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n  </div>\r\n\r\n  <!-- Additional Info -->\r\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\r\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\r\n    <div\r\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\r\n    <div class=\"info-alert ques-alert1\">\r\n      <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\r\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dropdown-->\r\n  <div *ngIf=\"dropdownFlag\" >\r\n    <div class=\"nxt-dis-flex\">\r\n      <select class=\"nxtdropdown\"\r\n        [ngClass]=\"{\r\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\r\n          'custom-select': !qbItem?.progressBar\r\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\r\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\r\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\r\n          {{ opt.value }}\r\n        </option>\r\n        <!-- HA 20DEC23 For Translation -->\r\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n\r\n  <!--VD Radio update -->\r\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\r\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\r\n    <div class=\"nxt-custom-radio-container\">\r\n      <div *ngFor=\"let opt of questionItem.options\" \r\n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\r\n        <input\r\n          type=\"radio\"\r\n          [id]=\"opt.value\"\r\n          [(ngModel)]=\"inpValue\"\r\n          name=\"inpValue\"\r\n          [value]=\"opt.value\"\r\n          (change)=\"optionChange(opt.value)\"\r\n        />\r\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- <div class=\"nxt-dis-flex\">\r\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\r\n        <label class=\"nxt-radiocontainer container myt-font4\">\r\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\r\n            (change)=\"optionChange(opt.value)\" />\r\n          {{ opt.value }}\r\n        </label>\r\n      </div>\r\n    </div> -->\r\n  </div>  \r\n  <!-- Checkbox -->\r\n  <div *ngIf=\"checkboxFlag\" class=\"\">\r\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\r\n      {{ questionItem?.errorMessage }}\r\n    </div>\r\n    <div class=\"nxt-checkbox-container\">\r\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\r\n        <label class=\"nxt-container1\">\r\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\r\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text -->\r\n  <div *ngIf=\"textFlag\">\r\n    <!-- HA 31-JAN-24 To reduce the margin -->\r\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \r\n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : ''\r\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text Area -->\r\n  <div *ngIf=\"taFlag\" >\r\n    <div>\r\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : inpValue?.length > 0 && taFocusOut\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" (focusout)=\"taFocusOut = true\"\r\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- RS 06JAN25 -->\r\n   <!-- for rich text -->\r\n  <div *ngIf=\"rtaFlag\">\r\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n      <app-custom-rich-text\r\n        [value]=\"inpValue\"\r\n        [question]=\"questionItem\"\r\n        [error]=\"questionItem?.error\"\r\n        (textValueChange)=\"handleRichTextChange($event)\">\r\n      </app-custom-rich-text>\r\n    </div>\r\n  </div>\r\n  \r\n        \r\n  <!-- <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n\r\n    <app-custom-rich-text\r\n      [value]=\"ques.input\"\r\n      [rows]=\"3\"\r\n      [error]=\"ques.error\"                [placeholder]=\"ques.question \" \r\n      (textValueChange)=\"handleRichTextChange($event)\">\r\n    </app-custom-rich-text>\r\n</div> -->\r\n  <!-- CC Number Format -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\r\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\r\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\r\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n  <!-- END-->\r\n\r\n  <!-- AlphaNumeric -->\r\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\r\n    <div style=\"position:relative;\">\r\n      <!-- HA 20DEC23 For Translation -->\r\n      <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Email -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\r\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- DateTime -->\r\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\r\n    <!-- Error Handling -->\r\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n\r\n    <!-- Date -->\r\n    <div *ngIf=\"dateFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <!-- HA 02FEB24 Additional param to update the question -->\r\n          <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, questionItem)\"\r\n            [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\r\n          </my-date-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Time -->\r\n    <div *ngIf=\"timeFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                           dateandTime: !qbItem?.progressBar}\" \r\n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n              (focus)=\"(clearSQError) \">\r\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">HH</option>\r\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n              {{ hour }}\r\n            </option>\r\n          </select>\r\n          <span class=\"colon\"> : </span>\r\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">MM</option>\r\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n              {{ minute }}\r\n            </option>\r\n          </select>\r\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\r\n            <span class=\"colon\"> : </span>\r\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n              <option value=\"AM\">AM</option>\r\n              <option value=\"PM\">PM</option>\r\n            </select>\r\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n      </div>\r\n      <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Attachment / File -->\r\n  <div *ngIf=\"fileFlag\">\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\r\n        <label class=\"picture-upload\" for=\"file-upload\">\r\n          <span class=\"picture-upload-child\">\r\n            <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n          </span>\r\n          <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\r\n            <i class=\"\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        </label>\r\n      </div>\r\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\r\n    </div>\r\n    <ul *ngIf=\"\r\n        attachments?.length > 0 &&\r\n        questionItem?.type === 'File' &&\r\n        !qbItem?.progressBar\r\n      \" class=\"attach-ulist col-md-12\">\r\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n      </li>\r\n    </ul>\r\n\r\n    <!-- Attachment Progress -->\r\n    <div *ngIf=\"qbItem.progressBar\">\r\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\r\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n      </div>\r\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n      \r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\r\n        <label class=\"file-label \">\r\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\r\n            class=\"file-upload-btn\">\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Book -->\r\n  <div *ngIf=\"bookFlag\">\r\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\r\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\r\n            <span>{{ ques?.questionText }}</span>\r\n          </div>\r\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\r\n            <div *ngIf=\"ques.type === 'Date'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <!-- HA 02FEB24 Additional param to update the question -->\r\n                  <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\r\n                    [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\"  (focus)=\"clearError()\" >\r\n                  </my-date-picker>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Time'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                                  dateandTime: !qbItem?.progressBar}\" \r\n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n                      (focus)=\"(clearSQError) \">\r\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">HH</option>\r\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n                      {{ hour }}\r\n                    </option>\r\n                  </select>\r\n                  <span class=\"colon\"> : </span>\r\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">MM</option>\r\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n                      {{ minute }}\r\n                    </option>\r\n                  </select>\r\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\r\n                    <span class=\"colon\"> : </span>\r\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n                      <option value=\"AM\">AM</option>\r\n                      <option value=\"PM\">PM</option>\r\n                    </select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'DateTime'\">\r\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\r\n          </div>\r\n          <!-- VD to show lable-->\r\n          <div *ngIf=\"ques.type === 'Label'\">\r\n            <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n            </app-custom-label>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <label>{{ ques.questionText }}</label>\r\n            <app-custom-input\r\n                  [value]=\"ques?.input\"\r\n                  [question]=\"ques\" \r\n                  [idValue]=\"ques?.trackingId\"\r\n                  [focusEvent]=\"clearSQError(ques?.id)\"\r\n                  [error]=\"ques?.error\"\r\n                  [placeholder]=\"ques?.question\"\r\n                  (inputValue)=\"selectedInput($event,ques)\">\r\n            </app-custom-input>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- for pick location -->\r\n            <!-- HA10012024 Added Api key as input -->\r\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\r\n          </div>\r\n          <!-- for  text area   -->\r\n          <div *ngIf=\"ques.type === 'TextArea'\">\r\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\r\n          </div>\r\n\r\n          <!-- Email -->\r\n          <div *ngIf=\"ques.type === 'Email'\">\r\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n          </div>\r\n\r\n          <div *ngIf=\"ques.type === 'File'\">\r\n            <div *ngIf=\"!qbItem.progressBar\">\r\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\r\n                <span class=\"picture-upload-child\">\r\n                  <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n                </span>\r\n                <span class=\"\r\n                    fa fa-plus fa-2x\r\n                    picture-upload-child\r\n                    pic-upload\r\n                    icolor\r\n                  \">\r\n                  <i class=\"\" aria-hidden=\"true\"></i>\r\n                </span>\r\n              </label>\r\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\r\n            </div>\r\n\r\n            <ul *ngIf=\"\r\n                attachments?.length > 0 &&\r\n                ques.type === 'File' &&\r\n                !qbItem.progressBar\r\n              \" class=\"attach-ulist col-md-12\">\r\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n                {{ attachment.attachmentName\r\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n              </li>\r\n            </ul>\r\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\r\n\r\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n              </div>\r\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"f-Name\">{{ ques?.question }}</span>\r\n                <label class=\"file-label \">\r\n                  <span style=\"color: #c5281c;text-decoration:underline\">\r\n                    {{'attach' | i18n:i18nService.currentLanguage}}\r\n                  </span>\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\r\n                    class=\"file-upload-btn\">\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Table -->\r\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n            <app-custom-table \r\n              [question]=\"ques\"\r\n              (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-table>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\r\n            <!-- for common dropdown -->\r\n            <!-- HA 20DEC23 For Translation -->\r\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\r\n                    [options]=\"ques.options\"\r\n                    [apiMeta]=\"ques.subText\"\r\n                    [id]=\"ques.Name\"\r\n                    [selectedValue]=\"ques.input\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques?.errorMessage\"\r\n                    [error]=\"ques?.error\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-dropdown>\r\n            <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\"  [certified]=\"ques.certifiedFlag\"  [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\r\n            <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n          </div>          \r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!--List start-->\r\n  <div *ngIf=\"listFlag\">\r\n    <div class=\"form-group\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\r\n          <div>\r\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\r\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\r\n             textBox: !qbItem.progressBar\r\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\r\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\r\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"\" *ngIf=\"addFlag\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\r\n         </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--List End-->\r\n\r\n  <!-- Actions -->\r\n  <!-- VD button condition removed-->\r\n  <div class=\"flexer\">\r\n    <!-- Backward / Back -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n     <!--VD disabled -->\r\n    <div class=\"backbutton\" \r\n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-left-bt': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleBackClick()\">\r\n          {{ qbItem?.back }}\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Forward / Next -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div  *ngIf=\"qbItem.next\" >\r\n      <div class=\"nxtbutton\">\r\n         <!--VD disabled -->\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-rusty': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleNextClick()\">\r\n          {{ qbItem.next }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Summary -->\r\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\r\n  <h2>{{this.qbItem.summaryText}}</h2>\r\n  <p>{{this.qbItem.summarySubText}}</p>\r\n</div>\r\n\r\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\r\n              'col-md-12':!qbItem.progressBar\r\n               }\">\r\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \r\n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div *ngFor=\"let qa of summary\">\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\r\n           <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\r\n            </div>\r\n            <!-- VD Question No added -->\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div>\r\n            <div class=\"nxt-answer\" >\r\n                <div *ngIf=\"qa.qTyp === 'File'\">\r\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                  {{ qa.ansValue }}\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\r\n                <div *ngIf=\"qa.qTyp == 'Book'\">\r\n                  <div *ngFor=\"let val of qa.myVal\">\r\n                    <p>{{ val.questionText }}:<span>{{ val.input }}</span></p>\r\n                  </div>\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the value for direct question -->\r\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.questionText }} <span></span>{{ qa.ansValue }}</div>\r\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n                  </button>\r\n                </div>\r\n          </div>\r\n        </div>\r\n        </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\r\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\r\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n      </circle-progress>\r\n      \r\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \r\n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\r\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\r\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <h3 class=\"summary-h\">\r\n        {{ qbItem.summaryText }}\r\n      </h3>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div class=\"summary-groupText myt-font2\">\r\n      <!-- <p>Informe de da\u00F1o</p> -->\r\n    </div>\r\n    <div *ngFor=\"let qa of summary\" >\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div class=\"summary\">\r\n            <!-- <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n            </div>\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div> -->\r\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n              </button>\r\n            </div>\r\n           \r\n            <div class=\"nxt-answer\">\r\n              <div *ngIf=\"qa.qTyp === 'File'\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                {{ qa.ansValue }}\r\n              </div>\r\n              <div *ngIf=\"qa.qTyp != 'File'\">\r\n                {{ qa.ansValue }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\r\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\r\n      <div class=\"col-md-12\">\r\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\r\n          (click)=\"handleCancelClick()\">\r\n          {{ qbItem.cancel }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n\r\n  <!-- Group Actions -->\r\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\r\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \r\n        (click)=\"handleSubmitClick()\">\r\n        {{ qbItem.submit }}\r\n      </button>\r\n    </div>\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\r\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \r\n              (click)=\"handleBackClickNew()\">\r\n        {{ qbItem.edit }}\r\n      </button>\r\n    </div> -->\r\n  </div>\r\n\r\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-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}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{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}.nxt-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}.nxtdate-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}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.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;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.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}.nxtsum-ques{width:55%;margin:auto}.nxtsum-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}.nxtfile-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}.nxtfile-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}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;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}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-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%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.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}.nxt-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}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-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%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;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}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.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){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@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}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"], dependencies: [{ kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { 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.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: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "component", type: i13.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", "saveTableData"] }, { 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", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-questionnaire", encapsulation: ViewEncapsulation.None, providers: [ChangeService], template: "<!-- Spinner -->\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- custom loader -->\n<!-- <app-loader></app-loader> -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" >\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == '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 }}\n    </button>\n  </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.title\">\n    <h1>{{ questionItem?.title }}</h1>\n    <div>{{ questionItem?.subTitle }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div>\n    <!-- Pie Chart Progress -->\n    <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\n      <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\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    <!-- RS 09DEC24 Changed keys-->\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n      <div class=\"nxt-largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.groupName }}\n        </h3>\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Question Handling -->\n    <!-- VD 10Aug24- question no -->\n  <div>\n    <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\n      <span>{{questionItem?.questionNumber}}.</span>\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n       {{questionItem?.questionText}}\n      </p>\n    </div>\n    <!-- Title -->\n    <!-- <div *ngIf=\"questionItem.isTitle\">\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n        {{ questionItem?.questionText }}\n      </div>\n    </div> -->\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{ questionItem?.questionText }}\n        </h3>\n      </div>\n    </div> -->\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\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.additionalRichContent && qbItem.progressBar\" >\n    <div\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\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=\"nxt-dis-flex\">\n      <select class=\"nxtdropdown\"\n        [ngClass]=\"{\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n          'custom-select': !qbItem?.progressBar\n        }\" class=\"mr-sm-2 dd-height nxt-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' : '' }}\">\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n          {{ opt.value }}\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  <!--VD Radio update -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n    <div class=\"nxt-custom-radio-container\">\n      <div *ngFor=\"let opt of questionItem.options\" \n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n        <input\n          type=\"radio\"\n          [id]=\"opt.value\"\n          [(ngModel)]=\"inpValue\"\n          name=\"inpValue\"\n          [value]=\"opt.value\"\n          (change)=\"optionChange(opt.value)\"\n        />\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n      </div>\n    </div>\n\n    <!-- <div class=\"nxt-dis-flex\">\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n        <label class=\"nxt-radiocontainer container myt-font4\">\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n            (change)=\"optionChange(opt.value)\" />\n          {{ opt.value }}\n        </label>\n      </div>\n    </div> -->\n  </div>  \n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n      {{ questionItem?.errorMessage }}\n    </div>\n    <div class=\"nxt-checkbox-container\">\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n        <label class=\"nxt-container1\">\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\">\n    <!-- HA 31-JAN-24 To reduce the margin -->\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" >\n    <div>\n      <textarea class=\"nxt-input nxt-text-area\" 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 nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n    </div>\n  </div>\n\n\n  <!-- RS 06JAN25 -->\n   <!-- for rich text -->\n  <div *ngIf=\"rtaFlag\">\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n      <app-custom-rich-text\n        [value]=\"inpValue\"\n        [question]=\"questionItem\"\n        [error]=\"questionItem?.error\"\n        (textValueChange)=\"handleRichTextChange($event)\">\n      </app-custom-rich-text>\n    </div>\n  </div>\n  \n        \n  <!-- <div *ngIf=\"ques.type === 'RichTextArea'\">\n\n    <app-custom-rich-text\n      [value]=\"ques.input\"\n      [rows]=\"3\"\n      [error]=\"ques.error\"                [placeholder]=\"ques.question \" \n      (textValueChange)=\"handleRichTextChange($event)\">\n    </app-custom-rich-text>\n</div> -->\n  <!-- CC Number Format -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\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  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(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 nxtmyt-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?.dateText }}</label> -->\n        <div class=\"nxt-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, questionItem)\"\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?.timeText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                           dateandTime: !qbItem?.progressBar}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-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 nxtshowminute nxtmyt-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?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></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.progressBar\">\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,this.questionItem)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.type === 'File' &&\n        !qbItem?.progressBar\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.progressBar\">\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-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=\"nxtfile-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?.questionText)\"> {{ questionItem?.questionText}}</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  <!-- RS 09DEC24 Changed keys-->\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel ? '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 ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n            <span>{{ ques?.questionText }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n            <div *ngIf=\"ques.type === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</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 === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n                <div class=\"dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                                  dateandTime: !qbItem?.progressBar}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-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 nxtshowminute nxtmyt-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?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"nxtmyt-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 === 'DateTime'\">\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n          </div>\n          <!-- VD to show lable-->\n          <div *ngIf=\"ques.type === 'Label'\">\n            <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n            </app-custom-label>\n          </div>\n          <div *ngIf=\"ques.type === 'Text'\">\n            <label>{{ ques.questionText }}</label>\n            <app-custom-input\n                  [value]=\"ques?.input\"\n                  [question]=\"ques\" \n                  [idValue]=\"ques?.trackingId\"\n                  [focusEvent]=\"clearSQError(ques?.id)\"\n                  [error]=\"ques?.error\"\n                  [placeholder]=\"ques?.question\"\n                  (inputValue)=\"selectedInput($event,ques)\">\n            </app-custom-input>\n          </div>\n          <div *ngIf=\"ques.type === 'Location'\">\n            <!-- for pick location -->\n            <!-- HA10012024 Added Api key as input -->\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n          </div>\n          <!-- for  text area   -->\n          <div *ngIf=\"ques.type === 'TextArea'\">\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n          </div>\n\n          <!-- Email -->\n          <div *ngIf=\"ques.type === '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 }}\" />\n          </div>\n\n          <div *ngIf=\"ques.type === 'File'\">\n            <div *ngIf=\"!qbItem.progressBar\">\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 === 'File' &&\n                !qbItem.progressBar\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.progressBar\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-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=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.question }}</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 === '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 === 'Dropdown'\" class=\"nxtdropdown\">\n            <!-- for common dropdown -->\n            <!-- HA 20DEC23 For Translation -->\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\n                    [options]=\"ques.options\"\n                    [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.Name\"\n                    [selectedValue]=\"ques.input\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques?.errorMessage\"\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=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n          <div>\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\n          </div>\n          <div *ngIf=\"ques.type === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n             textBox: !qbItem.progressBar\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\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  <!-- VD button condition removed-->\n  <div class=\"flexer\">\n    <!-- Backward / Back -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n     <!--VD disabled -->\n    <div class=\"backbutton\" \n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-left-bt': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.back }}\n        </button>\n    </div>\n\n    <!-- Forward / Next -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div  *ngIf=\"qbItem.next\" >\n      <div class=\"nxtbutton\">\n         <!--VD disabled -->\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-rusty': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.next }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n  <h2>{{this.qbItem.summaryText}}</h2>\n  <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.progressBar\n               }\">\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\n           <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n            </div>\n            <!-- VD Question No added -->\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"nxt-answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-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.questionText }}:<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.questionText }} <span></span>{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"nxt-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=\"nxt-icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n\n\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\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.summaryText && qbItem.progressBar\" \n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.progressBar\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.summaryText }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\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.progressBar }\">\n          <div class=\"summary\">\n            <!-- <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div> -->\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"nxt-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=\"nxt-icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"nxt-answer\">\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-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  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.cancel }}\n        </button>\n      </div>\n    </div>\n  </div> -->\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.submit }}\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\">\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.edit }}\n      </button>\n    </div> -->\n  </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-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}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{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}.nxt-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}.nxtdate-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}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.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;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.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}.nxtsum-ques{width:55%;margin:auto}.nxtsum-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}.nxtfile-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}.nxtfile-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}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;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}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-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%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.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}.nxt-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}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-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%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;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}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.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){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@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}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"] }]
+            args: [{ selector: "lib-questionnaire", encapsulation: ViewEncapsulation.None, providers: [ChangeService], template: "<!-- Spinner -->\r\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- custom loader -->\r\n<!-- <app-loader></app-loader> -->\r\n<!-- Back Processing -->\r\n<!-- <div *ngIf=\"backicon == false\" >\r\n  <div class=\"backicon\" >\r\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\r\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\r\n    </button>\r\n  </div>\r\n</div> -->\r\n\r\n<!-- Question Hanlding -->\r\n<!-- VD removed unwanted condition -->\r\n<!-- RS 09DEC24 Changed keys-->\r\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\r\n  <!-- Progress Bar & Title -->\r\n  <div *ngIf=\"questionItem.title\">\r\n    <h1>{{ questionItem?.title }}</h1>\r\n    <div>{{ questionItem?.subTitle }}</div>\r\n  </div>\r\n\r\n  <!-- Progress & Grouping -->\r\n  <div>\r\n    <!-- Pie Chart Progress -->\r\n    <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\r\n      <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n        </circle-progress>\r\n      </div>\r\n    </div>\r\n    <!-- RS 09DEC24 Changed keys-->\r\n    <!-- Show the Group/Module related to the Progress -->\r\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\r\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\r\n      <div class=\"nxt-largeTitle\">\r\n        <h3 class=\"myt-font6 myt-text3\">\r\n          {{ questionItem?.groupName }}\r\n        </h3>\r\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\r\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Question Handling -->\r\n    <!-- VD 10Aug24- question no -->\r\n  <div>\r\n    <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\r\n      <span>{{questionItem?.questionNumber}}.</span>\r\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n       {{questionItem?.questionText}}\r\n      </p>\r\n    </div>\r\n    <!-- Title -->\r\n    <!-- <div *ngIf=\"questionItem.isTitle\">\r\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \r\n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\r\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\r\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\r\n        {{ questionItem?.questionText }}\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\r\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\r\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{ questionItem?.questionText }}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    \r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\r\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\r\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n  </div>\r\n\r\n  <!-- Additional Info -->\r\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\r\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\r\n    <div\r\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\r\n    <div class=\"info-alert ques-alert1\">\r\n      <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\r\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dropdown-->\r\n  <div *ngIf=\"dropdownFlag\" >\r\n    <div class=\"nxt-dis-flex\">\r\n      <select class=\"nxtdropdown\"\r\n        [ngClass]=\"{\r\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\r\n          'custom-select': !qbItem?.progressBar\r\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\r\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\r\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\r\n          {{ opt.value }}\r\n        </option>\r\n        <!-- HA 20DEC23 For Translation -->\r\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n\r\n  <!--VD Radio update -->\r\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\r\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\r\n    <div class=\"nxt-custom-radio-container\">\r\n      <div *ngFor=\"let opt of questionItem.options\" \r\n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\r\n        <input\r\n          type=\"radio\"\r\n          [id]=\"opt.value\"\r\n          [(ngModel)]=\"inpValue\"\r\n          name=\"inpValue\"\r\n          [value]=\"opt.value\"\r\n          (change)=\"optionChange(opt.value)\"\r\n        />\r\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- <div class=\"nxt-dis-flex\">\r\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\r\n        <label class=\"nxt-radiocontainer container myt-font4\">\r\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\r\n            (change)=\"optionChange(opt.value)\" />\r\n          {{ opt.value }}\r\n        </label>\r\n      </div>\r\n    </div> -->\r\n  </div>  \r\n  <!-- Checkbox -->\r\n  <div *ngIf=\"checkboxFlag\" class=\"\">\r\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\r\n      {{ questionItem?.errorMessage }}\r\n    </div>\r\n    <div class=\"nxt-checkbox-container\">\r\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\r\n        <label class=\"nxt-container1\">\r\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\r\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text -->\r\n  <div *ngIf=\"textFlag\">\r\n    <!-- HA 31-JAN-24 To reduce the margin -->\r\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \r\n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : ''\r\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text Area -->\r\n  <div *ngIf=\"taFlag\" >\r\n    <div>\r\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : inpValue?.length > 0 && taFocusOut\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" (focusout)=\"taFocusOut = true\"\r\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- RS 06JAN25 -->\r\n   <!-- for rich text -->\r\n  <div *ngIf=\"rtaFlag\">\r\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n      <app-custom-rich-text\r\n        [value]=\"inpValue\"\r\n        [question]=\"questionItem\"\r\n        [error]=\"questionItem?.error\"\r\n        (textValueChange)=\"handleRichTextChange($event)\">\r\n      </app-custom-rich-text>\r\n    </div>\r\n  </div>\r\n  \r\n        \r\n  <!-- <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n\r\n    <app-custom-rich-text\r\n      [value]=\"ques.input\"\r\n      [rows]=\"3\"\r\n      [error]=\"ques.error\"                [placeholder]=\"ques.question \" \r\n      (textValueChange)=\"handleRichTextChange($event)\">\r\n    </app-custom-rich-text>\r\n</div> -->\r\n  <!-- CC Number Format -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\r\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\r\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\r\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n  <!-- END-->\r\n\r\n  <!-- AlphaNumeric -->\r\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\r\n    <div style=\"position:relative;\">\r\n      <!-- HA 20DEC23 For Translation -->\r\n      <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Email -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\r\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- DateTime -->\r\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\r\n    <!-- Error Handling -->\r\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n\r\n    <!-- Date -->\r\n    <div *ngIf=\"dateFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <!-- HA 02FEB24 Additional param to update the question -->\r\n          <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, questionItem)\"\r\n            [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\r\n          </my-date-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Time -->\r\n    <div *ngIf=\"timeFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                           dateandTime: !qbItem?.progressBar}\" \r\n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n              (focus)=\"(clearSQError) \">\r\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">HH</option>\r\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n              {{ hour }}\r\n            </option>\r\n          </select>\r\n          <span class=\"colon\"> : </span>\r\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">MM</option>\r\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n              {{ minute }}\r\n            </option>\r\n          </select>\r\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\r\n            <span class=\"colon\"> : </span>\r\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n              <option value=\"AM\">AM</option>\r\n              <option value=\"PM\">PM</option>\r\n            </select>\r\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n      </div>\r\n      <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Attachment / File -->\r\n  <div *ngIf=\"fileFlag\">\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\r\n        <label class=\"picture-upload\" for=\"file-upload\">\r\n          <span class=\"picture-upload-child\">\r\n            <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n          </span>\r\n          <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\r\n            <i class=\"\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        </label>\r\n      </div>\r\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\r\n    </div>\r\n    <ul *ngIf=\"\r\n        attachments?.length > 0 &&\r\n        questionItem?.type === 'File' &&\r\n        !qbItem?.progressBar\r\n      \" class=\"attach-ulist col-md-12\">\r\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n      </li>\r\n    </ul>\r\n\r\n    <!-- Attachment Progress -->\r\n    <div *ngIf=\"qbItem.progressBar\">\r\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\r\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n      </div>\r\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n      \r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\r\n        <label class=\"file-label \">\r\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\r\n            class=\"file-upload-btn\">\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Book -->\r\n  <div *ngIf=\"bookFlag\">\r\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\r\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\r\n            <span>{{ ques?.questionText }}</span>\r\n          </div>\r\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\r\n            <div *ngIf=\"ques.type === 'Date'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <!-- HA 02FEB24 Additional param to update the question -->\r\n                  <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\r\n                    [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\"  (focus)=\"clearError()\" >\r\n                  </my-date-picker>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Time'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                                  dateandTime: !qbItem?.progressBar}\" \r\n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n                      (focus)=\"(clearSQError) \">\r\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">HH</option>\r\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n                      {{ hour }}\r\n                    </option>\r\n                  </select>\r\n                  <span class=\"colon\"> : </span>\r\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">MM</option>\r\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n                      {{ minute }}\r\n                    </option>\r\n                  </select>\r\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\r\n                    <span class=\"colon\"> : </span>\r\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n                      <option value=\"AM\">AM</option>\r\n                      <option value=\"PM\">PM</option>\r\n                    </select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'DateTime'\">\r\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\r\n          </div>\r\n          <!-- VD to show lable-->\r\n          <div *ngIf=\"ques.type === 'Label'\">\r\n            <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n            </app-custom-label>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <label>{{ ques.questionText }}</label>\r\n            <app-custom-input\r\n                  [value]=\"ques?.input\"\r\n                  [question]=\"ques\" \r\n                  [idValue]=\"ques?.trackingId\"\r\n                  [focusEvent]=\"clearSQError(ques?.id)\"\r\n                  [error]=\"ques?.error\"\r\n                  [placeholder]=\"ques?.question\"\r\n                  (inputValue)=\"selectedInput($event,ques)\">\r\n            </app-custom-input>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- for pick location -->\r\n            <!-- HA10012024 Added Api key as input -->\r\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\r\n          </div>\r\n          <!-- for  text area   -->\r\n          <div *ngIf=\"ques.type === 'TextArea'\">\r\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\r\n          </div>\r\n\r\n          <!-- Email -->\r\n          <div *ngIf=\"ques.type === 'Email'\">\r\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n          </div>\r\n\r\n          <div *ngIf=\"ques.type === 'File'\">\r\n            <div *ngIf=\"!qbItem.progressBar\">\r\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\r\n                <span class=\"picture-upload-child\">\r\n                  <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n                </span>\r\n                <span class=\"\r\n                    fa fa-plus fa-2x\r\n                    picture-upload-child\r\n                    pic-upload\r\n                    icolor\r\n                  \">\r\n                  <i class=\"\" aria-hidden=\"true\"></i>\r\n                </span>\r\n              </label>\r\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\r\n            </div>\r\n\r\n            <ul *ngIf=\"\r\n                attachments?.length > 0 &&\r\n                ques.type === 'File' &&\r\n                !qbItem.progressBar\r\n              \" class=\"attach-ulist col-md-12\">\r\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n                {{ attachment.attachmentName\r\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n              </li>\r\n            </ul>\r\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\r\n\r\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n              </div>\r\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"f-Name\">{{ ques?.question }}</span>\r\n                <label class=\"file-label \">\r\n                  <span style=\"color: #c5281c;text-decoration:underline\">\r\n                    {{'attach' | i18n:i18nService.currentLanguage}}\r\n                  </span>\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\r\n                    class=\"file-upload-btn\">\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Table -->\r\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n            <app-custom-table \r\n              [question]=\"ques\"\r\n              (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-table>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\r\n            <!-- for common dropdown -->\r\n            <!-- HA 20DEC23 For Translation -->\r\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\r\n                    [options]=\"ques.options\"\r\n                    [apiMeta]=\"ques.subText\"\r\n                    [id]=\"ques.Name\"\r\n                    [selectedValue]=\"ques.input\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques?.errorMessage\"\r\n                    [error]=\"ques?.error\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-dropdown>\r\n            <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\"  [certified]=\"ques.certifiedFlag\"  [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\r\n            <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n          </div>          \r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!--List start-->\r\n  <div *ngIf=\"listFlag\">\r\n    <div class=\"form-group\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\r\n          <div>\r\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\r\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\r\n             textBox: !qbItem.progressBar\r\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\r\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\r\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"\" *ngIf=\"addFlag\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\r\n         </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--List End-->\r\n\r\n  <!-- Actions -->\r\n  <!-- VD button condition removed-->\r\n  <div class=\"flexer\">\r\n    <!-- Backward / Back -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n     <!--VD disabled -->\r\n    <div class=\"backbutton\" \r\n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-left-bt': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleBackClick()\">\r\n          {{ qbItem?.back }}\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Forward / Next -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div  *ngIf=\"qbItem.next\" >\r\n      <div class=\"nxtbutton\">\r\n         <!--VD disabled -->\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-rusty': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleNextClick()\">\r\n          {{ qbItem.next }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Summary -->\r\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\r\n  <h2>{{this.qbItem.summaryText}}</h2>\r\n  <p>{{this.qbItem.summarySubText}}</p>\r\n</div>\r\n\r\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\r\n              'col-md-12':!qbItem.progressBar\r\n               }\">\r\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \r\n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div *ngFor=\"let qa of summary\">\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\r\n           <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\r\n            </div>\r\n            <!-- VD Question No added -->\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div>\r\n            <div class=\"nxt-answer\" >\r\n                <div *ngIf=\"qa.qTyp === 'File'\">\r\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                  {{ qa.ansValue }}\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\r\n                <div *ngIf=\"qa.qTyp == 'Book'\">\r\n                  <div *ngFor=\"let val of qa.myVal\">\r\n                    <p>{{ val.questionText }}:<span>{{ val.input }}</span></p>\r\n                  </div>\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the value for direct question -->\r\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.questionText }} <span></span>{{ qa.ansValue }}</div>\r\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n                  </button>\r\n                </div>\r\n          </div>\r\n        </div>\r\n        </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\r\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\r\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n      </circle-progress>\r\n      \r\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \r\n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\r\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\r\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <h3 class=\"summary-h\">\r\n        {{ qbItem.summaryText }}\r\n      </h3>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div class=\"summary-groupText myt-font2\">\r\n      <!-- <p>Informe de da\u00F1o</p> -->\r\n    </div>\r\n    <div *ngFor=\"let qa of summary\" >\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div class=\"summary\">\r\n            <!-- <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n            </div>\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div> -->\r\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n              </button>\r\n            </div>\r\n           \r\n            <div class=\"nxt-answer\">\r\n              <div *ngIf=\"qa.qTyp === 'File'\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                {{ qa.ansValue }}\r\n              </div>\r\n              <div *ngIf=\"qa.qTyp != 'File'\">\r\n                {{ qa.ansValue }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\r\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\r\n      <div class=\"col-md-12\">\r\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\r\n          (click)=\"handleCancelClick()\">\r\n          {{ qbItem.cancel }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n\r\n  <!-- Group Actions -->\r\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\r\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \r\n        (click)=\"handleSubmitClick()\">\r\n        {{ qbItem.submit }}\r\n      </button>\r\n    </div>\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\r\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \r\n              (click)=\"handleBackClickNew()\">\r\n        {{ qbItem.edit }}\r\n      </button>\r\n    </div> -->\r\n  </div>\r\n\r\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-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}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{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}.nxt-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}.nxtdate-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}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.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;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.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}.nxtsum-ques{width:55%;margin:auto}.nxtsum-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}.nxtfile-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}.nxtfile-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}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;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}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-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%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.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}.nxt-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}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-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%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;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}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.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){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@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}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"] }]
         }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: SharedService }, { type: i1.ActivatedRoute }, { type: i6$1.DomSanitizer }, { type: i7.NgxSpinnerService }, { type: i3.UntypedFormBuilder }, { type: i9.DeviceDetectorService }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { qbId: [{
                 type: Input
             }], insuranceStartDate: [{
@@ -8090,11 +8255,11 @@ class CustomCalendarComponent {
         return updatedText;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomCalendarComponent, deps: [{ token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: { allEvents: "allEvents", question: "question", nxtId: "nxtId" }, outputs: { eventSelected: "eventSelected", dateSelected: "dateSelected", openModal: "openModal", closeModal: "closeModal" }, 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          <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\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() }}\n                <span *ngIf=\"day?.events?.length > 0\" class=\"entry-indicator\" [class.select]=\"day?.isSelected\"></span>\n              </div>\n              <!-- <div *ngFor=\"let event of day.events\" >\n                  <div *ngFor=\"let entryGroup of event.entries\" class=\"event\">\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\">\n                          <div *ngIf=\"entryGroup[key].type == 'Time'\">\n                              {{ entryGroup[key].input?.value | date: 'shortTime' }}\n                          </div>\n                          <div *ngIf=\"entryGroup[key].type != 'Time'\">\n                              {{ entryGroup[key].input }}\n                          </div>\n                      </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      <!--VD 06Sep24 calendar updates--> \n      <!-- RS 09DEC24 Changed keys--> \n      <div *ngIf=\"showAppoinmentSection && selectedDay?.events?.length > 0\" class=\"appointments-container\">\n          <h4>Appointments</h4>\n          <div  *ngFor=\"let event of selectedDay?.events\">\n              <div class=\"event\" *ngFor=\"let entryGroup of event.entries\">\n                    <div class=\"event-info\">\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\" class=\"entry-row\">\n                        <div *ngIf=\"entryGroup[key].questionText\" class=\"entry-text\">\n                            {{removeCharacters(entryGroup[key].questionText)}}:\n                        </div>\n                        <div class=\"entry-value\">\n                            <!-- VD 09Sep24- date type and link type updates    -->\n                            <span *ngIf=\"entryGroup[key].type != 'Time' && entryGroup[key].type != 'Link'&& entryGroup[key].type != 'Date'\">{{ entryGroup[key].input }}</span>\n                            <span *ngIf=\"entryGroup[key].type == 'Time'\">{{ entryGroup[key].input | date: 'shortTime' }}</span>\n                            <span *ngIf=\"entryGroup[key].type == 'Date'\">{{ entryGroup[key].input | date: 'mediumDate' }}</span>\n                            <span *ngIf=\"entryGroup[key].type == 'Link'\">\n                                <a [href]=\"'//'+ entryGroup[key].input\" target=\"_blank\">{{removeCharacters(entryGroup[key].questionText)}}</a>\n                            </span>\n                        </div>\n                    </div>\n                      <div class=\"event-actions\">\n                        <button (click)=\"editEvent(event,entryGroup)\">Edit</button>\n                        <button (click)=\"deleteEvent(event.id,entryGroup)\">Delete</button>\n                     </div>\n                  </div>\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<lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n<ng-template dynamicComponentHost ></ng-template>\n</app-custom-model> -->", styles: [".calendar-container{flex:1}.appoinappointment{flex:1;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080;background-color:green!important;color:#fff!important}.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%}.form-group.content-box{padding-bottom:0!important}.entry-indicator{position:absolute;top:5px;right:5px;width:10px;height:10px;background-color:#0f5132;border-radius:50%}.select{background-color:#fff}.entry-row{display:flex;align-items:center;margin-bottom:5px}.entry-text{font-weight:700;margin-right:10px;white-space:nowrap}.entry-value{flex:1;word-break:break-word}.entry-value a{color:#4caf50}\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: "pipe", type: i2.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: { allEvents: "allEvents", question: "question", nxtId: "nxtId" }, outputs: { eventSelected: "eventSelected", dateSelected: "dateSelected", openModal: "openModal", closeModal: "closeModal" }, ngImport: i0, template: "<div class=\"align-calendar\">\r\n    <div class=\"calendar-container\">\r\n      <div class=\"calendar-header\">\r\n          <button (click)=\"previousMonth()\"><< Previous >></button>\r\n          <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\r\n          <button (click)=\"nextMonth()\"><< Next >></button>\r\n      </div>\r\n      <div class=\"calendar-grid\">\r\n          <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\r\n          <div\r\n              class=\"calendar-day\"\r\n              *ngFor=\"let day of calendarDays\"\r\n              [class.not-current-month]=\"!day.isCurrentMonth\"\r\n              [class.past]=\"day.isPast\"\r\n              [class.today]=\"day.isToday\"\r\n              [class.future]=\"day.isFuture\"\r\n              [class.selected]=\"day.isSelected\"\r\n              (click)=\"selectDay(day)\"\r\n        >\r\n              <div class=\"day-number\">{{ day.date.getDate() }}\r\n                <span *ngIf=\"day?.events?.length > 0\" class=\"entry-indicator\" [class.select]=\"day?.isSelected\"></span>\r\n              </div>\r\n              <!-- <div *ngFor=\"let event of day.events\" >\r\n                  <div *ngFor=\"let entryGroup of event.entries\" class=\"event\">\r\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\">\r\n                          <div *ngIf=\"entryGroup[key].type == 'Time'\">\r\n                              {{ entryGroup[key].input?.value | date: 'shortTime' }}\r\n                          </div>\r\n                          <div *ngIf=\"entryGroup[key].type != 'Time'\">\r\n                              {{ entryGroup[key].input }}\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n              </div> -->\r\n          </div>\r\n      </div>\r\n  </div>\r\n    <div class=\"appoinappointment\">\r\n      <div class=\"appointments-container\">\r\n          <h4>Add Appointment</h4>\r\n          <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\r\n      </div>\r\n      <!--VD 06Sep24 calendar updates--> \r\n      <!-- RS 09DEC24 Changed keys--> \r\n      <div *ngIf=\"showAppoinmentSection && selectedDay?.events?.length > 0\" class=\"appointments-container\">\r\n          <h4>Appointments</h4>\r\n          <div  *ngFor=\"let event of selectedDay?.events\">\r\n              <div class=\"event\" *ngFor=\"let entryGroup of event.entries\">\r\n                    <div class=\"event-info\">\r\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\" class=\"entry-row\">\r\n                        <div *ngIf=\"entryGroup[key].questionText\" class=\"entry-text\">\r\n                            {{removeCharacters(entryGroup[key].questionText)}}:\r\n                        </div>\r\n                        <div class=\"entry-value\">\r\n                            <!-- VD 09Sep24- date type and link type updates    -->\r\n                            <span *ngIf=\"entryGroup[key].type != 'Time' && entryGroup[key].type != 'Link'&& entryGroup[key].type != 'Date'\">{{ entryGroup[key].input }}</span>\r\n                            <span *ngIf=\"entryGroup[key].type == 'Time'\">{{ entryGroup[key].input | date: 'shortTime' }}</span>\r\n                            <span *ngIf=\"entryGroup[key].type == 'Date'\">{{ entryGroup[key].input | date: 'mediumDate' }}</span>\r\n                            <span *ngIf=\"entryGroup[key].type == 'Link'\">\r\n                                <a [href]=\"'//'+ entryGroup[key].input\" target=\"_blank\">{{removeCharacters(entryGroup[key].questionText)}}</a>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                      <div class=\"event-actions\">\r\n                        <button (click)=\"editEvent(event,entryGroup)\">Edit</button>\r\n                        <button (click)=\"deleteEvent(event.id,entryGroup)\">Delete</button>\r\n                     </div>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <app-custom-model\r\n  [modalTitle]=\"modalTitle\"\r\n  [isModalOpen]=\"isModalOpen\"\r\n  [modalSize]=\"modalSize\"\r\n  [saveButtonValue]=\"saveButtonValue\"\r\n  [modalFooter]=\"modalFooter\"\r\n  (saveButtonEmit)=\"onSave()\"\r\n  (cancelButtonEmit)=\"onCancel()\"\r\n>\r\n<lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n<ng-template dynamicComponentHost ></ng-template>\r\n</app-custom-model> -->", styles: [".calendar-container{flex:1}.appoinappointment{flex:1;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080;background-color:green!important;color:#fff!important}.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%}.form-group.content-box{padding-bottom:0!important}.entry-indicator{position:absolute;top:5px;right:5px;width:10px;height:10px;background-color:#0f5132;border-radius:50%}.select{background-color:#fff}.entry-row{display:flex;align-items:center;margin-bottom:5px}.entry-text{font-weight:700;margin-right:10px;white-space:nowrap}.entry-value{flex:1;word-break:break-word}.entry-value a{color:#4caf50}\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: "pipe", type: i2.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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          <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\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() }}\n                <span *ngIf=\"day?.events?.length > 0\" class=\"entry-indicator\" [class.select]=\"day?.isSelected\"></span>\n              </div>\n              <!-- <div *ngFor=\"let event of day.events\" >\n                  <div *ngFor=\"let entryGroup of event.entries\" class=\"event\">\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\">\n                          <div *ngIf=\"entryGroup[key].type == 'Time'\">\n                              {{ entryGroup[key].input?.value | date: 'shortTime' }}\n                          </div>\n                          <div *ngIf=\"entryGroup[key].type != 'Time'\">\n                              {{ entryGroup[key].input }}\n                          </div>\n                      </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      <!--VD 06Sep24 calendar updates--> \n      <!-- RS 09DEC24 Changed keys--> \n      <div *ngIf=\"showAppoinmentSection && selectedDay?.events?.length > 0\" class=\"appointments-container\">\n          <h4>Appointments</h4>\n          <div  *ngFor=\"let event of selectedDay?.events\">\n              <div class=\"event\" *ngFor=\"let entryGroup of event.entries\">\n                    <div class=\"event-info\">\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\" class=\"entry-row\">\n                        <div *ngIf=\"entryGroup[key].questionText\" class=\"entry-text\">\n                            {{removeCharacters(entryGroup[key].questionText)}}:\n                        </div>\n                        <div class=\"entry-value\">\n                            <!-- VD 09Sep24- date type and link type updates    -->\n                            <span *ngIf=\"entryGroup[key].type != 'Time' && entryGroup[key].type != 'Link'&& entryGroup[key].type != 'Date'\">{{ entryGroup[key].input }}</span>\n                            <span *ngIf=\"entryGroup[key].type == 'Time'\">{{ entryGroup[key].input | date: 'shortTime' }}</span>\n                            <span *ngIf=\"entryGroup[key].type == 'Date'\">{{ entryGroup[key].input | date: 'mediumDate' }}</span>\n                            <span *ngIf=\"entryGroup[key].type == 'Link'\">\n                                <a [href]=\"'//'+ entryGroup[key].input\" target=\"_blank\">{{removeCharacters(entryGroup[key].questionText)}}</a>\n                            </span>\n                        </div>\n                    </div>\n                      <div class=\"event-actions\">\n                        <button (click)=\"editEvent(event,entryGroup)\">Edit</button>\n                        <button (click)=\"deleteEvent(event.id,entryGroup)\">Delete</button>\n                     </div>\n                  </div>\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<lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n<ng-template dynamicComponentHost ></ng-template>\n</app-custom-model> -->", styles: [".calendar-container{flex:1}.appoinappointment{flex:1;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080;background-color:green!important;color:#fff!important}.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%}.form-group.content-box{padding-bottom:0!important}.entry-indicator{position:absolute;top:5px;right:5px;width:10px;height:10px;background-color:#0f5132;border-radius:50%}.select{background-color:#fff}.entry-row{display:flex;align-items:center;margin-bottom:5px}.entry-text{font-weight:700;margin-right:10px;white-space:nowrap}.entry-value{flex:1;word-break:break-word}.entry-value a{color:#4caf50}\n"] }]
+            args: [{ selector: 'app-custom-calendar', template: "<div class=\"align-calendar\">\r\n    <div class=\"calendar-container\">\r\n      <div class=\"calendar-header\">\r\n          <button (click)=\"previousMonth()\"><< Previous >></button>\r\n          <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\r\n          <button (click)=\"nextMonth()\"><< Next >></button>\r\n      </div>\r\n      <div class=\"calendar-grid\">\r\n          <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\r\n          <div\r\n              class=\"calendar-day\"\r\n              *ngFor=\"let day of calendarDays\"\r\n              [class.not-current-month]=\"!day.isCurrentMonth\"\r\n              [class.past]=\"day.isPast\"\r\n              [class.today]=\"day.isToday\"\r\n              [class.future]=\"day.isFuture\"\r\n              [class.selected]=\"day.isSelected\"\r\n              (click)=\"selectDay(day)\"\r\n        >\r\n              <div class=\"day-number\">{{ day.date.getDate() }}\r\n                <span *ngIf=\"day?.events?.length > 0\" class=\"entry-indicator\" [class.select]=\"day?.isSelected\"></span>\r\n              </div>\r\n              <!-- <div *ngFor=\"let event of day.events\" >\r\n                  <div *ngFor=\"let entryGroup of event.entries\" class=\"event\">\r\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\">\r\n                          <div *ngIf=\"entryGroup[key].type == 'Time'\">\r\n                              {{ entryGroup[key].input?.value | date: 'shortTime' }}\r\n                          </div>\r\n                          <div *ngIf=\"entryGroup[key].type != 'Time'\">\r\n                              {{ entryGroup[key].input }}\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n              </div> -->\r\n          </div>\r\n      </div>\r\n  </div>\r\n    <div class=\"appoinappointment\">\r\n      <div class=\"appointments-container\">\r\n          <h4>Add Appointment</h4>\r\n          <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\r\n      </div>\r\n      <!--VD 06Sep24 calendar updates--> \r\n      <!-- RS 09DEC24 Changed keys--> \r\n      <div *ngIf=\"showAppoinmentSection && selectedDay?.events?.length > 0\" class=\"appointments-container\">\r\n          <h4>Appointments</h4>\r\n          <div  *ngFor=\"let event of selectedDay?.events\">\r\n              <div class=\"event\" *ngFor=\"let entryGroup of event.entries\">\r\n                    <div class=\"event-info\">\r\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\" class=\"entry-row\">\r\n                        <div *ngIf=\"entryGroup[key].questionText\" class=\"entry-text\">\r\n                            {{removeCharacters(entryGroup[key].questionText)}}:\r\n                        </div>\r\n                        <div class=\"entry-value\">\r\n                            <!-- VD 09Sep24- date type and link type updates    -->\r\n                            <span *ngIf=\"entryGroup[key].type != 'Time' && entryGroup[key].type != 'Link'&& entryGroup[key].type != 'Date'\">{{ entryGroup[key].input }}</span>\r\n                            <span *ngIf=\"entryGroup[key].type == 'Time'\">{{ entryGroup[key].input | date: 'shortTime' }}</span>\r\n                            <span *ngIf=\"entryGroup[key].type == 'Date'\">{{ entryGroup[key].input | date: 'mediumDate' }}</span>\r\n                            <span *ngIf=\"entryGroup[key].type == 'Link'\">\r\n                                <a [href]=\"'//'+ entryGroup[key].input\" target=\"_blank\">{{removeCharacters(entryGroup[key].questionText)}}</a>\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                      <div class=\"event-actions\">\r\n                        <button (click)=\"editEvent(event,entryGroup)\">Edit</button>\r\n                        <button (click)=\"deleteEvent(event.id,entryGroup)\">Delete</button>\r\n                     </div>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <app-custom-model\r\n  [modalTitle]=\"modalTitle\"\r\n  [isModalOpen]=\"isModalOpen\"\r\n  [modalSize]=\"modalSize\"\r\n  [saveButtonValue]=\"saveButtonValue\"\r\n  [modalFooter]=\"modalFooter\"\r\n  (saveButtonEmit)=\"onSave()\"\r\n  (cancelButtonEmit)=\"onCancel()\"\r\n>\r\n<lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n<ng-template dynamicComponentHost ></ng-template>\r\n</app-custom-model> -->", styles: [".calendar-container{flex:1}.appoinappointment{flex:1;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080;background-color:green!important;color:#fff!important}.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%}.form-group.content-box{padding-bottom:0!important}.entry-indicator{position:absolute;top:5px;right:5px;width:10px;height:10px;background-color:#0f5132;border-radius:50%}.select{background-color:#fff}.entry-row{display:flex;align-items:center;margin-bottom:5px}.entry-text{font-weight:700;margin-right:10px;white-space:nowrap}.entry-value{flex:1;word-break:break-word}.entry-value a{color:#4caf50}\n"] }]
         }], ctorParameters: () => [{ type: ChangeService }], propDecorators: { eventSelected: [{
                 type: Output
             }], dateSelected: [{
@@ -8113,6 +8278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class SearchBoxComponent {
     sfService;
+    cdr;
     dataService;
     route;
     i18nService;
@@ -8135,8 +8301,9 @@ class SearchBoxComponent {
     el;
     serv = 'api';
     tkn = '';
-    constructor(sfService, dataService, route, el, i18nService) {
+    constructor(sfService, cdr, dataService, route, el, i18nService) {
         this.sfService = sfService;
+        this.cdr = cdr;
         this.dataService = dataService;
         this.route = route;
         this.i18nService = i18nService;
@@ -8147,6 +8314,24 @@ class SearchBoxComponent {
             let apiObj = JSON.parse(this.apiMeta);
             this.SearchItem = apiObj.field;
         }
+        // this.resetComponentState();
+    }
+    ////RS 03FEB2025
+    // Resets state when filterName or apiMeta changes to reflect updated data
+    ngOnChanges(changes) {
+        if (changes['apiMeta'] && this.apiMeta) {
+            this.apiObj = JSON.parse(this.apiMeta);
+            this.SearchItem = this.apiObj?.field;
+        }
+    }
+    //RS 03FEB2025
+    // Clears search-related data, including results, search term, and suggestions.
+    resetComponentState() {
+        this.finalResults = [];
+        this.filterName = '';
+        this.searchKeyWord = '';
+        this.showSuggestion = false;
+        this.noResult = false;
     }
     clearList() {
         setTimeout(() => {
@@ -8154,6 +8339,7 @@ class SearchBoxComponent {
         }, 1000);
     }
     getSourceDataLocal(event) {
+        event.preventDefault();
         if (event.target.value.length > 2) {
             this.showSuggestion = true;
             this.finalResults = [];
@@ -8197,6 +8383,7 @@ class SearchBoxComponent {
                 }
                 this.noResult = results.length === 0;
                 this.finalResults = results;
+                this.cdr.detectChanges(); // Force UI update
             });
         }
     };
@@ -8210,13 +8397,18 @@ class SearchBoxComponent {
         change.field = apiObj.field;
         this.searchValueChange.emit(change);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBoxComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: i1.ActivatedRoute }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", filterName: "filterName" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\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; padding-right: 30px;\"\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                <!-- RS 29JAN25 -->\n                  <h4 >{{ item | 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\n", styles: ["#searchbox-style{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"/><path d=\"M20 20L17 17\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');background-position:right 5px center;background-repeat:no-repeat;background-size:24px;padding-right:35px}\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.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" }] });
+    //RS 03FEB2025
+    // Resets component state when the component is destroyed
+    ngOnDestroy() {
+        this.resetComponentState();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBoxComponent, deps: [{ token: SalesforceService }, { token: i0.ChangeDetectorRef }, { token: DataService }, { token: i1.ActivatedRoute }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", filterName: "filterName" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\r\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\r\n  <input #auto id=\"searchbox-style\"\r\n          (blur)=\"clearList()\"\r\n          [(ngModel)]=\"filterName\"\r\n          type=\"text\"\r\n          name=\"name\"\r\n          [readOnly]=\"readOnly\"\r\n          [placeholder]=\"placeHolderText\"\r\n          style=\"margin: 0 !important; padding-right: 30px;\"\r\n          class=\"searchInput she-line-input form-control\"\r\n          (focusin)=\"getSourceDataLocal($event)\"\r\n          (input)=\"getSourceDataLocal($event)\">\r\n  <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n  <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\r\n      style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\"\r\n      class=\"suggestions-container\">\r\n      <!-- HA 20DEC23 Uncommented the logic -->\r\n       <!-- VD 03May- search changes -->\r\n      <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n        <!-- VD 26Jun24 - id condition removed -->\r\n          <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\r\n              <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n                  <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n              </div>\r\n              <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n                <!--// VD 26JUN24 - pipe changes -->\r\n                <!-- RS 29JAN25 -->\r\n                <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\r\n              </div>\r\n          </div>\r\n      </div>\r\n      <!-- HA 20DEC23 For Commented this for future purpose -->\r\n      <!-- <table class=\"table table-striped table-bordered\">\r\n          <thead>\r\n            <tr>\r\n              <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\r\n              <td>{{ item.firstName }}</td>\r\n              <td>{{ item.lastName }}</td>\r\n              <td>{{ item.division }}</td>\r\n              <td>{{ item.numberPlate }}</td>\r\n            </tr>\r\n          </tbody>\r\n        </table> -->\r\n  </div>\r\n</div>\r\n\r\n", styles: ["#searchbox-style{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"/><path d=\"M20 20L17 17\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');background-position:right 5px center;background-repeat:no-repeat;background-size:24px;padding-right:35px}\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.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: "18.2.13", ngImport: i0, type: SearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-search-box', template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\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; padding-right: 30px;\"\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                <!-- RS 29JAN25 -->\n                  <h4 >{{ item | 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\n", styles: ["#searchbox-style{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"/><path d=\"M20 20L17 17\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');background-position:right 5px center;background-repeat:no-repeat;background-size:24px;padding-right:35px}\n"] }]
-        }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { placeHolderText: [{
+            args: [{ selector: 'lib-search-box', template: "<!-- // VD 12Jun24 - readonly change-->\r\n<div id=\"autocomplete-input\"> <!-- SKS5NOV25 search icon -->\r\n  <input #auto id=\"searchbox-style\"\r\n          (blur)=\"clearList()\"\r\n          [(ngModel)]=\"filterName\"\r\n          type=\"text\"\r\n          name=\"name\"\r\n          [readOnly]=\"readOnly\"\r\n          [placeholder]=\"placeHolderText\"\r\n          style=\"margin: 0 !important; padding-right: 30px;\"\r\n          class=\"searchInput she-line-input form-control\"\r\n          (focusin)=\"getSourceDataLocal($event)\"\r\n          (input)=\"getSourceDataLocal($event)\">\r\n  <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n  <div *ngIf=\"finalResults.length > 0 && showSuggestion\"\r\n      style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\"\r\n      class=\"suggestions-container\">\r\n      <!-- HA 20DEC23 Uncommented the logic -->\r\n       <!-- VD 03May- search changes -->\r\n      <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n        <!-- VD 26Jun24 - id condition removed -->\r\n          <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\r\n              <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n                  <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n              </div>\r\n              <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n                <!--// VD 26JUN24 - pipe changes -->\r\n                <!-- RS 29JAN25 -->\r\n                <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\r\n              </div>\r\n          </div>\r\n      </div>\r\n      <!-- HA 20DEC23 For Commented this for future purpose -->\r\n      <!-- <table class=\"table table-striped table-bordered\">\r\n          <thead>\r\n            <tr>\r\n              <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\r\n              <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\r\n              <td>{{ item.firstName }}</td>\r\n              <td>{{ item.lastName }}</td>\r\n              <td>{{ item.division }}</td>\r\n              <td>{{ item.numberPlate }}</td>\r\n            </tr>\r\n          </tbody>\r\n        </table> -->\r\n  </div>\r\n</div>\r\n\r\n", styles: ["#searchbox-style{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"/><path d=\"M20 20L17 17\" stroke=\"%23434555\" stroke-opacity=\"0.65\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');background-position:right 5px center;background-repeat:no-repeat;background-size:24px;padding-right:35px}\n"] }]
+        }], ctorParameters: () => [{ type: SalesforceService }, { type: i0.ChangeDetectorRef }, { type: DataService }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { placeHolderText: [{
                 type: Input
             }], auto: [{
                 type: ViewChild,
@@ -8481,11 +8673,11 @@ class FileUploadComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileUploadComponent, deps: [{ token: SharedService }, { token: DataService }, { token: i6$1.DomSanitizer }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\n      <div class=\"col-lg-3 document_image\">\n        <img [src]=\"getDocIcon(eachFile?.name)\">\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    <!-- RS 09JAN2025 -->\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"[ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= maxFiles }\" [disabled]=\"copyOfInputAllFiles?.length >= maxFiles\">Choose Files</button>\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\"  [accept]=\"allowedFileTypes.join(',')\"\n    style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n\n  <!-- RS 09JAN2025 -->\n  <!-- Error messages section -->\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\n    <small class=\"text-danger\">\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\n    </small>\n  </div>\n\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  <!-- RS 09DEC24 Changed keys--> \n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\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        <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=\"500px\"></iframe>\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.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:#fff;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;justify-content:center;align-items:center;z-index:1000}.nxt-file-map-modal{background-color:#fff;border-radius:8px;overflow:hidden;width:80%;max-width:800px;max-height:90%;display:flex;flex-direction:column}.nxt-file-model-content{display:flex;flex-direction:column;height:100%}.nxt-file-model-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#f5f5f5;border-bottom:1px solid #ddd}.nxt-file-model-header h4{margin:0;font-size:1.25em}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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;\">\r\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\r\n  </div>\r\n\r\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\r\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\r\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\r\n      <div class=\"col-lg-3 document_image\">\r\n        <img [src]=\"getDocIcon(eachFile?.name)\">\r\n    </div>\r\n      <div class=\"col-lg-9 document_name\">\r\n        {{eachFile?.name}}\r\n      </div>\r\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\r\n      </div>\r\n      <!-- VD 20May24 - preview changes-->\r\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\r\n      <div class=\"col-lg-3 document_image\">\r\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\r\n      </div>\r\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\r\n          {{eachFile?.name}}\r\n      </div>\r\n  </div>\r\n  </div>\r\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\r\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\r\n  </div>\r\n</div>\r\n\r\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\r\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <!-- VD 03May24 file upload fix-->\r\n    <!-- RS 09JAN2025 -->\r\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"[ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= maxFiles }\" [disabled]=\"copyOfInputAllFiles?.length >= maxFiles\">Choose Files</button>\r\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\"  [accept]=\"allowedFileTypes.join(',')\"\r\n    style=\"display:none;\"\r\n    (change) = uploadMultipleFiles($event)\r\n    />\r\n  </label>\r\n\r\n  <!-- RS 09JAN2025 -->\r\n  <!-- Error messages section -->\r\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\r\n    <small class=\"text-danger\">\r\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\r\n    </small>\r\n  </div>\r\n\r\n<!-- HA 19DEC23 For translation -->\r\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\r\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\r\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\r\n  </label>\r\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\r\n  formControl?.documents?.errors?.required\">\r\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\r\n  </span> -->\r\n  <!-- RS 09DEC24 Changed keys--> \r\n</div>\r\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\r\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\r\n  <div class=\"nxt-file-map-modal\">\r\n    <div class=\"nxt-file-model-content\">\r\n      <div class=\"nxt-file-model-header\">\r\n        <h4>{{fileName}}</h4>\r\n        <button class=\"close-button\" (click)=\"close()\">X</button>\r\n      </div>\r\n      <ng-container *ngIf=\"isImage; else otherFile\">\r\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\r\n      </ng-container>\r\n      <ng-template #otherFile>\r\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.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:#fff;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;justify-content:center;align-items:center;z-index:1000}.nxt-file-map-modal{background-color:#fff;border-radius:8px;overflow:hidden;width:80%;max-width:800px;max-height:90%;display:flex;flex-direction:column}.nxt-file-model-content{display:flex;flex-direction:column;height:100%}.nxt-file-model-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#f5f5f5;border-bottom:1px solid #ddd}.nxt-file-model-header h4{margin:0;font-size:1.25em}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.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: "18.2.13", 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\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\n      <div class=\"col-lg-3 document_image\">\n        <img [src]=\"getDocIcon(eachFile?.name)\">\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    <!-- RS 09JAN2025 -->\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"[ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= maxFiles }\" [disabled]=\"copyOfInputAllFiles?.length >= maxFiles\">Choose Files</button>\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\"  [accept]=\"allowedFileTypes.join(',')\"\n    style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n\n  <!-- RS 09JAN2025 -->\n  <!-- Error messages section -->\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\n    <small class=\"text-danger\">\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\n    </small>\n  </div>\n\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  <!-- RS 09DEC24 Changed keys--> \n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\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        <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=\"500px\"></iframe>\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.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:#fff;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;justify-content:center;align-items:center;z-index:1000}.nxt-file-map-modal{background-color:#fff;border-radius:8px;overflow:hidden;width:80%;max-width:800px;max-height:90%;display:flex;flex-direction:column}.nxt-file-model-content{display:flex;flex-direction:column;height:100%}.nxt-file-model-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#f5f5f5;border-bottom:1px solid #ddd}.nxt-file-model-header h4{margin:0;font-size:1.25em}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.Invalid{border:1px solid red!important}\n"] }]
+            args: [{ selector: 'app-file-upload', template: "<div class=\"row\" style=\"margin: 0;\">\r\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\r\n  </div>\r\n\r\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\r\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\r\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\r\n      <div class=\"col-lg-3 document_image\">\r\n        <img [src]=\"getDocIcon(eachFile?.name)\">\r\n    </div>\r\n      <div class=\"col-lg-9 document_name\">\r\n        {{eachFile?.name}}\r\n      </div>\r\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\r\n      </div>\r\n      <!-- VD 20May24 - preview changes-->\r\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\r\n      <div class=\"col-lg-3 document_image\">\r\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\r\n      </div>\r\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\r\n          {{eachFile?.name}}\r\n      </div>\r\n  </div>\r\n  </div>\r\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\r\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\r\n  </div>\r\n</div>\r\n\r\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\r\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <!-- VD 03May24 file upload fix-->\r\n    <!-- RS 09JAN2025 -->\r\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"[ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= maxFiles }\" [disabled]=\"copyOfInputAllFiles?.length >= maxFiles\">Choose Files</button>\r\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\"  [accept]=\"allowedFileTypes.join(',')\"\r\n    style=\"display:none;\"\r\n    (change) = uploadMultipleFiles($event)\r\n    />\r\n  </label>\r\n\r\n  <!-- RS 09JAN2025 -->\r\n  <!-- Error messages section -->\r\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\r\n    <small class=\"text-danger\">\r\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\r\n    </small>\r\n  </div>\r\n\r\n<!-- HA 19DEC23 For translation -->\r\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\r\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\r\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\r\n  </label>\r\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\r\n  formControl?.documents?.errors?.required\">\r\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\r\n  </span> -->\r\n  <!-- RS 09DEC24 Changed keys--> \r\n</div>\r\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\r\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\r\n  <div class=\"nxt-file-map-modal\">\r\n    <div class=\"nxt-file-model-content\">\r\n      <div class=\"nxt-file-model-header\">\r\n        <h4>{{fileName}}</h4>\r\n        <button class=\"close-button\" (click)=\"close()\">X</button>\r\n      </div>\r\n      <ng-container *ngIf=\"isImage; else otherFile\">\r\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\r\n      </ng-container>\r\n      <ng-template #otherFile>\r\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.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:#fff;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;justify-content:center;align-items:center;z-index:1000}.nxt-file-map-modal{background-color:#fff;border-radius:8px;overflow:hidden;width:80%;max-width:800px;max-height:90%;display:flex;flex-direction:column}.nxt-file-model-content{display:flex;flex-direction:column;height:100%}.nxt-file-model-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#f5f5f5;border-bottom:1px solid #ddd}.nxt-file-model-header h4{margin:0;font-size:1.25em}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.Invalid{border:1px solid red!important}\n"] }]
         }], ctorParameters: () => [{ type: SharedService }, { type: DataService }, { type: i6$1.DomSanitizer }, { type: I18nService }], propDecorators: { selectedFileData: [{
                 type: Output
             }], deletedFileData: [{
@@ -8535,11 +8727,11 @@ class DependentTableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DependentTableComponent, deps: [{ token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DependentTableComponent, selector: "app-dependent-table", inputs: { alertMessage: "alertMessage" }, ngImport: i0, template: "<div  class=\"dropdown\" style=\"cursor: pointer;\">\n    <span id=\"zoneIcon\">  \n      <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\n    </span>\n    <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\n      <div class=\"col-lg-12\">\n        <table class=\"table table-striped table-bordered\">\n          <tbody *ngIf=\"!ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\n                <span><b>{{ errorObj.noPermits }}</b></span>\n                <span>{{ errorObj.noActive }}</span>\n              </td>\n            </tr>\n          </tbody>\n          <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\n                <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\n                <span>{{ errorObj.active }}</span>\n              </td>\n            </tr>\n            <tr *ngFor=\"let item of Value\" >\n              <td>\n                <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n    </div>\n    </div>\n  </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DependentTableComponent, selector: "app-dependent-table", inputs: { alertMessage: "alertMessage" }, ngImport: i0, template: "<div  class=\"dropdown\" style=\"cursor: pointer;\">\r\n    <span id=\"zoneIcon\">  \r\n      <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\r\n    </span>\r\n    <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\r\n      <div class=\"col-lg-12\">\r\n        <table class=\"table table-striped table-bordered\">\r\n          <tbody *ngIf=\"!ValueLength\">\r\n            <tr>\r\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\r\n                <span><b>{{ errorObj.noPermits }}</b></span>\r\n                <span>{{ errorObj.noActive }}</span>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n          <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\r\n            <tr>\r\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\r\n                <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\r\n                <span>{{ errorObj.active }}</span>\r\n              </td>\r\n            </tr>\r\n            <tr *ngFor=\"let item of Value\" >\r\n              <td>\r\n                <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n    </div>\r\n    </div>\r\n  </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DependentTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dependent-table', template: "<div  class=\"dropdown\" style=\"cursor: pointer;\">\n    <span id=\"zoneIcon\">  \n      <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\n    </span>\n    <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\n      <div class=\"col-lg-12\">\n        <table class=\"table table-striped table-bordered\">\n          <tbody *ngIf=\"!ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\n                <span><b>{{ errorObj.noPermits }}</b></span>\n                <span>{{ errorObj.noActive }}</span>\n              </td>\n            </tr>\n          </tbody>\n          <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\n                <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\n                <span>{{ errorObj.active }}</span>\n              </td>\n            </tr>\n            <tr *ngFor=\"let item of Value\" >\n              <td>\n                <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n    </div>\n    </div>\n  </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\n"] }]
+            args: [{ selector: 'app-dependent-table', template: "<div  class=\"dropdown\" style=\"cursor: pointer;\">\r\n    <span id=\"zoneIcon\">  \r\n      <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\r\n    </span>\r\n    <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\r\n      <div class=\"col-lg-12\">\r\n        <table class=\"table table-striped table-bordered\">\r\n          <tbody *ngIf=\"!ValueLength\">\r\n            <tr>\r\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\r\n                <span><b>{{ errorObj.noPermits }}</b></span>\r\n                <span>{{ errorObj.noActive }}</span>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n          <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\r\n            <tr>\r\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\r\n                <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\r\n                <span>{{ errorObj.active }}</span>\r\n              </td>\r\n            </tr>\r\n            <tr *ngFor=\"let item of Value\" >\r\n              <td>\r\n                <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n    </div>\r\n    </div>\r\n  </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\n"] }]
         }], ctorParameters: () => [{ type: ChangeService }], propDecorators: { alertMessage: [{
                 type: Input
             }] } });
@@ -8648,11 +8840,11 @@ class TableAppendixComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableAppendixComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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,#eee,#fff 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:#afacac80;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;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;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:#02ad02;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,#fff 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,#eee,#fff);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", "question", "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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableAppendixComponent, selector: "app-table-appendix", inputs: { question: "question" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\r\n    <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\r\n      <th></th>\r\n      <th>{{ tableInfo.tableHeader }}</th>\r\n      <th></th>\r\n    </thead>\r\n    <thead>\r\n      <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\r\n        {{ header.label }}\r\n      </th>\r\n    </thead>\r\n    <tbody id=\"safetyMeasuresTableBody\">\r\n      <tr *ngFor=\"let item of tableData; let i = index\">\r\n        <td *ngFor=\"let header of tableHeader; let j = index\">\r\n          <div *ngIf=\"header.type === 'text'\">\r\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\">\r\n          </div>\r\n          <div *ngIf=\"header.type.includes('number')\">\r\n            <!-- HA 19DEC23 For translation -->\r\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\">\r\n          </div>\r\n          <div *ngIf=\"header.type === 'dropdown'\">\r\n            <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \r\n            [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\r\n            (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\r\n            </app-custom-dropdown>\r\n          </div>\r\n          <div *ngIf=\"header.type === 'textcheckbox'\">\r\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\r\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;\">\r\n              <label class=\"switch2\">\r\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \r\n                type=\"checkbox\"\r\n                [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\r\n                <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \r\n                <span class=\"switch-handle2\"></span> \r\n              </label> \r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"header.type === 'labelcheckbox'\">\r\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\r\n              <!-- HA 19DEC23 For translation -->\r\n              <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\r\n              <label class=\"switch2\">\r\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \r\n                type=\"checkbox\"\r\n                [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\r\n                <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \r\n                <span class=\"switch-handle2\"></span> \r\n              </label> \r\n            </div>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\r\n        <td colspan=\"1\">\r\n          <!-- HA 19DEC23 For translation -->\r\n          <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\r\n        </td>\r\n      </tr>\r\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\r\n        <td colspan=\"3\">\r\n          <!-- HA 19DEC23 For translation -->\r\n          <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\r\n        </td>\r\n        <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">\r\n          +\r\n        </td>\r\n      </tr>\r\n      <tr  *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\r\n        <td *ngFor=\"let header of tableHeader; let l = index\">\r\n          <div *ngIf=\"header.type === 'text'\" >\r\n            <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\r\n          </div>\r\n          <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\r\n            <!-- HA 19DEC23 For translation -->\r\n            <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \r\n            [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n            (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\r\n            </app-custom-dropdown>\r\n          </div>\r\n          <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\r\n            <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\r\n            (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\r\n            placeholder=\"DD/MM/YYYY HH:MM\">\r\n          </div>\r\n          <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\r\n            <label class=\"switch2\">\r\n              <input  class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \r\n              type=\"checkbox\"\r\n              [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\r\n              <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \r\n              <span class=\"switch-handle2\"></span> \r\n            </label> \r\n          </div>\r\n          <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\r\n            <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\r\n            (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\r\n            [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\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,#eee,#fff 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:#afacac80;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;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;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:#02ad02;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,#fff 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,#eee,#fff);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", "question", "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: "18.2.13", ngImport: i0, type: TableAppendixComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-appendix', 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,#eee,#fff 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:#afacac80;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;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;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:#02ad02;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,#fff 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,#eee,#fff);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"] }]
+            args: [{ selector: 'app-table-appendix', template: "<table class=\"table table-striped table-bordered\">\r\n    <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\r\n      <th></th>\r\n      <th>{{ tableInfo.tableHeader }}</th>\r\n      <th></th>\r\n    </thead>\r\n    <thead>\r\n      <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\r\n        {{ header.label }}\r\n      </th>\r\n    </thead>\r\n    <tbody id=\"safetyMeasuresTableBody\">\r\n      <tr *ngFor=\"let item of tableData; let i = index\">\r\n        <td *ngFor=\"let header of tableHeader; let j = index\">\r\n          <div *ngIf=\"header.type === 'text'\">\r\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\">\r\n          </div>\r\n          <div *ngIf=\"header.type.includes('number')\">\r\n            <!-- HA 19DEC23 For translation -->\r\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\">\r\n          </div>\r\n          <div *ngIf=\"header.type === 'dropdown'\">\r\n            <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \r\n            [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\r\n            (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\r\n            </app-custom-dropdown>\r\n          </div>\r\n          <div *ngIf=\"header.type === 'textcheckbox'\">\r\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\r\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;\">\r\n              <label class=\"switch2\">\r\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \r\n                type=\"checkbox\"\r\n                [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\r\n                <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \r\n                <span class=\"switch-handle2\"></span> \r\n              </label> \r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"header.type === 'labelcheckbox'\">\r\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\r\n              <!-- HA 19DEC23 For translation -->\r\n              <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\r\n              <label class=\"switch2\">\r\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \r\n                type=\"checkbox\"\r\n                [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\r\n                <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \r\n                <span class=\"switch-handle2\"></span> \r\n              </label> \r\n            </div>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\r\n        <td colspan=\"1\">\r\n          <!-- HA 19DEC23 For translation -->\r\n          <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\r\n        </td>\r\n      </tr>\r\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\r\n        <td colspan=\"3\">\r\n          <!-- HA 19DEC23 For translation -->\r\n          <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\r\n        </td>\r\n        <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">\r\n          +\r\n        </td>\r\n      </tr>\r\n      <tr  *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\r\n        <td *ngFor=\"let header of tableHeader; let l = index\">\r\n          <div *ngIf=\"header.type === 'text'\" >\r\n            <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\r\n          </div>\r\n          <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\r\n            <!-- HA 19DEC23 For translation -->\r\n            <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \r\n            [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n            (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\r\n            </app-custom-dropdown>\r\n          </div>\r\n          <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\r\n            <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\r\n            (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\r\n            placeholder=\"DD/MM/YYYY HH:MM\">\r\n          </div>\r\n          <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\r\n            <label class=\"switch2\">\r\n              <input  class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \r\n              type=\"checkbox\"\r\n              [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\r\n              <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \r\n              <span class=\"switch-handle2\"></span> \r\n            </label> \r\n          </div>\r\n          <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\r\n            <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\r\n            (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\r\n            [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\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,#eee,#fff 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:#afacac80;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;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;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:#02ad02;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,#fff 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,#eee,#fff);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"] }]
         }], ctorParameters: () => [{ type: I18nService }], propDecorators: { question: [{
                 type: Input
             }], valueChange: [{
@@ -8683,11 +8875,11 @@ class CustomDateComponent {
         this.dateChange.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDateComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomDateComponent, selector: "app-custom-date", inputs: { date: "date", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { dateChange: "dateChange" }, usesOnChanges: true, 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$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomDateComponent, selector: "app-custom-date", inputs: { date: "date", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- date component -->\r\n<!-- VD 12Jun24 - readonly change-->\r\n<!-- VD 01Aug24 - validation change-->\r\n<p>\r\n    <input\r\n      [class]=\"error ? 'invalid' : ''\"\r\n      [(ngModel)]=\"dateSelected\"\r\n      [owlDateTimeTrigger]=\"dt1\"\r\n      [owlDateTime]=\"dt1\"\r\n      [disabled]=\"readOnly\"\r\n      placeholder=\"DD/MM/YYYY\"\r\n      (input)=\"onDateChange($event)\"\r\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\r\n      (dateTimeChange)=\"onDateChange($event)\"\r\n    >\r\n    <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\r\n  </p>\r\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$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDateComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ selector: 'app-custom-date', template: "<!-- date component -->\r\n<!-- VD 12Jun24 - readonly change-->\r\n<!-- VD 01Aug24 - validation change-->\r\n<p>\r\n    <input\r\n      [class]=\"error ? 'invalid' : ''\"\r\n      [(ngModel)]=\"dateSelected\"\r\n      [owlDateTimeTrigger]=\"dt1\"\r\n      [owlDateTime]=\"dt1\"\r\n      [disabled]=\"readOnly\"\r\n      placeholder=\"DD/MM/YYYY\"\r\n      (input)=\"onDateChange($event)\"\r\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\r\n      (dateTimeChange)=\"onDateChange($event)\"\r\n    >\r\n    <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\r\n  </p>\r\n  <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"] }]
         }], ctorParameters: () => [{ type: I18nService }], propDecorators: { date: [{
                 type: Input
             }], readOnly: [{
@@ -8738,11 +8930,11 @@ class CustomTimeComponent {
         this.timeChange.emit(event?.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTimeComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 -->\r\n<!-- // VD 12Jun24 - readonly change-->\r\n<!-- VD 01Aug24 - validation change-->\r\n  <p>\r\n    <input\r\n      [class]=\"error ? 'invalid' : ''\"\r\n      [(ngModel)]=\"timeSelected\"\r\n      [owlDateTimeTrigger]=\"dt2\"\r\n      [owlDateTime]=\"dt2\"\r\n      placeholder=\"HH:MM\"\r\n      [readOnly]=\"readOnly\" \r\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\r\n      (dateTimeChange)=\"onTimeChange($event)\"\r\n    >\r\n    <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\r\n  </p>\r\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$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTimeComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ selector: 'app-custom-time', template: "<!-- time component -->\r\n<!-- // VD 12Jun24 - readonly change-->\r\n<!-- VD 01Aug24 - validation change-->\r\n  <p>\r\n    <input\r\n      [class]=\"error ? 'invalid' : ''\"\r\n      [(ngModel)]=\"timeSelected\"\r\n      [owlDateTimeTrigger]=\"dt2\"\r\n      [owlDateTime]=\"dt2\"\r\n      placeholder=\"HH:MM\"\r\n      [readOnly]=\"readOnly\" \r\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\r\n      (dateTimeChange)=\"onTimeChange($event)\"\r\n    >\r\n    <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\r\n  </p>\r\n  <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"] }]
         }], ctorParameters: () => [{ type: I18nService }], propDecorators: { time: [{
                 type: Input
             }], readOnly: [{
@@ -8771,11 +8963,11 @@ class CustomButtonComponent {
         this.buttonValue.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomButtonComponent, selector: "app-custom-button", inputs: { height: "height", width: "width", textColor: "textColor", buttonText: "buttonText", value: "value", backgroundColor: "backgroundColor" }, outputs: { buttonValue: "buttonValue" }, ngImport: i0, template: "\n<!-- 08NOV23 - button html added-->\n<button \n[style.height]=\"height\" \n[style.color]=\"textColor\"\n[style.background-color]=\"backgroundColor\"\n[style.width]=\"width\" class=\"custom-button\"\n[value] =\"value\"\n(click)=\"handleClick(value)\"\n >{{ buttonText }}</button>\n", styles: [".custom-button{border:none;cursor:pointer;border-radius:5px;font-size:16px;font-size:14px}.custom-button:hover{background-color:#0056b3}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomButtonComponent, selector: "app-custom-button", inputs: { height: "height", width: "width", textColor: "textColor", buttonText: "buttonText", value: "value", backgroundColor: "backgroundColor" }, outputs: { buttonValue: "buttonValue" }, ngImport: i0, template: "\r\n<!-- 08NOV23 - button html added-->\r\n<button \r\n[style.height]=\"height\" \r\n[style.color]=\"textColor\"\r\n[style.background-color]=\"backgroundColor\"\r\n[style.width]=\"width\" class=\"custom-button\"\r\n[value] =\"value\"\r\n(click)=\"handleClick(value)\"\r\n >{{ buttonText }}</button>\r\n", styles: [".custom-button{border:none;cursor:pointer;border-radius:5px;font-size:16px;font-size:14px}.custom-button:hover{background-color:#0056b3}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-button', template: "\n<!-- 08NOV23 - button html added-->\n<button \n[style.height]=\"height\" \n[style.color]=\"textColor\"\n[style.background-color]=\"backgroundColor\"\n[style.width]=\"width\" class=\"custom-button\"\n[value] =\"value\"\n(click)=\"handleClick(value)\"\n >{{ buttonText }}</button>\n", styles: [".custom-button{border:none;cursor:pointer;border-radius:5px;font-size:16px;font-size:14px}.custom-button:hover{background-color:#0056b3}\n"] }]
+            args: [{ selector: 'app-custom-button', template: "\r\n<!-- 08NOV23 - button html added-->\r\n<button \r\n[style.height]=\"height\" \r\n[style.color]=\"textColor\"\r\n[style.background-color]=\"backgroundColor\"\r\n[style.width]=\"width\" class=\"custom-button\"\r\n[value] =\"value\"\r\n(click)=\"handleClick(value)\"\r\n >{{ buttonText }}</button>\r\n", styles: [".custom-button{border:none;cursor:pointer;border-radius:5px;font-size:16px;font-size:14px}.custom-button:hover{background-color:#0056b3}\n"] }]
         }], ctorParameters: () => [], propDecorators: { height: [{
                 type: Input
             }], width: [{
@@ -8816,11 +9008,11 @@ class CustomModelComponent {
         this.saveButtonEmit.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomModelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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      <!-- /* VD 06Sep24 styling changes */-->\n      <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n        <button (click)=\"onCancel()\">Cancel</button>\n        <button (click)=\"onSave()\">{{ saveButtonValue }}</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:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <span class=\"close\" (click)=\"onCancel()\">&times;</span>\r\n        <h2>{{ modalTitle }}</h2>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- /* VD 06Sep24 styling changes */-->\r\n      <div class=\"modal-footer\" *ngIf=\"modalFooter\">\r\n        <button (click)=\"onCancel()\">Cancel</button>\r\n        <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\r\n      </div>\r\n    </div>\r\n</div>\r\n  ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\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: "18.2.13", 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      <!-- /* VD 06Sep24 styling changes */-->\n      <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n        <button (click)=\"onCancel()\">Cancel</button>\n        <button (click)=\"onSave()\">{{ saveButtonValue }}</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:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"] }]
+            args: [{ selector: 'app-custom-model', template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <span class=\"close\" (click)=\"onCancel()\">&times;</span>\r\n        <h2>{{ modalTitle }}</h2>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- /* VD 06Sep24 styling changes */-->\r\n      <div class=\"modal-footer\" *ngIf=\"modalFooter\">\r\n        <button (click)=\"onCancel()\">Cancel</button>\r\n        <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\r\n      </div>\r\n    </div>\r\n</div>\r\n  ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { modalTitle: [{
                 type: Input
             }], isModalOpen: [{
@@ -8946,11 +9138,11 @@ class CustomRadioComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRadioComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRadioComponent, selector: "app-custom-radio", inputs: { options: "options", 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: "<!-- RS 09DEC24 Changed keys-->\n <!-- RS 019JAN25 -->\n <!-- validate for NULL  -->\n<div class=\"custom-radio-container\">\n  <div\n    *ngFor=\"let option of options\"\n    [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\n  >\n    <input\n      type=\"radio\"\n      [id]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\"\n      [checked] = \"selectedValue == option.value\"\n      [name]=\"id\"\n      [value]=\"selectedValue\"\n      (change)=\"radioChange($event)\"\n      [disabled]=\"readOnly\"\n    />\n    <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\">{{ apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value}}</label>\n  </div>\n  <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n</div>", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRadioComponent, selector: "app-custom-radio", inputs: { options: "options", 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: "<!-- RS 09DEC24 Changed keys-->\r\n <!-- RS 019JAN25 -->\r\n <!-- validate for NULL  -->\r\n<div class=\"custom-radio-container\">\r\n  <div\r\n    *ngFor=\"let option of options\"\r\n    [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [id]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\"\r\n      [checked] = \"selectedValue == option.value\"\r\n      [name]=\"id\"\r\n      [value]=\"selectedValue\"\r\n      (change)=\"radioChange($event)\"\r\n      [disabled]=\"readOnly\"\r\n    />\r\n    <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\">{{ apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value}}</label>\r\n  </div>\r\n  <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\r\n</div>", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-radio', template: "<!-- RS 09DEC24 Changed keys-->\n <!-- RS 019JAN25 -->\n <!-- validate for NULL  -->\n<div class=\"custom-radio-container\">\n  <div\n    *ngFor=\"let option of options\"\n    [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\n  >\n    <input\n      type=\"radio\"\n      [id]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\"\n      [checked] = \"selectedValue == option.value\"\n      [name]=\"id\"\n      [value]=\"selectedValue\"\n      (change)=\"radioChange($event)\"\n      [disabled]=\"readOnly\"\n    />\n    <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\">{{ apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value}}</label>\n  </div>\n  <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n</div>", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}\n"] }]
+            args: [{ selector: 'app-custom-radio', template: "<!-- RS 09DEC24 Changed keys-->\r\n <!-- RS 019JAN25 -->\r\n <!-- validate for NULL  -->\r\n<div class=\"custom-radio-container\">\r\n  <div\r\n    *ngFor=\"let option of options\"\r\n    [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [id]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\"\r\n      [checked] = \"selectedValue == option.value\"\r\n      [name]=\"id\"\r\n      [value]=\"selectedValue\"\r\n      (change)=\"radioChange($event)\"\r\n      [disabled]=\"readOnly\"\r\n    />\r\n    <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\">{{ apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value}}</label>\r\n  </div>\r\n  <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\r\n</div>", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}\n"] }]
         }], ctorParameters: () => [{ type: ChangeService }, { type: DataService }, { type: I18nService }], propDecorators: { options: [{
                 type: Input
             }], apiMeta: [{
@@ -9341,6 +9533,11 @@ class QuestionbookComponent {
     referenceQuestions = [];
     qbRefrenceBook;
     modalCalendarModalFooter;
+    //RS 03FEB2025  Save the table data independently
+    handleTableSave(tableData, ques) {
+        console.log('Saving table data:', tableData);
+        localStorage.setItem(`table_${ques.id}`, JSON.stringify(tableData));
+    }
     openCalendarModal(event) {
         this.isCalendarModalOpen = true;
         this.qbRefrenceBook = event.qbRefrenceBook;
@@ -9360,11 +9557,11 @@ class QuestionbookComponent {
         this.isCalendarModalOpen = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: I18nService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, 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        <!-- RA09DEC24 Changed keys-->\n        <div\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.isHidden\">\n            <div *ngIf=\"ques.type === 'DateTime'\">\n \n            </div>\n            <!-- VD 20JUN24 - help text changes-->\n            <!-- VD 01Aug24 - validation change-->\n            <!-- // VD 02Aug24 - label value style-->\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n                    <!-- RS 17JAN2025 -->\n                    <!-- Displays icons with tooltips help text -->\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" \n                        class=\"icon\" \n                        [matTooltip]=\"ques?.helpText\"\n                        matTooltipClass=\"white-tooltip\">i</div>\n        <!-- RS 17JAN2025 -->\n        <!--  Displays icons with tooltips for file requirements -->\n        <div \n            class=\"icon\" \n            *ngIf=\"ques.fieldsMeta\"\n            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\n            matTooltipClass=\"white-tooltip\"\n            style=\"margin-left: 4px;\"\n        >i</div>\n    </span>\n</div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.type === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n \n             <!-- Date-->\n             <div *ngIf=\"ques.type === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n \n             <!-- Time-->\n             <div *ngIf=\"ques.type === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.type === 'Calendar'\">\n                <app-custom-calendar\n                [question]=\"ques\"\n                (eventSelected)=\"getCalendarEvent($event)\"\n                (dateSelected)=\"getCurrentCalendar($event)\"\n                (openModal)=\"openCalendarModal($event)\"\n                (closeModal)=\"closeCalendarModal($event)\"\n                ></app-custom-calendar>\n                <!-- model used in calendar component -->\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\n                    [modalTitle]=\"calendarModalTitle\"\n                    [isModalOpen]=\"isCalendarModalOpen\"\n                    [modalSize]=\"calendarModalSize\"\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\n                    [modalFooter]=\"modalCalendarModalFooter\"\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\n                >\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                </app-custom-model>\n            </div>\n            <!-- Text -->\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n                        textBox: !qbItem.progressBar\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (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 === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [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 === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n            <!-- RS 06JAN25 -->\n           <!-- for rich text editor -->\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\n                <app-custom-rich-text \n                    [question]=\"ques\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [value]=\"ques.input || ''\"\n                    [error]=\"ques.error\"\n                    [placeholder]=\"ques.question\"\n                    (textValueChange)=\"childEventCapture($event, ques)\">\n                </app-custom-rich-text>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.type === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n            </div>\n \n            <!-- Table -->\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-table>\n            </div>\n \n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-table-appendix>\n            </div>\n             <!-- list -->\n             <!-- VD 20Aug24 used correct attribute -->\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [filterName]=\"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 === 'Dropdown' && ques?.options\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.options\"\n                    [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                    [selectedValue]=\"ques.selectedValue\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [question]=\"ques\"\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            <!-- // VD 02Aug24 custom-radio component -->\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-radio>\n            </div>\n \n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.type === '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 === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n                </app-custom-label>\n            </div>\n             <!-- // VD 02Aug24 image component -->\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n                <app-custom-image [question]=\"ques\">\n                </app-custom-image>\n            </div>\n            <!-- 08NOV23 - button type question added -->\n             <!-- Button -->\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"\n                [width]=\"'150px'\"\n                [buttonText]=\"ques?.question\"\n                [value]=\"ques?.question\"\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 === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>\n  <!-- 06-09-24 for calendar type-->\n<!-- <ng-template dynamicComponentHost></ng-template> -->", 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:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}\n"], dependencies: [{ kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { 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: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.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", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { 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", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { 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", "labelStyle"] }, { 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: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomImageComponent, selector: "app-custom-image", inputs: ["alt", "src", "imageStyle", "question"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\r\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24  Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n    <div class=\"form-row\">\r\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n        <!-- RA09DEC24 Changed keys-->\r\n        <div\r\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n            <!-- Sub Question Label -->\r\n            <!-- HA 20DEC23 Label Style from salesforce -->\r\n            <!-- VD 09May24 is hide field change-->\r\n         <div *ngIf=\"!ques.isHidden\">\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n            </div>\r\n            <!-- VD 20JUN24 - help text changes-->\r\n            <!-- VD 01Aug24 - validation change-->\r\n            <!-- // VD 02Aug24 - label value style-->\r\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n                    <!-- RS 17JAN2025 -->\r\n                    <!-- Displays icons with tooltips help text -->\r\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" \r\n                        class=\"icon\" \r\n                        [matTooltip]=\"ques?.helpText\"\r\n                        matTooltipClass=\"white-tooltip\">i</div>\r\n        <!-- RS 17JAN2025 -->\r\n        <!--  Displays icons with tooltips for file requirements -->\r\n        <div \r\n            class=\"icon\" \r\n            *ngIf=\"ques.fieldsMeta\"\r\n            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\r\n            matTooltipClass=\"white-tooltip\"\r\n            style=\"margin-left: 4px;\"\r\n        >i</div>\r\n    </span>\r\n</div>\r\n            <!-- // VD 12Jun24 - readonly change-->\r\n            <!-- DateTime -->\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date-picker>\r\n            </div>\r\n \r\n             <!-- Date-->\r\n             <div *ngIf=\"ques.type === 'Date'\">\r\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date>\r\n            </div>\r\n \r\n             <!-- Time-->\r\n             <div *ngIf=\"ques.type === 'Time'\">\r\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-time>\r\n            </div>\r\n           <!-- calendar  -->\r\n            <div *ngIf=\"ques.type === 'Calendar'\">\r\n                <app-custom-calendar\r\n                [question]=\"ques\"\r\n                (eventSelected)=\"getCalendarEvent($event)\"\r\n                (dateSelected)=\"getCurrentCalendar($event)\"\r\n                (openModal)=\"openCalendarModal($event)\"\r\n                (closeModal)=\"closeCalendarModal($event)\"\r\n                ></app-custom-calendar>\r\n                <!-- model used in calendar component -->\r\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n                    [modalTitle]=\"calendarModalTitle\"\r\n                    [isModalOpen]=\"isCalendarModalOpen\"\r\n                    [modalSize]=\"calendarModalSize\"\r\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\r\n                    [modalFooter]=\"modalCalendarModalFooter\"\r\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\r\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n                >\r\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n                </app-custom-model>\r\n            </div>\r\n            <!-- Text -->\r\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n                        textBox: !qbItem.progressBar\r\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n                </app-custom-input>\r\n            </div>\r\n \r\n            <!-- for pick location -->\r\n            <!--   VD 21DEC23 - dependent field change -->\r\n            <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- HA10012024 Added Api key as input -->\r\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n                </app-pick-location>\r\n            </div>\r\n \r\n            <!-- for  text area   -->\r\n            <div *ngIf=\"ques.type === 'TextArea'\">\r\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n            </div>\r\n            <!-- RS 06JAN25 -->\r\n           <!-- for rich text editor -->\r\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n                <app-custom-rich-text \r\n                    [question]=\"ques\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [value]=\"ques.input || ''\"\r\n                    [error]=\"ques.error\"\r\n                    [placeholder]=\"ques.question\"\r\n                    (textValueChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-rich-text>\r\n            </div>\r\n\r\n            <!-- Email -->\r\n            <div *ngIf=\"ques.type === 'Email'\">\r\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n            </div>\r\n \r\n           <!-- Table -->\r\n            <!-- RS 03FEB2025 -->\r\n            <!-- Added handleTableSave to handle table data persistence, enabling saving table contents to local storage when save button is clicked -->\r\n           <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n            <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\"(saveTableData)=\"handleTableSave($event, ques)\">\r\n            </app-custom-table>\r\n        </div>\r\n \r\n              <!-- Table Appendix -->\r\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-table-appendix>\r\n            </div>\r\n             <!-- list -->\r\n             <!-- VD 20Aug24 used correct attribute -->\r\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\r\n                </lib-search-box>\r\n            </div>\r\n \r\n            <!-- Dropdown -->\r\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n            <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n                <app-custom-dropdown [options]=\"ques.options\"\r\n                    [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n                    [selectedValue]=\"ques.selectedValue\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [question]=\"ques\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-dropdown>\r\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n            </div>\r\n            <!-- // VD 02Aug24 custom-radio component -->\r\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-radio>\r\n            </div>\r\n \r\n            <!-- Attachment / Files -->\r\n            <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n                </app-dependent-table>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n                </app-custom-label>\r\n            </div>\r\n             <!-- // VD 02Aug24 image component -->\r\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n                <app-custom-image [question]=\"ques\">\r\n                </app-custom-image>\r\n            </div>\r\n            <!-- 08NOV23 - button type question added -->\r\n             <!-- Button -->\r\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n                <app-custom-button [height]=\"'50px'\"\r\n                [width]=\"'150px'\"\r\n                [buttonText]=\"ques?.question\"\r\n                [value]=\"ques?.question\"\r\n                (buttonValue)=\"childEventCapture($event, ques)\"\r\n                >\r\n                </app-custom-button>\r\n            </div>\r\n            <!-- HA 20DEC23  This is to load book type questions-->\r\n            <div *ngIf=\"ques.type === 'Book'\">\r\n                <!-- HA 09FEB24 Added ternary operator -->\r\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n         </div>\r\n        </div>\r\n    </div>\r\n  <!-- 06-09-24 for calendar type-->\r\n<!-- <ng-template dynamicComponentHost></ng-template> -->", 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:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}\n"], dependencies: [{ kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { 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: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.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", "saveTableData"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { 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", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { 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", "labelStyle"] }, { 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: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomImageComponent, selector: "app-custom-image", inputs: ["alt", "src", "imageStyle", "question"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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        <!-- RA09DEC24 Changed keys-->\n        <div\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.isHidden\">\n            <div *ngIf=\"ques.type === 'DateTime'\">\n \n            </div>\n            <!-- VD 20JUN24 - help text changes-->\n            <!-- VD 01Aug24 - validation change-->\n            <!-- // VD 02Aug24 - label value style-->\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n                    <!-- RS 17JAN2025 -->\n                    <!-- Displays icons with tooltips help text -->\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" \n                        class=\"icon\" \n                        [matTooltip]=\"ques?.helpText\"\n                        matTooltipClass=\"white-tooltip\">i</div>\n        <!-- RS 17JAN2025 -->\n        <!--  Displays icons with tooltips for file requirements -->\n        <div \n            class=\"icon\" \n            *ngIf=\"ques.fieldsMeta\"\n            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\n            matTooltipClass=\"white-tooltip\"\n            style=\"margin-left: 4px;\"\n        >i</div>\n    </span>\n</div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.type === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n \n             <!-- Date-->\n             <div *ngIf=\"ques.type === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n \n             <!-- Time-->\n             <div *ngIf=\"ques.type === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.type === 'Calendar'\">\n                <app-custom-calendar\n                [question]=\"ques\"\n                (eventSelected)=\"getCalendarEvent($event)\"\n                (dateSelected)=\"getCurrentCalendar($event)\"\n                (openModal)=\"openCalendarModal($event)\"\n                (closeModal)=\"closeCalendarModal($event)\"\n                ></app-custom-calendar>\n                <!-- model used in calendar component -->\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\n                    [modalTitle]=\"calendarModalTitle\"\n                    [isModalOpen]=\"isCalendarModalOpen\"\n                    [modalSize]=\"calendarModalSize\"\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\n                    [modalFooter]=\"modalCalendarModalFooter\"\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\n                >\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                </app-custom-model>\n            </div>\n            <!-- Text -->\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n                        textBox: !qbItem.progressBar\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (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 === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [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 === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n            <!-- RS 06JAN25 -->\n           <!-- for rich text editor -->\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\n                <app-custom-rich-text \n                    [question]=\"ques\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [value]=\"ques.input || ''\"\n                    [error]=\"ques.error\"\n                    [placeholder]=\"ques.question\"\n                    (textValueChange)=\"childEventCapture($event, ques)\">\n                </app-custom-rich-text>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.type === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n            </div>\n \n            <!-- Table -->\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-table>\n            </div>\n \n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-table-appendix>\n            </div>\n             <!-- list -->\n             <!-- VD 20Aug24 used correct attribute -->\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [filterName]=\"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 === 'Dropdown' && ques?.options\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.options\"\n                    [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                    [selectedValue]=\"ques.selectedValue\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [question]=\"ques\"\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            <!-- // VD 02Aug24 custom-radio component -->\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-radio>\n            </div>\n \n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.type === '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 === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n                </app-custom-label>\n            </div>\n             <!-- // VD 02Aug24 image component -->\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n                <app-custom-image [question]=\"ques\">\n                </app-custom-image>\n            </div>\n            <!-- 08NOV23 - button type question added -->\n             <!-- Button -->\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"\n                [width]=\"'150px'\"\n                [buttonText]=\"ques?.question\"\n                [value]=\"ques?.question\"\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 === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>\n  <!-- 06-09-24 for calendar type-->\n<!-- <ng-template dynamicComponentHost></ng-template> -->", 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:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}\n"] }]
+            args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\r\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24  Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n    <div class=\"form-row\">\r\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n        <!-- RA09DEC24 Changed keys-->\r\n        <div\r\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n            <!-- Sub Question Label -->\r\n            <!-- HA 20DEC23 Label Style from salesforce -->\r\n            <!-- VD 09May24 is hide field change-->\r\n         <div *ngIf=\"!ques.isHidden\">\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n            </div>\r\n            <!-- VD 20JUN24 - help text changes-->\r\n            <!-- VD 01Aug24 - validation change-->\r\n            <!-- // VD 02Aug24 - label value style-->\r\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n                    <!-- RS 17JAN2025 -->\r\n                    <!-- Displays icons with tooltips help text -->\r\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" \r\n                        class=\"icon\" \r\n                        [matTooltip]=\"ques?.helpText\"\r\n                        matTooltipClass=\"white-tooltip\">i</div>\r\n        <!-- RS 17JAN2025 -->\r\n        <!--  Displays icons with tooltips for file requirements -->\r\n        <div \r\n            class=\"icon\" \r\n            *ngIf=\"ques.fieldsMeta\"\r\n            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\r\n            matTooltipClass=\"white-tooltip\"\r\n            style=\"margin-left: 4px;\"\r\n        >i</div>\r\n    </span>\r\n</div>\r\n            <!-- // VD 12Jun24 - readonly change-->\r\n            <!-- DateTime -->\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date-picker>\r\n            </div>\r\n \r\n             <!-- Date-->\r\n             <div *ngIf=\"ques.type === 'Date'\">\r\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date>\r\n            </div>\r\n \r\n             <!-- Time-->\r\n             <div *ngIf=\"ques.type === 'Time'\">\r\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-time>\r\n            </div>\r\n           <!-- calendar  -->\r\n            <div *ngIf=\"ques.type === 'Calendar'\">\r\n                <app-custom-calendar\r\n                [question]=\"ques\"\r\n                (eventSelected)=\"getCalendarEvent($event)\"\r\n                (dateSelected)=\"getCurrentCalendar($event)\"\r\n                (openModal)=\"openCalendarModal($event)\"\r\n                (closeModal)=\"closeCalendarModal($event)\"\r\n                ></app-custom-calendar>\r\n                <!-- model used in calendar component -->\r\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n                    [modalTitle]=\"calendarModalTitle\"\r\n                    [isModalOpen]=\"isCalendarModalOpen\"\r\n                    [modalSize]=\"calendarModalSize\"\r\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\r\n                    [modalFooter]=\"modalCalendarModalFooter\"\r\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\r\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n                >\r\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n                </app-custom-model>\r\n            </div>\r\n            <!-- Text -->\r\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n                        textBox: !qbItem.progressBar\r\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n                </app-custom-input>\r\n            </div>\r\n \r\n            <!-- for pick location -->\r\n            <!--   VD 21DEC23 - dependent field change -->\r\n            <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- HA10012024 Added Api key as input -->\r\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n                </app-pick-location>\r\n            </div>\r\n \r\n            <!-- for  text area   -->\r\n            <div *ngIf=\"ques.type === 'TextArea'\">\r\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n            </div>\r\n            <!-- RS 06JAN25 -->\r\n           <!-- for rich text editor -->\r\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n                <app-custom-rich-text \r\n                    [question]=\"ques\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [value]=\"ques.input || ''\"\r\n                    [error]=\"ques.error\"\r\n                    [placeholder]=\"ques.question\"\r\n                    (textValueChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-rich-text>\r\n            </div>\r\n\r\n            <!-- Email -->\r\n            <div *ngIf=\"ques.type === 'Email'\">\r\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n            </div>\r\n \r\n           <!-- Table -->\r\n            <!-- RS 03FEB2025 -->\r\n            <!-- Added handleTableSave to handle table data persistence, enabling saving table contents to local storage when save button is clicked -->\r\n           <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n            <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\"(saveTableData)=\"handleTableSave($event, ques)\">\r\n            </app-custom-table>\r\n        </div>\r\n \r\n              <!-- Table Appendix -->\r\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-table-appendix>\r\n            </div>\r\n             <!-- list -->\r\n             <!-- VD 20Aug24 used correct attribute -->\r\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\r\n                </lib-search-box>\r\n            </div>\r\n \r\n            <!-- Dropdown -->\r\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n            <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n                <app-custom-dropdown [options]=\"ques.options\"\r\n                    [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n                    [selectedValue]=\"ques.selectedValue\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [question]=\"ques\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-dropdown>\r\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n            </div>\r\n            <!-- // VD 02Aug24 custom-radio component -->\r\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-radio>\r\n            </div>\r\n \r\n            <!-- Attachment / Files -->\r\n            <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n                </app-dependent-table>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n                </app-custom-label>\r\n            </div>\r\n             <!-- // VD 02Aug24 image component -->\r\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n                <app-custom-image [question]=\"ques\">\r\n                </app-custom-image>\r\n            </div>\r\n            <!-- 08NOV23 - button type question added -->\r\n             <!-- Button -->\r\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n                <app-custom-button [height]=\"'50px'\"\r\n                [width]=\"'150px'\"\r\n                [buttonText]=\"ques?.question\"\r\n                [value]=\"ques?.question\"\r\n                (buttonValue)=\"childEventCapture($event, ques)\"\r\n                >\r\n                </app-custom-button>\r\n            </div>\r\n            <!-- HA 20DEC23  This is to load book type questions-->\r\n            <div *ngIf=\"ques.type === 'Book'\">\r\n                <!-- HA 09FEB24 Added ternary operator -->\r\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n         </div>\r\n        </div>\r\n    </div>\r\n  <!-- 06-09-24 for calendar type-->\r\n<!-- <ng-template dynamicComponentHost></ng-template> -->", 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:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}\n"] }]
         }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: I18nService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -9888,11 +10085,11 @@ class BookletComponent {
         this.handleCalendarEvent.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookletComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: StorageService }, { token: i1.ActivatedRoute }, { token: i6$1.DomSanitizer }, { token: ChangeService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner size=\"medium\" [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    <!-- RS 09DEC24 Changed keys-->\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.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText\" >\n                        {{ ques?.questionText }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n                [labelValue]=\"labelValue\"\n                [questionItem]=\"ques\"\n                [translatedQuestions]=\"readTransQuestions(qb.id)\"\n                [questions]=\"readQuestions(qb.id)\"\n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                ></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=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText\" >\n                        {{ qb?.questionText }}\n                        {{ qb?.title }}\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<!-- RS 09DEC24 Changed keys-->\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != '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: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- Booklet Handling-->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\r\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\r\n    <!-- RS 09DEC24 Changed keys-->\r\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\r\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\r\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\r\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\r\n            <div>\r\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\r\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText\" >\r\n                        {{ ques?.questionText }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\r\n                <!--VD 06Sep24 calendar changes-->\r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\r\n                [labelValue]=\"labelValue\"\r\n                [questionItem]=\"ques\"\r\n                [translatedQuestions]=\"readTransQuestions(qb.id)\"\r\n                [questions]=\"readQuestions(qb.id)\"\r\n                (handleDropDown)=\"getDropDown($event)\"\r\n                (handleCalendarDate)=\"getCalendarDate($event)\"\r\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\r\n                ></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\r\n    <ng-template #elseBlock>\r\n        <div class=\"questiondiv1\">\r\n            <div>\r\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText\" >\r\n                        {{ qb?.questionText }}\r\n                        {{ qb?.title }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<!-- RS 09DEC24 Changed keys-->\r\n<!-- Group Actions -->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [ngClass]=\"langDirection\">\r\n    <div *ngFor=\"let action of actions; let i = index\">\r\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\r\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\r\n            {{ action.name }}\r\n        </button>\r\n    </div>\r\n</div>\r\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: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-booklet', template: "<ngx-spinner size=\"medium\" [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    <!-- RS 09DEC24 Changed keys-->\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.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText\" >\n                        {{ ques?.questionText }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n                [labelValue]=\"labelValue\"\n                [questionItem]=\"ques\"\n                [translatedQuestions]=\"readTransQuestions(qb.id)\"\n                [questions]=\"readQuestions(qb.id)\"\n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                ></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=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText\" >\n                        {{ qb?.questionText }}\n                        {{ qb?.title }}\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<!-- RS 09DEC24 Changed keys-->\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != '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"] }]
+            args: [{ selector: 'lib-booklet', template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- Booklet Handling-->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\r\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\r\n    <!-- RS 09DEC24 Changed keys-->\r\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\r\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\r\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\r\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\r\n            <div>\r\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\r\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText\" >\r\n                        {{ ques?.questionText }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\r\n                <!--VD 06Sep24 calendar changes-->\r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\r\n                [labelValue]=\"labelValue\"\r\n                [questionItem]=\"ques\"\r\n                [translatedQuestions]=\"readTransQuestions(qb.id)\"\r\n                [questions]=\"readQuestions(qb.id)\"\r\n                (handleDropDown)=\"getDropDown($event)\"\r\n                (handleCalendarDate)=\"getCalendarDate($event)\"\r\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\r\n                ></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\r\n    <ng-template #elseBlock>\r\n        <div class=\"questiondiv1\">\r\n            <div>\r\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText\" >\r\n                        {{ qb?.questionText }}\r\n                        {{ qb?.title }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<!-- RS 09DEC24 Changed keys-->\r\n<!-- Group Actions -->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [ngClass]=\"langDirection\">\r\n    <div *ngFor=\"let action of actions; let i = index\">\r\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\r\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\r\n            {{ action.name }}\r\n        </button>\r\n    </div>\r\n</div>\r\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"] }]
         }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: StorageService }, { type: i1.ActivatedRoute }, { type: i6$1.DomSanitizer }, { type: ChangeService }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { bookletId: [{
                 type: Input
             }], serv: [{
@@ -9954,11 +10151,11 @@ class FileViewComponent {
         return this.SharedService.docIcon(ext);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileViewComponent, deps: [{ token: SharedService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileViewComponent, selector: "app-file-view", inputs: { documentData: "documentData", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\n    <div class=\"row\" style=\"text-align: left;\">\n      <div class=\"col-md-12\">\n          <!-- HA 19DEC23 For translation -->\n        <label class=\"she-label attachment\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n      </div>\n    </div>\n    <div class=\"row\" style=\"margin: 0;\">\n        <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of documentData;let i = index;\" style=\"margin-bottom: 10px;\">\n            <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                <div class=\"col-lg-3 document_image\">\n                    <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                </div>\n                <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                    {{file?.name}}\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"documentData?.length === 0\">\n      <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n  </div>\n  ", styles: [".document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px}.document_image{background:#48b7ff66;padding:10px}.document_name{padding:15px 5px}.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}\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: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileViewComponent, selector: "app-file-view", inputs: { documentData: "documentData", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\r\n    <div class=\"row\" style=\"text-align: left;\">\r\n      <div class=\"col-md-12\">\r\n          <!-- HA 19DEC23 For translation -->\r\n        <label class=\"she-label attachment\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\" style=\"margin: 0;\">\r\n        <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of documentData;let i = index;\" style=\"margin-bottom: 10px;\">\r\n            <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\r\n                <div class=\"col-lg-3 document_image\">\r\n                    <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\r\n                </div>\r\n                <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\r\n                    {{file?.name}}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"documentData?.length === 0\">\r\n      <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\r\n  </div>\r\n  </div>\r\n  ", styles: [".document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px}.document_image{background:#48b7ff66;padding:10px}.document_name{padding:15px 5px}.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}\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: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-file-view', template: "<div class=\"col-lg-12\">\n    <div class=\"row\" style=\"text-align: left;\">\n      <div class=\"col-md-12\">\n          <!-- HA 19DEC23 For translation -->\n        <label class=\"she-label attachment\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n      </div>\n    </div>\n    <div class=\"row\" style=\"margin: 0;\">\n        <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of documentData;let i = index;\" style=\"margin-bottom: 10px;\">\n            <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                <div class=\"col-lg-3 document_image\">\n                    <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                </div>\n                <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                    {{file?.name}}\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"documentData?.length === 0\">\n      <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n  </div>\n  ", styles: [".document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px}.document_image{background:#48b7ff66;padding:10px}.document_name{padding:15px 5px}.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}\n"] }]
+            args: [{ selector: 'app-file-view', template: "<div class=\"col-lg-12\">\r\n    <div class=\"row\" style=\"text-align: left;\">\r\n      <div class=\"col-md-12\">\r\n          <!-- HA 19DEC23 For translation -->\r\n        <label class=\"she-label attachment\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\" style=\"margin: 0;\">\r\n        <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of documentData;let i = index;\" style=\"margin-bottom: 10px;\">\r\n            <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\r\n                <div class=\"col-lg-3 document_image\">\r\n                    <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\r\n                </div>\r\n                <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\r\n                    {{file?.name}}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"documentData?.length === 0\">\r\n      <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\r\n  </div>\r\n  </div>\r\n  ", styles: [".document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px}.document_image{background:#48b7ff66;padding:10px}.document_name{padding:15px 5px}.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}\n"] }]
         }], ctorParameters: () => [{ type: SharedService }, { type: I18nService }], propDecorators: { documentData: [{
                 type: Input
             }], api: [{
@@ -10024,11 +10221,11 @@ class SummaryPageComponent {
         console.log('filteredQuestion', this.filteredQuestion);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SummaryPageComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SummaryPageComponent, selector: "lib-summary-page", inputs: { answerJson: "answerJson", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\n  <div class=\"panel-group panel-group-joined\" id=\"details\">\n    <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n          <h4 class=\"panel-title\">\n            <!-- HA 19DEC23 For Translation -->\n<!-- HA 20FEB24 PTW Details to Details -->\n<!-- RS 09DEC24 Changed keys-->\n            <a data-toggle=\"collapse\" data-parent=\"#details\" href=\"#collapse\" class=\"collapsed\">\n              {{'details' | i18n:i18nService.currentLanguage}}\n            </a>\n          </h4>\n        </div>\n      <div [id]=\"'collapse'\" class=\"collapse\">\n        <div class=\"panel-body\">\n            <div class=\"row\" *ngFor=\"let item of filteredQuestion;let i = index\">\n              <div class=\"col-lg-6\" *ngFor=\"let ques of item.questions\" >\n                  <label *ngIf=\"ques.type != 'File'\" >{{ques.question}}</label>\n                  <p *ngIf = \"ques.type != 'Dropdown' && ques.type != 'Table' && ques.type != 'File'\">{{ ques.input }}</p>\n                  <p *ngIf=\"ques.type == 'Dropdown'\">{{ ques.selectedValue }}</p>\n                  <p *ngIf=\"!ques.input\">N/A</p>\n                  <div *ngIf= \"ques.type == 'Table'\">\n                    <div *ngFor=\"let item of ques.input\" class=\"align-center\">\n                      <img *ngIf=\"item.value == 'yes' \" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n                      <p *ngIf=\"item.value == 'yes' \">{{ item.ppe }}</p>\n                    </div>\n                  </div>\n                  <div *ngIf = \"ques.type == 'File'\">\n                    <app-file-view [api]=\"api\" [documentData]=\"ques.input\"></app-file-view>\n                  </div>\n              </div>\n              <div *ngIf=\"i != filteredQuestion.length -1\" class=\"col-lg-12\">\n                <hr>\n              </div>\n            </div>\n      </div>\n    </div> \n  </div>\n</div>\n\n", styles: [".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-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}.align-center{display:flex}.align-center p{margin-left:8px}\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: FileViewComponent, selector: "app-file-view", inputs: ["documentData", "api"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SummaryPageComponent, selector: "lib-summary-page", inputs: { answerJson: "answerJson", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\r\n  <div class=\"panel-group panel-group-joined\" id=\"details\">\r\n    <div class=\"panel panel-default\">\r\n        <div class=\"panel-heading\">\r\n          <h4 class=\"panel-title\">\r\n            <!-- HA 19DEC23 For Translation -->\r\n<!-- HA 20FEB24 PTW Details to Details -->\r\n<!-- RS 09DEC24 Changed keys-->\r\n            <a data-toggle=\"collapse\" data-parent=\"#details\" href=\"#collapse\" class=\"collapsed\">\r\n              {{'details' | i18n:i18nService.currentLanguage}}\r\n            </a>\r\n          </h4>\r\n        </div>\r\n      <div [id]=\"'collapse'\" class=\"collapse\">\r\n        <div class=\"panel-body\">\r\n            <div class=\"row\" *ngFor=\"let item of filteredQuestion;let i = index\">\r\n              <div class=\"col-lg-6\" *ngFor=\"let ques of item.questions\" >\r\n                  <label *ngIf=\"ques.type != 'File'\" >{{ques.question}}</label>\r\n                  <p *ngIf = \"ques.type != 'Dropdown' && ques.type != 'Table' && ques.type != 'File'\">{{ ques.input }}</p>\r\n                  <p *ngIf=\"ques.type == 'Dropdown'\">{{ ques.selectedValue }}</p>\r\n                  <p *ngIf=\"!ques.input\">N/A</p>\r\n                  <div *ngIf= \"ques.type == 'Table'\">\r\n                    <div *ngFor=\"let item of ques.input\" class=\"align-center\">\r\n                      <img *ngIf=\"item.value == 'yes' \" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\r\n                      <p *ngIf=\"item.value == 'yes' \">{{ item.ppe }}</p>\r\n                    </div>\r\n                  </div>\r\n                  <div *ngIf = \"ques.type == 'File'\">\r\n                    <app-file-view [api]=\"api\" [documentData]=\"ques.input\"></app-file-view>\r\n                  </div>\r\n              </div>\r\n              <div *ngIf=\"i != filteredQuestion.length -1\" class=\"col-lg-12\">\r\n                <hr>\r\n              </div>\r\n            </div>\r\n      </div>\r\n    </div> \r\n  </div>\r\n</div>\r\n\r\n", styles: [".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-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}.align-center{display:flex}.align-center p{margin-left:8px}\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: FileViewComponent, selector: "app-file-view", inputs: ["documentData", "api"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SummaryPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-summary-page', template: "<div class=\"col-lg-12\">\n  <div class=\"panel-group panel-group-joined\" id=\"details\">\n    <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n          <h4 class=\"panel-title\">\n            <!-- HA 19DEC23 For Translation -->\n<!-- HA 20FEB24 PTW Details to Details -->\n<!-- RS 09DEC24 Changed keys-->\n            <a data-toggle=\"collapse\" data-parent=\"#details\" href=\"#collapse\" class=\"collapsed\">\n              {{'details' | i18n:i18nService.currentLanguage}}\n            </a>\n          </h4>\n        </div>\n      <div [id]=\"'collapse'\" class=\"collapse\">\n        <div class=\"panel-body\">\n            <div class=\"row\" *ngFor=\"let item of filteredQuestion;let i = index\">\n              <div class=\"col-lg-6\" *ngFor=\"let ques of item.questions\" >\n                  <label *ngIf=\"ques.type != 'File'\" >{{ques.question}}</label>\n                  <p *ngIf = \"ques.type != 'Dropdown' && ques.type != 'Table' && ques.type != 'File'\">{{ ques.input }}</p>\n                  <p *ngIf=\"ques.type == 'Dropdown'\">{{ ques.selectedValue }}</p>\n                  <p *ngIf=\"!ques.input\">N/A</p>\n                  <div *ngIf= \"ques.type == 'Table'\">\n                    <div *ngFor=\"let item of ques.input\" class=\"align-center\">\n                      <img *ngIf=\"item.value == 'yes' \" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n                      <p *ngIf=\"item.value == 'yes' \">{{ item.ppe }}</p>\n                    </div>\n                  </div>\n                  <div *ngIf = \"ques.type == 'File'\">\n                    <app-file-view [api]=\"api\" [documentData]=\"ques.input\"></app-file-view>\n                  </div>\n              </div>\n              <div *ngIf=\"i != filteredQuestion.length -1\" class=\"col-lg-12\">\n                <hr>\n              </div>\n            </div>\n      </div>\n    </div> \n  </div>\n</div>\n\n", styles: [".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-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}.align-center{display:flex}.align-center p{margin-left:8px}\n"] }]
+            args: [{ selector: 'lib-summary-page', template: "<div class=\"col-lg-12\">\r\n  <div class=\"panel-group panel-group-joined\" id=\"details\">\r\n    <div class=\"panel panel-default\">\r\n        <div class=\"panel-heading\">\r\n          <h4 class=\"panel-title\">\r\n            <!-- HA 19DEC23 For Translation -->\r\n<!-- HA 20FEB24 PTW Details to Details -->\r\n<!-- RS 09DEC24 Changed keys-->\r\n            <a data-toggle=\"collapse\" data-parent=\"#details\" href=\"#collapse\" class=\"collapsed\">\r\n              {{'details' | i18n:i18nService.currentLanguage}}\r\n            </a>\r\n          </h4>\r\n        </div>\r\n      <div [id]=\"'collapse'\" class=\"collapse\">\r\n        <div class=\"panel-body\">\r\n            <div class=\"row\" *ngFor=\"let item of filteredQuestion;let i = index\">\r\n              <div class=\"col-lg-6\" *ngFor=\"let ques of item.questions\" >\r\n                  <label *ngIf=\"ques.type != 'File'\" >{{ques.question}}</label>\r\n                  <p *ngIf = \"ques.type != 'Dropdown' && ques.type != 'Table' && ques.type != 'File'\">{{ ques.input }}</p>\r\n                  <p *ngIf=\"ques.type == 'Dropdown'\">{{ ques.selectedValue }}</p>\r\n                  <p *ngIf=\"!ques.input\">N/A</p>\r\n                  <div *ngIf= \"ques.type == 'Table'\">\r\n                    <div *ngFor=\"let item of ques.input\" class=\"align-center\">\r\n                      <img *ngIf=\"item.value == 'yes' \" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\r\n                      <p *ngIf=\"item.value == 'yes' \">{{ item.ppe }}</p>\r\n                    </div>\r\n                  </div>\r\n                  <div *ngIf = \"ques.type == 'File'\">\r\n                    <app-file-view [api]=\"api\" [documentData]=\"ques.input\"></app-file-view>\r\n                  </div>\r\n              </div>\r\n              <div *ngIf=\"i != filteredQuestion.length -1\" class=\"col-lg-12\">\r\n                <hr>\r\n              </div>\r\n            </div>\r\n      </div>\r\n    </div> \r\n  </div>\r\n</div>\r\n\r\n", styles: [".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-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}.align-center{display:flex}.align-center p{margin-left:8px}\n"] }]
         }], ctorParameters: () => [{ type: I18nService }], propDecorators: { answerJson: [{
                 type: Input
             }], api: [{
@@ -10084,28 +10281,28 @@ class I18nComponent {
         window.location.reload();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: I18nComponent, selector: "app-i18n", ngImport: i0, template: `
-   <a  *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
-
-            (click)="firstClick(lang.lang)">
-            <span class="mr-3">
-                {{lang.lang}}
-            </span>
-          </a>
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: I18nComponent, selector: "app-i18n", ngImport: i0, template: `
+   <a  *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
+
+            (click)="firstClick(lang.lang)">
+            <span class="mr-3">
+                {{lang.lang}}
+            </span>
+          </a>
+
   `, isInline: true, styles: [".selected-language{color:green!important;font-weight:700;font-size:24px!important}\n", ".not-selected-language{color:#555;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-i18n', template: `
-   <a  *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
-
-            (click)="firstClick(lang.lang)">
-            <span class="mr-3">
-                {{lang.lang}}
-            </span>
-          </a>
-
+            args: [{ selector: 'app-i18n', template: `
+   <a  *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
+
+            (click)="firstClick(lang.lang)">
+            <span class="mr-3">
+                {{lang.lang}}
+            </span>
+          </a>
+
   `, styles: [".selected-language{color:green!important;font-weight:700;font-size:24px!important}\n", ".not-selected-language{color:#555;font-weight:700}\n"] }]
         }], ctorParameters: () => [{ type: I18nService }] });
 
@@ -10220,11 +10417,11 @@ class LoaderComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderComponent, deps: [{ token: SharedService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"loader\" *ngIf=\"isLoading\">\n    <div class=\"spinner\"></div>\n  </div>\n  ", styles: [".loader{position:fixed;inset:0;background:#fffc;display:flex;justify-content:center;align-items:center;z-index:9999}.spinner{border:4px solid rgba(0,0,0,.1);border-left-color:#000;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoaderComponent, selector: "app-loader", ngImport: i0, template: "<div class=\"loader\" *ngIf=\"isLoading\">\r\n    <div class=\"spinner\"></div>\r\n  </div>\r\n  ", styles: [".loader{position:fixed;inset:0;background:#fffc;display:flex;justify-content:center;align-items:center;z-index:9999}.spinner{border:4px solid rgba(0,0,0,.1);border-left-color:#000;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader', template: "<div class=\"loader\" *ngIf=\"isLoading\">\n    <div class=\"spinner\"></div>\n  </div>\n  ", styles: [".loader{position:fixed;inset:0;background:#fffc;display:flex;justify-content:center;align-items:center;z-index:9999}.spinner{border:4px solid rgba(0,0,0,.1);border-left-color:#000;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'app-loader', template: "<div class=\"loader\" *ngIf=\"isLoading\">\r\n    <div class=\"spinner\"></div>\r\n  </div>\r\n  ", styles: [".loader{position:fixed;inset:0;background:#fffc;display:flex;justify-content:center;align-items:center;z-index:9999}.spinner{border:4px solid rgba(0,0,0,.1);border-left-color:#000;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [{ type: SharedService }] });
 
 // VD 06-09-24 directive file to call component dynamically 
@@ -10525,11 +10722,11 @@ class ElementComponent {
         return styles;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n         <!-- AP-29JAN25 remove empty classes -->\n          <!-- TextBox -->\n          <div *ngIf=\"field.type === 'Text'\"  style=\"padding: 10px;\n          background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n           <div class=\"flex\" style=\"display: flex;\">\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n            <div style=\"width: 97%;\">\n            <div class=\"flex lab-conatiner\">\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div>\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n          </div>\n        </div>\n          </div>\n\n          <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\">\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n    </div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\n          <div>\n              <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1    \n          </div>\n        \n      </div>\n    </div>\n  </div>\n</div>\n  <!-- AP-29JAN25 drop-down design check -->\n   <!-- Dropdown Field -->\n   <div *ngIf=\"field.type === 'Dropdown'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n    <div class=\"flex\" style=\"display: flex;\">\n      <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n      <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n        </div>\n    <select id=\"options\" class=\"dropdown\">\n        <option value=\"option1\">Option 1</option>\n        <option value=\"option2\">Option 2</option>\n        <option value=\"option3\">Option 3</option>\n    </select>\n    </div>\n    </div>\n</div>\n\n         <!-- Calendar -->\n<div *ngIf=\"['Calendar'].includes(field.type)\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n    </div>\n  </div>\n</div>\n\n         <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n    </div>\n  </div>\n</div>\n\n\n          <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n    </div>\n  </div>\n</div>\n          <!-- List -->\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <label>{{ field.questionText }}</label>\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div>\n\n         <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n        </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <textarea\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\n        [style.height.px]=\"field.size || 100\"\n        [style.width.%]=\"100\"\n        [readonly]=\"field.readOnly\"\n        [class.hidden]=\"field.isHide\"\n        [(ngModel)]=\"field.text\">\n      </textarea>\n    </div>\n  </div>\n</div>\n\n<!-- AP-29JAN25 radio-button design check -->\n<!-- Radio -->\n          <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n            <div class=\"flex\" style=\"display: flex;\">\n              <div class=\"all-dots\">\n                <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n              </div>\n              <div style=\"width: 97%;\">\n                <div class=\"flex lab-conatiner\">\n                  <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n                </div>\n                <div class=\"radio-options\" style=\"display: flex;\">\n                  <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\n                    <label>\n                      <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\n                      <span>{{ option }}</span>\n                    </label>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n          \n\n          <!-- AP-29JAN25 Image design change -->\n          <!-- Image -->\n<div *ngIf=\"field.type === 'Image'\"  style=\"padding: 10px; background-color: whitesmoke;\" \n     (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n    </div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-container\">\n        <label [class.required]=\"field.required\">\n          {{ field.questionText ? field.questionText : 'Upload Image' }}\n        </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\n    </div>\n  </div>\n</div>\n\n          <!-- Button -->\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div>\n\n          <!-- File -->\n           <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" \n(click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n<div class=\"flex\" style=\"display: flex;\">\n<div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n</div>\n<div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n   <label [class.required]=\"field.required\">\n     {{ field.questionText ? field.questionText : 'Upload File' }}\n   </label>\n   <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" style=\"background-color: #ffff;\"/>\n</div>\n</div>\n</div>\n\n<!-- Tables -->\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n  <label>{{ field.questionText }}</label>\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n  </table>\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div>\n\n\n          <!-- Book -->\n<div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <!-- No input box here -->\n    </div>\n  </div>\n</div>\n\n          <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <!-- No input box here -->\n    </div>\n  </div>\n</div>\n</ng-container>\n      </div>\n      <!-- Form Builder Section All Elements -->\n      <div class=\"form-builder\">\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\n          <div class=\"hover-label\">Calendar</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\n          <img src=\"../assets/icons/CheckBox.svg\">\n          <div class=\"hover-label\">Check Box</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Email')\">\n          <img src=\"../assets/icons/Email.svg\">\n          <div class=\"hover-label\">Email</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('File')\">\n          <img src=\"../assets/icons/File.svg\">\n          <div class=\"hover-label\">File</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('List')\">\n          <img src=\"../assets/icons/List.svg\">\n          <div class=\"hover-label\">List</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Tables')\">\n          <img src=\"../assets/icons/Table.svg\">\n          <div class=\"hover-label\">Tables</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Text')\">\n          <img src=\"../assets/icons/Text.svg\">\n          <div class=\"hover-label\">Text Box</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\n          <img src=\"../assets/icons/TextArea.svg\">\n          <div class=\"hover-label\">Text Area</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\n          <img src=\"../assets/icons/Number.svg\">\n          <div class=\"hover-label\">Numbers</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\n          <img src=\"../assets/icons/Drop.svg\">\n          <div class=\"hover-label\">Dropdown</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Image')\">\n          <img src=\"../assets/Image.svg\">\n          <div class=\"hover-label\">Image</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Radio')\">\n          <img src=\"../assets/icons/Radio.svg\">\n          <div class=\"hover-label\">Radio</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Label')\">\n          <img src=\"../assets/icons/Label.svg\">\n          <div class=\"hover-label\">Label</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Book')\">\n          <img src=\"../assets/icons/Book.svg\">\n          <div class=\"hover-label\">Book</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Button')\">\n          <img src=\"../assets/icons/Button.svg\">\n          <div class=\"hover-label\">Button</div>\n        </div>\n      </div>\n\n  </div>\n\n\n\n\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}\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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n         <!-- AP-29JAN25 remove empty classes -->\r\n          <!-- TextBox -->\r\n          <div *ngIf=\"field.type === 'Text'\"  style=\"padding: 10px;\r\n          background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n           <div class=\"flex\" style=\"display: flex;\">\r\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n            <div style=\"width: 97%;\">\r\n            <div class=\"flex lab-conatiner\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n          </div>\r\n        </div>\r\n          </div>\r\n\r\n          <!-- CheckBox -->\r\n<div *ngIf=\"field.type === 'CheckBox'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\r\n          <div>\r\n              <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1    \r\n          </div>\r\n        \r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n  <!-- AP-29JAN25 drop-down design check -->\r\n   <!-- Dropdown Field -->\r\n   <div *ngIf=\"field.type === 'Dropdown'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n    <div class=\"flex\" style=\"display: flex;\">\r\n      <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n      <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n        </div>\r\n    <select id=\"options\" class=\"dropdown\">\r\n        <option value=\"option1\">Option 1</option>\r\n        <option value=\"option2\">Option 2</option>\r\n        <option value=\"option3\">Option 3</option>\r\n    </select>\r\n    </div>\r\n    </div>\r\n</div>\r\n\r\n         <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n          <!-- List -->\r\n    <!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div> -->\r\n\r\n         <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\"  style=\"padding: 10px; background-color: whitesmoke; height:150px; width:100%\" (click)=\"selectElement(i)\"  cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- AP-29JAN25 radio-button design check -->\r\n<!-- Radio -->\r\n          <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n            <div class=\"flex\" style=\"display: flex;\">\r\n              <div class=\"all-dots\">\r\n                <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n              </div>\r\n              <div style=\"width: 97%;\">\r\n                <div class=\"flex lab-conatiner\">\r\n                  <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n                </div>\r\n                <div class=\"radio-options\" style=\"display: flex;\">\r\n                  <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\r\n                    <label>\r\n                      <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\r\n                      <span>{{ option }}</span>\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>   \r\n\r\n          <!-- AP-29JAN25 Image design change -->\r\n          <!-- Image -->\r\n<div *ngIf=\"field.type === 'Image'\"  style=\"padding: 10px; background-color: whitesmoke;\" \r\n     (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-container\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Upload Image' }}\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Button -->\r\n    <!-- <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div> -->\r\n\r\n          <!-- File -->\r\n           <!-- AP-29JAN25 file design change -->\r\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\"  (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n<div class=\"flex\" style=\"display: flex;\">\r\n<div class=\"all-dots\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n</div>\r\n<div style=\"width: 97%;\">\r\n <div class=\"flex lab-container\">\r\n   <label [class.required]=\"field.required\">\r\n     {{ field.questionText ? field.questionText : 'Upload File' }}\r\n   </label>\r\n   <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"file\" style=\"background-color: #ffff;\"/>\r\n</div>\r\n</div>\r\n</div>\r\n\r\n<!-- Tables -->\r\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div> -->\r\n\r\n\r\n          <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}input{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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<div class=\"center-frame\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n         <!-- AP-29JAN25 remove empty classes -->\n          <!-- TextBox -->\n          <div *ngIf=\"field.type === 'Text'\"  style=\"padding: 10px;\n          background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n           <div class=\"flex\" style=\"display: flex;\">\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n            <div style=\"width: 97%;\">\n            <div class=\"flex lab-conatiner\">\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div>\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n          </div>\n        </div>\n          </div>\n\n          <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\">\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n    </div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\n          <div>\n              <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1    \n          </div>\n        \n      </div>\n    </div>\n  </div>\n</div>\n  <!-- AP-29JAN25 drop-down design check -->\n   <!-- Dropdown Field -->\n   <div *ngIf=\"field.type === 'Dropdown'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n    <div class=\"flex\" style=\"display: flex;\">\n      <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n      <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n        </div>\n    <select id=\"options\" class=\"dropdown\">\n        <option value=\"option1\">Option 1</option>\n        <option value=\"option2\">Option 2</option>\n        <option value=\"option3\">Option 3</option>\n    </select>\n    </div>\n    </div>\n</div>\n\n         <!-- Calendar -->\n<div *ngIf=\"['Calendar'].includes(field.type)\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n    </div>\n  </div>\n</div>\n\n         <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n    </div>\n  </div>\n</div>\n\n\n          <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n    </div>\n  </div>\n</div>\n          <!-- List -->\n    <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <label>{{ field.questionText }}</label>\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div>\n\n         <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n        </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <textarea\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\n        [style.height.px]=\"field.size || 100\"\n        [style.width.%]=\"100\"\n        [readonly]=\"field.readOnly\"\n        [class.hidden]=\"field.isHide\"\n        [(ngModel)]=\"field.text\">\n      </textarea>\n    </div>\n  </div>\n</div>\n\n<!-- AP-29JAN25 radio-button design check -->\n<!-- Radio -->\n          <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n            <div class=\"flex\" style=\"display: flex;\">\n              <div class=\"all-dots\">\n                <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n              </div>\n              <div style=\"width: 97%;\">\n                <div class=\"flex lab-conatiner\">\n                  <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n                </div>\n                <div class=\"radio-options\" style=\"display: flex;\">\n                  <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\n                    <label>\n                      <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\n                      <span>{{ option }}</span>\n                    </label>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n          \n\n          <!-- AP-29JAN25 Image design change -->\n          <!-- Image -->\n<div *ngIf=\"field.type === 'Image'\"  style=\"padding: 10px; background-color: whitesmoke;\" \n     (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n    </div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-container\">\n        <label [class.required]=\"field.required\">\n          {{ field.questionText ? field.questionText : 'Upload Image' }}\n        </label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\n    </div>\n  </div>\n</div>\n\n          <!-- Button -->\n    <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n            <button>{{ field.questionText }}</button>\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n          </div>\n\n          <!-- File -->\n           <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" \n(click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n<div class=\"flex\" style=\"display: flex;\">\n<div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n</div>\n<div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n   <label [class.required]=\"field.required\">\n     {{ field.questionText ? field.questionText : 'Upload File' }}\n   </label>\n   <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" style=\"background-color: #ffff;\"/>\n</div>\n</div>\n</div>\n\n<!-- Tables -->\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n  <label>{{ field.questionText }}</label>\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n  </table>\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div>\n\n\n          <!-- Book -->\n<div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <!-- No input box here -->\n    </div>\n  </div>\n</div>\n\n          <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n  <div class=\"flex\" style=\"display: flex;\">\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n    <div style=\"width: 97%;\">\n      <div class=\"flex lab-conatiner\">\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n      </div>\n      <!-- No input box here -->\n    </div>\n  </div>\n</div>\n</ng-container>\n      </div>\n      <!-- Form Builder Section All Elements -->\n      <div class=\"form-builder\">\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\n          <div class=\"hover-label\">Calendar</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\n          <img src=\"../assets/icons/CheckBox.svg\">\n          <div class=\"hover-label\">Check Box</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Email')\">\n          <img src=\"../assets/icons/Email.svg\">\n          <div class=\"hover-label\">Email</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('File')\">\n          <img src=\"../assets/icons/File.svg\">\n          <div class=\"hover-label\">File</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('List')\">\n          <img src=\"../assets/icons/List.svg\">\n          <div class=\"hover-label\">List</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Tables')\">\n          <img src=\"../assets/icons/Table.svg\">\n          <div class=\"hover-label\">Tables</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Text')\">\n          <img src=\"../assets/icons/Text.svg\">\n          <div class=\"hover-label\">Text Box</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\n          <img src=\"../assets/icons/TextArea.svg\">\n          <div class=\"hover-label\">Text Area</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\n          <img src=\"../assets/icons/Number.svg\">\n          <div class=\"hover-label\">Numbers</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\n          <img src=\"../assets/icons/Drop.svg\">\n          <div class=\"hover-label\">Dropdown</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Image')\">\n          <img src=\"../assets/Image.svg\">\n          <div class=\"hover-label\">Image</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Radio')\">\n          <img src=\"../assets/icons/Radio.svg\">\n          <div class=\"hover-label\">Radio</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Label')\">\n          <img src=\"../assets/icons/Label.svg\">\n          <div class=\"hover-label\">Label</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Book')\">\n          <img src=\"../assets/icons/Book.svg\">\n          <div class=\"hover-label\">Book</div>\n        </div>\n\n        <div class=\"element\" (click)=\"addElement('Button')\">\n          <img src=\"../assets/icons/Button.svg\">\n          <div class=\"hover-label\">Button</div>\n        </div>\n      </div>\n\n  </div>\n\n\n\n\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}\n"] }]
+            args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n      <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n        <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n         <!-- AP-29JAN25 remove empty classes -->\r\n          <!-- TextBox -->\r\n          <div *ngIf=\"field.type === 'Text'\"  style=\"padding: 10px;\r\n          background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n           <div class=\"flex\" style=\"display: flex;\">\r\n            <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n            <div style=\"width: 97%;\">\r\n            <div class=\"flex lab-conatiner\">\r\n            <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div>\r\n            <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n          </div>\r\n        </div>\r\n          </div>\r\n\r\n          <!-- CheckBox -->\r\n<div *ngIf=\"field.type === 'CheckBox'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\">\r\n      <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\r\n          <div>\r\n              <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1    \r\n          </div>\r\n        \r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n  <!-- AP-29JAN25 drop-down design check -->\r\n   <!-- Dropdown Field -->\r\n   <div *ngIf=\"field.type === 'Dropdown'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n    <div class=\"flex\" style=\"display: flex;\">\r\n      <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n      <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n        </div>\r\n    <select id=\"options\" class=\"dropdown\">\r\n        <option value=\"option1\">Option 1</option>\r\n        <option value=\"option2\">Option 2</option>\r\n        <option value=\"option3\">Option 3</option>\r\n    </select>\r\n    </div>\r\n    </div>\r\n</div>\r\n\r\n         <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n         <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n          <!-- List -->\r\n    <!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <label>{{ field.questionText }}</label>\r\n      <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div> -->\r\n\r\n         <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\"  style=\"padding: 10px; background-color: whitesmoke; height:150px; width:100%\" (click)=\"selectElement(i)\"  cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n          <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <textarea\r\n        [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n        [style.height.px]=\"field.size || 100\"\r\n        [style.width.%]=\"100\"\r\n        [readonly]=\"field.readOnly\"\r\n        [class.hidden]=\"field.isHide\"\r\n        [(ngModel)]=\"field.text\">\r\n      </textarea>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- AP-29JAN25 radio-button design check -->\r\n<!-- Radio -->\r\n          <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n            <div class=\"flex\" style=\"display: flex;\">\r\n              <div class=\"all-dots\">\r\n                <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n              </div>\r\n              <div style=\"width: 97%;\">\r\n                <div class=\"flex lab-conatiner\">\r\n                  <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n                </div>\r\n                <div class=\"radio-options\" style=\"display: flex;\">\r\n                  <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\r\n                    <label>\r\n                      <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\r\n                      <span>{{ option }}</span>\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>   \r\n\r\n          <!-- AP-29JAN25 Image design change -->\r\n          <!-- Image -->\r\n<div *ngIf=\"field.type === 'Image'\"  style=\"padding: 10px; background-color: whitesmoke;\" \r\n     (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n    </div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-container\">\r\n        <label [class.required]=\"field.required\">\r\n          {{ field.questionText ? field.questionText : 'Upload Image' }}\r\n        </label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Button -->\r\n    <!-- <div *ngIf=\"field.type === 'Button'\"  class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n            <button>{{ field.questionText }}</button>\r\n      <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n          </div> -->\r\n\r\n          <!-- File -->\r\n           <!-- AP-29JAN25 file design change -->\r\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\"  (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n<div class=\"flex\" style=\"display: flex;\">\r\n<div class=\"all-dots\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n</div>\r\n<div style=\"width: 97%;\">\r\n <div class=\"flex lab-container\">\r\n   <label [class.required]=\"field.required\">\r\n     {{ field.questionText ? field.questionText : 'Upload File' }}\r\n   </label>\r\n   <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"file\" style=\"background-color: #ffff;\"/>\r\n</div>\r\n</div>\r\n</div>\r\n\r\n<!-- Tables -->\r\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n  <label>{{ field.questionText }}</label>\r\n  <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n    <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n    <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n  </table>\r\n  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div> -->\r\n\r\n\r\n          <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n          <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\"  style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n  <div class=\"flex\" style=\"display: flex;\">\r\n    <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n    <div style=\"width: 97%;\">\r\n      <div class=\"flex lab-conatiner\">\r\n        <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n        <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n      </div>\r\n      <!-- No input box here -->\r\n    </div>\r\n  </div>\r\n</div>\r\n</ng-container>\r\n      </div>\r\n      <!-- Form Builder Section All Elements -->\r\n      <div class=\"form-builder\">\r\n        <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n          <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n          <div class=\"hover-label\">Calendar</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n          <img src=\"../assets/icons/CheckBox.svg\">\r\n          <div class=\"hover-label\">Check Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Email')\">\r\n          <img src=\"../assets/icons/Email.svg\">\r\n          <div class=\"hover-label\">Email</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('File')\">\r\n          <img src=\"../assets/icons/File.svg\">\r\n          <div class=\"hover-label\">File</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('List')\">\r\n          <img src=\"../assets/icons/List.svg\">\r\n          <div class=\"hover-label\">List</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Tables')\">\r\n          <img src=\"../assets/icons/Table.svg\">\r\n          <div class=\"hover-label\">Tables</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Text')\">\r\n          <img src=\"../assets/icons/Text.svg\">\r\n          <div class=\"hover-label\">Text Box</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n          <img src=\"../assets/icons/TextArea.svg\">\r\n          <div class=\"hover-label\">Text Area</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n          <img src=\"../assets/icons/Number.svg\">\r\n          <div class=\"hover-label\">Numbers</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n          <img src=\"../assets/icons/Drop.svg\">\r\n          <div class=\"hover-label\">Dropdown</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Image')\">\r\n          <img src=\"../assets/Image.svg\">\r\n          <div class=\"hover-label\">Image</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Radio')\">\r\n          <img src=\"../assets/icons/Radio.svg\">\r\n          <div class=\"hover-label\">Radio</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Label')\">\r\n          <img src=\"../assets/icons/Label.svg\">\r\n          <div class=\"hover-label\">Label</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Book')\">\r\n          <img src=\"../assets/icons/Book.svg\">\r\n          <div class=\"hover-label\">Book</div>\r\n        </div>\r\n\r\n        <div class=\"element\" (click)=\"addElement('Button')\">\r\n          <img src=\"../assets/icons/Button.svg\">\r\n          <div class=\"hover-label\">Button</div>\r\n        </div>\r\n      </div>\r\n\r\n  </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}input{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
                 type: Output
             }], formContainer: [{
@@ -10985,11 +11182,11 @@ class PropertiesComponent {
         this.formButtonHandler.emit(this.formBuilderService.downloadElement());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1$1.HttpClient }, { token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n  <div class=\"properties\">\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Element Properties</h1>\n  <div class=\"menu-container\">\n    <div class=\"menu-item\" (click)=\"download()\">\n      <span >Download</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Start</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Path</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Clone</span>\n    </div>\n  </div>\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n  <!-- Element Properties -->\n  <details class=\"first-properties\" open>\n    <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"flex-items-center\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <div class=\"label-properties\">\n            <!-- Text Input -->\n            <input *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\"\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\n            [class.read-only]=\"selectedElement.readOnly\"\n            [readonly]=\"selectedElement.readOnly\"\n            class=\"text-sm1 \"\n          />\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\n              {{ selectedElement.helpText }}\n            </div>\n\n\n         <!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\n    class=\"font-selection1\"\n    [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n      {{ option }}\n    </option>\n  </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\n class=\"file \"\n[value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n{{ option.label }}\n</option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\n    class=\"font-weight\"\n    [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n      {{ option.label }}\n    </option>\n  </select>\n</div>\n\n          \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n  <span class=\"toggle-label\">Read Only</span>\n  <label class=\"switch\">\n    <input  type=\"checkbox\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n\n<div class=\"toggle-item2\">\n  <span class=\"toggle-label\">Is Hide</span>\n  <label class=\"switch\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"selectedElement?.isHide\"\n      (change)=\"onToggleChange('isHide', $event)\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n</div>\n\n            <!-- Text Align Buttons -->\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n              <button\n                *ngFor=\"let option of prop.options\"\n                (click)=\"onAlignSelect(option.value)\"\n                [class.active]=\"selectedElement?.textAlign === option.value\"\n                class=\"align-btn\"\n                [title]=\"option.value\"\n              >\n                <img\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n                  [alt]=\"option.value\"\n                  class=\"icon-size\"\n                />\n              </button>\n            </div>\n\n\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\n              <label>{{ prop.label }}</label>\n              <input\n                type=\"number\"\n                [value]=\"selectedElement[prop.key]\"\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\n                class=\"size-input\"\n              />\n              <span class=\"size-unit\">{{ prop.unit }}</span>\n            </div>\n\n\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n              <button\n                *ngFor=\"let option of prop.options\"\n                (click)=\"onStyleSelect(option.value)\"\n                [class.active]=\"isStyleActive(option.value)\"\n                class=\"style-btn\"\n                [title]=\"option.value\"\n              >\n                <img\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n                  [alt]=\"option.value\"\n                  class=\"icon-size\"\n                />\n              </button>\n            </div>\n\n<!-- Field Size Controls -->\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input\n      type=\"number\"\n      [value]=\"selectedElement?.width\"\n      (input)=\"updateProperty('width', $event.target.value)\"\n      class=\"size-input\"\n\n    />\n\n  </div>\n  </div>\n</div>\n</div>\n        </div>\n      </ng-container>\n    </div>\n  </details>\n\n  <!-- Field Elements Properties -->\n<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n      <div class=\"flex-items-center \">\n        <label class=\"text-sm\">{{ prop.label }}</label>\n        <div class=\"input-box-field\">\n          <!-- Input Box -->\n          <input\n            *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            class=\"field-input\"\n          />\n          <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n\n\n      <div class=\"sizes\">\n          <div class=\"flex-gap\">\n    <div class=\"flex-items\">\n      <input\n      type=\"radio\"\n      [checked]=\"selectedElement.required\"\n      (change)=\"onRequiredChange(true)\"\n      name=\"required\"\n      class=\"radio-input\"\n    />\n      <label\n        class=\"text-label\"\n      >\n        Required\n      </label>\n    </div>\n    <div class=\"flex-items\">\n      <input\n      type=\"radio\"\n      [checked]=\"!selectedElement.required\"\n      (change)=\"onRequiredChange(false)\"\n      name=\"required\"\n      class=\"radio-input\"\n    />\n      <label\n        class=\"text-sm text-gray-400\"\n      >\n        Not Required\n      </label>\n    </div>\n  </div>\n</div>\n</div>\n <!-- Chk Options Group -->\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\n  <div\n    *ngFor=\"let option of prop.options; let i = index\"\n    class=\"option-items\"\n  >\n    <!-- Option Input -->\n    <input\n      type=\"text\"\n      [(ngModel)]=\"prop.options[i].label\"\n      placeholder=\"Option {{ i + 1 }}\"\n      class=\"options\"\n    />\n    <input\n      type=\"text\"\n      [(ngModel)]=\"prop.options[i].value\"\n      placeholder=\"Value\"\n      class=\"values\"\n    />\n    <!-- Remove Button -->\n    <div class=\"remove\">\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\n  </div>\n  <!-- Add Button -->\n  <button\n    type=\"button\"\n    class=\"add-btn\"\n    (click)=\"addOption(prop.options)\"\n  >\n  <div class=\"add-varient\">\n    <span class=\"text-lg\">+</span>\n    <span>Add Variants</span></div>\n  </button>\n</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"design-footer\">\n    <button class=\"btn\">Cancel</button>\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n  </div>\n</details>\n</div>\n</div>\n", styles: [".all-properties{padding:0;background-color:#f8fafc;position:relative;max-height:639px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:100px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\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.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.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n  <div class=\"properties\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n  <h1 class=\"header-title\">Element Properties</h1>\r\n  <div class=\"menu-container\">\r\n    <div class=\"menu-item\" (click)=\"download()\">\r\n      <span >Download</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Start</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Path</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Clone</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n  <!-- Element Properties -->\r\n  <details class=\"first-properties\" open>\r\n    <summary class=\"text-sm \">Elements Properties</summary>\r\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n        <div class=\"flex-items-center\">\r\n          <label class=\"text-sm\">{{ prop.label }}</label>\r\n          <div class=\"label-properties\">\r\n            <!-- Text Input -->\r\n            <input *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            [value]=\"selectedElement[prop.key]\"\r\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n            [class.read-only]=\"selectedElement.readOnly\"\r\n            [readonly]=\"selectedElement.readOnly\"\r\n            class=\"text-sm1 \"\r\n          />\r\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n              {{ selectedElement.helpText }}\r\n            </div>\r\n\r\n\r\n         <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n    class=\"font-selection1\"\r\n    [value]=\"selectedElement?.font\"\r\n    (change)=\"updateProperty('font', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n      {{ option }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n    class=\"font-weight\"\r\n    [value]=\"selectedElement?.fontWeight\"\r\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n          \r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n  <span class=\"toggle-label\">Read Only</span>\r\n  <label class=\"switch\">\r\n    <input  type=\"checkbox\"/>\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n  <span class=\"toggle-label\">Is Hide</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.isHide\"\r\n      (change)=\"onToggleChange('isHide', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n</div>\r\n\r\n            <!-- Text Align Buttons -->\r\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onAlignSelect(option.value)\"\r\n                [class.active]=\"selectedElement?.textAlign === option.value\"\r\n                class=\"align-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n              <label>{{ prop.label }}</label>\r\n              <input\r\n                type=\"number\"\r\n                [value]=\"selectedElement[prop.key]\"\r\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                class=\"size-input\"\r\n              />\r\n              <span class=\"size-unit\">{{ prop.unit }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onStyleSelect(option.value)\"\r\n                [class.active]=\"isStyleActive(option.value)\"\r\n                class=\"style-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n  <div class=\"size-group\">\r\n    <label  class=\"size-label\">Width</label>\r\n    <div class=\"value-container\">\r\n    <input\r\n      type=\"number\"\r\n      [value]=\"selectedElement?.width\"\r\n      (input)=\"updateProperty('width', $event.target.value)\"\r\n      class=\"size-input\"\r\n\r\n    />\r\n\r\n  </div>\r\n  </div>\r\n</div>\r\n</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </details>\r\n\r\n  <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n      <div class=\"flex-items-center \">\r\n        <label class=\"text-sm\">{{ prop.label }}</label>\r\n        <div class=\"input-box-field\">\r\n          <!-- Input Box -->\r\n          <input\r\n            *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            class=\"field-input\"\r\n          />\r\n          <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n      <div class=\"sizes\">\r\n          <div class=\"flex-gap\">\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"selectedElement.required\"\r\n      (change)=\"onRequiredChange(true)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-label\"\r\n      >\r\n        Required\r\n      </label>\r\n    </div>\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"!selectedElement.required\"\r\n      (change)=\"onRequiredChange(false)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-sm text-gray-400\"\r\n      >\r\n        Not Required\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n  <div\r\n    *ngFor=\"let option of prop.options; let i = index\"\r\n    class=\"option-items\"\r\n  >\r\n    <!-- Option Input -->\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].label\"\r\n      placeholder=\"Option {{ i + 1 }}\"\r\n      class=\"options\"\r\n    />\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].value\"\r\n      placeholder=\"Value\"\r\n      class=\"values\"\r\n    />\r\n    <!-- Remove Button -->\r\n    <div class=\"remove\">\r\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n  </div>\r\n  <!-- Add Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"add-btn\"\r\n    (click)=\"addOption(prop.options)\"\r\n  >\r\n  <div class=\"add-varient\">\r\n    <span class=\"text-lg\">+</span>\r\n    <span>Add Variants</span></div>\r\n  </button>\r\n</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"design-footer\">\r\n    <button class=\"btn\">Cancel</button>\r\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\r\n  </div>\r\n</details>\r\n</div>\r\n</div>\r\n", styles: [".all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\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.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.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: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n  <div class=\"properties\">\n<!-- Design Header Section -->\n<div class=\"design-header\">\n  <h1 class=\"header-title\">Element Properties</h1>\n  <div class=\"menu-container\">\n    <div class=\"menu-item\" (click)=\"download()\">\n      <span >Download</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Start</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Path</span>\n    </div>\n    <div class=\"menu-item\">\n      <span>Clone</span>\n    </div>\n  </div>\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\n      {{ errorMessage }}\n    </div>\n  <!-- Element Properties -->\n  <details class=\"first-properties\" open>\n    <summary class=\"text-sm \">Elements Properties</summary>\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"flex-items-center\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <div class=\"label-properties\">\n            <!-- Text Input -->\n            <input *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\"\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\n            [class.read-only]=\"selectedElement.readOnly\"\n            [readonly]=\"selectedElement.readOnly\"\n            class=\"text-sm1 \"\n          />\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\n              {{ selectedElement.helpText }}\n            </div>\n\n\n         <!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\n    class=\"font-selection1\"\n    [value]=\"selectedElement?.font\"\n    (change)=\"updateProperty('font', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n      {{ option }}\n    </option>\n  </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\n class=\"file \"\n[value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n{{ option.label }}\n</option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n  <!-- <label>{{ prop.label }}</label> -->\n  <select\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\n    class=\"font-weight\"\n    [value]=\"selectedElement?.fontWeight\"\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n      {{ option.label }}\n    </option>\n  </select>\n</div>\n\n          \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n  <span class=\"toggle-label\">Read Only</span>\n  <label class=\"switch\">\n    <input  type=\"checkbox\"/>\n    <span class=\"slider\"></span>\n  </label>\n</div>\n\n<div class=\"toggle-item2\">\n  <span class=\"toggle-label\">Is Hide</span>\n  <label class=\"switch\">\n    <input\n      type=\"checkbox\"\n      [checked]=\"selectedElement?.isHide\"\n      (change)=\"onToggleChange('isHide', $event)\"\n    />\n    <span class=\"slider\"></span>\n  </label>\n</div>\n</div>\n\n            <!-- Text Align Buttons -->\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n              <button\n                *ngFor=\"let option of prop.options\"\n                (click)=\"onAlignSelect(option.value)\"\n                [class.active]=\"selectedElement?.textAlign === option.value\"\n                class=\"align-btn\"\n                [title]=\"option.value\"\n              >\n                <img\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n                  [alt]=\"option.value\"\n                  class=\"icon-size\"\n                />\n              </button>\n            </div>\n\n\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\n              <label>{{ prop.label }}</label>\n              <input\n                type=\"number\"\n                [value]=\"selectedElement[prop.key]\"\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\n                class=\"size-input\"\n              />\n              <span class=\"size-unit\">{{ prop.unit }}</span>\n            </div>\n\n\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\n              <button\n                *ngFor=\"let option of prop.options\"\n                (click)=\"onStyleSelect(option.value)\"\n                [class.active]=\"isStyleActive(option.value)\"\n                class=\"style-btn\"\n                [title]=\"option.value\"\n              >\n                <img\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n                  [alt]=\"option.value\"\n                  class=\"icon-size\"\n                />\n              </button>\n            </div>\n\n<!-- Field Size Controls -->\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\n  <div class=\"size-group\">\n    <label  class=\"size-label\">Width</label>\n    <div class=\"value-container\">\n    <input\n      type=\"number\"\n      [value]=\"selectedElement?.width\"\n      (input)=\"updateProperty('width', $event.target.value)\"\n      class=\"size-input\"\n\n    />\n\n  </div>\n  </div>\n</div>\n</div>\n        </div>\n      </ng-container>\n    </div>\n  </details>\n\n  <!-- Field Elements Properties -->\n<details class=\"second-property\">\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n      <div class=\"flex-items-center \">\n        <label class=\"text-sm\">{{ prop.label }}</label>\n        <div class=\"input-box-field\">\n          <!-- Input Box -->\n          <input\n            *ngIf=\"prop.type === 'text'\"\n            type=\"text\"\n            [placeholder]=\"prop.placeholder\"\n            class=\"field-input\"\n          />\n          <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n\n\n      <div class=\"sizes\">\n          <div class=\"flex-gap\">\n    <div class=\"flex-items\">\n      <input\n      type=\"radio\"\n      [checked]=\"selectedElement.required\"\n      (change)=\"onRequiredChange(true)\"\n      name=\"required\"\n      class=\"radio-input\"\n    />\n      <label\n        class=\"text-label\"\n      >\n        Required\n      </label>\n    </div>\n    <div class=\"flex-items\">\n      <input\n      type=\"radio\"\n      [checked]=\"!selectedElement.required\"\n      (change)=\"onRequiredChange(false)\"\n      name=\"required\"\n      class=\"radio-input\"\n    />\n      <label\n        class=\"text-sm text-gray-400\"\n      >\n        Not Required\n      </label>\n    </div>\n  </div>\n</div>\n</div>\n <!-- Chk Options Group -->\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\n  <div\n    *ngFor=\"let option of prop.options; let i = index\"\n    class=\"option-items\"\n  >\n    <!-- Option Input -->\n    <input\n      type=\"text\"\n      [(ngModel)]=\"prop.options[i].label\"\n      placeholder=\"Option {{ i + 1 }}\"\n      class=\"options\"\n    />\n    <input\n      type=\"text\"\n      [(ngModel)]=\"prop.options[i].value\"\n      placeholder=\"Value\"\n      class=\"values\"\n    />\n    <!-- Remove Button -->\n    <div class=\"remove\">\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\n  </div>\n  <!-- Add Button -->\n  <button\n    type=\"button\"\n    class=\"add-btn\"\n    (click)=\"addOption(prop.options)\"\n  >\n  <div class=\"add-varient\">\n    <span class=\"text-lg\">+</span>\n    <span>Add Variants</span></div>\n  </button>\n</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"design-footer\">\n    <button class=\"btn\">Cancel</button>\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n  </div>\n</details>\n</div>\n</div>\n", styles: [".all-properties{padding:0;background-color:#f8fafc;position:relative;max-height:639px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:100px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
+            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n  <div class=\"properties\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n  <h1 class=\"header-title\">Element Properties</h1>\r\n  <div class=\"menu-container\">\r\n    <div class=\"menu-item\" (click)=\"download()\">\r\n      <span >Download</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Start</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Path</span>\r\n    </div>\r\n    <div class=\"menu-item\">\r\n      <span>Clone</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n  <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n      {{ errorMessage }}\r\n    </div>\r\n  <!-- Element Properties -->\r\n  <details class=\"first-properties\" open>\r\n    <summary class=\"text-sm \">Elements Properties</summary>\r\n    <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n        <div class=\"flex-items-center\">\r\n          <label class=\"text-sm\">{{ prop.label }}</label>\r\n          <div class=\"label-properties\">\r\n            <!-- Text Input -->\r\n            <input *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            [value]=\"selectedElement[prop.key]\"\r\n            (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n            [class.read-only]=\"selectedElement.readOnly\"\r\n            [readonly]=\"selectedElement.readOnly\"\r\n            class=\"text-sm1 \"\r\n          />\r\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n              {{ selectedElement.helpText }}\r\n            </div>\r\n\r\n\r\n         <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n    class=\"font-selection1\"\r\n    [value]=\"selectedElement?.font\"\r\n    (change)=\"updateProperty('font', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n      {{ option }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n  <!-- <label>{{ prop.label }}</label> -->\r\n  <select\r\n  *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n    class=\"font-weight\"\r\n    [value]=\"selectedElement?.fontWeight\"\r\n    (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </option>\r\n  </select>\r\n</div>\r\n\r\n          \r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n  <span class=\"toggle-label\">Read Only</span>\r\n  <label class=\"switch\">\r\n    <input  type=\"checkbox\"/>\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n  <span class=\"toggle-label\">Is Hide</span>\r\n  <label class=\"switch\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [checked]=\"selectedElement?.isHide\"\r\n      (change)=\"onToggleChange('isHide', $event)\"\r\n    />\r\n    <span class=\"slider\"></span>\r\n  </label>\r\n</div>\r\n</div>\r\n\r\n            <!-- Text Align Buttons -->\r\n            <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onAlignSelect(option.value)\"\r\n                [class.active]=\"selectedElement?.textAlign === option.value\"\r\n                class=\"align-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n              <label>{{ prop.label }}</label>\r\n              <input\r\n                type=\"number\"\r\n                [value]=\"selectedElement[prop.key]\"\r\n                (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n                class=\"size-input\"\r\n              />\r\n              <span class=\"size-unit\">{{ prop.unit }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"prop.type === 'style'\"  class=\"font-style\">\r\n              <button\r\n                *ngFor=\"let option of prop.options\"\r\n                (click)=\"onStyleSelect(option.value)\"\r\n                [class.active]=\"isStyleActive(option.value)\"\r\n                class=\"style-btn\"\r\n                [title]=\"option.value\"\r\n              >\r\n                <img\r\n                  [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n                  [alt]=\"option.value\"\r\n                  class=\"icon-size\"\r\n                />\r\n              </button>\r\n            </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n  <div class=\"size-group\">\r\n    <label  class=\"size-label\">Width</label>\r\n    <div class=\"value-container\">\r\n    <input\r\n      type=\"number\"\r\n      [value]=\"selectedElement?.width\"\r\n      (input)=\"updateProperty('width', $event.target.value)\"\r\n      class=\"size-input\"\r\n\r\n    />\r\n\r\n  </div>\r\n  </div>\r\n</div>\r\n</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </details>\r\n\r\n  <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n  <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n  <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n    <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n      <div class=\"flex-items-center \">\r\n        <label class=\"text-sm\">{{ prop.label }}</label>\r\n        <div class=\"input-box-field\">\r\n          <!-- Input Box -->\r\n          <input\r\n            *ngIf=\"prop.type === 'text'\"\r\n            type=\"text\"\r\n            [placeholder]=\"prop.placeholder\"\r\n            class=\"field-input\"\r\n          />\r\n          <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n      <div class=\"sizes\">\r\n          <div class=\"flex-gap\">\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"selectedElement.required\"\r\n      (change)=\"onRequiredChange(true)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-label\"\r\n      >\r\n        Required\r\n      </label>\r\n    </div>\r\n    <div class=\"flex-items\">\r\n      <input\r\n      type=\"radio\"\r\n      [checked]=\"!selectedElement.required\"\r\n      (change)=\"onRequiredChange(false)\"\r\n      name=\"required\"\r\n      class=\"radio-input\"\r\n    />\r\n      <label\r\n        class=\"text-sm text-gray-400\"\r\n      >\r\n        Not Required\r\n      </label>\r\n    </div>\r\n  </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n  <div\r\n    *ngFor=\"let option of prop.options; let i = index\"\r\n    class=\"option-items\"\r\n  >\r\n    <!-- Option Input -->\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].label\"\r\n      placeholder=\"Option {{ i + 1 }}\"\r\n      class=\"options\"\r\n    />\r\n    <input\r\n      type=\"text\"\r\n      [(ngModel)]=\"prop.options[i].value\"\r\n      placeholder=\"Value\"\r\n      class=\"values\"\r\n    />\r\n    <!-- Remove Button -->\r\n    <div class=\"remove\">\r\n    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n  </div>\r\n  <!-- Add Button -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"add-btn\"\r\n    (click)=\"addOption(prop.options)\"\r\n  >\r\n  <div class=\"add-varient\">\r\n    <span class=\"text-lg\">+</span>\r\n    <span>Add Variants</span></div>\r\n  </button>\r\n</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"design-footer\">\r\n    <button class=\"btn\">Cancel</button>\r\n    <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\r\n  </div>\r\n</details>\r\n</div>\r\n</div>\r\n", styles: [".all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { colorWheel: [{
                 type: ViewChild,
                 args: ['colorWheel']
@@ -11017,11 +11214,11 @@ class MenuComponent {
         this.activeIndex = index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", ngImport: i0, template: "<!-- AP 22JAN25 - Top menu ,Left side menu  -->\n<!-- menu.component.html -->\n<div class=\"top-bar\">\n    <button class=\"button share-button\">Share</button>\n    <button class=\"button publish-button\">Publish</button>\n</div>\n<div class=\"menu-sidebar\">\n  <!-- Logo Section -->\n  <div class=\"menu-logo\">\n    <img src=\"../assets/Nxt.png\">\n  </div>\n\n  <!-- Menu Items -->\n  <ul class=\"menu-list\">\n    <li\n      *ngFor=\"let item of menuItems; let i = index\"\n      class=\"menu-item\"\n      [class.active]=\"activeIndex === i\"\n      (click)=\"setActiveMenu(i)\"\n      [attr.aria-label]=\"item.label\"\n    >\n      <!-- Dynamic Icon -->\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\n    </li>\n  </ul>\n\n  <!-- Profile Section -->\n  <div class=\"menu-profile\">\n    <img src=\"../assets/icons/ProfileImage.svg\" />\n  </div>\n</div>\n\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:100vh;background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", ngImport: i0, template: "<!-- AP 22JAN25 - Top menu ,Left side menu  -->\r\n<!-- menu.component.html -->\r\n<div class=\"top-bar\">\r\n    <button class=\"button share-button\">Share</button>\r\n    <button class=\"button publish-button\">Publish</button>\r\n</div>\r\n<div class=\"menu-sidebar\">\r\n  <!-- Logo Section -->\r\n  <div class=\"menu-logo\">\r\n    <img src=\"../assets/Nxt.png\">\r\n  </div>\r\n\r\n  <!-- Menu Items -->\r\n  <ul class=\"menu-list\">\r\n    <li\r\n      *ngFor=\"let item of menuItems; let i = index\"\r\n      class=\"menu-item\"\r\n      [class.active]=\"activeIndex === i\"\r\n      (click)=\"setActiveMenu(i)\"\r\n      [attr.aria-label]=\"item.label\"\r\n    >\r\n      <!-- Dynamic Icon -->\r\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\r\n    </li>\r\n  </ul>\r\n\r\n  <!-- Profile Section -->\r\n  <div class=\"menu-profile\">\r\n    <img src=\"../assets/icons/ProfileImage.svg\" />\r\n  </div>\r\n</div>\r\n\r\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:100vh;background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-menu', template: "<!-- AP 22JAN25 - Top menu ,Left side menu  -->\n<!-- menu.component.html -->\n<div class=\"top-bar\">\n    <button class=\"button share-button\">Share</button>\n    <button class=\"button publish-button\">Publish</button>\n</div>\n<div class=\"menu-sidebar\">\n  <!-- Logo Section -->\n  <div class=\"menu-logo\">\n    <img src=\"../assets/Nxt.png\">\n  </div>\n\n  <!-- Menu Items -->\n  <ul class=\"menu-list\">\n    <li\n      *ngFor=\"let item of menuItems; let i = index\"\n      class=\"menu-item\"\n      [class.active]=\"activeIndex === i\"\n      (click)=\"setActiveMenu(i)\"\n      [attr.aria-label]=\"item.label\"\n    >\n      <!-- Dynamic Icon -->\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\n    </li>\n  </ul>\n\n  <!-- Profile Section -->\n  <div class=\"menu-profile\">\n    <img src=\"../assets/icons/ProfileImage.svg\" />\n  </div>\n</div>\n\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:100vh;background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"] }]
+            args: [{ selector: 'app-menu', template: "<!-- AP 22JAN25 - Top menu ,Left side menu  -->\r\n<!-- menu.component.html -->\r\n<div class=\"top-bar\">\r\n    <button class=\"button share-button\">Share</button>\r\n    <button class=\"button publish-button\">Publish</button>\r\n</div>\r\n<div class=\"menu-sidebar\">\r\n  <!-- Logo Section -->\r\n  <div class=\"menu-logo\">\r\n    <img src=\"../assets/Nxt.png\">\r\n  </div>\r\n\r\n  <!-- Menu Items -->\r\n  <ul class=\"menu-list\">\r\n    <li\r\n      *ngFor=\"let item of menuItems; let i = index\"\r\n      class=\"menu-item\"\r\n      [class.active]=\"activeIndex === i\"\r\n      (click)=\"setActiveMenu(i)\"\r\n      [attr.aria-label]=\"item.label\"\r\n    >\r\n      <!-- Dynamic Icon -->\r\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\r\n    </li>\r\n  </ul>\r\n\r\n  <!-- Profile Section -->\r\n  <div class=\"menu-profile\">\r\n    <img src=\"../assets/icons/ProfileImage.svg\" />\r\n  </div>\r\n</div>\r\n\r\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:100vh;background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"] }]
         }] });
 
 // AP-29JAN25 
@@ -11041,11 +11238,11 @@ class FormComponent {
         this.formButtonHandler.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n    <!-- app-element Component -->\n    <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [""], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\r\n<div class=\"form-container row\">\r\n    <!-- app-element Component -->\r\n    <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\r\n  \r\n    <!-- app-properties Component -->\r\n    <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\r\n  </div>\r\n  ", styles: [""], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n    <!-- app-element Component -->\n    <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  " }]
+            args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\r\n<div class=\"form-container row\">\r\n    <!-- app-element Component -->\r\n    <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\r\n  \r\n    <!-- app-properties Component -->\r\n    <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\r\n  </div>\r\n  " }]
         }], propDecorators: { bookletJSON: [{
                 type: Input
             }], bookletId: [{