@rangertechnologies/ngnxt 2.1.28 → 2.1.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/esm2022/lib/components/custom-calendar/custom-calendar.component.mjs +194 -0
  2. package/esm2022/lib/components/custom-date/custom-date.component.mjs +19 -8
  3. package/esm2022/lib/components/custom-date-picker/custom-date-picker.component.mjs +19 -8
  4. package/esm2022/lib/components/custom-dropdown/custom-dropdown.component.mjs +5 -6
  5. package/esm2022/lib/components/custom-input/custom-input.component.mjs +3 -4
  6. package/esm2022/lib/components/custom-model/custom-model.component.mjs +48 -0
  7. package/esm2022/lib/components/custom-table/custom-table.component.mjs +8 -4
  8. package/esm2022/lib/components/custom-text-area/custom-text-area.component.mjs +3 -4
  9. package/esm2022/lib/components/custom-time/custom-time.component.mjs +39 -9
  10. package/esm2022/lib/components/file-upload/file-upload.component.mjs +76 -26
  11. package/esm2022/lib/components/table-appendix/table-appendix.component.mjs +1 -1
  12. package/esm2022/lib/nxt-app.module.mjs +7 -1
  13. package/esm2022/lib/pages/booklet/booklet.component.mjs +15 -4
  14. package/esm2022/lib/pages/questionbook/questionbook.component.mjs +54 -42
  15. package/esm2022/lib/pages/questionnaire/questionnaire.component.mjs +1 -1
  16. package/esm2022/lib/pipe/get-value.pipe.mjs +2 -2
  17. package/fesm2022/rangertechnologies-ngnxt.mjs +486 -126
  18. package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
  19. package/lib/components/custom-calendar/custom-calendar.component.d.ts +53 -0
  20. package/lib/components/custom-date/custom-date.component.d.ts +6 -2
  21. package/lib/components/custom-date-picker/custom-date-picker.component.d.ts +6 -2
  22. package/lib/components/custom-model/custom-model.component.d.ts +19 -0
  23. package/lib/components/custom-time/custom-time.component.d.ts +8 -3
  24. package/lib/components/file-upload/file-upload.component.d.ts +2 -1
  25. package/lib/nxt-app.module.d.ts +31 -29
  26. package/lib/pages/questionbook/questionbook.component.d.ts +2 -1
  27. package/package.json +1 -1
  28. package/rangertechnologies-ngnxt-2.1.30.tgz +0 -0
  29. package/rangertechnologies-ngnxt-2.1.28.tgz +0 -0
@@ -8,7 +8,7 @@ import { HttpHeaders } from '@angular/common/http';
8
8
  import * as i5 from '@angular/platform-browser';
9
9
  import * as i6$1 from 'ngx-spinner';
10
10
  import { NgxSpinnerModule } from 'ngx-spinner';
11
- import * as i7 from '@angular/forms';
11
+ import * as i3 from '@angular/forms';
12
12
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
13
13
  import * as i8 from 'ngx-device-detector';
14
14
  import * as i2 from '@angular/common';
@@ -19,7 +19,7 @@ import * as i12 from 'ng-circle-progress';
19
19
  import { NgCircleProgressModule } from 'ng-circle-progress';
20
20
  import * as i4$1 from '@angular/google-maps';
21
21
  import { GoogleMapsModule } from '@angular/google-maps';
22
- import * as i2$1 from 'ng-pick-datetime';
22
+ import * as i4$2 from 'ng-pick-datetime';
23
23
  import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
24
24
  import * as i6 from '@ng-select/ng-select';
25
25
  import { NgSelectModule } from '@ng-select/ng-select';
@@ -1181,7 +1181,7 @@ class PickLocationComponent {
1181
1181
  this.showModal = false;
1182
1182
  }
1183
1183
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PickLocationComponent, deps: [{ token: I18nService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
1184
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PickLocationComponent, selector: "app-pick-location", inputs: { address: "address", question: "question", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<div>\n <!-- <label class=\"she-label\">Location</label> -->\n <!-- HA 19DEC23 For translation -->\n <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"{{ 'enterLocation' | i18n:i18nService.currentLanguage }}\"\n (keydown.enter)=\"$event.preventDefault()\" placeholder=\"{{ 'searchNearestLocation' | i18n:i18nService.currentLanguage }}\" autocorrect=\"off\"\n autocapitalize=\"off\" spellcheck=\"off\" type=\"text\" [(ngModel)]=\"address\"\n >\n <a (click)=\"openMap()\"\n style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\n <!-- HA 19DEC23 For translation -->\n </i> {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\n</div>\n\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n <div class=\"map-modal\">\n <div class=\"map-modal-content\">\n <div class=\"map-modal-header\">\n <!-- HA 19DEC23 For translation -->\n <h4>{{ 'pickYourLocation' | i18n:i18nService.currentLanguage }}</h4>\n <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n </div>\n <!-- Modal content goes here -->\n <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\n [fullscreenControl]=\"true\">\n <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\n (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\n </agm-map> -->\n <google-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\n </google-map>\n </div>\n </div>\n</div>\n\n\n\n\n\n\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4$1.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
1184
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PickLocationComponent, selector: "app-pick-location", inputs: { address: "address", question: "question", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<div>\n <!-- <label class=\"she-label\">Location</label> -->\n <!-- HA 19DEC23 For translation -->\n <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"{{ 'enterLocation' | i18n:i18nService.currentLanguage }}\"\n (keydown.enter)=\"$event.preventDefault()\" placeholder=\"{{ 'searchNearestLocation' | i18n:i18nService.currentLanguage }}\" autocorrect=\"off\"\n autocapitalize=\"off\" spellcheck=\"off\" type=\"text\" [(ngModel)]=\"address\"\n >\n <a (click)=\"openMap()\"\n style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\n <!-- HA 19DEC23 For translation -->\n </i> {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\n</div>\n\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n <div class=\"map-modal\">\n <div class=\"map-modal-content\">\n <div class=\"map-modal-header\">\n <!-- HA 19DEC23 For translation -->\n <h4>{{ 'pickYourLocation' | i18n:i18nService.currentLanguage }}</h4>\n <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n </div>\n <!-- Modal content goes here -->\n <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\n [fullscreenControl]=\"true\">\n <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\n (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\n </agm-map> -->\n <google-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\n </google-map>\n </div>\n </div>\n</div>\n\n\n\n\n\n\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4$1.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
1185
1185
  }
1186
1186
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PickLocationComponent, decorators: [{
1187
1187
  type: Component,
@@ -1252,11 +1252,11 @@ class CustomInputComponent {
1252
1252
  this.inputValue.emit(input.target.value);
1253
1253
  }
1254
1254
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomInputComponent, deps: [{ token: ChangeService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
1255
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomInputComponent, selector: "app-custom-input", inputs: { value: "value", question: "question", disabled: "disabled", placeholder: "placeholder", error: "error", fromShengel: "fromShengel", readOnly: "readOnly", ngClassValue: "ngClassValue", idValue: "idValue", focusEvent: "focusEvent" }, outputs: { inputValue: "inputValue" }, ngImport: i0, template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n <!-- HA 02FEB24 question input will hold the value to display -->\n <!-- // VD 12Jun24 - readonly change-->\n <input *ngIf=\"!fromShengel\" type=\"text\" \n [(ngModel)]=\"question.input\" \n [ngClass]=\"ngClassValue\"\n class=\"she-line-input form-control\"\n [id]=\"idValue\"\n (focus)=\"focusEvent\"\n [readOnly]=\"readOnly\"\n [style.border-color]=\"error ? 'red' : ''\"\n [style]=\"question?.Style__c?.inputStyle\"\n [placeholder]=\"placeholder ? placeholder : ''\"\n (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n [(ngModel)]=\"question.input\"\n type=\"text\" \n [readOnly]=\"readOnly\"\n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder ? placeholder : '' \"\n [disabled]=\"disabled\"\n [style]=\"question?.Style__c?.inputStyle\"\n (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
1255
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomInputComponent, selector: "app-custom-input", inputs: { value: "value", question: "question", disabled: "disabled", placeholder: "placeholder", error: "error", fromShengel: "fromShengel", readOnly: "readOnly", ngClassValue: "ngClassValue", idValue: "idValue", focusEvent: "focusEvent" }, outputs: { inputValue: "inputValue" }, ngImport: i0, template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n <!-- HA 02FEB24 question input will hold the value to display -->\n <!-- // VD 12Jun24 - readonly change-->\n <input *ngIf=\"!fromShengel\" type=\"text\" \n [(ngModel)]=\"question.input\" \n [ngClass]=\"ngClassValue\"\n class=\"she-line-input form-control\"\n [id]=\"idValue\"\n (focus)=\"focusEvent\"\n [readOnly]=\"readOnly\"\n [style.border-color]=\"error ? 'red' : ''\"\n [style]=\"question?.Style__c?.inputStyle\"\n [placeholder]=\"placeholder ? placeholder : ''\"\n (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n [(ngModel)]=\"question.input\"\n type=\"text\" \n [readOnly]=\"readOnly\"\n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder ? placeholder : '' \"\n [disabled]=\"disabled\"\n [style]=\"question?.Style__c?.inputStyle\"\n (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.Error_Message__c}}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1256
1256
  }
1257
1257
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomInputComponent, decorators: [{
1258
1258
  type: Component,
1259
- args: [{ selector: 'app-custom-input', template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n <!-- HA 02FEB24 question input will hold the value to display -->\n <!-- // VD 12Jun24 - readonly change-->\n <input *ngIf=\"!fromShengel\" type=\"text\" \n [(ngModel)]=\"question.input\" \n [ngClass]=\"ngClassValue\"\n class=\"she-line-input form-control\"\n [id]=\"idValue\"\n (focus)=\"focusEvent\"\n [readOnly]=\"readOnly\"\n [style.border-color]=\"error ? 'red' : ''\"\n [style]=\"question?.Style__c?.inputStyle\"\n [placeholder]=\"placeholder ? placeholder : ''\"\n (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n [(ngModel)]=\"question.input\"\n type=\"text\" \n [readOnly]=\"readOnly\"\n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder ? placeholder : '' \"\n [disabled]=\"disabled\"\n [style]=\"question?.Style__c?.inputStyle\"\n (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
1259
+ args: [{ selector: 'app-custom-input', template: " <!-- HA 19DEC23 Included Style value from Salesforce -->\n <!-- HA 18-JAN-24 Added these classes for style, HA 31-JAN-24 Added ternary for style -->\n <!-- HA 02FEB24 question input will hold the value to display -->\n <!-- // VD 12Jun24 - readonly change-->\n <input *ngIf=\"!fromShengel\" type=\"text\" \n [(ngModel)]=\"question.input\" \n [ngClass]=\"ngClassValue\"\n class=\"she-line-input form-control\"\n [id]=\"idValue\"\n (focus)=\"focusEvent\"\n [readOnly]=\"readOnly\"\n [style.border-color]=\"error ? 'red' : ''\"\n [style]=\"question?.Style__c?.inputStyle\"\n [placeholder]=\"placeholder ? placeholder : ''\"\n (input)=\"onInputChange($event)\" />\n\n<input *ngIf=\"fromShengel\" \n [(ngModel)]=\"question.input\"\n type=\"text\" \n [readOnly]=\"readOnly\"\n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder ? placeholder : '' \"\n [disabled]=\"disabled\"\n [style]=\"question?.Style__c?.inputStyle\"\n (input)=\"onInputChange($event)\" />\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{question?.Error_Message__c}}*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
1260
1260
  }], ctorParameters: function () { return [{ type: ChangeService }, { type: I18nService }]; }, propDecorators: { value: [{
1261
1261
  type: Input
1262
1262
  }], question: [{
@@ -1318,11 +1318,11 @@ class CustomTextAreaComponent {
1318
1318
  this.textareaValueChange.emit(event.target.value);
1319
1319
  }
1320
1320
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTextAreaComponent, deps: [{ token: I18nService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
1321
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: { value: "value", placeholder: "placeholder", rows: "rows", error: "error", question: "question", readOnly: "readOnly" }, outputs: { textareaValueChange: "textareaValueChange" }, ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<textarea \n [(ngModel)] =\"value\" \n [rows]=\"rows\" \n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder\"\n [readOnly]=\"readOnly\"\n (input)=\"onTextareaChange($event)\"\n></textarea>\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
1321
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: { value: "value", placeholder: "placeholder", rows: "rows", error: "error", question: "question", readOnly: "readOnly" }, outputs: { textareaValueChange: "textareaValueChange" }, ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<textarea \n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)] =\"value\" \n [rows]=\"rows\" \n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder\"\n [readOnly]=\"readOnly\"\n (input)=\"onTextareaChange($event)\"\n></textarea>\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ question?.Error_Message__c }}</span>", styles: [".invalid{border:1px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1322
1322
  }
1323
1323
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTextAreaComponent, decorators: [{
1324
1324
  type: Component,
1325
- args: [{ selector: 'app-custom-text-area', template: "<!-- // VD 12Jun24 - readonly change-->\n<textarea \n [(ngModel)] =\"value\" \n [rows]=\"rows\" \n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder\"\n [readOnly]=\"readOnly\"\n (input)=\"onTextareaChange($event)\"\n></textarea>\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>" }]
1325
+ args: [{ selector: 'app-custom-text-area', template: "<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<textarea \n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)] =\"value\" \n [rows]=\"rows\" \n class=\"she-line-input form-control\" \n [placeholder]=\"placeholder\"\n [readOnly]=\"readOnly\"\n (input)=\"onTextareaChange($event)\"\n></textarea>\n<!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error\" class=\"error-msg\">{{ question?.Error_Message__c }}</span>", styles: [".invalid{border:1px solid red!important}\n"] }]
1326
1326
  }], ctorParameters: function () { return [{ type: I18nService }, { type: ChangeService }]; }, propDecorators: { value: [{
1327
1327
  type: Input
1328
1328
  }], placeholder: [{
@@ -1339,6 +1339,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
1339
1339
  type: Output
1340
1340
  }] } });
1341
1341
 
1342
+ class GetValuePipe {
1343
+ transform(arg, element, column) {
1344
+ const initialEl = element;
1345
+ let flds = column.split('.');
1346
+ for (let i = 0; i < flds.length; i++) {
1347
+ let splitFlds = flds[i].split('[');
1348
+ if (splitFlds.length === 1) {
1349
+ if (typeof element[flds[i]] === "number") {
1350
+ element = element[flds[i]] || 0;
1351
+ }
1352
+ else {
1353
+ element = element[flds[i]] || "";
1354
+ }
1355
+ }
1356
+ else {
1357
+ let index = Number(splitFlds[1].split(']')[0]);
1358
+ if (typeof element[flds[i]] === "number") {
1359
+ element = element[splitFlds[0]][index] || 0;
1360
+ }
1361
+ else {
1362
+ element = element[splitFlds[0]][index] || '';
1363
+ }
1364
+ }
1365
+ }
1366
+ // Object.assign(initialEl, { [column]: element });
1367
+ return element;
1368
+ }
1369
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: GetValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
1370
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: GetValuePipe, isStandalone: true, name: "getValue" });
1371
+ }
1372
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: GetValuePipe, decorators: [{
1373
+ type: Pipe,
1374
+ args: [{
1375
+ name: 'getValue',
1376
+ standalone: true
1377
+ }]
1378
+ }] });
1379
+
1342
1380
  class CustomTableComponent {
1343
1381
  changeService;
1344
1382
  i18nService;
@@ -1417,7 +1455,10 @@ class CustomTableComponent {
1417
1455
  // VD 13MAY24 - bind dynamic field
1418
1456
  if (this.tableData.length > 0) {
1419
1457
  this.tableData.forEach(element => {
1420
- if (element[field] == item[field]) {
1458
+ // VD 26Jun24 - to handle multiple objects
1459
+ const objElementValue = this.dataService.getValue(element, field);
1460
+ const objItemValue = this.dataService.getValue(item, field);
1461
+ if (objElementValue == objItemValue) {
1421
1462
  validItem = false;
1422
1463
  }
1423
1464
  });
@@ -1481,11 +1522,11 @@ class CustomTableComponent {
1481
1522
  this.valueChange.emit(updatedTableData);
1482
1523
  }
1483
1524
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTableComponent, deps: [{ token: ChangeService }, { token: I18nService }, { token: SalesforceService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
1484
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTableComponent, selector: "app-custom-table", inputs: { question: "question", apiMeta: "apiMeta" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n <thead>\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + tableSize\">\n {{ header.label }}\n </th>\n <th class=\"col-md-2\" colspan=\"2\">Actions</th>\n </thead>\n <tbody *ngIf=\"tableData\">\n <tr *ngFor=\"let item of tableData; let i = index\">\n <!-- <td><input type=\"checkbox\" [(ngModel)]=\"item.selected\" (change)=\"selectItem(item)\"></td> -->\n <td *ngFor=\"let header of tableHeader; let j = index\">\n <div *ngIf=\"header.fldType === 'imagetext'\" [class]=\"'col-md-' + header.size\" style=\"display: flex;\">\n <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.fldType === 'image'\" [class]=\"'col-md-' + header.size\">\n <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item[header.fieldName]\" [alt]=\"item.altText\">\n </div>\n <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n <input type=\"text\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit}\" [(ngModel)]=\"item[header.apiName]\" (ngModelChange)=\"updateLabel(i, header.apiName, item[header.apiName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\" (click)=\"updateRadio(item, header.fieldName)\">\n </div>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n </td>\n </tr>\n </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1525
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTableComponent, selector: "app-custom-table", inputs: { question: "question", apiMeta: "apiMeta" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n <thead>\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + tableSize\">\n {{ header.label }}\n </th>\n <th class=\"col-md-2\" colspan=\"2\">Actions</th>\n </thead>\n <tbody *ngIf=\"tableData\">\n <tr *ngFor=\"let item of tableData; let i = index\">\n <!-- <td><input type=\"checkbox\" [(ngModel)]=\"item.selected\" (change)=\"selectItem(item)\"></td> -->\n <td *ngFor=\"let header of tableHeader; let j = index\">\n <div *ngIf=\"header.fldType === 'imagetext'\" [class]=\"'col-md-' + header.size\" style=\"display: flex;\">\n <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.fldType === 'image'\" [class]=\"'col-md-' + header.size\">\n <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item[header.fieldName]\" [alt]=\"item.altText\">\n </div>\n <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n <input type=\"text\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName, item[header.apiName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\" (click)=\"updateRadio(item, header.fieldName)\">\n </div>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n </td>\n </tr>\n </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
1485
1526
  }
1486
1527
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTableComponent, decorators: [{
1487
1528
  type: Component,
1488
- 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 <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n <input type=\"text\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit}\" [(ngModel)]=\"item[header.apiName]\" (ngModelChange)=\"updateLabel(i, header.apiName, item[header.apiName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\" (click)=\"updateRadio(item, header.fieldName)\">\n </div>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n </td>\n </tr>\n </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"] }]
1529
+ 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 <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n <input type=\"text\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName, item[header.apiName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\" (click)=\"updateRadio(item, header.fieldName)\">\n </div>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n </td>\n <td class=\"action\">\n <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n </td>\n </tr>\n </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"] }]
1489
1530
  }], ctorParameters: function () { return [{ type: ChangeService }, { type: I18nService }, { type: SalesforceService }, { type: DataService }]; }, propDecorators: { question: [{
1490
1531
  type: Input
1491
1532
  }], valueChange: [{
@@ -1495,13 +1536,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
1495
1536
  }] } });
1496
1537
 
1497
1538
  class CustomDatePickerComponent {
1539
+ i18nService;
1498
1540
  date;
1499
1541
  minDate;
1500
1542
  maxDate;
1543
+ error;
1544
+ errorMessage;
1501
1545
  readOnly = false; // VD 12Jun24 - readonly change
1502
1546
  dateChange = new EventEmitter();
1503
1547
  dateSelected;
1504
- constructor() { }
1548
+ constructor(i18nService) {
1549
+ this.i18nService = i18nService;
1550
+ }
1505
1551
  ngOnInit() {
1506
1552
  console.log('read only check', this.readOnly);
1507
1553
  this.dateSelected = new Date(this.date);
@@ -1509,18 +1555,22 @@ class CustomDatePickerComponent {
1509
1555
  onDateChange(event) {
1510
1556
  this.dateChange.emit(event);
1511
1557
  }
1512
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1513
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: { date: "date", minDate: "minDate", maxDate: "maxDate", readOnly: "readOnly" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- <div class=\"date-picker-container\">\n <label>{{label}}</label>\n <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n<!--VD 12Jun24 - readonly change --> \n<p>\n <input class=\"input-shengel\"\n [(ngModel)]=\"dateSelected\" \n [owlDateTimeTrigger]=\"dt\" \n [owlDateTime]=\"dt\" \n [min]=\"minDate\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY HH:MM\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\">\n <owl-date-time #dt></owl-date-time>\n</p>\n ", styles: [""], dependencies: [{ kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i2$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i2$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
1558
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDatePickerComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
1559
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: { date: "date", minDate: "minDate", maxDate: "maxDate", error: "error", errorMessage: "errorMessage", readOnly: "readOnly" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- <div class=\"date-picker-container\">\n <label>{{label}}</label>\n <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n<!--VD 12Jun24 - readonly change --> \n<!-- VD 01Aug24 - validation change-->\n<p>\n <input \n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"dateSelected\" \n [owlDateTimeTrigger]=\"dt\" \n [owlDateTime]=\"dt\" \n [min]=\"minDate\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY HH:MM\"\n (input)=\"onDateChange($event)\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\">\n <owl-date-time #dt></owl-date-time>\n</p>\n<span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>\n ", styles: [".invalid{border-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i4$2.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$2.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
1514
1560
  }
1515
1561
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDatePickerComponent, decorators: [{
1516
1562
  type: Component,
1517
- args: [{ selector: 'app-custom-date-picker', template: "<!-- <div class=\"date-picker-container\">\n <label>{{label}}</label>\n <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n<!--VD 12Jun24 - readonly change --> \n<p>\n <input class=\"input-shengel\"\n [(ngModel)]=\"dateSelected\" \n [owlDateTimeTrigger]=\"dt\" \n [owlDateTime]=\"dt\" \n [min]=\"minDate\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY HH:MM\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\">\n <owl-date-time #dt></owl-date-time>\n</p>\n " }]
1518
- }], ctorParameters: function () { return []; }, propDecorators: { date: [{
1563
+ 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"] }]
1564
+ }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { date: [{
1519
1565
  type: Input
1520
1566
  }], minDate: [{
1521
1567
  type: Input
1522
1568
  }], maxDate: [{
1523
1569
  type: Input
1570
+ }], error: [{
1571
+ type: Input
1572
+ }], errorMessage: [{
1573
+ type: Input
1524
1574
  }], readOnly: [{
1525
1575
  type: Input
1526
1576
  }], dateChange: [{
@@ -1546,7 +1596,7 @@ class DropdownWithFlagComponent {
1546
1596
  this.flagDropDownChange.emit(event);
1547
1597
  }
1548
1598
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownWithFlagComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
1549
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: { certified: "certified", JobPerformerCertificates: "JobPerformerCertificates" }, outputs: { flagDropDownChange: "flagDropDownChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"she-title\">\n <label class=\"switch\">\n <input class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\n <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \n <span class=\"switch-handle\"></span> \n </label> \n <!-- HA 19DEC23 For translation -->\n <ng-select *ngIf=\"certified\"\n style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \n [items]=\"JobPerformerCertificates\"\n [(ngModel)]=\"selectedValue\"\n (change)=\"onJobPerformerCertified($event)\"\n placeholder=\"---{{ 'select' | i18n:i18nService.currentLanguage }}---\">\n </ng-select>\n </div> ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:12px;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label:before,.switch-label:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label:before{content:attr(data-off);right:11px;color:#aaa;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input:checked~.switch-label{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input:checked~.switch-label:before{opacity:0}.switch-input:checked~.switch-label:after{opacity:1}.switch-handle{position:absolute;top:0;left:0;width:19px;height:22px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px #0003}.switch-handle:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input:checked~.switch-handle{left:86px;box-shadow:-1px 1px 5px #0003;border:2px solid aquamarine}.switch-label,.switch-handle{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
1599
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: { certified: "certified", JobPerformerCertificates: "JobPerformerCertificates" }, outputs: { flagDropDownChange: "flagDropDownChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"she-title\">\n <label class=\"switch\">\n <input class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\n <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \n <span class=\"switch-handle\"></span> \n </label> \n <!-- HA 19DEC23 For translation -->\n <ng-select *ngIf=\"certified\"\n style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \n [items]=\"JobPerformerCertificates\"\n [(ngModel)]=\"selectedValue\"\n (change)=\"onJobPerformerCertified($event)\"\n placeholder=\"---{{ 'select' | i18n:i18nService.currentLanguage }}---\">\n </ng-select>\n </div> ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:12px;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label:before,.switch-label:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label:before{content:attr(data-off);right:11px;color:#aaa;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input:checked~.switch-label{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input:checked~.switch-label:before{opacity:0}.switch-input:checked~.switch-label:after{opacity:1}.switch-handle{position:absolute;top:0;left:0;width:19px;height:22px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px #0003}.switch-handle:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input:checked~.switch-handle{left:86px;box-shadow:-1px 1px 5px #0003;border:2px solid aquamarine}.switch-label,.switch-handle{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
1550
1600
  }
1551
1601
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownWithFlagComponent, decorators: [{
1552
1602
  type: Component,
@@ -1645,8 +1695,8 @@ class CustomDropdownComponent {
1645
1695
  // console.log(event);
1646
1696
  let change = new ChangeWrapper(); // ChangeWrapper = JSON.parse('{}');
1647
1697
  change.fromQuestionId = this.id;
1648
- change.valueObj = event;
1649
- change.selectedObj = event[this.labelField];
1698
+ change.valueObj = event ? event : '';
1699
+ change.selectedObj = event ? event[this.labelField] : '';
1650
1700
  this.valueChange.emit(change);
1651
1701
  // once got value in dropdown remove the error validation
1652
1702
  if (event) {
@@ -1654,11 +1704,11 @@ class CustomDropdownComponent {
1654
1704
  }
1655
1705
  }
1656
1706
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
1657
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n [ngClass]=\"{\n 'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n 'custom-select': !progressBar\n }\" class=\"custom-select mr-sm-2 dd-height\" \n [id]=\"id\" \n [(ngModel)]=\"selectedValue\"\n (change)=\"selectChange($event.target.value);\" \n [style.borderColor]=\"error ? 'red' : '#858585'\"\n [style.color]=\"error ? 'red' : ''\">\n <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<ng-select\n [class]=\"invalidFieldIds.includes(id) ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n [(ngModel)]=\"selectedValue\" \n [placeholder]=\"placeholder\"\n [disabled]=\"readOnly\"\n (change)=\"selectChange($event)\"\n [id]=\"id\">\n<!-- HA 19-JAN-24 Correction in option value -->\n <ng-option *ngFor=\"let option of options\" [value]=\"apiMeta !== undefined ? option : option.Value__c\">{{ apiMeta !== undefined ? option[labelField] : option.Value__c }}</ng-option> \n <!-- <ng-option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</ng-option> -->\n</ng-select>\n <!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i6.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
1707
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n [ngClass]=\"{\n 'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n 'custom-select': !progressBar\n }\" class=\"custom-select mr-sm-2 dd-height\" \n [id]=\"id\" \n [(ngModel)]=\"selectedValue\"\n (change)=\"selectChange($event.target.value);\" \n [style.borderColor]=\"error ? 'red' : '#858585'\"\n [style.color]=\"error ? 'red' : ''\">\n <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<ng-select\n [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n [(ngModel)]=\"selectedValue\" \n [placeholder]=\"placeholder\"\n [disabled]=\"readOnly\"\n (change)=\"selectChange($event)\"\n [id]=\"id\">\n<!-- HA 19-JAN-24 Correction in option value -->\n <ng-option *ngFor=\"let option of options\" [value]=\"apiMeta !== undefined ? option : option.Value__c\">{{ apiMeta !== undefined ? option[labelField] : option.Value__c }}</ng-option> \n <!-- <ng-option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</ng-option> -->\n</ng-select>\n <!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i6.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }] });
1658
1708
  }
1659
1709
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDropdownComponent, decorators: [{
1660
1710
  type: Component,
1661
- args: [{ selector: 'app-custom-dropdown', template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n [ngClass]=\"{\n 'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n 'custom-select': !progressBar\n }\" class=\"custom-select mr-sm-2 dd-height\" \n [id]=\"id\" \n [(ngModel)]=\"selectedValue\"\n (change)=\"selectChange($event.target.value);\" \n [style.borderColor]=\"error ? 'red' : '#858585'\"\n [style.color]=\"error ? 'red' : ''\">\n <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<ng-select\n [class]=\"invalidFieldIds.includes(id) ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n [(ngModel)]=\"selectedValue\" \n [placeholder]=\"placeholder\"\n [disabled]=\"readOnly\"\n (change)=\"selectChange($event)\"\n [id]=\"id\">\n<!-- HA 19-JAN-24 Correction in option value -->\n <ng-option *ngFor=\"let option of options\" [value]=\"apiMeta !== undefined ? option : option.Value__c\">{{ apiMeta !== undefined ? option[labelField] : option.Value__c }}</ng-option> \n <!-- <ng-option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</ng-option> -->\n</ng-select>\n <!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ 'required' | i18n:i18nService.currentLanguage }}*</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"] }]
1711
+ args: [{ selector: 'app-custom-dropdown', template: "<!-- HA 18-JAN-24 Commenting these lines as we don't have to use shengel here -->\n<!-- <select\n [ngClass]=\"{\n 'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n 'custom-select': !progressBar\n }\" class=\"custom-select mr-sm-2 dd-height\" \n [id]=\"id\" \n [(ngModel)]=\"selectedValue\"\n (change)=\"selectChange($event.target.value);\" \n [style.borderColor]=\"error ? 'red' : '#858585'\"\n [style.color]=\"error ? 'red' : ''\">\n <option *ngFor=\"let option of options\" [value]=\"this.apiMeta !== undefined ? option.title : option.Value__c\" class=\"option\">{{ this.apiMeta !== undefined ? option.title : option.Value__c }}</option>\n <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select> -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<ng-select\n [class]=\"invalidFieldIds.includes(id) || error ? 'shengel-custom-select invalid' : 'shengel-custom-select'\"\n [(ngModel)]=\"selectedValue\" \n [placeholder]=\"placeholder\"\n [disabled]=\"readOnly\"\n (change)=\"selectChange($event)\"\n [id]=\"id\">\n<!-- HA 19-JAN-24 Correction in option value -->\n <ng-option *ngFor=\"let option of options\" [value]=\"apiMeta !== undefined ? option : option.Value__c\">{{ apiMeta !== undefined ? option[labelField] : option.Value__c }}</ng-option> \n <!-- <ng-option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</ng-option> -->\n</ng-select>\n <!-- HA 19DEC23 For translation -->\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{errorMessage}}</span>\n", styles: [".ng-select{width:100%}.invalid{border:1px solid red!important}\n"] }]
1662
1712
  }], ctorParameters: function () { return [{ type: ChangeService }, { type: DataService }, { type: I18nService }]; }, propDecorators: { options: [{
1663
1713
  type: Input
1664
1714
  }], placeholder: [{
@@ -3758,13 +3808,13 @@ class QuestionnaireComponent {
3758
3808
  getValue(item) {
3759
3809
  return Object.values(item)[0];
3760
3810
  }
3761
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: i4.ActivatedRoute }, { token: i5.DomSanitizer }, { token: i6$1.NgxSpinnerService }, { token: i7.UntypedFormBuilder }, { token: i8.DeviceDetectorService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
3762
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage" }, providers: [ChangeService], usesOnChanges: true, ngImport: i0, template: "<!-- Spinner -->\n<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n\n<!-- Back Processing -->\n<div *ngIf=\"backicon == false\" >\n <div class=\"backicon\" [style.visibility]=\"questionStack.length >0 ? 'visible' : 'hidden'\">\n <button (click)=\"handleBackClick()\" [class]=\" abItem?.Status__c == 'Completed' ? 'summary-volver':'app-back1'\">\n <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.Back__c }}\n </button>\n </div>\n</div>\n\n<!-- Question Hanlding -->\n<div *ngIf=\"questionItem\" [class]=\"qbItem.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n <!-- Progress Bar & Title -->\n <div *ngIf=\"questionItem.Title__c && qbItem.Progress_Bar__c\">\n <h1 class=\"header1\">{{ questionItem?.Title__c }}</h1>\n <div class=\"header2\">{{ questionItem?.SubTitle__c }}</div>\n </div>\n\n <!-- Progress & Grouping -->\n <div [ngClass]=\"{ questiondiv2: !qbItem?.Progress_Bar__c }\">\n <!-- Pie Chart Progress -->\n <div [ngClass]=\"{ bgColor: qbItem?.Progress_Bar__c }\">\n <div id=\"progress\" *ngIf=\"qbItem?.Progress_Bar__c\">\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n [startFromZero]=\"false\" [responsive]=\"false\" >\n </circle-progress>\n </div>\n </div>\n\n <!-- Show the Group/Module related to the Progress -->\n <div *ngIf=\"questionItem.Group__c && qbItem.Progress_Bar__c\"\n [ngClass]=\"{ questionalign: !qbItem?.Progress_Bar__c }\">\n <div class=\"largeTitle\">\n <h3 class=\"myt-font6 myt-text3\">\n {{ questionItem?.Group__c }}\n </h3>\n <div *ngIf=\"questionItem.Sub_Text__c != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.Sub_Text__c}}</div>\n <div *ngIf=\"questionItem.Sub_Text__c === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.Sub_Text__c}}</div>\n </div>\n </div>\n </div>\n\n <!-- Question Handling -->\n <div class=\"questiondiv2\">\n <!-- Title -->\n <div *ngIf=\"questionItem.Is_Title__c\">\n <div *ngIf=\"questionItem.Type__c != 'Book' && questionItem.Question_No__c!='6' && questionItem.Question_No__c!='9'\"> \n <h3 class=\"questionalign myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n {{questionItem?.Question_Text__c}}\n </h3>\n </div>\n </div>\n <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n <div *ngIf=\"!questionItem.Is_Title__c\" [class]=\"qbItem.isShengel__c ? 'header-style' : 'question-f-size'\">\n <div [innerHTML]=\"getText(questionItem?.Question_Text__c)\" >\n {{ questionItem?.Question_Text__c }}\n </div>\n </div>\n\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <div *ngIf=\"questionItem.Type__c == 'Book'\">\n <div *ngIf=\"questionItem.Question_No__c=='6'\">\n <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n {{ questionItem?.Question_Text__c }}\n </h3>\n </div>\n </div>\n \n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <div *ngIf=\"questionItem.Type__c == 'File' \">\n <div *ngIf=\"questionItem.Question_No__c=='9'\">\n <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n {{questionItem?.Question_Text__c}}\n </h3>\n </div>\n </div>\n </div>\n\n <!-- Additional Info -->\n <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n <div *ngIf=\"questionItem.Additional_Rich__c && qbItem.Progress_Bar__c\" >\n <div\n class=\"additional \" [innerHTML]=\"innerhtml\">\n </div>\n </div>\n <div *ngIf=\"questionItem.Additional_Rich__c && !qbItem.Progress_Bar__c\">\n <div class=\"info-alert ques-alert1\">\n <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\n <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n </div>\n </div>\n\n <!-- Dropdown-->\n <div *ngIf=\"dropdownFlag\" >\n <div class=\"dis-flex\">\n <select \n [ngClass]=\"{\n 'dt-line myt-align3 myt-align2 dpDown dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.Progress_Bar__c,\n 'custom-select': !qbItem?.Progress_Bar__c\n }\" class=\"mr-sm-2 dd-height dropbox \" id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\" style=\"margin-left: 21.5rem !important;\">\n <option *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"option\" value=\"{{ opt.Value__c }}\">\n {{ opt.Value__c }}\n </option>\n <!-- HA 20DEC23 For Translation -->\n <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\n </select>\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n {{ questionItem?.Error_Message__c }}\n </div>\n <div class=\"dis-flex\">\n <div *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"radio radioOption\" >\n <label class=\"radiocontainer container myt-font4\">{{ opt.Value__c }}\n <input type=\"radio\" [id]=\"opt.Id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" value=\"{{ opt.Value__c }}\"\n (change)=\"optionChange(opt.Value__c)\" />\n<!-- HA 20FEB24 Removed checkmark as it was causing styling issue in Radio -->\n </label>\n </div>\n </div>\n </div>\n\n <!-- Checkbox -->\n <div *ngIf=\"checkboxFlag\" class=\"\">\n <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n {{ questionItem?.Error_Message__c }}\n </div>\n <div class=\"dis-flex\">\n <div *ngFor=\"let item of optionValues\" class=\"radio col-md-6 optiondiv\">\n <label class=\" container1 \" >{{ item.Value__c }}\n <input type=\"checkbox\" [id]=\"item.Id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n<!-- HA 20FEB24 Removed checkmark1 as it was causing styling issue in Radio -->\n </label>\n </div>\n </div>\n </div>\n\n <!-- Text -->\n <div *ngIf=\"textFlag\" class=\"col-md-12 myt-book1\">\n <!-- HA 31-JAN-24 To reduce the margin -->\n <div class=\"col-md-12\" class=\"dis-flex myt-align2\" [class]=\"'col-md-' + questionItem?.Size__c + ' paddingnone'\">\n <input type=\"text\" [(ngModel)]=\"inpValue\" [ngClass]=\"{\n 'boxoutline myt-font1 myt-book1': qbItem?.Progress_Bar__c,\n textBox1: !qbItem?.Progress_Bar__c\n }\" id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n\n <!-- Text Area -->\n <div *ngIf=\"taFlag\" class=\"col-md-12\">\n <div class=\"dis-flex\">\n <textarea class=\"ta-input\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : inpValue?.length > 0 && taFocusOut\n ? '#87be1c'\n : ''\n }}\" (focusout)=\"taFocusOut = true\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\"></i>\n </div>\n </div>\n\n <!-- CC Number Format -->\n <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n <div class=\"dis-flex\">\n <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\"\n [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\n *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n <!-- END-->\n\n <!-- AlphaNumeric -->\n <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n <div style=\"position:relative;\">\n <!-- HA 20DEC23 For Translation -->\n <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n <div class=\"dis-flex\">\n <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\n *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n\n <!-- DateTime -->\n <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero myt-time1\" >\n <!-- Error Handling -->\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n <!-- Date -->\n <div *ngIf=\"dateFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n <div class=\"dis-flex\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, '')\"\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\n </my-date-picker>\n </div>\n </div>\n </div>\n\n <!-- Time -->\n <div *ngIf=\"timeFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n <div class=\"dis-flex\">\n <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n dateandTime: !qbItem?.Progress_Bar__c}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem?.X24_Hours__c == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n <!-- <div [ngClass]=\"{'': qbItem.Progress_Bar__c, 'dateandTime': !qbItem.Progress_Bar__c}\"></div> -->\n </div>\n </div>\n </div>\n </div>\n <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n </div>\n </div>\n\n <!-- Attachment / File -->\n <div *ngIf=\"fileFlag\">\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\n <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n <label class=\"picture-upload\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\n <i class=\"\" aria-hidden=\"true\"></i>\n </span>\n </label>\n </div>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event)\" />\n </div>\n <ul *ngIf=\"\n attachments?.length > 0 &&\n questionItem?.Type__c === 'File' &&\n !qbItem?.Progress_Bar__c\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n\n <!-- Attachment Progress -->\n <div *ngIf=\"qbItem.Progress_Bar__c\">\n <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n \n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\"> {{ questionItem?.Question_Text__c}}</span>\n <label class=\"file-label \">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n\n <!-- Book -->\n <div *ngIf=\"bookFlag\">\n <div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\" [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\n *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.Id\">\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\n <span>{{ ques?.Question_Text__c }}</span>\n </div>\n <div class=\"col-md-12 paddingZero myt-dateTimeNew\" *ngIf=\"ques.Type__c === 'Time' || ques.Type__c === 'Date'\">\n <div *ngIf=\"ques.Type__c === 'Date'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n <div class=\"dateandtime\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\" >\n </my-date-picker>\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.Type__c === 'Time'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n <div class=\"dateandtime\">\n <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n dateandTime: !qbItem?.Progress_Bar__c}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem.X24_Hours__c == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n </div>\n <div *ngIf=\"ques.Type__c === 'Text'\">\n <app-custom-input\n [value]=\"ques?.input\"\n [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n textBox: !qbItem.Progress_Bar__c\n }\"\n [question]=\"ques\" \n [idValue]=\"ques?.Tracking_ID__c\"\n [focusEvent]=\"clearSQError(ques?.Id)\"\n [error]=\"ques?.error\"\n [placeholder]=\"ques?.Question__c\"\n (inputValue)=\"selectedInput($event,ques)\">\n </app-custom-input>\n </div>\n <div *ngIf=\"ques.Type__c === 'Location'\">\n <!-- for pick location -->\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n </div>\n <!-- for text area -->\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.Type__c === 'Email'\">\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n </div>\n\n <div *ngIf=\"ques.Type__c === 'File'\">\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\n <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"\n fa fa-plus fa-2x\n picture-upload-child\n pic-upload\n icolor\n \">\n <i class=\"\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n </div>\n\n <ul *ngIf=\"\n attachments?.length > 0 &&\n ques.Type__c === 'File' &&\n !qbItem.Progress_Bar__c\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n <div class=\"myt-box\" *ngIf=\"qbItem.Progress_Bar__c\">\n\n <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n <span class=\"f-Name\">{{ ques?.Question__c }}</span>\n <label class=\"file-label \">\n <span style=\"color: #c5281c;text-decoration:underline\">\n {{'attach' | i18n:i18nService.currentLanguage}}\n </span>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n <app-custom-table \n [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-table>\n </div>\n\n <!-- Dropdown -->\n <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\n <!-- for common dropdown -->\n <!-- HA 20DEC23 For Translation -->\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\"\n [options]=\"ques.Question_Options__r.records\"\n [apiMeta]=\"ques.Sub_Text__c\"\n [id]=\"ques.Name\"\n [selectedValue]=\"ques.input\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques?.Error_Message__c\"\n [error]=\"ques?.error\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-dropdown>\n <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\" [certified]=\"ques.certifiedFlag\" [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n </div> \n </div>\n </div>\n </div>\n </div>\n\n <!--List start-->\n <div *ngIf=\"listFlag\">\n <div class=\"form-group\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div class=\"myt-align3\" [class]=\"'col-md-' + ques.Size__c + ' paddingnone'\"\n *ngFor=\"let ques of getLocalSubQuestions(questionItem.Id);let i = index\">\n <div>\n <span class=\"dis-flex myt-font3 myt-font7\">{{ ques?.Question__c }}</span>\n </div>\n <div *ngIf=\"ques.Type__c === 'Text'\">\n <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n textBox: !qbItem.Progress_Bar__c\n }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n </div>\n </div>\n <div class=\"\" *ngIf=\"addFlag\">\n <!-- HA 20DEC23 For Translation -->\n <button (click)=\"Add(getLocalSubQuestions(questionItem.Id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\n </div>\n </div>\n </div>\n </div>\n <!--List End-->\n\n <!-- Actions -->\n <div *ngIf=\"individualBookButton\" class=\"flexer\">\n <!-- Backward / Back -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"backbutton\" [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\"\n [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.Back__c\">\n <div [ngClass]=\"{}\">\n <button [ngClass]=\"{\n 'left-bt': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n !qbItem.Progress_Bar__c\n }\" (click)=\"handleBackClick()\">\n {{ qbItem?.Back__c }}\n </button>\n </div>\n </div>\n\n <!-- Forward / Next -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\" *ngIf=\"qbItem.Next__c\">\n <div>\n <button [ngClass]=\"{\n 'rusty': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n !qbItem.Progress_Bar__c\n }\" (click)=\"handleNextClick()\">\n {{ qbItem.Next__c }}\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n 'col-md-12':!qbItem.Progress_Bar__c\n }\">\n <h1 class=\"header1 summarypadd\" >{{ qbItem.SubTitle__c }}</h1> \n <div id=\"progress2\" *ngIf=\"!qbItem.Progress_Bar__c && this.abItem.Status__c != 'Completed' \">\n <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n <div *ngFor=\"let qa of summary\">\n <div [ngClass]=\"{ non: qbItem.Progress_Bar__c }\">\n <div [ngClass]=\"{ summary: !qbItem.Progress_Bar__c }\">\n <div *ngIf=\"!qbItem.Edit__c\"\n [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n </div>\n <div *ngIf=\"qbItem.Edit__c\"\n [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n <div [ngClass]=\"{ 'question': this.abItem.Status__c === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\">\n {{ qa.quesValue }}\n </div>\n </div>\n <div class=\"answer\" >\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <!-- HA 02FEB24 Displaying the in summary for book type -->\n <div *ngIf=\"qa.qTyp == 'Book'\">\n <div *ngFor=\"let val of qa.myVal\">\n <p>{{ val.Question_Text__c }}: <span>{{ val.input }}</span></p>\n </div>\n </div>\n <!-- HA 02FEB24 Displaying the value for direct question -->\n <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.Question_Text__c }}: <span></span>{{ qa.ansValue }}</div>\n <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"this.abItem.Status__c === 'Completed'\" class=\"col-lg-12\">\n <div class=\"panel-group panel-group-joined\" id=\"ePTW-details\">\n <div class=\"panel panel-default\">\n <div class=\"panel-heading\">\n <h4 class=\"panel-title\">\n <!-- HA 20DEC23 For Translation -->\n <a data-toggle=\"collapse\" data-parent=\"#ePTW-details\" href=\"#collapseOne\" class=\"collapsed\">\n {{'details' | i18n:i18nService.currentLanguage}}\n </a>\n </h4>\n </div>\n <div id=\"collapseOne\" class=\"panel-collapse collapse\">\n <div class=\"panel-body\">\n <div class=\"row\">\n <ng-container *ngFor=\"let item of summaryData; let i = index\">\n <ng-container *ngIf=\"i % 2 === 0\">\n <div class=\"col-lg-6 m-b-30\">\n <label>{{ getKey(item) }}</label>\n <p class=\"font-size\">{{ getValue(item) || 'N/A' }}</p>\n </div>\n <div class=\"col-lg-6\" *ngIf=\"summaryData[i + 1]\">\n <label>{{ getKey(summaryData[i + 1]) }}</label>\n <p class=\"font-size\">{{ getValue(summaryData[i + 1]) || 'N/A' }}</p>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div id=\"progress2\" *ngIf=\"qbItem.Progress_Bar__c \">\n <div [ngClass]=\"{'bgColor summary-top' : qbItem.Progress_Bar__c }\" >\n <div id=\"progress-summary\" *ngIf=\"qbItem.Progress_Bar__c\">\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n [startFromZero]=\"false\" [responsive]=\"false\" >\n </circle-progress>\n \n <div *ngIf=\"qbItem.Summary_Text__c && qbItem.Progress_Bar__c\" \n [ngClass]=\"{ summaryTitle: qbItem.Progress_Bar__c }\">\n <h3 class=\"subTitle\" >{{ qbItem.Summary_Text__c }}</h3>\n <div *ngIf=\"abItem.Status__c != 'Completed'\" class=\"subTitle1\" >{{ qbItem.Summary_Sub_Text__c}}</div>\n </div>\n </div>\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\n <h3 class=\"summary-h\">\n {{ qbItem.Summary_Text__c }}\n </h3>\n </div>\n </div>\n <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n <div class=\"summary-groupText myt-font2\">\n <!-- <p>Informe de da\u00F1o</p> -->\n </div>\n <div *ngFor=\"let qa of summary\" >\n <div [ngClass]=\"{ non: qbItem.Progress_Bar__c }\">\n <div [ngClass]=\"{ summary: this.abItem.Status__c != 'Completed' && !qbItem.Progress_Bar__c }\">\n <div *ngIf=\"!qbItem.Edit__c\"\n [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n </div>\n <div *ngIf=\"qbItem.Edit__c\"\n [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.Status__c === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\">\n {{ qa.quesValue }}\n </div>\n </div>\n <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n </button>\n </div>\n \n <div class=\"answer \" >\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <div *ngIf=\"qa.qTyp != 'File'\">\n {{ qa.ansValue }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Answer Book -->\n <div class=\"flexer1\" *ngIf=\"abItem\">\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"\" *ngIf=\"abItem.Status__c == 'Completed' && qbItem.Cancel__c\">\n <div class=\"col-md-12\">\n <button [ngClass]=\"{'btn-text': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\"\n (click)=\"handleCancelClick()\">\n {{ qbItem.Cancel__c }}\n </button>\n </div>\n </div>\n </div>\n\n <!-- Group Actions -->\n <div class=\"align-edit-submit\" *ngIf=\"abItem.Status__c != 'Completed'\">\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"col-md-6\" *ngIf=\"qbItem.Submit__c\">\n <button [ngClass]=\"{ 'btn-text2': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c }\" \n (click)=\"handleSubmitClick()\">\n {{ qbItem.Submit__c }}\n </button>\n </div>\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"col-md-6\" *ngIf=\"qbItem.Edit__c\">\n <button [ngClass]=\"{'grey': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\" \n (click)=\"handleBackClickNew()\">\n {{ qbItem.Edit__c }}\n </button>\n </div>\n </div>\n\n</div>", styles: [".rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.edit{background-color:#dedddd;border:none;color:#c5281c;text-decoration:underline;margin-left:50%;font-size:16px;vertical-align:super;font-weight:700}.icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.icon-edit1,.icon-edit-summary{width:29px;height:28px}.questiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.questiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.questiondiv2{padding-left:0!important;padding-bottom:0!important}@media screen and (min-width: 689px){#progress,#progress-summary{padding-left:12px}.backicon{display:none}.dt-time{background-position:98%!important}}.bgColor{text-align:center;background-color:#dedddd}.questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.largeTitle{padding-left:16px;padding-top:12px}.question-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1.5;padding:.5rem 1rem;width:100%;cursor:pointer;outline:0}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.radiotext{margin-top:-30px}.radiocontainer{display:flex;flex-direction:row-reverse;border:1px solid none;border-radius:.3em;padding:0;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#a3a2a2}.radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.myt-time{width:-moz-fit-content!important;width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.showminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.myt-dateTimeNew{margin-left:-14px}.myt-hour{width:-moz-fit-content;width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.date-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.dis-flex{display:flex;justify-content:center}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin-left:-17px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.question{padding:10px;font-size:14px;color:#007bff}.question1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.answer{display:flex;align-items:baseline;padding:5px 5px 10px;font-size:14px;font-weight:400;word-wrap:break-word;width:97%;justify-content:space-between}.answer1{max-width:55%;margin-left:auto;margin-right:auto;color:#a3a2a2;margin-top:0%;padding-bottom:0;font-size:14px;font-weight:400;word-wrap:break-word;text-align:left;background:#dedddd;border-bottom:1px solid #fff}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.sum-ques{width:55%;margin:auto}.sum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#F8F8F8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.file-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.file-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.subTitle1{color:#560d05;font-size:14px;font-weight:500}.check-icon{color:#87be1c;margin-left:-2rem;z-index:1;padding:5px;margin-top:.4rem}.check-icon2{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:.6rem;line-height:3}.check-icon3{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.grey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.btn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.btn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;width:100%;display:flex;justify-content:center}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.down{margin-left:0;width:57%}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.dropbox{margin-left:21.5rem}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.summary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.myt-align{margin-left:4%;line-height:2}.myt-align1{margin-left:-29px}.myt-align2{margin-left:-15px}.myt-align3{width:100%}.myt-book1{margin-top:-20px}.colorf{color:#555}.bookText{width:57%;margin-left:21.5%;background-color:#dedddd}.book{width:32.6%;margin-left:34%;background-color:#dedddd}.summary-completed{padding-left:2%;margin-top:20px}.town{margin:0;background-color:#dedddd}.town-drop{margin:auto;width:57%}.questiondiv1.padd-bottom{padding-bottom:6rem!important;padding-top:2rem!important}@media (max-width: 1090px){.icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (max-width: 768px){.radioOption{width:8%}.grey{width:78%;margin-left:17.5rem;height:68px!important;font-size:20px!important;font-weight:700!important}.answer{margin-top:-4%!important}}@media screen and (max-width: 672px){.header1{font-size:23px!important}.summarypadd{padding-top:50px!important}.answer{margin-top:-5%!important}.icon-edit{margin:0 6px 0 -13%!important}.subTitle1{width:95%!important}.additional{margin-left:6%!important;padding:0!important}.container1{margin-left:-35%}.town-drop{margin:auto;width:100%!important}.dis-flex{display:flex;justify-content:left}.check{display:inherit;width:-moz-max-content;width:max-content;margin-left:6%}.rusty{width:28rem;margin-left:0rem;height:68px!important;font-size:20px!important;font-weight:700!important;margin-bottom:37px}.left-bt{width:28rem;margin-left:-28rem;height:68px!important;font-size:20px!important;font-weight:700!important}.questionalign{text-align:center}.questionalign{margin-top:1rem!important}.largeTitle{padding-left:0!important}.myt-align{margin-left:0%!important}.myt-text1{margin-top:-22px}.myt-text2{margin-top:-20px}.myt-text3{margin-bottom:21px}.date-picker,.dt-time{width:100%}.showminute{margin-top:-.5%}.radioOption{width:auto;margin-top:0;margin-left:7%;margin-right:-3%}.myt-font7{padding-left:0rem;margin-left:-1.5%}.down,.bookText,.book{width:100%;margin-left:0rem}.town{margin-left:0rem;width:100%}.file-upload-box,.file-uploading-box{max-width:85%;margin-left:20px}.question{margin-left:0rem}.btn-text2{width:28rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:28rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 580px){.rusty{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:27rem;margin-left:-27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-24%}.showminute{margin-top:.5%}.bookText,.book{width:100%;margin-left:0rem}.btn-text2{width:27rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:27rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 672px){.questiondiv1{padding:0}}@media screen and (max-width: 525px){.rusty{width:26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-9%}.left-bt{width:26rem;margin-left:-26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.dateandtime{padding-left:10px!important}}@media screen and (max-width: 480px){.answer{margin-top:-7%!important}.icon-edit{margin:0 6px 4px -35%!important}.rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.file-upload-box,.file-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.answer{margin-top:-9%!important}.icon-edit{margin:-9px 1px 4px 4%!important}.rusty,.btn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:0%}.file-upload-box,.file-uploading-box{max-width:100%}.myt-dateTimeNew{margin-left:-10px!important}.form-row{padding-left:8px!important}.dateandtime{padding-left:0!important}.dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.grey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 368px){.icon-edit{margin:0 6px 3px 35%!important}.icon-editios{margin-bottom:4px}.rusty{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:19rem;margin-left:-19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:15%}.radiotext{margin-top:-45px}.file-upload-box,.file-uploading-box{max-width:100%}.grey{width:19rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:19rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.check{display:block}.header2{font-size:20px;font-weight:300;text-align:center;font-stretch:normal;font-style:normal;line-height:1.5;letter-spacing:normal;color:#560d05;max-width:1100px;margin:auto;padding-bottom:10px}.header1{font-size:32px;font-weight:700;text-align:center;font-stretch:normal;font-style:normal;line-height:1.25;letter-spacing:normal;color:#dd2e13}.container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.container1 input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.selbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.selbtngroup{padding-left:.9%!important}}@media (min-width: 481px) and (max-width: 580px){.selbtngroup{padding-left:.2%!important}}@media screen and (min-width: 871px){.selbtngroup{padding-right:4px!important}}@media screen and (max-width: 689px){.answer{max-width:95%!important;margin-left:0!important;margin-right:15px}#progress2{margin-left:8.5px!important}.edit{margin-left:85%!important;margin-bottom:0%!important}.sum-ques,.sum-ques1{width:100%!important;margin:auto}.summary-completed{padding-left:0!important;padding-bottom:17px;margin-top:9px}.summary-top{margin-top:10%}.subTitle1{font-size:18px!important;line-height:1.38!important;text-align:center;letter-spacing:normal;color:#560d05!important;font-weight:300}.backbutton{display:none}.rusty{margin-bottom:37px}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}@media screen and (max-width: 689px){.app-back1{line-height:1.5;cursor:pointer;width:100%;max-width:1200px;margin-right:auto;margin-left:-10px;display:flex;font-family:Helvetica;font-size:21px;font-weight:700;align-items:center;font-stretch:normal;font-style:normal;letter-spacing:normal;color:#dd2e13;z-index:1;position:fixed;background-color:#dedddd;border-radius:0!important;margin-top:-12px;padding-top:.8rem}.header1{padding-top:75px}.dt-time{background-position:100%!important}}.summary-volver{display:none}@media ((min-width: 1200px)){.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i7.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.MyDatePicker, selector: "my-date-picker", inputs: ["placeholder", "locale", "disabled", "options", "defaultMonth", "selDate", "selector"], outputs: ["dateChanged", "inputFieldChanged", "calendarViewChanged", "calendarToggle", "inputFocusBlur"], exportAs: ["mydatepicker"] }, { kind: "component", type: i6$1.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: i12.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: ["certified", "JobPerformerCertificates"], outputs: ["flagDropDownChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None });
3811
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: i4.ActivatedRoute }, { token: i5.DomSanitizer }, { token: i6$1.NgxSpinnerService }, { token: i3.UntypedFormBuilder }, { token: i8.DeviceDetectorService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
3812
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage" }, providers: [ChangeService], usesOnChanges: true, ngImport: i0, template: "<!-- Spinner -->\n<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n\n<!-- Back Processing -->\n<div *ngIf=\"backicon == false\" >\n <div class=\"backicon\" [style.visibility]=\"questionStack.length >0 ? 'visible' : 'hidden'\">\n <button (click)=\"handleBackClick()\" [class]=\" abItem?.Status__c == 'Completed' ? 'summary-volver':'app-back1'\">\n <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.Back__c }}\n </button>\n </div>\n</div>\n\n<!-- Question Hanlding -->\n<div *ngIf=\"questionItem\" [class]=\"qbItem.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n <!-- Progress Bar & Title -->\n <div *ngIf=\"questionItem.Title__c && qbItem.Progress_Bar__c\">\n <h1 class=\"header1\">{{ questionItem?.Title__c }}</h1>\n <div class=\"header2\">{{ questionItem?.SubTitle__c }}</div>\n </div>\n\n <!-- Progress & Grouping -->\n <div [ngClass]=\"{ questiondiv2: !qbItem?.Progress_Bar__c }\">\n <!-- Pie Chart Progress -->\n <div [ngClass]=\"{ bgColor: qbItem?.Progress_Bar__c }\">\n <div id=\"progress\" *ngIf=\"qbItem?.Progress_Bar__c\">\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n [startFromZero]=\"false\" [responsive]=\"false\" >\n </circle-progress>\n </div>\n </div>\n\n <!-- Show the Group/Module related to the Progress -->\n <div *ngIf=\"questionItem.Group__c && qbItem.Progress_Bar__c\"\n [ngClass]=\"{ questionalign: !qbItem?.Progress_Bar__c }\">\n <div class=\"largeTitle\">\n <h3 class=\"myt-font6 myt-text3\">\n {{ questionItem?.Group__c }}\n </h3>\n <div *ngIf=\"questionItem.Sub_Text__c != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.Sub_Text__c}}</div>\n <div *ngIf=\"questionItem.Sub_Text__c === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.Sub_Text__c}}</div>\n </div>\n </div>\n </div>\n\n <!-- Question Handling -->\n <div class=\"questiondiv2\">\n <!-- Title -->\n <div *ngIf=\"questionItem.Is_Title__c\">\n <div *ngIf=\"questionItem.Type__c != 'Book' && questionItem.Question_No__c!='6' && questionItem.Question_No__c!='9'\"> \n <h3 class=\"questionalign myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n {{questionItem?.Question_Text__c}}\n </h3>\n </div>\n </div>\n <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n <div *ngIf=\"!questionItem.Is_Title__c\" [class]=\"qbItem.isShengel__c ? 'header-style' : 'question-f-size'\">\n <div [innerHTML]=\"getText(questionItem?.Question_Text__c)\" >\n {{ questionItem?.Question_Text__c }}\n </div>\n </div>\n\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <div *ngIf=\"questionItem.Type__c == 'Book'\">\n <div *ngIf=\"questionItem.Question_No__c=='6'\">\n <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n {{ questionItem?.Question_Text__c }}\n </h3>\n </div>\n </div>\n \n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <div *ngIf=\"questionItem.Type__c == 'File' \">\n <div *ngIf=\"questionItem.Question_No__c=='9'\">\n <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n {{questionItem?.Question_Text__c}}\n </h3>\n </div>\n </div>\n </div>\n\n <!-- Additional Info -->\n <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n <div *ngIf=\"questionItem.Additional_Rich__c && qbItem.Progress_Bar__c\" >\n <div\n class=\"additional \" [innerHTML]=\"innerhtml\">\n </div>\n </div>\n <div *ngIf=\"questionItem.Additional_Rich__c && !qbItem.Progress_Bar__c\">\n <div class=\"info-alert ques-alert1\">\n <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\n <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n </div>\n </div>\n\n <!-- Dropdown-->\n <div *ngIf=\"dropdownFlag\" >\n <div class=\"dis-flex\">\n <select \n [ngClass]=\"{\n 'dt-line myt-align3 myt-align2 dpDown dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.Progress_Bar__c,\n 'custom-select': !qbItem?.Progress_Bar__c\n }\" class=\"mr-sm-2 dd-height dropbox \" id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\" style=\"margin-left: 21.5rem !important;\">\n <option *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"option\" value=\"{{ opt.Value__c }}\">\n {{ opt.Value__c }}\n </option>\n <!-- HA 20DEC23 For Translation -->\n <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\n </select>\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n {{ questionItem?.Error_Message__c }}\n </div>\n <div class=\"dis-flex\">\n <div *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"radio radioOption\" >\n <label class=\"radiocontainer container myt-font4\">{{ opt.Value__c }}\n <input type=\"radio\" [id]=\"opt.Id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" value=\"{{ opt.Value__c }}\"\n (change)=\"optionChange(opt.Value__c)\" />\n<!-- HA 20FEB24 Removed checkmark as it was causing styling issue in Radio -->\n </label>\n </div>\n </div>\n </div>\n\n <!-- Checkbox -->\n <div *ngIf=\"checkboxFlag\" class=\"\">\n <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n {{ questionItem?.Error_Message__c }}\n </div>\n <div class=\"dis-flex\">\n <div *ngFor=\"let item of optionValues\" class=\"radio col-md-6 optiondiv\">\n <label class=\" container1 \" >{{ item.Value__c }}\n <input type=\"checkbox\" [id]=\"item.Id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n<!-- HA 20FEB24 Removed checkmark1 as it was causing styling issue in Radio -->\n </label>\n </div>\n </div>\n </div>\n\n <!-- Text -->\n <div *ngIf=\"textFlag\" class=\"col-md-12 myt-book1\">\n <!-- HA 31-JAN-24 To reduce the margin -->\n <div class=\"col-md-12\" class=\"dis-flex myt-align2\" [class]=\"'col-md-' + questionItem?.Size__c + ' paddingnone'\">\n <input type=\"text\" [(ngModel)]=\"inpValue\" [ngClass]=\"{\n 'boxoutline myt-font1 myt-book1': qbItem?.Progress_Bar__c,\n textBox1: !qbItem?.Progress_Bar__c\n }\" id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n\n <!-- Text Area -->\n <div *ngIf=\"taFlag\" class=\"col-md-12\">\n <div class=\"dis-flex\">\n <textarea class=\"ta-input\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : inpValue?.length > 0 && taFocusOut\n ? '#87be1c'\n : ''\n }}\" (focusout)=\"taFocusOut = true\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\"></i>\n </div>\n </div>\n\n <!-- CC Number Format -->\n <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n <div class=\"dis-flex\">\n <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\"\n [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\n *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n <!-- END-->\n\n <!-- AlphaNumeric -->\n <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n <div style=\"position:relative;\">\n <!-- HA 20DEC23 For Translation -->\n <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n <div class=\"dis-flex\">\n <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\n *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n\n <!-- DateTime -->\n <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero myt-time1\" >\n <!-- Error Handling -->\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n <!-- Date -->\n <div *ngIf=\"dateFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n <div class=\"dis-flex\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, '')\"\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\n </my-date-picker>\n </div>\n </div>\n </div>\n\n <!-- Time -->\n <div *ngIf=\"timeFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n <div class=\"dis-flex\">\n <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n dateandTime: !qbItem?.Progress_Bar__c}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem?.X24_Hours__c == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n <!-- <div [ngClass]=\"{'': qbItem.Progress_Bar__c, 'dateandTime': !qbItem.Progress_Bar__c}\"></div> -->\n </div>\n </div>\n </div>\n </div>\n <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n </div>\n </div>\n\n <!-- Attachment / File -->\n <div *ngIf=\"fileFlag\">\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\n <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n <label class=\"picture-upload\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\n <i class=\"\" aria-hidden=\"true\"></i>\n </span>\n </label>\n </div>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event)\" />\n </div>\n <ul *ngIf=\"\n attachments?.length > 0 &&\n questionItem?.Type__c === 'File' &&\n !qbItem?.Progress_Bar__c\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n\n <!-- Attachment Progress -->\n <div *ngIf=\"qbItem.Progress_Bar__c\">\n <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n \n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\"> {{ questionItem?.Question_Text__c}}</span>\n <label class=\"file-label \">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n\n <!-- Book -->\n <div *ngIf=\"bookFlag\">\n <div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\" [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\n *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.Id\">\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\n <span>{{ ques?.Question_Text__c }}</span>\n </div>\n <div class=\"col-md-12 paddingZero myt-dateTimeNew\" *ngIf=\"ques.Type__c === 'Time' || ques.Type__c === 'Date'\">\n <div *ngIf=\"ques.Type__c === 'Date'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n <div class=\"dateandtime\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\" >\n </my-date-picker>\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.Type__c === 'Time'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n <div class=\"dateandtime\">\n <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n dateandTime: !qbItem?.Progress_Bar__c}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem.X24_Hours__c == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n </div>\n <div *ngIf=\"ques.Type__c === 'Text'\">\n <app-custom-input\n [value]=\"ques?.input\"\n [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n textBox: !qbItem.Progress_Bar__c\n }\"\n [question]=\"ques\" \n [idValue]=\"ques?.Tracking_ID__c\"\n [focusEvent]=\"clearSQError(ques?.Id)\"\n [error]=\"ques?.error\"\n [placeholder]=\"ques?.Question__c\"\n (inputValue)=\"selectedInput($event,ques)\">\n </app-custom-input>\n </div>\n <div *ngIf=\"ques.Type__c === 'Location'\">\n <!-- for pick location -->\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n </div>\n <!-- for text area -->\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.Type__c === 'Email'\">\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n </div>\n\n <div *ngIf=\"ques.Type__c === 'File'\">\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\n <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"\n fa fa-plus fa-2x\n picture-upload-child\n pic-upload\n icolor\n \">\n <i class=\"\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n </div>\n\n <ul *ngIf=\"\n attachments?.length > 0 &&\n ques.Type__c === 'File' &&\n !qbItem.Progress_Bar__c\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n <div class=\"myt-box\" *ngIf=\"qbItem.Progress_Bar__c\">\n\n <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n <span class=\"f-Name\">{{ ques?.Question__c }}</span>\n <label class=\"file-label \">\n <span style=\"color: #c5281c;text-decoration:underline\">\n {{'attach' | i18n:i18nService.currentLanguage}}\n </span>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n <app-custom-table \n [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-table>\n </div>\n\n <!-- Dropdown -->\n <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\n <!-- for common dropdown -->\n <!-- HA 20DEC23 For Translation -->\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\"\n [options]=\"ques.Question_Options__r.records\"\n [apiMeta]=\"ques.Sub_Text__c\"\n [id]=\"ques.Name\"\n [selectedValue]=\"ques.input\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques?.Error_Message__c\"\n [error]=\"ques?.error\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-dropdown>\n <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\" [certified]=\"ques.certifiedFlag\" [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n </div> \n </div>\n </div>\n </div>\n </div>\n\n <!--List start-->\n <div *ngIf=\"listFlag\">\n <div class=\"form-group\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div class=\"myt-align3\" [class]=\"'col-md-' + ques.Size__c + ' paddingnone'\"\n *ngFor=\"let ques of getLocalSubQuestions(questionItem.Id);let i = index\">\n <div>\n <span class=\"dis-flex myt-font3 myt-font7\">{{ ques?.Question__c }}</span>\n </div>\n <div *ngIf=\"ques.Type__c === 'Text'\">\n <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n textBox: !qbItem.Progress_Bar__c\n }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n </div>\n </div>\n <div class=\"\" *ngIf=\"addFlag\">\n <!-- HA 20DEC23 For Translation -->\n <button (click)=\"Add(getLocalSubQuestions(questionItem.Id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\n </div>\n </div>\n </div>\n </div>\n <!--List End-->\n\n <!-- Actions -->\n <div *ngIf=\"individualBookButton\" class=\"flexer\">\n <!-- Backward / Back -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"backbutton\" [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\"\n [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.Back__c\">\n <div [ngClass]=\"{}\">\n <button [ngClass]=\"{\n 'left-bt': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n !qbItem.Progress_Bar__c\n }\" (click)=\"handleBackClick()\">\n {{ qbItem?.Back__c }}\n </button>\n </div>\n </div>\n\n <!-- Forward / Next -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\" *ngIf=\"qbItem.Next__c\">\n <div>\n <button [ngClass]=\"{\n 'rusty': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n !qbItem.Progress_Bar__c\n }\" (click)=\"handleNextClick()\">\n {{ qbItem.Next__c }}\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n 'col-md-12':!qbItem.Progress_Bar__c\n }\">\n <h1 class=\"header1 summarypadd\" >{{ qbItem.SubTitle__c }}</h1> \n <div id=\"progress2\" *ngIf=\"!qbItem.Progress_Bar__c && this.abItem.Status__c != 'Completed' \">\n <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n <div *ngFor=\"let qa of summary\">\n <div [ngClass]=\"{ non: qbItem.Progress_Bar__c }\">\n <div [ngClass]=\"{ summary: !qbItem.Progress_Bar__c }\">\n <div *ngIf=\"!qbItem.Edit__c\"\n [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n </div>\n <div *ngIf=\"qbItem.Edit__c\"\n [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n <div [ngClass]=\"{ 'question': this.abItem.Status__c === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\">\n {{ qa.quesValue }}\n </div>\n </div>\n <div class=\"answer\" >\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <!-- HA 02FEB24 Displaying the in summary for book type -->\n <div *ngIf=\"qa.qTyp == 'Book'\">\n <div *ngFor=\"let val of qa.myVal\">\n <p>{{ val.Question_Text__c }}: <span>{{ val.input }}</span></p>\n </div>\n </div>\n <!-- HA 02FEB24 Displaying the value for direct question -->\n <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.Question_Text__c }}: <span></span>{{ qa.ansValue }}</div>\n <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"this.abItem.Status__c === 'Completed'\" class=\"col-lg-12\">\n <div class=\"panel-group panel-group-joined\" id=\"ePTW-details\">\n <div class=\"panel panel-default\">\n <div class=\"panel-heading\">\n <h4 class=\"panel-title\">\n <!-- HA 20DEC23 For Translation -->\n <a data-toggle=\"collapse\" data-parent=\"#ePTW-details\" href=\"#collapseOne\" class=\"collapsed\">\n {{'details' | i18n:i18nService.currentLanguage}}\n </a>\n </h4>\n </div>\n <div id=\"collapseOne\" class=\"panel-collapse collapse\">\n <div class=\"panel-body\">\n <div class=\"row\">\n <ng-container *ngFor=\"let item of summaryData; let i = index\">\n <ng-container *ngIf=\"i % 2 === 0\">\n <div class=\"col-lg-6 m-b-30\">\n <label>{{ getKey(item) }}</label>\n <p class=\"font-size\">{{ getValue(item) || 'N/A' }}</p>\n </div>\n <div class=\"col-lg-6\" *ngIf=\"summaryData[i + 1]\">\n <label>{{ getKey(summaryData[i + 1]) }}</label>\n <p class=\"font-size\">{{ getValue(summaryData[i + 1]) || 'N/A' }}</p>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div id=\"progress2\" *ngIf=\"qbItem.Progress_Bar__c \">\n <div [ngClass]=\"{'bgColor summary-top' : qbItem.Progress_Bar__c }\" >\n <div id=\"progress-summary\" *ngIf=\"qbItem.Progress_Bar__c\">\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n [startFromZero]=\"false\" [responsive]=\"false\" >\n </circle-progress>\n \n <div *ngIf=\"qbItem.Summary_Text__c && qbItem.Progress_Bar__c\" \n [ngClass]=\"{ summaryTitle: qbItem.Progress_Bar__c }\">\n <h3 class=\"subTitle\" >{{ qbItem.Summary_Text__c }}</h3>\n <div *ngIf=\"abItem.Status__c != 'Completed'\" class=\"subTitle1\" >{{ qbItem.Summary_Sub_Text__c}}</div>\n </div>\n </div>\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\n <h3 class=\"summary-h\">\n {{ qbItem.Summary_Text__c }}\n </h3>\n </div>\n </div>\n <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n <div class=\"summary-groupText myt-font2\">\n <!-- <p>Informe de da\u00F1o</p> -->\n </div>\n <div *ngFor=\"let qa of summary\" >\n <div [ngClass]=\"{ non: qbItem.Progress_Bar__c }\">\n <div [ngClass]=\"{ summary: this.abItem.Status__c != 'Completed' && !qbItem.Progress_Bar__c }\">\n <div *ngIf=\"!qbItem.Edit__c\"\n [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n </div>\n <div *ngIf=\"qbItem.Edit__c\"\n [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.Status__c === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\">\n {{ qa.quesValue }}\n </div>\n </div>\n <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n </button>\n </div>\n \n <div class=\"answer \" >\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <div *ngIf=\"qa.qTyp != 'File'\">\n {{ qa.ansValue }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Answer Book -->\n <div class=\"flexer1\" *ngIf=\"abItem\">\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"\" *ngIf=\"abItem.Status__c == 'Completed' && qbItem.Cancel__c\">\n <div class=\"col-md-12\">\n <button [ngClass]=\"{'btn-text': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\"\n (click)=\"handleCancelClick()\">\n {{ qbItem.Cancel__c }}\n </button>\n </div>\n </div>\n </div>\n\n <!-- Group Actions -->\n <div class=\"align-edit-submit\" *ngIf=\"abItem.Status__c != 'Completed'\">\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"col-md-6\" *ngIf=\"qbItem.Submit__c\">\n <button [ngClass]=\"{ 'btn-text2': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c }\" \n (click)=\"handleSubmitClick()\">\n {{ qbItem.Submit__c }}\n </button>\n </div>\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"col-md-6\" *ngIf=\"qbItem.Edit__c\">\n <button [ngClass]=\"{'grey': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\" \n (click)=\"handleBackClickNew()\">\n {{ qbItem.Edit__c }}\n </button>\n </div>\n </div>\n\n</div>", styles: [".rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.edit{background-color:#dedddd;border:none;color:#c5281c;text-decoration:underline;margin-left:50%;font-size:16px;vertical-align:super;font-weight:700}.icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.icon-edit1,.icon-edit-summary{width:29px;height:28px}.questiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.questiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.questiondiv2{padding-left:0!important;padding-bottom:0!important}@media screen and (min-width: 689px){#progress,#progress-summary{padding-left:12px}.backicon{display:none}.dt-time{background-position:98%!important}}.bgColor{text-align:center;background-color:#dedddd}.questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.largeTitle{padding-left:16px;padding-top:12px}.question-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1.5;padding:.5rem 1rem;width:100%;cursor:pointer;outline:0}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.radiotext{margin-top:-30px}.radiocontainer{display:flex;flex-direction:row-reverse;border:1px solid none;border-radius:.3em;padding:0;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#a3a2a2}.radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.myt-time{width:-moz-fit-content!important;width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.showminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.myt-dateTimeNew{margin-left:-14px}.myt-hour{width:-moz-fit-content;width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.date-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.dis-flex{display:flex;justify-content:center}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin-left:-17px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.question{padding:10px;font-size:14px;color:#007bff}.question1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.answer{display:flex;align-items:baseline;padding:5px 5px 10px;font-size:14px;font-weight:400;word-wrap:break-word;width:97%;justify-content:space-between}.answer1{max-width:55%;margin-left:auto;margin-right:auto;color:#a3a2a2;margin-top:0%;padding-bottom:0;font-size:14px;font-weight:400;word-wrap:break-word;text-align:left;background:#dedddd;border-bottom:1px solid #fff}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.sum-ques{width:55%;margin:auto}.sum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#F8F8F8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.file-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.file-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.subTitle1{color:#560d05;font-size:14px;font-weight:500}.check-icon{color:#87be1c;margin-left:-2rem;z-index:1;padding:5px;margin-top:.4rem}.check-icon2{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:.6rem;line-height:3}.check-icon3{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.grey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.btn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.btn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;width:100%;display:flex;justify-content:center}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.down{margin-left:0;width:57%}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.dropbox{margin-left:21.5rem}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.summary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.myt-align{margin-left:4%;line-height:2}.myt-align1{margin-left:-29px}.myt-align2{margin-left:-15px}.myt-align3{width:100%}.myt-book1{margin-top:-20px}.colorf{color:#555}.bookText{width:57%;margin-left:21.5%;background-color:#dedddd}.book{width:32.6%;margin-left:34%;background-color:#dedddd}.summary-completed{padding-left:2%;margin-top:20px}.town{margin:0;background-color:#dedddd}.town-drop{margin:auto;width:57%}.questiondiv1.padd-bottom{padding-bottom:6rem!important;padding-top:2rem!important}@media (max-width: 1090px){.icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (max-width: 768px){.radioOption{width:8%}.grey{width:78%;margin-left:17.5rem;height:68px!important;font-size:20px!important;font-weight:700!important}.answer{margin-top:-4%!important}}@media screen and (max-width: 672px){.header1{font-size:23px!important}.summarypadd{padding-top:50px!important}.answer{margin-top:-5%!important}.icon-edit{margin:0 6px 0 -13%!important}.subTitle1{width:95%!important}.additional{margin-left:6%!important;padding:0!important}.container1{margin-left:-35%}.town-drop{margin:auto;width:100%!important}.dis-flex{display:flex;justify-content:left}.check{display:inherit;width:-moz-max-content;width:max-content;margin-left:6%}.rusty{width:28rem;margin-left:0rem;height:68px!important;font-size:20px!important;font-weight:700!important;margin-bottom:37px}.left-bt{width:28rem;margin-left:-28rem;height:68px!important;font-size:20px!important;font-weight:700!important}.questionalign{text-align:center}.questionalign{margin-top:1rem!important}.largeTitle{padding-left:0!important}.myt-align{margin-left:0%!important}.myt-text1{margin-top:-22px}.myt-text2{margin-top:-20px}.myt-text3{margin-bottom:21px}.date-picker,.dt-time{width:100%}.showminute{margin-top:-.5%}.radioOption{width:auto;margin-top:0;margin-left:7%;margin-right:-3%}.myt-font7{padding-left:0rem;margin-left:-1.5%}.down,.bookText,.book{width:100%;margin-left:0rem}.town{margin-left:0rem;width:100%}.file-upload-box,.file-uploading-box{max-width:85%;margin-left:20px}.question{margin-left:0rem}.btn-text2{width:28rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:28rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 580px){.rusty{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:27rem;margin-left:-27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-24%}.showminute{margin-top:.5%}.bookText,.book{width:100%;margin-left:0rem}.btn-text2{width:27rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:27rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 672px){.questiondiv1{padding:0}}@media screen and (max-width: 525px){.rusty{width:26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-9%}.left-bt{width:26rem;margin-left:-26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.dateandtime{padding-left:10px!important}}@media screen and (max-width: 480px){.answer{margin-top:-7%!important}.icon-edit{margin:0 6px 4px -35%!important}.rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.file-upload-box,.file-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.answer{margin-top:-9%!important}.icon-edit{margin:-9px 1px 4px 4%!important}.rusty,.btn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:0%}.file-upload-box,.file-uploading-box{max-width:100%}.myt-dateTimeNew{margin-left:-10px!important}.form-row{padding-left:8px!important}.dateandtime{padding-left:0!important}.dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.grey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 368px){.icon-edit{margin:0 6px 3px 35%!important}.icon-editios{margin-bottom:4px}.rusty{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:19rem;margin-left:-19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:15%}.radiotext{margin-top:-45px}.file-upload-box,.file-uploading-box{max-width:100%}.grey{width:19rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:19rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.check{display:block}.header2{font-size:20px;font-weight:300;text-align:center;font-stretch:normal;font-style:normal;line-height:1.5;letter-spacing:normal;color:#560d05;max-width:1100px;margin:auto;padding-bottom:10px}.header1{font-size:32px;font-weight:700;text-align:center;font-stretch:normal;font-style:normal;line-height:1.25;letter-spacing:normal;color:#dd2e13}.container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.container1 input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.selbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.selbtngroup{padding-left:.9%!important}}@media (min-width: 481px) and (max-width: 580px){.selbtngroup{padding-left:.2%!important}}@media screen and (min-width: 871px){.selbtngroup{padding-right:4px!important}}@media screen and (max-width: 689px){.answer{max-width:95%!important;margin-left:0!important;margin-right:15px}#progress2{margin-left:8.5px!important}.edit{margin-left:85%!important;margin-bottom:0%!important}.sum-ques,.sum-ques1{width:100%!important;margin:auto}.summary-completed{padding-left:0!important;padding-bottom:17px;margin-top:9px}.summary-top{margin-top:10%}.subTitle1{font-size:18px!important;line-height:1.38!important;text-align:center;letter-spacing:normal;color:#560d05!important;font-weight:300}.backbutton{display:none}.rusty{margin-bottom:37px}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}@media screen and (max-width: 689px){.app-back1{line-height:1.5;cursor:pointer;width:100%;max-width:1200px;margin-right:auto;margin-left:-10px;display:flex;font-family:Helvetica;font-size:21px;font-weight:700;align-items:center;font-stretch:normal;font-style:normal;letter-spacing:normal;color:#dd2e13;z-index:1;position:fixed;background-color:#dedddd;border-radius:0!important;margin-top:-12px;padding-top:.8rem}.header1{padding-top:75px}.dt-time{background-position:100%!important}}.summary-volver{display:none}@media ((min-width: 1200px)){.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.MyDatePicker, selector: "my-date-picker", inputs: ["placeholder", "locale", "disabled", "options", "defaultMonth", "selDate", "selector"], outputs: ["dateChanged", "inputFieldChanged", "calendarViewChanged", "calendarToggle", "inputFocusBlur"], exportAs: ["mydatepicker"] }, { kind: "component", type: i6$1.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: i12.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: ["certified", "JobPerformerCertificates"], outputs: ["flagDropDownChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None });
3763
3813
  }
3764
3814
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionnaireComponent, decorators: [{
3765
3815
  type: Component,
3766
3816
  args: [{ selector: "lib-questionnaire", encapsulation: ViewEncapsulation.None, providers: [ChangeService], template: "<!-- Spinner -->\n<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n\n<!-- Back Processing -->\n<div *ngIf=\"backicon == false\" >\n <div class=\"backicon\" [style.visibility]=\"questionStack.length >0 ? 'visible' : 'hidden'\">\n <button (click)=\"handleBackClick()\" [class]=\" abItem?.Status__c == 'Completed' ? 'summary-volver':'app-back1'\">\n <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.Back__c }}\n </button>\n </div>\n</div>\n\n<!-- Question Hanlding -->\n<div *ngIf=\"questionItem\" [class]=\"qbItem.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n <!-- Progress Bar & Title -->\n <div *ngIf=\"questionItem.Title__c && qbItem.Progress_Bar__c\">\n <h1 class=\"header1\">{{ questionItem?.Title__c }}</h1>\n <div class=\"header2\">{{ questionItem?.SubTitle__c }}</div>\n </div>\n\n <!-- Progress & Grouping -->\n <div [ngClass]=\"{ questiondiv2: !qbItem?.Progress_Bar__c }\">\n <!-- Pie Chart Progress -->\n <div [ngClass]=\"{ bgColor: qbItem?.Progress_Bar__c }\">\n <div id=\"progress\" *ngIf=\"qbItem?.Progress_Bar__c\">\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n [startFromZero]=\"false\" [responsive]=\"false\" >\n </circle-progress>\n </div>\n </div>\n\n <!-- Show the Group/Module related to the Progress -->\n <div *ngIf=\"questionItem.Group__c && qbItem.Progress_Bar__c\"\n [ngClass]=\"{ questionalign: !qbItem?.Progress_Bar__c }\">\n <div class=\"largeTitle\">\n <h3 class=\"myt-font6 myt-text3\">\n {{ questionItem?.Group__c }}\n </h3>\n <div *ngIf=\"questionItem.Sub_Text__c != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.Sub_Text__c}}</div>\n <div *ngIf=\"questionItem.Sub_Text__c === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.Sub_Text__c}}</div>\n </div>\n </div>\n </div>\n\n <!-- Question Handling -->\n <div class=\"questiondiv2\">\n <!-- Title -->\n <div *ngIf=\"questionItem.Is_Title__c\">\n <div *ngIf=\"questionItem.Type__c != 'Book' && questionItem.Question_No__c!='6' && questionItem.Question_No__c!='9'\"> \n <h3 class=\"questionalign myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n {{questionItem?.Question_Text__c}}\n </h3>\n </div>\n </div>\n <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n <div *ngIf=\"!questionItem.Is_Title__c\" [class]=\"qbItem.isShengel__c ? 'header-style' : 'question-f-size'\">\n <div [innerHTML]=\"getText(questionItem?.Question_Text__c)\" >\n {{ questionItem?.Question_Text__c }}\n </div>\n </div>\n\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <div *ngIf=\"questionItem.Type__c == 'Book'\">\n <div *ngIf=\"questionItem.Question_No__c=='6'\">\n <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n {{ questionItem?.Question_Text__c }}\n </h3>\n </div>\n </div>\n \n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n <div *ngIf=\"questionItem.Type__c == 'File' \">\n <div *ngIf=\"questionItem.Question_No__c=='9'\">\n <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n {{questionItem?.Question_Text__c}}\n </h3>\n </div>\n </div>\n </div>\n\n <!-- Additional Info -->\n <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n <div *ngIf=\"questionItem.Additional_Rich__c && qbItem.Progress_Bar__c\" >\n <div\n class=\"additional \" [innerHTML]=\"innerhtml\">\n </div>\n </div>\n <div *ngIf=\"questionItem.Additional_Rich__c && !qbItem.Progress_Bar__c\">\n <div class=\"info-alert ques-alert1\">\n <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\n <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n </div>\n </div>\n\n <!-- Dropdown-->\n <div *ngIf=\"dropdownFlag\" >\n <div class=\"dis-flex\">\n <select \n [ngClass]=\"{\n 'dt-line myt-align3 myt-align2 dpDown dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.Progress_Bar__c,\n 'custom-select': !qbItem?.Progress_Bar__c\n }\" class=\"mr-sm-2 dd-height dropbox \" id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\" style=\"margin-left: 21.5rem !important;\">\n <option *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"option\" value=\"{{ opt.Value__c }}\">\n {{ opt.Value__c }}\n </option>\n <!-- HA 20DEC23 For Translation -->\n <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\n </select>\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n {{ questionItem?.Error_Message__c }}\n </div>\n <div class=\"dis-flex\">\n <div *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"radio radioOption\" >\n <label class=\"radiocontainer container myt-font4\">{{ opt.Value__c }}\n <input type=\"radio\" [id]=\"opt.Id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" value=\"{{ opt.Value__c }}\"\n (change)=\"optionChange(opt.Value__c)\" />\n<!-- HA 20FEB24 Removed checkmark as it was causing styling issue in Radio -->\n </label>\n </div>\n </div>\n </div>\n\n <!-- Checkbox -->\n <div *ngIf=\"checkboxFlag\" class=\"\">\n <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n {{ questionItem?.Error_Message__c }}\n </div>\n <div class=\"dis-flex\">\n <div *ngFor=\"let item of optionValues\" class=\"radio col-md-6 optiondiv\">\n <label class=\" container1 \" >{{ item.Value__c }}\n <input type=\"checkbox\" [id]=\"item.Id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n<!-- HA 20FEB24 Removed checkmark1 as it was causing styling issue in Radio -->\n </label>\n </div>\n </div>\n </div>\n\n <!-- Text -->\n <div *ngIf=\"textFlag\" class=\"col-md-12 myt-book1\">\n <!-- HA 31-JAN-24 To reduce the margin -->\n <div class=\"col-md-12\" class=\"dis-flex myt-align2\" [class]=\"'col-md-' + questionItem?.Size__c + ' paddingnone'\">\n <input type=\"text\" [(ngModel)]=\"inpValue\" [ngClass]=\"{\n 'boxoutline myt-font1 myt-book1': qbItem?.Progress_Bar__c,\n textBox1: !qbItem?.Progress_Bar__c\n }\" id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n\n <!-- Text Area -->\n <div *ngIf=\"taFlag\" class=\"col-md-12\">\n <div class=\"dis-flex\">\n <textarea class=\"ta-input\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n this.questionItem?.error\n ? 'red'\n : inpValue?.length > 0 && taFocusOut\n ? '#87be1c'\n : ''\n }}\" (focusout)=\"taFocusOut = true\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\"></i>\n </div>\n </div>\n\n <!-- CC Number Format -->\n <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n <div class=\"dis-flex\">\n <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\"\n [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\n *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n <!-- END-->\n\n <!-- AlphaNumeric -->\n <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n <div style=\"position:relative;\">\n <!-- HA 20DEC23 For Translation -->\n <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n <div class=\"dis-flex\">\n <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n this.questionItem.error\n ? 'red'\n : inpValue?.length > 0\n ? '#87be1c'\n : ''\n }}\" />\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\n *ngIf=\"inpValue?.length > 0\"></i>\n </div>\n </div>\n\n <!-- DateTime -->\n <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero myt-time1\" >\n <!-- Error Handling -->\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n <!-- Date -->\n <div *ngIf=\"dateFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n <div class=\"dis-flex\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, '')\"\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\n </my-date-picker>\n </div>\n </div>\n </div>\n\n <!-- Time -->\n <div *ngIf=\"timeFlag\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n <div class=\"dis-flex\">\n <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n dateandTime: !qbItem?.Progress_Bar__c}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem?.X24_Hours__c == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n <!-- <div [ngClass]=\"{'': qbItem.Progress_Bar__c, 'dateandTime': !qbItem.Progress_Bar__c}\"></div> -->\n </div>\n </div>\n </div>\n </div>\n <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n </div>\n </div>\n\n <!-- Attachment / File -->\n <div *ngIf=\"fileFlag\">\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\n <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n <label class=\"picture-upload\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\n <i class=\"\" aria-hidden=\"true\"></i>\n </span>\n </label>\n </div>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event)\" />\n </div>\n <ul *ngIf=\"\n attachments?.length > 0 &&\n questionItem?.Type__c === 'File' &&\n !qbItem?.Progress_Bar__c\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n\n <!-- Attachment Progress -->\n <div *ngIf=\"qbItem.Progress_Bar__c\">\n <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n \n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\"> {{ questionItem?.Question_Text__c}}</span>\n <label class=\"file-label \">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n\n <!-- Book -->\n <div *ngIf=\"bookFlag\">\n <div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\" [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\n *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.Id\">\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\n <span>{{ ques?.Question_Text__c }}</span>\n </div>\n <div class=\"col-md-12 paddingZero myt-dateTimeNew\" *ngIf=\"ques.Type__c === 'Time' || ques.Type__c === 'Date'\">\n <div *ngIf=\"ques.Type__c === 'Date'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label> -->\n <div class=\"dateandtime\">\n <!-- HA 20DEC23 For Translation -->\n <!-- HA 02FEB24 Additional param to update the question -->\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\" >\n </my-date-picker>\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.Type__c === 'Time'\">\n <div class=\"col-md-12 paddingBottom\">\n <!-- <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label> -->\n <div class=\"dateandtime\">\n <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n dateandTime: !qbItem?.Progress_Bar__c}\" \n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n (focus)=\"(clearSQError) \">\n <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n (focus)=\"clearError()\">\n <option value=\"\">HH</option>\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n {{ hour }}\n </option>\n </select>\n <span class=\"colon\"> : </span>\n <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n (focus)=\"clearError()\">\n <option value=\"\">MM</option>\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n {{ minute }}\n </option>\n </select>\n <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem.X24_Hours__c == false\">\n <span class=\"colon\"> : </span>\n <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n <option value=\"AM\">AM</option>\n <option value=\"PM\">PM</option>\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n </div>\n <div *ngIf=\"ques.Type__c === 'Text'\">\n <app-custom-input\n [value]=\"ques?.input\"\n [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n textBox: !qbItem.Progress_Bar__c\n }\"\n [question]=\"ques\" \n [idValue]=\"ques?.Tracking_ID__c\"\n [focusEvent]=\"clearSQError(ques?.Id)\"\n [error]=\"ques?.error\"\n [placeholder]=\"ques?.Question__c\"\n (inputValue)=\"selectedInput($event,ques)\">\n </app-custom-input>\n </div>\n <div *ngIf=\"ques.Type__c === 'Location'\">\n <!-- for pick location -->\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n </div>\n <!-- for text area -->\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.Type__c === 'Email'\">\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n </div>\n\n <div *ngIf=\"ques.Type__c === 'File'\">\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\n <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n <span class=\"picture-upload-child\">\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"\n fa fa-plus fa-2x\n picture-upload-child\n pic-upload\n icolor\n \">\n <i class=\"\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n </div>\n\n <ul *ngIf=\"\n attachments?.length > 0 &&\n ques.Type__c === 'File' &&\n !qbItem.Progress_Bar__c\n \" class=\"attach-ulist col-md-12\">\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n {{ attachment.attachmentName\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n </li>\n </ul>\n <div class=\"myt-box\" *ngIf=\"qbItem.Progress_Bar__c\">\n\n <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\n </div>\n <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n <span class=\"f-Name\">{{ ques?.Question__c }}</span>\n <label class=\"file-label \">\n <span style=\"color: #c5281c;text-decoration:underline\">\n {{'attach' | i18n:i18nService.currentLanguage}}\n </span>\n <!-- HA 20DEC23 For Translation -->\n <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n class=\"file-upload-btn\">\n </label>\n </div>\n </div>\n </div>\n\n <!-- Table -->\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n <app-custom-table \n [question]=\"ques\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-table>\n </div>\n\n <!-- Dropdown -->\n <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\n <!-- for common dropdown -->\n <!-- HA 20DEC23 For Translation -->\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\"\n [options]=\"ques.Question_Options__r.records\"\n [apiMeta]=\"ques.Sub_Text__c\"\n [id]=\"ques.Name\"\n [selectedValue]=\"ques.input\"\n placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques?.Error_Message__c\"\n [error]=\"ques?.error\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-dropdown>\n <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\" [certified]=\"ques.certifiedFlag\" [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n </div> \n </div>\n </div>\n </div>\n </div>\n\n <!--List start-->\n <div *ngIf=\"listFlag\">\n <div class=\"form-group\">\n <div class=\"form-row\">\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\n <div class=\"myt-align3\" [class]=\"'col-md-' + ques.Size__c + ' paddingnone'\"\n *ngFor=\"let ques of getLocalSubQuestions(questionItem.Id);let i = index\">\n <div>\n <span class=\"dis-flex myt-font3 myt-font7\">{{ ques?.Question__c }}</span>\n </div>\n <div *ngIf=\"ques.Type__c === 'Text'\">\n <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n textBox: !qbItem.Progress_Bar__c\n }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\"\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n </div>\n </div>\n <div class=\"\" *ngIf=\"addFlag\">\n <!-- HA 20DEC23 For Translation -->\n <button (click)=\"Add(getLocalSubQuestions(questionItem.Id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\n </div>\n </div>\n </div>\n </div>\n <!--List End-->\n\n <!-- Actions -->\n <div *ngIf=\"individualBookButton\" class=\"flexer\">\n <!-- Backward / Back -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"backbutton\" [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\"\n [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.Back__c\">\n <div [ngClass]=\"{}\">\n <button [ngClass]=\"{\n 'left-bt': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n !qbItem.Progress_Bar__c\n }\" (click)=\"handleBackClick()\">\n {{ qbItem?.Back__c }}\n </button>\n </div>\n </div>\n\n <!-- Forward / Next -->\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\" *ngIf=\"qbItem.Next__c\">\n <div>\n <button [ngClass]=\"{\n 'rusty': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n !qbItem.Progress_Bar__c\n }\" (click)=\"handleNextClick()\">\n {{ qbItem.Next__c }}\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n 'col-md-12':!qbItem.Progress_Bar__c\n }\">\n <h1 class=\"header1 summarypadd\" >{{ qbItem.SubTitle__c }}</h1> \n <div id=\"progress2\" *ngIf=\"!qbItem.Progress_Bar__c && this.abItem.Status__c != 'Completed' \">\n <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n <div *ngFor=\"let qa of summary\">\n <div [ngClass]=\"{ non: qbItem.Progress_Bar__c }\">\n <div [ngClass]=\"{ summary: !qbItem.Progress_Bar__c }\">\n <div *ngIf=\"!qbItem.Edit__c\"\n [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n </div>\n <div *ngIf=\"qbItem.Edit__c\"\n [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n <div [ngClass]=\"{ 'question': this.abItem.Status__c === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\">\n {{ qa.quesValue }}\n </div>\n </div>\n <div class=\"answer\" >\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <!-- HA 02FEB24 Displaying the in summary for book type -->\n <div *ngIf=\"qa.qTyp == 'Book'\">\n <div *ngFor=\"let val of qa.myVal\">\n <p>{{ val.Question_Text__c }}: <span>{{ val.input }}</span></p>\n </div>\n </div>\n <!-- HA 02FEB24 Displaying the value for direct question -->\n <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.Question_Text__c }}: <span></span>{{ qa.ansValue }}</div>\n <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"this.abItem.Status__c === 'Completed'\" class=\"col-lg-12\">\n <div class=\"panel-group panel-group-joined\" id=\"ePTW-details\">\n <div class=\"panel panel-default\">\n <div class=\"panel-heading\">\n <h4 class=\"panel-title\">\n <!-- HA 20DEC23 For Translation -->\n <a data-toggle=\"collapse\" data-parent=\"#ePTW-details\" href=\"#collapseOne\" class=\"collapsed\">\n {{'details' | i18n:i18nService.currentLanguage}}\n </a>\n </h4>\n </div>\n <div id=\"collapseOne\" class=\"panel-collapse collapse\">\n <div class=\"panel-body\">\n <div class=\"row\">\n <ng-container *ngFor=\"let item of summaryData; let i = index\">\n <ng-container *ngIf=\"i % 2 === 0\">\n <div class=\"col-lg-6 m-b-30\">\n <label>{{ getKey(item) }}</label>\n <p class=\"font-size\">{{ getValue(item) || 'N/A' }}</p>\n </div>\n <div class=\"col-lg-6\" *ngIf=\"summaryData[i + 1]\">\n <label>{{ getKey(summaryData[i + 1]) }}</label>\n <p class=\"font-size\">{{ getValue(summaryData[i + 1]) || 'N/A' }}</p>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div id=\"progress2\" *ngIf=\"qbItem.Progress_Bar__c \">\n <div [ngClass]=\"{'bgColor summary-top' : qbItem.Progress_Bar__c }\" >\n <div id=\"progress-summary\" *ngIf=\"qbItem.Progress_Bar__c\">\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n [startFromZero]=\"false\" [responsive]=\"false\" >\n </circle-progress>\n \n <div *ngIf=\"qbItem.Summary_Text__c && qbItem.Progress_Bar__c\" \n [ngClass]=\"{ summaryTitle: qbItem.Progress_Bar__c }\">\n <h3 class=\"subTitle\" >{{ qbItem.Summary_Text__c }}</h3>\n <div *ngIf=\"abItem.Status__c != 'Completed'\" class=\"subTitle1\" >{{ qbItem.Summary_Sub_Text__c}}</div>\n </div>\n </div>\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\n <h3 class=\"summary-h\">\n {{ qbItem.Summary_Text__c }}\n </h3>\n </div>\n </div>\n <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n <div class=\"summary-groupText myt-font2\">\n <!-- <p>Informe de da\u00F1o</p> -->\n </div>\n <div *ngFor=\"let qa of summary\" >\n <div [ngClass]=\"{ non: qbItem.Progress_Bar__c }\">\n <div [ngClass]=\"{ summary: this.abItem.Status__c != 'Completed' && !qbItem.Progress_Bar__c }\">\n <div *ngIf=\"!qbItem.Edit__c\"\n [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n </div>\n <div *ngIf=\"qbItem.Edit__c\"\n [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.Status__c === 'Completed' }\"\n [innerHTML]=\"getText(qa.quesValue)\">\n {{ qa.quesValue }}\n </div>\n </div>\n <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n </button>\n </div>\n \n <div class=\"answer \" >\n <div *ngIf=\"qa.qTyp === 'File'\">\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n {{ qa.ansValue }}\n </div>\n <div *ngIf=\"qa.qTyp != 'File'\">\n {{ qa.ansValue }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Answer Book -->\n <div class=\"flexer1\" *ngIf=\"abItem\">\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"\" *ngIf=\"abItem.Status__c == 'Completed' && qbItem.Cancel__c\">\n <div class=\"col-md-12\">\n <button [ngClass]=\"{'btn-text': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\"\n (click)=\"handleCancelClick()\">\n {{ qbItem.Cancel__c }}\n </button>\n </div>\n </div>\n </div>\n\n <!-- Group Actions -->\n <div class=\"align-edit-submit\" *ngIf=\"abItem.Status__c != 'Completed'\">\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"col-md-6\" *ngIf=\"qbItem.Submit__c\">\n <button [ngClass]=\"{ 'btn-text2': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c }\" \n (click)=\"handleSubmitClick()\">\n {{ qbItem.Submit__c }}\n </button>\n </div>\n <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n <div class=\"col-md-6\" *ngIf=\"qbItem.Edit__c\">\n <button [ngClass]=\"{'grey': qbItem.Progress_Bar__c,\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\" \n (click)=\"handleBackClickNew()\">\n {{ qbItem.Edit__c }}\n </button>\n </div>\n </div>\n\n</div>", styles: [".rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.edit{background-color:#dedddd;border:none;color:#c5281c;text-decoration:underline;margin-left:50%;font-size:16px;vertical-align:super;font-weight:700}.icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.icon-edit1,.icon-edit-summary{width:29px;height:28px}.questiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.questiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.questiondiv2{padding-left:0!important;padding-bottom:0!important}@media screen and (min-width: 689px){#progress,#progress-summary{padding-left:12px}.backicon{display:none}.dt-time{background-position:98%!important}}.bgColor{text-align:center;background-color:#dedddd}.questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.largeTitle{padding-left:16px;padding-top:12px}.question-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1.5;padding:.5rem 1rem;width:100%;cursor:pointer;outline:0}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.radiotext{margin-top:-30px}.radiocontainer{display:flex;flex-direction:row-reverse;border:1px solid none;border-radius:.3em;padding:0;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#a3a2a2}.radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.myt-time{width:-moz-fit-content!important;width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.showminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.myt-dateTimeNew{margin-left:-14px}.myt-hour{width:-moz-fit-content;width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.date-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.dis-flex{display:flex;justify-content:center}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin-left:-17px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.question{padding:10px;font-size:14px;color:#007bff}.question1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.answer{display:flex;align-items:baseline;padding:5px 5px 10px;font-size:14px;font-weight:400;word-wrap:break-word;width:97%;justify-content:space-between}.answer1{max-width:55%;margin-left:auto;margin-right:auto;color:#a3a2a2;margin-top:0%;padding-bottom:0;font-size:14px;font-weight:400;word-wrap:break-word;text-align:left;background:#dedddd;border-bottom:1px solid #fff}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.sum-ques{width:55%;margin:auto}.sum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#F8F8F8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.file-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.file-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.subTitle1{color:#560d05;font-size:14px;font-weight:500}.check-icon{color:#87be1c;margin-left:-2rem;z-index:1;padding:5px;margin-top:.4rem}.check-icon2{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:.6rem;line-height:3}.check-icon3{color:#87be1c;margin-left:-4rem;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.grey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.btn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.btn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;width:100%;display:flex;justify-content:center}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.down{margin-left:0;width:57%}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.dropbox{margin-left:21.5rem}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.summary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.myt-align{margin-left:4%;line-height:2}.myt-align1{margin-left:-29px}.myt-align2{margin-left:-15px}.myt-align3{width:100%}.myt-book1{margin-top:-20px}.colorf{color:#555}.bookText{width:57%;margin-left:21.5%;background-color:#dedddd}.book{width:32.6%;margin-left:34%;background-color:#dedddd}.summary-completed{padding-left:2%;margin-top:20px}.town{margin:0;background-color:#dedddd}.town-drop{margin:auto;width:57%}.questiondiv1.padd-bottom{padding-bottom:6rem!important;padding-top:2rem!important}@media (max-width: 1090px){.icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (max-width: 768px){.radioOption{width:8%}.grey{width:78%;margin-left:17.5rem;height:68px!important;font-size:20px!important;font-weight:700!important}.answer{margin-top:-4%!important}}@media screen and (max-width: 672px){.header1{font-size:23px!important}.summarypadd{padding-top:50px!important}.answer{margin-top:-5%!important}.icon-edit{margin:0 6px 0 -13%!important}.subTitle1{width:95%!important}.additional{margin-left:6%!important;padding:0!important}.container1{margin-left:-35%}.town-drop{margin:auto;width:100%!important}.dis-flex{display:flex;justify-content:left}.check{display:inherit;width:-moz-max-content;width:max-content;margin-left:6%}.rusty{width:28rem;margin-left:0rem;height:68px!important;font-size:20px!important;font-weight:700!important;margin-bottom:37px}.left-bt{width:28rem;margin-left:-28rem;height:68px!important;font-size:20px!important;font-weight:700!important}.questionalign{text-align:center}.questionalign{margin-top:1rem!important}.largeTitle{padding-left:0!important}.myt-align{margin-left:0%!important}.myt-text1{margin-top:-22px}.myt-text2{margin-top:-20px}.myt-text3{margin-bottom:21px}.date-picker,.dt-time{width:100%}.showminute{margin-top:-.5%}.radioOption{width:auto;margin-top:0;margin-left:7%;margin-right:-3%}.myt-font7{padding-left:0rem;margin-left:-1.5%}.down,.bookText,.book{width:100%;margin-left:0rem}.town{margin-left:0rem;width:100%}.file-upload-box,.file-uploading-box{max-width:85%;margin-left:20px}.question{margin-left:0rem}.btn-text2{width:28rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:28rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 580px){.rusty{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:27rem;margin-left:-27rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-24%}.showminute{margin-top:.5%}.bookText,.book{width:100%;margin-left:0rem}.btn-text2{width:27rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.grey{width:27rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:27rem;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 672px){.questiondiv1{padding:0}}@media screen and (max-width: 525px){.rusty{width:26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:-9%}.left-bt{width:26rem;margin-left:-26rem;height:68px!important;font-size:20px!important;font-weight:700!important}.dateandtime{padding-left:10px!important}}@media screen and (max-width: 480px){.answer{margin-top:-7%!important}.icon-edit{margin:0 6px 4px -35%!important}.rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.file-upload-box,.file-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.answer{margin-top:-9%!important}.icon-edit{margin:-9px 1px 4px 4%!important}.rusty,.btn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:0%}.file-upload-box,.file-uploading-box{max-width:100%}.myt-dateTimeNew{margin-left:-10px!important}.form-row{padding-left:8px!important}.dateandtime{padding-left:0!important}.dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.grey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}@media screen and (max-width: 368px){.icon-edit{margin:0 6px 3px 35%!important}.icon-editios{margin-bottom:4px}.rusty{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.left-bt{width:19rem;margin-left:-19rem;height:68px!important;font-size:20px!important;font-weight:700!important}.container1{margin-left:15%}.radiotext{margin-top:-45px}.file-upload-box,.file-uploading-box{max-width:100%}.grey{width:19rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text2{width:19rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}.btn-text{width:19rem;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.check{display:block}.header2{font-size:20px;font-weight:300;text-align:center;font-stretch:normal;font-style:normal;line-height:1.5;letter-spacing:normal;color:#560d05;max-width:1100px;margin:auto;padding-bottom:10px}.header1{font-size:32px;font-weight:700;text-align:center;font-stretch:normal;font-style:normal;line-height:1.25;letter-spacing:normal;color:#dd2e13}.container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.container1 input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.selbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.selbtngroup{padding-left:.9%!important}}@media (min-width: 481px) and (max-width: 580px){.selbtngroup{padding-left:.2%!important}}@media screen and (min-width: 871px){.selbtngroup{padding-right:4px!important}}@media screen and (max-width: 689px){.answer{max-width:95%!important;margin-left:0!important;margin-right:15px}#progress2{margin-left:8.5px!important}.edit{margin-left:85%!important;margin-bottom:0%!important}.sum-ques,.sum-ques1{width:100%!important;margin:auto}.summary-completed{padding-left:0!important;padding-bottom:17px;margin-top:9px}.summary-top{margin-top:10%}.subTitle1{font-size:18px!important;line-height:1.38!important;text-align:center;letter-spacing:normal;color:#560d05!important;font-weight:300}.backbutton{display:none}.rusty{margin-bottom:37px}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}@media screen and (max-width: 689px){.app-back1{line-height:1.5;cursor:pointer;width:100%;max-width:1200px;margin-right:auto;margin-left:-10px;display:flex;font-family:Helvetica;font-size:21px;font-weight:700;align-items:center;font-stretch:normal;font-style:normal;letter-spacing:normal;color:#dd2e13;z-index:1;position:fixed;background-color:#dedddd;border-radius:0!important;margin-top:-12px;padding-top:.8rem}.header1{padding-top:75px}.dt-time{background-position:100%!important}}.summary-volver{display:none}@media ((min-width: 1200px)){.form-row{display:flex;flex-wrap:wrap}}\n"] }]
3767
- }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: i4.ActivatedRoute }, { type: i5.DomSanitizer }, { type: i6$1.NgxSpinnerService }, { type: i7.UntypedFormBuilder }, { type: i8.DeviceDetectorService }, { type: i0.ElementRef }, { type: I18nService }]; }, propDecorators: { qbId: [{
3817
+ }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: i4.ActivatedRoute }, { type: i5.DomSanitizer }, { type: i6$1.NgxSpinnerService }, { type: i3.UntypedFormBuilder }, { type: i8.DeviceDetectorService }, { type: i0.ElementRef }, { type: I18nService }]; }, propDecorators: { qbId: [{
3768
3818
  type: Input
3769
3819
  }], insuranceStartDate: [{
3770
3820
  type: Input
@@ -3818,43 +3868,240 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
3818
3868
  }]
3819
3869
  }], ctorParameters: function () { return []; } });
3820
3870
 
3821
- class GetValuePipe {
3822
- transform(arg, element, column) {
3823
- const initialEl = element;
3824
- let flds = column.split('.');
3825
- for (let i = 0; i < flds.length; i++) {
3826
- let splitFlds = flds[i].split('[');
3827
- if (splitFlds.length === 1) {
3828
- if (typeof element[flds[i]] === "number") {
3829
- element = element[flds[i]] || 0;
3830
- }
3831
- else {
3832
- element = element[flds[i]] || "";
3871
+ class CustomModelComponent {
3872
+ constructor() { }
3873
+ modalTitle;
3874
+ isModalOpen = false;
3875
+ modalSize = '';
3876
+ saveButtonValue = 'Save';
3877
+ modalFooter = true;
3878
+ saveButtonEmit = new EventEmitter();
3879
+ cancelButtonEmit = new EventEmitter();
3880
+ onSave() {
3881
+ this.saveButtonEmit.emit();
3882
+ }
3883
+ onCancel() {
3884
+ this.cancelButtonEmit.emit();
3885
+ }
3886
+ ngOnInit() {
3887
+ }
3888
+ closeModal() {
3889
+ this.cancelButtonEmit.emit(false);
3890
+ }
3891
+ saveModal() {
3892
+ this.saveButtonEmit.emit();
3893
+ }
3894
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomModelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3895
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomModelComponent, selector: "app-custom-model", inputs: { modalTitle: "modalTitle", isModalOpen: "isModalOpen", modalSize: "modalSize", saveButtonValue: "saveButtonValue", modalFooter: "modalFooter" }, outputs: { saveButtonEmit: "saveButtonEmit", cancelButtonEmit: "cancelButtonEmit" }, ngImport: i0, template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n <h2>{{ modalTitle }}</h2>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n <button (click)=\"onCancel()\">Cancel</button>\n </div>\n </div>\n </div>\n ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#000;background-color:#0006}.modal-content{background-color:#fefefe;margin:10% auto;padding:20px;border:1px solid #888;width:70%}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
3896
+ }
3897
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomModelComponent, decorators: [{
3898
+ type: Component,
3899
+ args: [{ selector: 'app-custom-model', template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n <h2>{{ modalTitle }}</h2>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n <button (click)=\"onCancel()\">Cancel</button>\n </div>\n </div>\n </div>\n ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#000;background-color:#0006}.modal-content{background-color:#fefefe;margin:10% auto;padding:20px;border:1px solid #888;width:70%}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}\n"] }]
3900
+ }], ctorParameters: function () { return []; }, propDecorators: { modalTitle: [{
3901
+ type: Input
3902
+ }], isModalOpen: [{
3903
+ type: Input
3904
+ }], modalSize: [{
3905
+ type: Input
3906
+ }], saveButtonValue: [{
3907
+ type: Input
3908
+ }], modalFooter: [{
3909
+ type: Input
3910
+ }], saveButtonEmit: [{
3911
+ type: Output
3912
+ }], cancelButtonEmit: [{
3913
+ type: Output
3914
+ }] } });
3915
+
3916
+ class CustomCalendarComponent {
3917
+ eventSelected = new EventEmitter();
3918
+ allEvents = [];
3919
+ question;
3920
+ entries = [];
3921
+ referenceQuestions = [];
3922
+ qbRefrenceBook;
3923
+ calendarQuestion = [];
3924
+ currentDate = new Date();
3925
+ calendarDays = [];
3926
+ daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
3927
+ newEventTitle = '';
3928
+ newEventTime = '';
3929
+ newDescription = '';
3930
+ newLink = '';
3931
+ selectedDay = null;
3932
+ isModalOpen = false;
3933
+ modalTitle = 'Custom Modal';
3934
+ modalSize = 'large';
3935
+ saveButtonValue = 'Save';
3936
+ modalFooter = true;
3937
+ editingEventId;
3938
+ ngOnInit() {
3939
+ if (this.question?.input) {
3940
+ this.allEvents = this.question.input;
3941
+ }
3942
+ this.processQuestion();
3943
+ this.generateCalendar();
3944
+ }
3945
+ processQuestion() {
3946
+ this.entries = JSON.parse(this.question['Fields_Meta__c']);
3947
+ this.qbRefrenceBook = JSON.parse(this.question['QB_Reference_Questions__c']);
3948
+ let title = this.qbRefrenceBook?.questionbook?.Title__c;
3949
+ this.modalTitle = title;
3950
+ this.referenceQuestions = [];
3951
+ if (this.entries.length > 0) {
3952
+ this.entries.forEach(element => {
3953
+ if (element.questionReference) {
3954
+ let qReference = JSON.parse(element.questionReference);
3955
+ this.referenceQuestions.push(qReference?.question);
3833
3956
  }
3957
+ });
3958
+ }
3959
+ console.log('entries-->');
3960
+ console.log('question-->');
3961
+ console.log(this.entries);
3962
+ console.log(this.referenceQuestions);
3963
+ }
3964
+ generateCalendar() {
3965
+ const year = this.currentDate.getFullYear();
3966
+ const month = this.currentDate.getMonth();
3967
+ const startOfMonth = new Date(year, month, 1);
3968
+ const endOfMonth = new Date(year, month + 1, 0);
3969
+ const startDayOfWeek = startOfMonth.getDay();
3970
+ const endDayOfWeek = endOfMonth.getDay();
3971
+ const startDate = new Date(startOfMonth);
3972
+ startDate.setDate(startDate.getDate() - startDayOfWeek);
3973
+ const endDate = new Date(endOfMonth);
3974
+ endDate.setDate(endDate.getDate() + (6 - endDayOfWeek));
3975
+ const today = new Date(new Date().setHours(0, 0, 0, 0));
3976
+ this.calendarDays = [];
3977
+ for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
3978
+ const date = new Date(d);
3979
+ this.calendarDays.push({
3980
+ date: date,
3981
+ events: [],
3982
+ isCurrentMonth: d.getMonth() === month,
3983
+ isPast: date < today,
3984
+ isToday: date.getTime() === today.getTime(),
3985
+ isFuture: date > today,
3986
+ });
3987
+ }
3988
+ // Populate calendar with events from allEvents array
3989
+ this.calendarDays.forEach(day => {
3990
+ day.events = this.allEvents.filter(event => event.date.toDateString() === day.date.toDateString());
3991
+ });
3992
+ this.eventSelected.emit(this.allEvents);
3993
+ }
3994
+ selectDay(day) {
3995
+ console.log(day);
3996
+ this.selectedDay = day;
3997
+ // this.eventSelected.emit(day?.events);
3998
+ const previouslySelectedDay = this.calendarDays.find(d => d.isSelected);
3999
+ if (previouslySelectedDay) {
4000
+ previouslySelectedDay.isSelected = false;
4001
+ }
4002
+ // Select the clicked day
4003
+ day.isSelected = true;
4004
+ }
4005
+ previousMonth() {
4006
+ this.currentDate.setMonth(this.currentDate.getMonth() - 1);
4007
+ this.currentDate = new Date(this.currentDate); // Ensure the date object is updated
4008
+ this.generateCalendar();
4009
+ }
4010
+ nextMonth() {
4011
+ this.currentDate.setMonth(this.currentDate.getMonth() + 1);
4012
+ this.currentDate = new Date(this.currentDate); // Ensure the date object is updated
4013
+ this.generateCalendar();
4014
+ }
4015
+ addAppointment() {
4016
+ this.isModalOpen = true;
4017
+ this.calendarQuestion = this.referenceQuestions.map(q => ({ ...q, input: '' }));
4018
+ this.referenceQuestions.forEach(ques => {
4019
+ // clear the input
4020
+ if (ques.input) {
4021
+ delete ques.input;
3834
4022
  }
3835
- else {
3836
- let index = Number(splitFlds[1].split(']')[0]);
3837
- if (typeof element[flds[i]] === "number") {
3838
- element = element[splitFlds[0]][index] || 0;
3839
- }
3840
- else {
3841
- element = element[splitFlds[0]][index] || '';
3842
- }
4023
+ });
4024
+ console.log(' console.log(this.referenceQuestions);');
4025
+ console.log(this.referenceQuestions);
4026
+ this.editingEventId = null;
4027
+ }
4028
+ editEvent(event) {
4029
+ this.isModalOpen = true;
4030
+ // this.calendarQuestion = event.entries.map(q => ({ ...q }));
4031
+ this.referenceQuestions = event.entries.map(q => ({ ...q }));
4032
+ this.editingEventId = event.id;
4033
+ this.generateCalendar();
4034
+ }
4035
+ deleteEvent(day, eventId) {
4036
+ day.events = day.events.filter(event => event.id !== eventId);
4037
+ this.allEvents = this.allEvents.filter(event => event.id !== eventId);
4038
+ this.generateCalendar();
4039
+ }
4040
+ closeModal() {
4041
+ this.isModalOpen = false;
4042
+ }
4043
+ addEvent(day, entryQues) {
4044
+ const newEvent = {
4045
+ id: this.generateId(),
4046
+ date: day.date,
4047
+ entries: entryQues.map(q => ({ ...q }))
4048
+ };
4049
+ day.events.push(newEvent);
4050
+ this.allEvents.push(newEvent);
4051
+ this.generateCalendar();
4052
+ console.log('allEvents');
4053
+ console.log(this.allEvents);
4054
+ this.generateCalendar();
4055
+ }
4056
+ onSave() {
4057
+ if (this.editingEventId !== null) {
4058
+ const event = this.allEvents.find(e => e.id === this.editingEventId);
4059
+ if (event) {
4060
+ event.entries = this.calendarQuestion.map(q => ({ ...q }));
3843
4061
  }
3844
4062
  }
3845
- Object.assign(initialEl, { [column]: element });
3846
- return element;
4063
+ else {
4064
+ if (this.selectedDay) {
4065
+ this.addEvent(this.selectedDay, this.calendarQuestion);
4066
+ }
4067
+ }
4068
+ this.closeModal();
4069
+ this.generateCalendar();
3847
4070
  }
3848
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: GetValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
3849
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: GetValuePipe, isStandalone: true, name: "getValue" });
4071
+ onCancel() {
4072
+ console.log('Cancel button clicked');
4073
+ this.closeModal();
4074
+ }
4075
+ handleQuestionEvent(ques) {
4076
+ // Update the questions array with the new question
4077
+ const index = this.calendarQuestion.findIndex(q => q.Id === ques.Id);
4078
+ if (index > -1) {
4079
+ // If question already exists, update it
4080
+ this.calendarQuestion[index] = ques;
4081
+ }
4082
+ else {
4083
+ // If question doesn't exist, add it to the array
4084
+ this.calendarQuestion.push(ques);
4085
+ }
4086
+ console.log('calender question');
4087
+ console.log(this.calendarQuestion);
4088
+ }
4089
+ generateId() {
4090
+ return '_' + Math.random().toString(36).substr(2, 9);
4091
+ }
4092
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4093
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: { allEvents: "allEvents", question: "question" }, outputs: { eventSelected: "eventSelected" }, ngImport: i0, template: "<div class=\"align-calendar\">\n <div class=\"calendar-container\">\n <div class=\"calendar-header\">\n <button (click)=\"previousMonth()\"><< Previous >></button>\n <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\n <button (click)=\"nextMonth()\"><< Next >></button>\n </div>\n <div class=\"calendar-grid\">\n <!-- Days of the Week Header -->\n <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n \n <!-- Calendar Days -->\n <div\n class=\"calendar-day\"\n *ngFor=\"let day of calendarDays\"\n [class.not-current-month]=\"!day.isCurrentMonth\"\n [class.past]=\"day.isPast\"\n [class.today]=\"day.isToday\"\n [class.future]=\"day.isFuture\"\n [class.selected]=\"day.isSelected\" \n (click)=\"selectDay(day)\"\n >\n <div class=\"day-number\">{{ day.date.getDate() }}</div>\n <div *ngFor=\"let event of day.events\" class=\"event\">\n <div *ngFor=\"let entry of event?.entries\">\n <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'shortTime' }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"appoinappointment\">\n <div class=\"appointments-container\">\n <h4>Add Appointment</h4>\n <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\n </div>\n <div class=\"appointments-container\">\n <h4 *ngIf=\"selectedDay?.events.length > 0\">Appointments</h4>\n <div class=\"event\" *ngFor=\"let event of selectedDay?.events\">\n <div class=\"event-info\">\n <div>\n <div *ngFor=\"let entry of event?.entries\">\n <div *ngIf=\"entry.Type__c != 'Time'\">{{ entry.input }}</div>\n <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'mediumDate' }}</div>\n </div>\n </div>\n </div>\n <div class=\"event-actions\">\n <button (click)=\"editEvent(event)\">Edit</button>\n <button (click)=\"deleteEvent(selectedDay, event.id)\">Delete</button>\n </div>\n </div> \n </div>\n </div>\n</div>\n\n<app-custom-model\n [modalTitle]=\"modalTitle\"\n [isModalOpen]=\"isModalOpen\"\n [modalSize]=\"modalSize\"\n [saveButtonValue]=\"saveButtonValue\"\n [modalFooter]=\"modalFooter\"\n (saveButtonEmit)=\"onSave()\"\n (cancelButtonEmit)=\"onCancel()\"\n>\n<app-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></app-questionbook>\n</app-custom-model>\n\n\n \n \n ", styles: [".calendar-container{flex:1}.appoinappointment{flex:2;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day-of-week{text-align:center;font-weight:700;padding:5px;background-color:#f0f0f0;border:1px solid #ccc}.calendar-day{border:1px solid #ccc;padding:5px;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;position:relative;cursor:pointer}.calendar-day.not-current-month{background-color:#f0f0f0}.calendar-day.past{color:#aaa}.calendar-day.today{background-color:#e6ffe6;font-weight:700}.calendar-day.future{color:#000}.day-number{font-size:1.2em;margin-bottom:5px}.event{background-color:#d1e7dd;border-left:4px solid #0f5132;margin:5px 0;padding:2px 5px;border-radius:3px}.event-title{font-weight:700}.event-time{font-size:.8em}input[type=text],input[type=time]{width:100%;margin-top:5px;box-sizing:border-box}button{margin-top:5px;align-self:stretch;margin-left:0!important}.calendar-header button{margin-top:5px;align-self:stretch;margin-left:0!important;border:none;background:none}.align-calendar{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
3850
4094
  }
3851
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: GetValuePipe, decorators: [{
3852
- type: Pipe,
3853
- args: [{
3854
- name: 'getValue',
3855
- standalone: true
3856
- }]
3857
- }] });
4095
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomCalendarComponent, decorators: [{
4096
+ type: Component,
4097
+ args: [{ selector: 'app-custom-calendar', template: "<div class=\"align-calendar\">\n <div class=\"calendar-container\">\n <div class=\"calendar-header\">\n <button (click)=\"previousMonth()\"><< Previous >></button>\n <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\n <button (click)=\"nextMonth()\"><< Next >></button>\n </div>\n <div class=\"calendar-grid\">\n <!-- Days of the Week Header -->\n <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n \n <!-- Calendar Days -->\n <div\n class=\"calendar-day\"\n *ngFor=\"let day of calendarDays\"\n [class.not-current-month]=\"!day.isCurrentMonth\"\n [class.past]=\"day.isPast\"\n [class.today]=\"day.isToday\"\n [class.future]=\"day.isFuture\"\n [class.selected]=\"day.isSelected\" \n (click)=\"selectDay(day)\"\n >\n <div class=\"day-number\">{{ day.date.getDate() }}</div>\n <div *ngFor=\"let event of day.events\" class=\"event\">\n <div *ngFor=\"let entry of event?.entries\">\n <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'shortTime' }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"appoinappointment\">\n <div class=\"appointments-container\">\n <h4>Add Appointment</h4>\n <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\n </div>\n <div class=\"appointments-container\">\n <h4 *ngIf=\"selectedDay?.events.length > 0\">Appointments</h4>\n <div class=\"event\" *ngFor=\"let event of selectedDay?.events\">\n <div class=\"event-info\">\n <div>\n <div *ngFor=\"let entry of event?.entries\">\n <div *ngIf=\"entry.Type__c != 'Time'\">{{ entry.input }}</div>\n <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'mediumDate' }}</div>\n </div>\n </div>\n </div>\n <div class=\"event-actions\">\n <button (click)=\"editEvent(event)\">Edit</button>\n <button (click)=\"deleteEvent(selectedDay, event.id)\">Delete</button>\n </div>\n </div> \n </div>\n </div>\n</div>\n\n<app-custom-model\n [modalTitle]=\"modalTitle\"\n [isModalOpen]=\"isModalOpen\"\n [modalSize]=\"modalSize\"\n [saveButtonValue]=\"saveButtonValue\"\n [modalFooter]=\"modalFooter\"\n (saveButtonEmit)=\"onSave()\"\n (cancelButtonEmit)=\"onCancel()\"\n>\n<app-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></app-questionbook>\n</app-custom-model>\n\n\n \n \n ", styles: [".calendar-container{flex:1}.appoinappointment{flex:2;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day-of-week{text-align:center;font-weight:700;padding:5px;background-color:#f0f0f0;border:1px solid #ccc}.calendar-day{border:1px solid #ccc;padding:5px;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;position:relative;cursor:pointer}.calendar-day.not-current-month{background-color:#f0f0f0}.calendar-day.past{color:#aaa}.calendar-day.today{background-color:#e6ffe6;font-weight:700}.calendar-day.future{color:#000}.day-number{font-size:1.2em;margin-bottom:5px}.event{background-color:#d1e7dd;border-left:4px solid #0f5132;margin:5px 0;padding:2px 5px;border-radius:3px}.event-title{font-weight:700}.event-time{font-size:.8em}input[type=text],input[type=time]{width:100%;margin-top:5px;box-sizing:border-box}button{margin-top:5px;align-self:stretch;margin-left:0!important}.calendar-header button{margin-top:5px;align-self:stretch;margin-left:0!important;border:none;background:none}.align-calendar{display:flex;width:100%}\n"] }]
4098
+ }], propDecorators: { eventSelected: [{
4099
+ type: Output
4100
+ }], allEvents: [{
4101
+ type: Input
4102
+ }], question: [{
4103
+ type: Input
4104
+ }] } });
3858
4105
 
3859
4106
  class SearchBoxComponent {
3860
4107
  sfService;
@@ -3951,7 +4198,7 @@ class SearchBoxComponent {
3951
4198
  this.searchValueChange.emit(change);
3952
4199
  }
3953
4200
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchBoxComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: i4.ActivatedRoute }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
3954
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\">\n <input #auto id=\"searchbox-style\"\n (blur)=\"clearList()\" \n [(ngModel)]=\"filterName\" \n type=\"text\" \n name=\"name\" \n [readOnly]=\"readOnly\"\n [placeholder]=\"placeHolderText\" \n style=\"margin: 0 !important;\" \n class=\"searchInput she-line-input form-control\" \n (focusin)=\"getSourceDataLocal($event)\" \n (input)=\"getSourceDataLocal($event)\">\n <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n <div *ngIf=\"finalResults.length > 0 && showSuggestion\" \n style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \n class=\"suggestions-container\">\n <!-- HA 20DEC23 Uncommented the logic -->\n <!-- VD 03May- search changes -->\n <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n <!-- VD 26Jun24 - id condition removed -->\n <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\n <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n </div>\n <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n <!--// VD 26JUN24 - pipe changes -->\n <h4 >{{ '' | getValue: item : SearchItem }}</h4>\n </div>\n </div>\n </div>\n <!-- HA 20DEC23 For Commented this for future purpose -->\n <!-- <table class=\"table table-striped table-bordered\">\n <thead>\n <tr>\n <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n <td>{{ item.firstName }}</td>\n <td>{{ item.lastName }}</td>\n <td>{{ item.division }}</td>\n <td>{{ item.numberPlate }}</td>\n </tr>\n </tbody>\n </table> -->\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
4201
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\">\n <input #auto id=\"searchbox-style\"\n (blur)=\"clearList()\" \n [(ngModel)]=\"filterName\" \n type=\"text\" \n name=\"name\" \n [readOnly]=\"readOnly\"\n [placeholder]=\"placeHolderText\" \n style=\"margin: 0 !important;\" \n class=\"searchInput she-line-input form-control\" \n (focusin)=\"getSourceDataLocal($event)\" \n (input)=\"getSourceDataLocal($event)\">\n <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n <div *ngIf=\"finalResults.length > 0 && showSuggestion\" \n style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \n class=\"suggestions-container\">\n <!-- HA 20DEC23 Uncommented the logic -->\n <!-- VD 03May- search changes -->\n <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n <!-- VD 26Jun24 - id condition removed -->\n <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\n <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n </div>\n <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n <!--// VD 26JUN24 - pipe changes -->\n <h4 >{{ '' | getValue: item : SearchItem }}</h4>\n </div>\n </div>\n </div>\n <!-- HA 20DEC23 For Commented this for future purpose -->\n <!-- <table class=\"table table-striped table-bordered\">\n <thead>\n <tr>\n <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n <td>{{ item.firstName }}</td>\n <td>{{ item.lastName }}</td>\n <td>{{ item.division }}</td>\n <td>{{ item.numberPlate }}</td>\n </tr>\n </tbody>\n </table> -->\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
3955
4202
  }
3956
4203
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchBoxComponent, decorators: [{
3957
4204
  type: Component,
@@ -4072,6 +4319,7 @@ class FileUploadComponent {
4072
4319
  isShowNoFileIcon;
4073
4320
  tableFile; // file Upload from table
4074
4321
  question;
4322
+ error;
4075
4323
  selectedFileNameArray = [];
4076
4324
  copyOfInputAllFiles;
4077
4325
  copyOfFileUploadingLimit;
@@ -4102,47 +4350,94 @@ class FileUploadComponent {
4102
4350
  }
4103
4351
  uploadMultipleFiles(event) {
4104
4352
  console.log('File uploader initiated');
4105
- const inputFiles = this.copyOfInputAllFiles ? this.copyOfInputAllFiles : [];
4353
+ let inputFiles = this.copyOfInputAllFiles ? this.copyOfInputAllFiles : [];
4106
4354
  const selectedFileData = [];
4107
4355
  const uploadedFiles = event.target.files;
4108
4356
  if (uploadedFiles.length + inputFiles.length <= this.copyOfFileUploadingLimit) {
4357
+ const readFilesPromises = [];
4109
4358
  for (const eachUploadedFile of uploadedFiles) {
4110
- const reader = new FileReader();
4111
4359
  const file = eachUploadedFile;
4112
4360
  const format = file.name.split('.')[1];
4113
- reader.readAsDataURL(file);
4114
- reader.onload = () => {
4115
- selectedFileData.push({
4116
- doc: reader.result,
4117
- name: file.name,
4118
- type: file.type,
4119
- format,
4120
- id: null,
4121
- });
4122
- inputFiles.push({
4123
- doc: reader.result,
4124
- name: file.name,
4125
- type: file.type,
4126
- format,
4127
- id: null,
4128
- });
4129
- };
4130
- }
4361
+ // Create a promise for each file read
4362
+ const fileReadPromise = new Promise((resolve, reject) => {
4363
+ const reader = new FileReader();
4364
+ reader.readAsDataURL(file);
4365
+ reader.onload = () => {
4366
+ const fileData = {
4367
+ doc: reader.result,
4368
+ name: file.name,
4369
+ type: file.type,
4370
+ format,
4371
+ id: null,
4372
+ };
4373
+ selectedFileData.push(fileData);
4374
+ inputFiles.push(fileData);
4375
+ resolve();
4376
+ };
4377
+ reader.onerror = () => {
4378
+ reject();
4379
+ };
4380
+ });
4381
+ readFilesPromises.push(fileReadPromise);
4382
+ }
4383
+ // Wait for all promises to resolve
4384
+ Promise.all(readFilesPromises).then(() => {
4385
+ this.copyOfInputAllFiles = inputFiles;
4386
+ console.log('uploadedFiles', inputFiles);
4387
+ this.selectedFileData.emit(inputFiles);
4388
+ }).catch(() => {
4389
+ console.error('Error reading files');
4390
+ });
4131
4391
  }
4132
4392
  else {
4133
4393
  console.warn('You can upload max 5 files');
4134
- //this.toastr.warning(TOASTER_MESSAGES.MAX_FIVE_FILES, TOASTER_MESSAGES.WARNING_TITLE);
4394
+ // this.toastr.warning(TOASTER_MESSAGES.MAX_FIVE_FILES, TOASTER_MESSAGES.WARNING_TITLE);
4135
4395
  }
4136
4396
  event.target.value = '';
4137
- this.copyOfInputAllFiles = inputFiles;
4138
- console.log('uploadedFiles', inputFiles);
4139
- this.selectedFileData.emit(inputFiles);
4140
4397
  }
4398
+ // uploadMultipleFiles(event: any) {
4399
+ // console.log('File uploader initiated');
4400
+ // let inputFiles: any[] = this.copyOfInputAllFiles ? this.copyOfInputAllFiles : [];
4401
+ // const selectedFileData = [];
4402
+ // const uploadedFiles = event.target.files;
4403
+ // if (uploadedFiles.length + inputFiles.length <= this.copyOfFileUploadingLimit) {
4404
+ // for (const eachUploadedFile of uploadedFiles) {
4405
+ // const reader = new FileReader();
4406
+ // const file: File = eachUploadedFile;
4407
+ // const format = file.name.split('.')[1];
4408
+ // reader.readAsDataURL(file);
4409
+ // reader.onload = () => {
4410
+ // selectedFileData.push({
4411
+ // doc: reader.result,
4412
+ // name: file.name,
4413
+ // type: file.type,
4414
+ // format,
4415
+ // id: null,
4416
+ // });
4417
+ // inputFiles.push({
4418
+ // doc: reader.result,
4419
+ // name: file.name,
4420
+ // type: file.type,
4421
+ // format,
4422
+ // id: null,
4423
+ // });
4424
+ // };
4425
+ // }
4426
+ // } else {
4427
+ // console.warn('You can upload max 5 files');
4428
+ // //this.toastr.warning(TOASTER_MESSAGES.MAX_FIVE_FILES, TOASTER_MESSAGES.WARNING_TITLE);
4429
+ // }
4430
+ // event.target.value = '';
4431
+ // this.copyOfInputAllFiles = inputFiles;
4432
+ // console.log('uploadedFiles',inputFiles);
4433
+ // this.selectedFileData.emit(inputFiles);
4434
+ // }
4141
4435
  deleteFile(currentFileIndex) {
4142
4436
  const deletedFileName = this.selectedFileNameArray.splice(currentFileIndex, 1);
4143
4437
  const deletedFile = this.copyOfInputAllFiles.splice(currentFileIndex, 1);
4144
4438
  console.log('emit', deletedFile[0]);
4145
4439
  this.deletedFileData.emit(deletedFile[0]);
4440
+ this.selectedFileData.emit(this.copyOfInputAllFiles);
4146
4441
  }
4147
4442
  // viewFile(currentFile) {
4148
4443
  // // Display file here
@@ -4203,11 +4498,11 @@ class FileUploadComponent {
4203
4498
  this.showFile = false;
4204
4499
  }
4205
4500
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: SharedService }, { token: DataService }, { token: i5.DomSanitizer }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
4206
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FileUploadComponent, selector: "app-file-upload", inputs: { allFiles: "allFiles", limitFileUploading: "limitFileUploading", isDeleteFileButtonVisible: "isDeleteFileButtonVisible", isShowNoFileIcon: "isShowNoFileIcon", tableFile: "tableFile", question: "question" }, outputs: { selectedFileData: "selectedFileData", deletedFileData: "deletedFileData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" style=\"margin: 0;\">\n <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n <!-- HA 19DEC23 For translation -->\n <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n </div>\n <div class=\"col-lg-3 document-cnt m-t-10 m-b-10 hover-pointer\"\n *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n <div *ngIf=\"!tableFile\" class=\"row\"> <!-- (click)=\"viewFile(eachFile)\" -->\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.name)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\">\n {{eachFile?.name}}\n </div>\n <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n </div>\n <!-- VD 20May24 - preview changes-->\n <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n </div>\n </div>\n <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n {{eachFile?.name}}\n </div>\n </div>\n </div>\n <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n <!-- HA 19DEC23 For translation -->\n <!-- VD 03May24 file upload fix-->\n <button class=\"she-btn-primary-bordered\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n >{{ 'chooseFiles' | i18n:i18nService.currentLanguage }}</button>\n\n <input #fileInput type=\"file\" name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n (change) = uploadMultipleFiles($event)\n />\n </label>\n<!-- HA 19DEC23 For translation -->\n <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n </label>\n <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched || formControl?.documents?.dirty) &&\n formControl?.documents?.errors?.required\">\n {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n </span> -->\n</div>\n<!-- VD 20May24 - preview changes-->\n<!-- model -->\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n <div class=\"nxt-file-map-modal\">\n <div class=\"nxt-file-model-content\">\n <div class=\"nxt-file-model-header\">\n <!-- HA 19DEC23 For translation -->\n <h4>{{fileName}}</h4>\n <button class=\"close-button\" (click)=\"close()\">X</button>\n </div>\n <ng-container *ngIf=\"isImage; else otherFile\">\n <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n </ng-container>\n <ng-template #otherFile>\n <iframe [src]=\"fileUrl\" width=\"100%\" height=\"400px\"></iframe>\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".nav.nav-tabs+.tab-content{background:transparent}.row_cnt_folder{background:#fff;padding:50px 30px}.row-recent-file{border-top:1px solid #EBEBEB;padding:20px 0;cursor:pointer}p{margin-bottom:0}.floating_button{position:fixed;right:20px;bottom:20px;z-index:10;cursor:pointer}.floating_button img{height:60px}.form-cnt{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.section-header{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px}.document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px;margin-top:10px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px;overflow:hidden}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.nxt-file-map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.nxt-file-model-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.nxt-file-model-header h3{margin:0}.nxt-file-model-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}.preview-icon{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
4501
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FileUploadComponent, selector: "app-file-upload", inputs: { allFiles: "allFiles", limitFileUploading: "limitFileUploading", isDeleteFileButtonVisible: "isDeleteFileButtonVisible", isShowNoFileIcon: "isShowNoFileIcon", tableFile: "tableFile", question: "question", error: "error" }, outputs: { selectedFileData: "selectedFileData", deletedFileData: "deletedFileData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" style=\"margin: 0;\">\n <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n <!-- HA 19DEC23 For translation -->\n <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n </div>\n <div class=\"col-lg-3 document-cnt m-t-10 m-b-10 hover-pointer\"\n *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n <div *ngIf=\"!tableFile\" class=\"row\"> <!-- (click)=\"viewFile(eachFile)\" -->\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.name)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\">\n {{eachFile?.name}}\n </div>\n <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n </div>\n <!-- VD 20May24 - preview changes-->\n <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n </div>\n </div>\n <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n {{eachFile?.name}}\n </div>\n </div>\n </div>\n <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n <!-- HA 19DEC23 For translation -->\n <!-- VD 03May24 file upload fix-->\n <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n >{{ 'chooseFiles' | i18n:i18nService.currentLanguage }}</button>\n\n <input #fileInput type=\"file\" name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n (change) = uploadMultipleFiles($event)\n />\n </label>\n<!-- HA 19DEC23 For translation -->\n <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n </label>\n <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched || formControl?.documents?.dirty) &&\n formControl?.documents?.errors?.required\">\n {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n </span> -->\n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.Error_Message__c}}</div>\n<!-- VD 20May24 - preview changes-->\n<!-- model -->\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n <div class=\"nxt-file-map-modal\">\n <div class=\"nxt-file-model-content\">\n <div class=\"nxt-file-model-header\">\n <!-- HA 19DEC23 For translation -->\n <h4>{{fileName}}</h4>\n <button class=\"close-button\" (click)=\"close()\">X</button>\n </div>\n <ng-container *ngIf=\"isImage; else otherFile\">\n <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n </ng-container>\n <ng-template #otherFile>\n <iframe [src]=\"fileUrl\" width=\"100%\" height=\"400px\"></iframe>\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".nav.nav-tabs+.tab-content{background:transparent}.row_cnt_folder{background:#fff;padding:50px 30px}.row-recent-file{border-top:1px solid #EBEBEB;padding:20px 0;cursor:pointer}p{margin-bottom:0}.floating_button{position:fixed;right:20px;bottom:20px;z-index:10;cursor:pointer}.floating_button img{height:60px}.form-cnt{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.section-header{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px}.document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px;margin-top:10px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px;overflow:hidden}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.nxt-file-map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.nxt-file-model-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.nxt-file-model-header h3{margin:0}.nxt-file-model-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}.preview-icon{cursor:pointer}.Invalid{border:1px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
4207
4502
  }
4208
4503
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadComponent, decorators: [{
4209
4504
  type: Component,
4210
- args: [{ selector: 'app-file-upload', template: "<div class=\"row\" style=\"margin: 0;\">\n <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n <!-- HA 19DEC23 For translation -->\n <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n </div>\n <div class=\"col-lg-3 document-cnt m-t-10 m-b-10 hover-pointer\"\n *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n <div *ngIf=\"!tableFile\" class=\"row\"> <!-- (click)=\"viewFile(eachFile)\" -->\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.name)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\">\n {{eachFile?.name}}\n </div>\n <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n </div>\n <!-- VD 20May24 - preview changes-->\n <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n </div>\n </div>\n <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n {{eachFile?.name}}\n </div>\n </div>\n </div>\n <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n <!-- HA 19DEC23 For translation -->\n <!-- VD 03May24 file upload fix-->\n <button class=\"she-btn-primary-bordered\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n >{{ 'chooseFiles' | i18n:i18nService.currentLanguage }}</button>\n\n <input #fileInput type=\"file\" name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n (change) = uploadMultipleFiles($event)\n />\n </label>\n<!-- HA 19DEC23 For translation -->\n <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n </label>\n <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched || formControl?.documents?.dirty) &&\n formControl?.documents?.errors?.required\">\n {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n </span> -->\n</div>\n<!-- VD 20May24 - preview changes-->\n<!-- model -->\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n <div class=\"nxt-file-map-modal\">\n <div class=\"nxt-file-model-content\">\n <div class=\"nxt-file-model-header\">\n <!-- HA 19DEC23 For translation -->\n <h4>{{fileName}}</h4>\n <button class=\"close-button\" (click)=\"close()\">X</button>\n </div>\n <ng-container *ngIf=\"isImage; else otherFile\">\n <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n </ng-container>\n <ng-template #otherFile>\n <iframe [src]=\"fileUrl\" width=\"100%\" height=\"400px\"></iframe>\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".nav.nav-tabs+.tab-content{background:transparent}.row_cnt_folder{background:#fff;padding:50px 30px}.row-recent-file{border-top:1px solid #EBEBEB;padding:20px 0;cursor:pointer}p{margin-bottom:0}.floating_button{position:fixed;right:20px;bottom:20px;z-index:10;cursor:pointer}.floating_button img{height:60px}.form-cnt{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.section-header{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px}.document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px;margin-top:10px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px;overflow:hidden}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.nxt-file-map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.nxt-file-model-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.nxt-file-model-header h3{margin:0}.nxt-file-model-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}.preview-icon{cursor:pointer}\n"] }]
4505
+ args: [{ selector: 'app-file-upload', template: "<div class=\"row\" style=\"margin: 0;\">\n <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n <!-- HA 19DEC23 For translation -->\n <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n </div>\n <div class=\"col-lg-3 document-cnt m-t-10 m-b-10 hover-pointer\"\n *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n <div *ngIf=\"!tableFile\" class=\"row\"> <!-- (click)=\"viewFile(eachFile)\" -->\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.name)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\">\n {{eachFile?.name}}\n </div>\n <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n </div>\n <!-- VD 20May24 - preview changes-->\n <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n </div>\n </div>\n <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n <div class=\"col-lg-3 document_image\">\n <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n </div>\n <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n {{eachFile?.name}}\n </div>\n </div>\n </div>\n <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n <!-- HA 19DEC23 For translation -->\n <!-- VD 03May24 file upload fix-->\n <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n >{{ 'chooseFiles' | i18n:i18nService.currentLanguage }}</button>\n\n <input #fileInput type=\"file\" name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n (change) = uploadMultipleFiles($event)\n />\n </label>\n<!-- HA 19DEC23 For translation -->\n <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n </label>\n <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched || formControl?.documents?.dirty) &&\n formControl?.documents?.errors?.required\">\n {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n </span> -->\n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.Error_Message__c}}</div>\n<!-- VD 20May24 - preview changes-->\n<!-- model -->\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n <div class=\"nxt-file-map-modal\">\n <div class=\"nxt-file-model-content\">\n <div class=\"nxt-file-model-header\">\n <!-- HA 19DEC23 For translation -->\n <h4>{{fileName}}</h4>\n <button class=\"close-button\" (click)=\"close()\">X</button>\n </div>\n <ng-container *ngIf=\"isImage; else otherFile\">\n <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n </ng-container>\n <ng-template #otherFile>\n <iframe [src]=\"fileUrl\" width=\"100%\" height=\"400px\"></iframe>\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".nav.nav-tabs+.tab-content{background:transparent}.row_cnt_folder{background:#fff;padding:50px 30px}.row-recent-file{border-top:1px solid #EBEBEB;padding:20px 0;cursor:pointer}p{margin-bottom:0}.floating_button{position:fixed;right:20px;bottom:20px;z-index:10;cursor:pointer}.floating_button img{height:60px}.form-cnt{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.section-header{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px}.document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px;margin-top:10px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px;overflow:hidden}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.nxt-file-map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.nxt-file-model-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.nxt-file-model-header h3{margin:0}.nxt-file-model-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}.preview-icon{cursor:pointer}.Invalid{border:1px solid red!important}\n"] }]
4211
4506
  }], ctorParameters: function () { return [{ type: SharedService }, { type: DataService }, { type: i5.DomSanitizer }, { type: I18nService }]; }, propDecorators: { selectedFileData: [{
4212
4507
  type: Output
4213
4508
  }], deletedFileData: [{
@@ -4224,6 +4519,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
4224
4519
  type: Input
4225
4520
  }], question: [{
4226
4521
  type: Input
4522
+ }], error: [{
4523
+ type: Input
4227
4524
  }] } });
4228
4525
 
4229
4526
  class DependentTableComponent {
@@ -4383,7 +4680,7 @@ class TableAppendixComponent {
4383
4680
  return null;
4384
4681
  }
4385
4682
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableAppendixComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
4386
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableAppendixComponent, selector: "app-table-appendix", inputs: { question: "question" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\n <th></th>\n <th>{{ tableInfo.tableHeader }}</th>\n <th></th>\n </thead>\n <thead>\n <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\n {{ header.label }}\n </th>\n </thead>\n <tbody id=\"safetyMeasuresTableBody\">\n <tr *ngFor=\"let item of tableData; let i = index\">\n <td *ngFor=\"let header of tableHeader; let j = index\">\n <div *ngIf=\"header.type === 'text'\">\n <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type.includes('number')\">\n <!-- HA 19DEC23 For translation -->\n <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type === 'dropdown'\">\n <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \n [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\n (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\n </app-custom-dropdown>\n </div>\n <div *ngIf=\"header.type === 'textcheckbox'\">\n <div style=\"display: flex; justify-content: center;align-items: center;\">\n <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\" style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\n <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n </div>\n <div *ngIf=\"header.type === 'labelcheckbox'\">\n <div style=\"display: flex; justify-content: center;align-items: center;\">\n <!-- HA 19DEC23 For translation -->\n <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\n <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n </div>\n </td>\n </tr>\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\n <td colspan=\"1\">\n <!-- HA 19DEC23 For translation -->\n <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\n </td>\n </tr>\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\n <td colspan=\"3\">\n <!-- HA 19DEC23 For translation -->\n <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\n </td>\n <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">\n +\n </td>\n </tr>\n <tr *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\n <td *ngFor=\"let header of tableHeader; let l = index\">\n <div *ngIf=\"header.type === 'text'\" >\n <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\n <!-- HA 19DEC23 For translation -->\n <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \n [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\n </app-custom-dropdown>\n </div>\n <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\n <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\n (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\n placeholder=\"DD/MM/YYYY HH:MM\">\n </div>\n <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\n <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\n <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\n (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n </td>\n </tr>\n </tbody>\n </table>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:rgba(175,172,172,.5);color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:rgb(2,173,2);border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
4683
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableAppendixComponent, selector: "app-table-appendix", inputs: { question: "question" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\n <th></th>\n <th>{{ tableInfo.tableHeader }}</th>\n <th></th>\n </thead>\n <thead>\n <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\n {{ header.label }}\n </th>\n </thead>\n <tbody id=\"safetyMeasuresTableBody\">\n <tr *ngFor=\"let item of tableData; let i = index\">\n <td *ngFor=\"let header of tableHeader; let j = index\">\n <div *ngIf=\"header.type === 'text'\">\n <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type.includes('number')\">\n <!-- HA 19DEC23 For translation -->\n <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type === 'dropdown'\">\n <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \n [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\n (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\n </app-custom-dropdown>\n </div>\n <div *ngIf=\"header.type === 'textcheckbox'\">\n <div style=\"display: flex; justify-content: center;align-items: center;\">\n <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\" style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\n <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n </div>\n <div *ngIf=\"header.type === 'labelcheckbox'\">\n <div style=\"display: flex; justify-content: center;align-items: center;\">\n <!-- HA 19DEC23 For translation -->\n <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\n <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n </div>\n </td>\n </tr>\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\n <td colspan=\"1\">\n <!-- HA 19DEC23 For translation -->\n <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\n </td>\n </tr>\n <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\n <td colspan=\"3\">\n <!-- HA 19DEC23 For translation -->\n <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\n </td>\n <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\" (click)=\"addRow()\">\n +\n </td>\n </tr>\n <tr *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\n <td *ngFor=\"let header of tableHeader; let l = index\">\n <div *ngIf=\"header.type === 'text'\" >\n <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n </div>\n <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\n <!-- HA 19DEC23 For translation -->\n <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \n [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\n </app-custom-dropdown>\n </div>\n <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\n <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\n (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\n placeholder=\"DD/MM/YYYY HH:MM\">\n </div>\n <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\n <label class=\"switch2\">\n <input class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \n type=\"checkbox\"\n [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\n <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n <span class=\"switch-handle2\"></span> \n </label> \n </div>\n <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\n <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\n (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n </td>\n </tr>\n </tbody>\n </table>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:rgba(175,172,172,.5);color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:rgb(2,173,2);border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
4387
4684
  }
4388
4685
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableAppendixComponent, decorators: [{
4389
4686
  type: Component,
@@ -4395,53 +4692,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
4395
4692
  }] } });
4396
4693
 
4397
4694
  class CustomDateComponent {
4695
+ i18nService;
4398
4696
  date;
4399
4697
  readOnly = false; // VD 12Jun24 - readonly change
4698
+ error;
4699
+ errorMessage;
4400
4700
  dateChange = new EventEmitter();
4401
4701
  dateSelected;
4402
- constructor() { }
4702
+ constructor(i18nService) {
4703
+ this.i18nService = i18nService;
4704
+ }
4403
4705
  ngOnInit() {
4404
4706
  this.dateSelected = new Date(this.date);
4405
4707
  }
4406
4708
  onDateChange(event) {
4407
4709
  this.dateChange.emit(event);
4408
4710
  }
4409
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4410
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDateComponent, selector: "app-custom-date", inputs: { date: "date", readOnly: "readOnly" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<p>\n <input\n class=\"input-shengel\"\n [(ngModel)]=\"dateSelected\"\n [owlDateTimeTrigger]=\"dt1\"\n [owlDateTime]=\"dt1\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\"\n >\n <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n </p>", styles: [""], dependencies: [{ kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i2$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i2$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
4711
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDateComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
4712
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDateComponent, selector: "app-custom-date", inputs: { date: "date", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<p>\n <input\n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"dateSelected\"\n [owlDateTimeTrigger]=\"dt1\"\n [owlDateTime]=\"dt1\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY\"\n (input)=\"onDateChange($event)\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\"\n >\n <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n </p>\n <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i4$2.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$2.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
4411
4713
  }
4412
4714
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDateComponent, decorators: [{
4413
4715
  type: Component,
4414
- args: [{ selector: 'app-custom-date', template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<p>\n <input\n class=\"input-shengel\"\n [(ngModel)]=\"dateSelected\"\n [owlDateTimeTrigger]=\"dt1\"\n [owlDateTime]=\"dt1\"\n [disabled]=\"readOnly\"\n placeholder=\"DD/MM/YYYY\"\n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onDateChange($event)\"\n >\n <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n </p>" }]
4415
- }], ctorParameters: function () { return []; }, propDecorators: { date: [{
4716
+ 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"] }]
4717
+ }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { date: [{
4416
4718
  type: Input
4417
4719
  }], readOnly: [{
4418
4720
  type: Input
4721
+ }], error: [{
4722
+ type: Input
4723
+ }], errorMessage: [{
4724
+ type: Input
4419
4725
  }], dateChange: [{
4420
4726
  type: Output
4421
4727
  }] } });
4422
4728
 
4423
4729
  class CustomTimeComponent {
4730
+ i18nService;
4424
4731
  time;
4425
4732
  readOnly = false; // VD 12Jun24 - readonly change
4733
+ error;
4734
+ errorMessage;
4426
4735
  timeChange = new EventEmitter();
4427
4736
  timeSelected;
4428
- constructor() { }
4737
+ constructor(i18nService) {
4738
+ this.i18nService = i18nService;
4739
+ }
4429
4740
  ngOnInit() {
4430
- this.timeSelected = new Date(this.time);
4741
+ if (this.time) {
4742
+ this.time = this.time['value'] ? this.time['value'] : this.time;
4743
+ this.timeSelected = new Date(this.time);
4744
+ }
4745
+ else {
4746
+ // if no time set null value
4747
+ this.timeSelected = null;
4748
+ }
4749
+ }
4750
+ ngOnChanges(changes) {
4751
+ // update on changes
4752
+ if (changes['time']) {
4753
+ if (this.time) {
4754
+ this.time = this.time['value'] ? this.time['value'] : this.time;
4755
+ this.timeSelected = new Date(this.time);
4756
+ }
4757
+ else {
4758
+ this.timeSelected = null;
4759
+ }
4760
+ }
4431
4761
  }
4432
4762
  onTimeChange(event) {
4433
4763
  this.timeChange.emit(event);
4434
4764
  }
4435
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4436
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTimeComponent, selector: "app-custom-time", inputs: { time: "time", readOnly: "readOnly" }, outputs: { timeChange: "timeChange" }, ngImport: i0, template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n <p>\n <input\n class=\"input-shengel\"\n [(ngModel)]=\"timeSelected\"\n [owlDateTimeTrigger]=\"dt2\"\n [owlDateTime]=\"dt2\"\n placeholder=\"HH:MM\"\n [readOnly]=\"readOnly\" \n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onTimeChange($event)\"\n >\n <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\n </p>", styles: [""], dependencies: [{ kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i2$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i2$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
4765
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTimeComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
4766
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTimeComponent, selector: "app-custom-time", inputs: { time: "time", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { timeChange: "timeChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n <p>\n <input\n [class]=\"error ? 'invalid' : ''\"\n [(ngModel)]=\"timeSelected\"\n [owlDateTimeTrigger]=\"dt2\"\n [owlDateTime]=\"dt2\"\n placeholder=\"HH:MM\"\n [readOnly]=\"readOnly\" \n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onTimeChange($event)\"\n >\n <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\n </p>\n <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i4$2.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$2.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
4437
4767
  }
4438
4768
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTimeComponent, decorators: [{
4439
4769
  type: Component,
4440
- args: [{ selector: 'app-custom-time', template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n <p>\n <input\n class=\"input-shengel\"\n [(ngModel)]=\"timeSelected\"\n [owlDateTimeTrigger]=\"dt2\"\n [owlDateTime]=\"dt2\"\n placeholder=\"HH:MM\"\n [readOnly]=\"readOnly\" \n style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n (dateTimeChange)=\"onTimeChange($event)\"\n >\n <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\n </p>" }]
4441
- }], ctorParameters: function () { return []; }, propDecorators: { time: [{
4770
+ 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"] }]
4771
+ }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { time: [{
4442
4772
  type: Input
4443
4773
  }], readOnly: [{
4444
4774
  type: Input
4775
+ }], error: [{
4776
+ type: Input
4777
+ }], errorMessage: [{
4778
+ type: Input
4445
4779
  }], timeChange: [{
4446
4780
  type: Output
4447
4781
  }] } });
@@ -4498,6 +4832,7 @@ class QuestionbookComponent {
4498
4832
  labelValue;
4499
4833
  token; // VD 19JAN24 - getting token as input
4500
4834
  handleDropDown = new EventEmitter();
4835
+ handleQuestion = new EventEmitter(); // VD 19Jul01 - get updated question
4501
4836
  dropDownData;
4502
4837
  subQuestions;
4503
4838
  selectedFileData = [];
@@ -4526,26 +4861,28 @@ class QuestionbookComponent {
4526
4861
  if (this.qbItem?.Style__c) {
4527
4862
  // HA 28DEC23 Added styling and logics to load the book type questions
4528
4863
  this.qbItem.Style__c = typeof this.qbItem.Style__c === 'string' ? JSON.parse('' + this.qbItem?.Style__c) : this.qbItem.Style__c;
4529
- this.qbItem.Style__c.labelClass = this.qbItem.Style__c.labelClass ? this.qbItem.Style__c.labelClass : "";
4530
- this.qbItem.Style__c.labelStyle = this.qbItem.Style__c.labelStyle ? this.qbItem.Style__c.labelStyle : "";
4531
- this.qbItem.Style__c.inputClass = this.qbItem.Style__c.inputClass ? this.qbItem.Style__c.inputClass : "";
4532
- this.qbItem.Style__c.inputStyle = this.qbItem.Style__c.inputStyle ? this.qbItem.Style__c.inputStyle : "";
4533
- this.qbItem.Style__c.bookStyle = this.qbItem.Style__c.bookStyle ? this.qbItem.Style__c.bookStyle : "";
4534
- this.qbItem.Style__c.showLabel = this.qbItem.Style__c.showLabel ? this.qbItem.Style__c.showLabel : true;
4864
+ this.qbItem.Style__c.labelClass = this.qbItem.Style__c?.labelClass ? this.qbItem.Style__c?.labelClass : "";
4865
+ this.qbItem.Style__c.labelStyle = this.qbItem.Style__c?.labelStyle ? this.qbItem.Style__c?.labelStyle : "";
4866
+ this.qbItem.Style__c.inputClass = this.qbItem.Style__c?.inputClass ? this.qbItem.Style__c?.inputClass : "";
4867
+ this.qbItem.Style__c.inputStyle = this.qbItem.Style__c.inputStyle ? this.qbItem.Style__c?.inputStyle : "";
4868
+ this.qbItem.Style__c.bookStyle = this.qbItem.Style__c?.bookStyle ? this.qbItem.Style__c?.bookStyle : "";
4869
+ this.qbItem.Style__c.showLabel = this.qbItem.Style__c?.showLabel ? this.qbItem.Style__c?.showLabel : true;
4535
4870
  }
4536
4871
  else {
4537
- this.qbItem.Style__c = {
4538
- "labelClass": "",
4539
- "labelStyle": "",
4540
- "inputClass": "",
4541
- "inputStyle": "",
4542
- "bookStyle": "",
4543
- "showLabel": true,
4544
- "direction": "ltr",
4545
- "questionStyle": ""
4546
- };
4872
+ if (this.qbItem) {
4873
+ this.qbItem.Style__c = {
4874
+ "labelClass": "",
4875
+ "labelStyle": "",
4876
+ "inputClass": "",
4877
+ "inputStyle": "",
4878
+ "bookStyle": "",
4879
+ "showLabel": true,
4880
+ "direction": "ltr",
4881
+ "questionStyle": ""
4882
+ };
4883
+ }
4547
4884
  }
4548
- this.qbItem.Style__c.questionStyle = this.qbItem?.Style__c?.questionStyle ? this.qbItem.Style__c.questionStyle : "";
4885
+ this.qbItem.Style__c.questionStyle = this.qbItem?.Style__c?.questionStyle ? this.qbItem?.Style__c.questionStyle : "";
4549
4886
  this.langDirection = this.qbItem.Style__c.direction = this.qbItem?.Style__c?.direction ? this.qbItem?.Style__c?.direction : 'ltr';
4550
4887
  this.bookStyle = this.qbItem?.Style__c?.bookStyle;
4551
4888
  this.questions.forEach(element => {
@@ -4653,24 +4990,30 @@ class QuestionbookComponent {
4653
4990
  ques.input = this.selectedFileData = event;
4654
4991
  }
4655
4992
  else if (ques.Type__c == 'Date' || ques.Type__c == 'DateTime') { // HA 24JAN24 Converting Date and DateTime to UTC
4656
- let d = new Date(event.value);
4657
- // Convert to ISO string with timezone offset
4658
- let utcString = d.toISOString();
4659
- // console.log('utcString', utcString);
4660
- ques.input = utcString;
4993
+ if (event.value) {
4994
+ let d = new Date(event.value);
4995
+ let utcString = d.toISOString();
4996
+ ques.input = utcString;
4997
+ }
4998
+ else {
4999
+ ques.input = '';
5000
+ }
4661
5001
  }
4662
5002
  else {
4663
5003
  ques.input = event;
4664
5004
  }
4665
5005
  // validating error message
4666
- if (ques.Error_Message__c && !ques.input) {
4667
- ques.error = new ErrorWrapper;
4668
- }
4669
- else {
4670
- ques.error = null;
4671
- }
5006
+ const hasError = ques.Error_Message__c && ((ques.Type__c === 'File' && ques.input.length == 0) || (ques.Type__c != 'File' && !ques.input));
5007
+ ques.error = hasError ? new ErrorWrapper() : null;
5008
+ // if(ques.Is_Optional__c && !ques.input){
5009
+ // ques.error = new ErrorWrapper
5010
+ // }else{
5011
+ // ques.error = null;
5012
+ // }
4672
5013
  // Once the right value is stored in ques.input store the ques (with input) in storageService
4673
5014
  this.storageService.update(ques);
5015
+ // VD 19Jul01 - get updated question
5016
+ this.handleQuestion.emit(ques);
4674
5017
  }
4675
5018
  deleteFile(fileData) {
4676
5019
  console.log('fileDATA', fileData);
@@ -4679,11 +5022,11 @@ class QuestionbookComponent {
4679
5022
  this.hadleDropDownDependent.emit(event);
4680
5023
  }
4681
5024
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: I18nService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
4682
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", hadleDropDownDependent: "hadleDropDownDependent" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <div\n [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.Is_Hide__c\">\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n </div>\n <!-- VD 20JUN24 - help text changes-->\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c.showLabel\" [style]=\"ques.Style__c.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\">{{ ques?.Question_Text__c }} <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n </div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n\n <!-- Date-->\n <div *ngIf=\"ques.Type__c === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n\n <!-- Time-->\n <div *ngIf=\"ques.Type__c === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n\n <!-- Text -->\n <div *ngIf=\"ques.Type__c === 'Text'\">\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n textBox: !qbItem.Progress_Bar__c\n }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n \n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.Type__c === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n\n <!-- for text area -->\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.Type__c === 'Email'\">\n <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n </div>\n\n <!-- Table -->\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-table>\n </div>\n\n <!-- Table Appendix -->\n <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\" [selectedValue]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n [referenceField]=\"ques.Reference_Field__c\"\n [readOnly]=\"ques.Read_Only__c\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n\n <!-- Attachment / Files -->\n <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n <app-custom-label [labelValue]=\"labelValue\">\n </app-custom-label>\n </div>\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\" \n [width]=\"'150px'\" \n [buttonText]=\"ques?.Question__c\"\n [value]=\"ques?.Question__c\"\n (buttonValue)=\"childEventCapture($event, ques)\"\n >\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.Type__c === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "hadleDropDownDependent"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
5025
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", hadleDropDownDependent: "hadleDropDownDependent" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <div\n [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.Is_Hide__c\">\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n </div>\n <!-- VD 20JUN24 - help text changes-->\n <!-- VD 01Aug24 - validation change-->\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c.showLabel\" [style]=\"ques.Style__c.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\">{{ ques?.Question_Text__c }} \n <div *ngIf=\"ques.Is_Optional__c\" style=\"color: red;\">*</div>\n <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n </div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n\n <!-- Date-->\n <div *ngIf=\"ques.Type__c === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n\n <!-- Time-->\n <div *ngIf=\"ques.Type__c === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.Type__c === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"childEventCapture($event, ques)\"></app-custom-calendar>\n </div>\n\n <!-- Text -->\n <div *ngIf=\"ques.Type__c === 'Text'\">\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n textBox: !qbItem.Progress_Bar__c\n }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n \n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.Type__c === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n\n <!-- for text area -->\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.Type__c === 'Email'\">\n <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n </div>\n\n <!-- Table -->\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-table>\n </div>\n\n <!-- Table Appendix -->\n <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\" [selectedValue]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n [referenceField]=\"ques.Reference_Field__c\"\n [readOnly]=\"ques.Read_Only__c\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n\n <!-- Attachment / Files -->\n <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n <app-custom-label [labelValue]=\"labelValue\">\n </app-custom-label>\n </div>\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\" \n [width]=\"'150px'\" \n [buttonText]=\"ques?.Question__c\"\n [value]=\"ques?.Question__c\"\n (buttonValue)=\"childEventCapture($event, ques)\"\n >\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.Type__c === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question"], outputs: ["eventSelected"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly", "error", "errorMessage"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly", "error", "errorMessage"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
4683
5026
  }
4684
5027
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionbookComponent, decorators: [{
4685
5028
  type: Component,
4686
- args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <div\n [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.Is_Hide__c\">\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n </div>\n <!-- VD 20JUN24 - help text changes-->\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c.showLabel\" [style]=\"ques.Style__c.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\">{{ ques?.Question_Text__c }} <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n </div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n\n <!-- Date-->\n <div *ngIf=\"ques.Type__c === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n\n <!-- Time-->\n <div *ngIf=\"ques.Type__c === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n\n <!-- Text -->\n <div *ngIf=\"ques.Type__c === 'Text'\">\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n textBox: !qbItem.Progress_Bar__c\n }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n \n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.Type__c === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n\n <!-- for text area -->\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.Type__c === 'Email'\">\n <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n </div>\n\n <!-- Table -->\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-table>\n </div>\n\n <!-- Table Appendix -->\n <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\" [selectedValue]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n [referenceField]=\"ques.Reference_Field__c\"\n [readOnly]=\"ques.Read_Only__c\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n\n <!-- Attachment / Files -->\n <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n <app-custom-label [labelValue]=\"labelValue\">\n </app-custom-label>\n </div>\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\" \n [width]=\"'150px'\" \n [buttonText]=\"ques?.Question__c\"\n [value]=\"ques?.Question__c\"\n (buttonValue)=\"childEventCapture($event, ques)\"\n >\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.Type__c === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"] }]
5029
+ args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23 Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24 Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n <div class=\"form-row\">\n <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n <div\n [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n <!-- Sub Question Label -->\n <!-- HA 20DEC23 Label Style from salesforce -->\n <!-- VD 09May24 is hide field change-->\n <div *ngIf=\"!ques.Is_Hide__c\">\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n </div>\n <!-- VD 20JUN24 - help text changes-->\n <!-- VD 01Aug24 - validation change-->\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c.showLabel\" [style]=\"ques.Style__c.labelStyle\">\n <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\">{{ ques?.Question_Text__c }} \n <div *ngIf=\"ques.Is_Optional__c\" style=\"color: red;\">*</div>\n <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n </div>\n <!-- // VD 12Jun24 - readonly change-->\n <!-- DateTime -->\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\n <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date-picker>\n </div>\n\n <!-- Date-->\n <div *ngIf=\"ques.Type__c === 'Date'\">\n <app-custom-date [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n </app-custom-date>\n </div>\n\n <!-- Time-->\n <div *ngIf=\"ques.Type__c === 'Time'\">\n <app-custom-time [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n </app-custom-time>\n </div>\n <!-- calendar -->\n <div *ngIf=\"ques.Type__c === 'Calendar'\">\n <app-custom-calendar [question]=\"ques\" (eventSelected)=\"childEventCapture($event, ques)\"></app-custom-calendar>\n </div>\n\n <!-- Text -->\n <div *ngIf=\"ques.Type__c === 'Text'\">\n <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n textBox: !qbItem.Progress_Bar__c\n }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n </app-custom-input>\n </div>\n \n <!-- for pick location -->\n <!-- VD 21DEC23 - dependent field change -->\n <div *ngIf=\"ques.Type__c === 'Location'\">\n <!-- HA10012024 Added Api key as input -->\n <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n </app-pick-location>\n </div>\n\n <!-- for text area -->\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\n <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"ques.Type__c === 'Email'\">\n <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n </div>\n\n <!-- Table -->\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-table>\n </div>\n\n <!-- Table Appendix -->\n <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-table-appendix>\n </div>\n <!-- list -->\n <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\" [selectedValue]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n </lib-search-box>\n </div>\n\n <!-- Dropdown -->\n <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n [referenceField]=\"ques.Reference_Field__c\"\n [readOnly]=\"ques.Read_Only__c\"\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n </app-custom-dropdown>\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n </div>\n\n <!-- Attachment / Files -->\n <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n </div>\n <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n </app-dependent-table>\n </div>\n <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n <app-custom-label [labelValue]=\"labelValue\">\n </app-custom-label>\n </div>\n <!-- 08NOV23 - button type question added -->\n <!-- Button -->\n <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n <app-custom-button [height]=\"'50px'\" \n [width]=\"'150px'\" \n [buttonText]=\"ques?.Question__c\"\n [value]=\"ques?.Question__c\"\n (buttonValue)=\"childEventCapture($event, ques)\"\n >\n </app-custom-button>\n </div>\n <!-- HA 20DEC23 This is to load book type questions-->\n <div *ngIf=\"ques.Type__c === 'Book'\">\n <!-- HA 09FEB24 Added ternary operator -->\n <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"] }]
4687
5030
  }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: I18nService }, { type: Document, decorators: [{
4688
5031
  type: Inject,
4689
5032
  args: [DOCUMENT]
@@ -4703,6 +5046,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
4703
5046
  type: Input
4704
5047
  }], handleDropDown: [{
4705
5048
  type: Output
5049
+ }], handleQuestion: [{
5050
+ type: Output
4706
5051
  }], dropDownData: [{
4707
5052
  type: Input
4708
5053
  }], hadleDropDownDependent: [{
@@ -4912,6 +5257,7 @@ class BookletComponent {
4912
5257
  this.dataBind = []; // HA 12FEB24 Clearing dataBind upon button action so that dataBind value will not override the changed value
4913
5258
  console.log(action);
4914
5259
  let dataToParent = {};
5260
+ let validForm = true; // VD 01Aug24 - validation change
4915
5261
  // HA 22JAN24 this change to make close event work
4916
5262
  dataToParent['action'] = action.eventtoemit;
4917
5263
  if (!(action.eventtoemit === 'close' || action.eventtoemit === 'print')) {
@@ -4928,7 +5274,10 @@ class BookletComponent {
4928
5274
  for (let key in dataToParent['jsonBook'].bookQuestionsMap) {
4929
5275
  const currentBook = dataToParent['jsonBook'].bookQuestionsMap[key];
4930
5276
  currentBook.Questions__r.records.forEach(element => {
4931
- if (element.Error_Message__c && dataToParent['action'] == 'submit' && !element.input) {
5277
+ // VD 01Aug24 - validation change
5278
+ if (element.Is_Optional__c && dataToParent['action'] == 'submit' && !element.input) {
5279
+ element.error = true;
5280
+ validForm = false;
4932
5281
  this.changeService.submitChange(element.Id);
4933
5282
  }
4934
5283
  });
@@ -4939,7 +5288,14 @@ class BookletComponent {
4939
5288
  dataToParent['actionData'] = action['data'];
4940
5289
  }
4941
5290
  // HA 23JAN24 To call the action on any event
4942
- this.handleBookletActionEvent.emit(dataToParent);
5291
+ // VD 01Aug24 - validation change
5292
+ if (validForm) {
5293
+ this.handleBookletActionEvent.emit(dataToParent);
5294
+ }
5295
+ else {
5296
+ dataToParent['action'] = 'error';
5297
+ this.handleBookletActionEvent.emit(dataToParent);
5298
+ }
4943
5299
  }
4944
5300
  // HA 18-JAN-24 handleCompleteBooklet is to simplify the logic
4945
5301
  handleCompleteBooklet(completeBooklet) {
@@ -5073,7 +5429,7 @@ class BookletComponent {
5073
5429
  this.hadleDropDownDependent.emit(event);
5074
5430
  }
5075
5431
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BookletComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: StorageService }, { token: i4.ActivatedRoute }, { token: i5.DomSanitizer }, { token: ChangeService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
5076
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n <!-- HA 28DEC23 Below If logic is to load from booklet -->\n <div *ngIf=\"qb.Questions__r?.records; else elseBlock\">\n <div *ngFor=\"let ques of qb.Questions__r.records\" [class]=\"qb.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n <div class=\"questiondiv2\">\n <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n <div *ngIf=\"ques.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing lable when its available-->\n <div [innerHTML]=\"getText(ques?.Question_Text__c)\" *ngIf=\"ques?.Question_Text__c\" > \n {{ ques?.Question_Text__c }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"ques\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n <ng-template #elseBlock>\n <div [class]=\"qb.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n <div class=\"questiondiv2\">\n <div *ngIf=\"!qb.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing lable when its available-->\n <div [innerHTML]=\"getText(qb?.Question_Text__c)\" *ngIf=\"qb?.Question_Text__c\" > \n {{ qb?.Question_Text__c }}\n {{ qb?.Title__c }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!-- // VD 11Jun24 - translation changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </ng-template>\n</div>\n\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.Status__c != 'Completed'\" [ngClass]=\"langDirection\">\n <div *ngFor=\"let action of actions; let i = index\">\n <!-- // HA 22JAN24 Commonise the button style in fusion -->\n <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n {{ action.name }}\n </button>\n </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "hadleDropDownDependent"] }] });
5432
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n <!-- HA 28DEC23 Below If logic is to load from booklet -->\n <div *ngIf=\"qb.Questions__r?.records; else elseBlock\">\n <div *ngFor=\"let ques of qb.Questions__r.records\" [class]=\"qb.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n <div class=\"questiondiv2\">\n <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n <div *ngIf=\"ques.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing lable when its available-->\n <div [innerHTML]=\"getText(ques?.Question_Text__c)\" *ngIf=\"ques?.Question_Text__c\" > \n {{ ques?.Question_Text__c }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"ques\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </div>\n <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n <ng-template #elseBlock>\n <div [class]=\"qb.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n <div class=\"questiondiv2\">\n <div *ngIf=\"!qb.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n <!-- VD 08NOV23 - showing lable when its available-->\n <div [innerHTML]=\"getText(qb?.Question_Text__c)\" *ngIf=\"qb?.Question_Text__c\" > \n {{ qb?.Question_Text__c }}\n {{ qb?.Title__c }}\n </div>\n </div> <!-- VD 19JAN24 - getting token as input --> <!-- // VD 11Jun24 - translation changes-->\n <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\" (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n </div>\n </div>\n </ng-template>\n</div>\n\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.Status__c != 'Completed'\" [ngClass]=\"langDirection\">\n <div *ngFor=\"let action of actions; let i = index\">\n <!-- // HA 22JAN24 Commonise the button style in fusion -->\n <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n {{ action.name }}\n </button>\n </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent"] }] });
5077
5433
  }
5078
5434
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BookletComponent, decorators: [{
5079
5435
  type: Component,
@@ -5407,6 +5763,7 @@ class NxtAppModule {
5407
5763
  CustomInputComponent,
5408
5764
  CustomTextAreaComponent,
5409
5765
  CustomTableComponent,
5766
+ CustomCalendarComponent,
5410
5767
  CustomDatePickerComponent,
5411
5768
  DropdownWithFlagComponent,
5412
5769
  CustomDropdownComponent,
@@ -5422,6 +5779,7 @@ class NxtAppModule {
5422
5779
  CustomDateComponent,
5423
5780
  CustomTimeComponent,
5424
5781
  CustomButtonComponent,
5782
+ CustomModelComponent,
5425
5783
  I18nComponent,
5426
5784
  I18nPipe], imports: [CommonModule, FormsModule,
5427
5785
  MyDatePickerModule,
@@ -5546,6 +5904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
5546
5904
  CustomInputComponent,
5547
5905
  CustomTextAreaComponent,
5548
5906
  CustomTableComponent,
5907
+ CustomCalendarComponent,
5549
5908
  CustomDatePickerComponent,
5550
5909
  DropdownWithFlagComponent,
5551
5910
  CustomDropdownComponent,
@@ -5561,6 +5920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
5561
5920
  CustomDateComponent,
5562
5921
  CustomTimeComponent,
5563
5922
  CustomButtonComponent,
5923
+ CustomModelComponent,
5564
5924
  I18nComponent,
5565
5925
  I18nPipe
5566
5926
  ],