@rangertechnologies/ngnxt 2.0.32 → 2.0.34

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.
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
2
2
  import { Injectable, Component, EventEmitter, ViewChild, Input, Output, ViewEncapsulation, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
3
3
  import * as moment from 'moment';
4
4
  import { Subject } from 'rxjs';
5
- import * as i3 from '@angular/router';
5
+ import * as i4 from '@angular/router';
6
6
  import * as i1 from '@angular/common/http';
7
7
  import { HttpHeaders, HttpClientModule } from '@angular/common/http';
8
8
  import * as i5 from '@angular/platform-browser';
@@ -17,11 +17,11 @@ import * as i10 from 'mydatepicker';
17
17
  import { MyDatePickerModule } from 'mydatepicker';
18
18
  import * as i11 from 'ng-circle-progress';
19
19
  import { NgCircleProgressModule } from 'ng-circle-progress';
20
- import * as i3$1 from '@angular/google-maps';
20
+ import * as i3 from '@angular/google-maps';
21
21
  import { GoogleMapsModule } from '@angular/google-maps';
22
22
  import * as i2 from 'ng-pick-datetime';
23
23
  import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
24
- import * as i4 from '@ng-select/ng-select';
24
+ import * as i4$1 from '@ng-select/ng-select';
25
25
  import { NgSelectModule } from '@ng-select/ng-select';
26
26
 
27
27
  class NxtAppService {
@@ -719,7 +719,7 @@ class SalesforceService {
719
719
  constructor(_router) {
720
720
  this._router = _router;
721
721
  }
722
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SalesforceService, deps: [{ token: i3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
722
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SalesforceService, deps: [{ token: i4.Router }], target: i0.ɵɵFactoryTarget.Injectable });
723
723
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SalesforceService, providedIn: 'root' });
724
724
  }
725
725
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SalesforceService, decorators: [{
@@ -727,7 +727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
727
727
  args: [{
728
728
  providedIn: 'root'
729
729
  }]
730
- }], ctorParameters: function () { return [{ type: i3.Router }]; } });
730
+ }], ctorParameters: function () { return [{ type: i4.Router }]; } });
731
731
 
732
732
  class DataService {
733
733
  http;
@@ -882,7 +882,7 @@ class PickLocationComponent {
882
882
  this.showModal = false;
883
883
  }
884
884
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PickLocationComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
885
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PickLocationComponent, selector: "app-pick-location", inputs: { address: "address" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<div>\r\n <!-- <label class=\"she-label\">Location</label> -->\r\n <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"Enter Location\"\r\n (keydown.enter)=\"$event.preventDefault()\" placeholder=\"Search Nearest Location\" autocorrect=\"off\"\r\n autocapitalize=\"off\" spellcheck=\"off\" type=\"text\" [(ngModel)]=\"address\"\r\n >\r\n <a (click)=\"openMap()\"\r\n style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\r\n <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\r\n </i> Pick Location</a>\r\n</div>\r\n\r\n<div class=\"map-overlay\" *ngIf=\"showModal\">\r\n <div class=\"map-modal\">\r\n <div class=\"map-modal-content\">\r\n <div class=\"map-modal-header\">\r\n <h4>Pick Your Location</h4>\r\n <button class=\"close-button\" (click)=\"closeModal()\">X</button>\r\n </div>\r\n <!-- Modal content goes here -->\r\n <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\r\n [fullscreenControl]=\"true\">\r\n <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\r\n (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\r\n </agm-map> -->\r\n <google-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\r\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n </google-map>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"], dependencies: [{ kind: "directive", type: i1$1.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: i3$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: i3$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"] }] });
885
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PickLocationComponent, selector: "app-pick-location", inputs: { address: "address" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<div>\r\n <!-- <label class=\"she-label\">Location</label> -->\r\n <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"Enter Location\"\r\n (keydown.enter)=\"$event.preventDefault()\" placeholder=\"Search Nearest Location\" autocorrect=\"off\"\r\n autocapitalize=\"off\" spellcheck=\"off\" type=\"text\" [(ngModel)]=\"address\"\r\n >\r\n <a (click)=\"openMap()\"\r\n style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\r\n <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\r\n </i> Pick Location</a>\r\n</div>\r\n\r\n<div class=\"map-overlay\" *ngIf=\"showModal\">\r\n <div class=\"map-modal\">\r\n <div class=\"map-modal-content\">\r\n <div class=\"map-modal-header\">\r\n <h4>Pick Your Location</h4>\r\n <button class=\"close-button\" (click)=\"closeModal()\">X</button>\r\n </div>\r\n <!-- Modal content goes here -->\r\n <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\r\n [fullscreenControl]=\"true\">\r\n <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\r\n (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\r\n </agm-map> -->\r\n <google-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\r\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n </google-map>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"], dependencies: [{ kind: "directive", type: i1$1.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: i3.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: i3.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"] }] });
886
886
  }
887
887
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PickLocationComponent, decorators: [{
888
888
  type: Component,
@@ -1089,7 +1089,7 @@ class DropdownWithFlagComponent {
1089
1089
  this.flagDropDownChange.emit(event);
1090
1090
  }
1091
1091
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownWithFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1092
- 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\">\r\n <label class=\"switch\">\r\n <input class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\r\n <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \r\n <span class=\"switch-handle\"></span> \r\n </label> \r\n <ng-select *ngIf=\"certified\"\r\n style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \r\n [items]=\"JobPerformerCertificates\"\r\n [(ngModel)]=\"selectedValue\"\r\n (change)=\"onJobPerformerCertified($event)\"\r\n placeholder=\"---Select---\">\r\n </ng-select>\r\n </div> ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#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: i1$1.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: i4.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"] }] });
1092
+ 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\">\r\n <label class=\"switch\">\r\n <input class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\r\n <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \r\n <span class=\"switch-handle\"></span> \r\n </label> \r\n <ng-select *ngIf=\"certified\"\r\n style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \r\n [items]=\"JobPerformerCertificates\"\r\n [(ngModel)]=\"selectedValue\"\r\n (change)=\"onJobPerformerCertified($event)\"\r\n placeholder=\"---Select---\">\r\n </ng-select>\r\n </div> ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#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: i1$1.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: i4$1.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"] }] });
1093
1093
  }
1094
1094
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownWithFlagComponent, decorators: [{
1095
1095
  type: Component,
@@ -1158,7 +1158,7 @@ class CustomDropdownComponent {
1158
1158
  this.valueChange.emit(change);
1159
1159
  }
1160
1160
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
1161
- 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", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<select *ngIf=\"!fromShengel\"\r\n [ngClass]=\"{\r\n 'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\r\n 'custom-select': !progressBar\r\n }\" class=\"custom-select mr-sm-2 dd-height\" \r\n [id]=\"id\" \r\n [(ngModel)]=\"selectedValue\"\r\n (change)=\"selectChange($event.target.value);\" \r\n [style.borderColor]=\"error ? 'red' : '#858585'\"\r\n [style.color]=\"error ? 'red' : ''\">\r\n <option *ngFor=\"let option of options\" [value]=\"option.Value__c\" class=\"option\">{{ option.Value__c }}</option>\r\n <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\r\n</select>\r\n\r\n<ng-select *ngIf=\"fromShengel\"\r\n class=\"shengel-custom-select\"\r\n [(ngModel)]=\"selectedValue\" \r\n [placeholder]=\"placeholder\"\r\n (change)=\"selectChange($event)\"\r\n [id]=\"id\">\r\n <ng-option *ngFor=\"let option of options\" [value]=\"option\">{{ option[labelField] }}</ng-option> \r\n <ng-option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</ng-option>\r\n</ng-select>\r\n\r\n<span *ngIf=\"error && fromShengel\" class=\"error-msg\">Required*</span>", styles: [".ng-select{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.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: i4.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }] });
1161
+ 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", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<select *ngIf=\"!fromShengel\"\r\n [ngClass]=\"{\r\n 'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\r\n 'custom-select': !progressBar\r\n }\" class=\"custom-select mr-sm-2 dd-height\" \r\n [id]=\"id\" \r\n [(ngModel)]=\"selectedValue\"\r\n (change)=\"selectChange($event.target.value);\" \r\n [style.borderColor]=\"error ? 'red' : '#858585'\"\r\n [style.color]=\"error ? 'red' : ''\">\r\n <option *ngFor=\"let option of options\" [value]=\"option.Value__c\" class=\"option\">{{ option.Value__c }}</option>\r\n <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\r\n</select>\r\n\r\n<ng-select *ngIf=\"fromShengel\"\r\n class=\"shengel-custom-select\"\r\n [(ngModel)]=\"selectedValue\" \r\n [placeholder]=\"placeholder\"\r\n (change)=\"selectChange($event)\"\r\n [id]=\"id\">\r\n <ng-option *ngFor=\"let option of options\" [value]=\"option\">{{ option[labelField] }}</ng-option> \r\n <ng-option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</ng-option>\r\n</ng-select>\r\n\r\n<span *ngIf=\"error && fromShengel\" class=\"error-msg\">Required*</span>", styles: [".ng-select{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.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: i4$1.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }] });
1162
1162
  }
1163
1163
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDropdownComponent, decorators: [{
1164
1164
  type: Component,
@@ -3206,13 +3206,13 @@ class QuestionnaireComponent {
3206
3206
  getValue(item) {
3207
3207
  return Object.values(item)[0];
3208
3208
  }
3209
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: i3.ActivatedRoute }, { token: i5.DomSanitizer }, { token: i6.NgxSpinnerService }, { token: i7.UntypedFormBuilder }, { token: i8.DeviceDetectorService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
3209
+ 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.NgxSpinnerService }, { token: i7.UntypedFormBuilder }, { token: i8.DeviceDetectorService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
3210
3210
  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 -->\r\n<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n\r\n<!-- Back Processing -->\r\n<div *ngIf=\"backicon == false\" >\r\n <div class=\"backicon\" [style.visibility]=\"questionStack.length >0 ? 'visible' : 'hidden'\">\r\n <button (click)=\"handleBackClick()\" [class]=\" abItem?.Status__c == 'Completed' ? 'summary-volver':'app-back1'\">\r\n <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.Back__c }}\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<!-- Question Hanlding -->\r\n<div *ngIf=\"questionItem\" [class]=\"qbItem.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\r\n <!-- Progress Bar & Title -->\r\n <div *ngIf=\"questionItem.Title__c && qbItem.Progress_Bar__c\">\r\n <h1 class=\"header1\">{{ questionItem?.Title__c }}</h1>\r\n <div class=\"header2\">{{ questionItem?.SubTitle__c }}</div>\r\n </div>\r\n\r\n <!-- Progress & Grouping -->\r\n <div [ngClass]=\"{ questiondiv2: !qbItem?.Progress_Bar__c }\">\r\n <!-- Pie Chart Progress -->\r\n <div [ngClass]=\"{ bgColor: qbItem?.Progress_Bar__c }\">\r\n <div id=\"progress\" *ngIf=\"qbItem?.Progress_Bar__c\">\r\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n [startFromZero]=\"false\" [responsive]=\"false\" >\r\n </circle-progress>\r\n </div>\r\n </div>\r\n\r\n <!-- Show the Group/Module related to the Progress -->\r\n <div *ngIf=\"questionItem.Group__c && qbItem.Progress_Bar__c\"\r\n [ngClass]=\"{ questionalign: !qbItem?.Progress_Bar__c }\">\r\n <div class=\"largeTitle\">\r\n <h3 class=\"myt-font6 myt-text3\">\r\n {{ questionItem?.Group__c }}\r\n </h3>\r\n <div *ngIf=\"questionItem.Sub_Text__c != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.Sub_Text__c}}</div>\r\n <div *ngIf=\"questionItem.Sub_Text__c === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.Sub_Text__c}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Question Handling -->\r\n <div class=\"questiondiv2\">\r\n <!-- Title -->\r\n <div *ngIf=\"questionItem.Is_Title__c\">\r\n <div *ngIf=\"questionItem.Type__c != 'Book' && questionItem.Question_No__c!='6' && questionItem.Question_No__c!='9'\"> \r\n <h3 class=\"questionalign myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\r\n {{questionItem?.Question_Text__c}}\r\n </h3>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!questionItem.Is_Title__c\" [class]=\"qbItem.isShengel__c ? 'header-style additional' : 'question-f-size additional'\">\r\n <div [innerHTML]=\"getText(questionItem?.Question_Text__c)\" >\r\n {{ questionItem?.Question_Text__c }}\r\n </div>\r\n </div>\r\n\r\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n <div *ngIf=\"questionItem.Type__c == 'Book'\">\r\n <div *ngIf=\"questionItem.Question_No__c=='6'\">\r\n <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\r\n {{ questionItem?.Question_Text__c }}\r\n </h3>\r\n </div>\r\n </div>\r\n \r\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n <div *ngIf=\"questionItem.Type__c == 'File' \">\r\n <div *ngIf=\"questionItem.Question_No__c=='9'\">\r\n <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\r\n {{questionItem?.Question_Text__c}}\r\n </h3>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Additional Info -->\r\n <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\r\n <div *ngIf=\"questionItem.Additional_Rich__c && qbItem.Progress_Bar__c\" >\r\n <div\r\n class=\"additional \" [innerHTML]=\"innerhtml\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"questionItem.Additional_Rich__c && !qbItem.Progress_Bar__c\">\r\n <div class=\"info-alert ques-alert1\">\r\n <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\r\n <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown-->\r\n <div *ngIf=\"dropdownFlag\" >\r\n <div class=\"dis-flex\">\r\n <select \r\n [ngClass]=\"{\r\n 'dt-line myt-align3 myt-align2 dpDown dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.Progress_Bar__c,\r\n 'custom-select': !qbItem?.Progress_Bar__c\r\n }\" class=\"mr-sm-2 dd-height dropbox \" id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\r\n }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\" style=\"margin-left: 21.5rem !important;\">\r\n <option *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"option\" value=\"{{ opt.Value__c }}\">\r\n {{ opt.Value__c }}\r\n </option>\r\n <option value=\".\" disabled hidden>Bitte treffen Sie eine Auswahl</option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <!-- Radio -->\r\n <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\r\n <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\r\n {{ questionItem?.Error_Message__c }}\r\n </div>\r\n <div class=\"dis-flex\">\r\n <div *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"radio radioOption\" >\r\n <label class=\"radiocontainer container myt-font4\">{{ opt.Value__c }}\r\n <input type=\"radio\" [id]=\"opt.Id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" value=\"{{ opt.Value__c }}\"\r\n (change)=\"optionChange(opt.Value__c)\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Checkbox -->\r\n <div *ngIf=\"checkboxFlag\" class=\"\">\r\n <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\r\n {{ questionItem?.Error_Message__c }}\r\n </div>\r\n <div class=\"dis-flex\">\r\n <div *ngFor=\"let item of optionValues\" class=\"radio col-md-6 optiondiv\">\r\n <label class=\" container1 \" >{{ item.Value__c }}\r\n <input type=\"checkbox\" [id]=\"item.Id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\r\n <span class='checkmark1'></span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Text -->\r\n <div *ngIf=\"textFlag\" class=\"col-md-12 myt-book1\">\r\n <div class=\"col-md-12\" class=\"dis-flex myt-align1\" [class]=\"'col-md-' + questionItem?.Size__c + ' paddingnone'\">\r\n <input type=\"text\" [(ngModel)]=\"inpValue\" [ngClass]=\"{\r\n 'boxoutline myt-font1 myt-book1': qbItem?.Progress_Bar__c,\r\n textBox1: !qbItem?.Progress_Bar__c\r\n }\" id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error\r\n ? 'red'\r\n : inpValue?.length > 0\r\n ? '#87be1c'\r\n : ''\r\n }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- Text Area -->\r\n <div *ngIf=\"taFlag\" class=\"col-md-12\">\r\n <div class=\"dis-flex\">\r\n <textarea class=\"ta-input\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error\r\n ? 'red'\r\n : inpValue?.length > 0 && taFocusOut\r\n ? '#87be1c'\r\n : ''\r\n }}\" (focusout)=\"taFocusOut = true\"\r\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\r\n <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- CC Number Format -->\r\n <div *ngIf=\"numberFlag\" class=\"col-md-12\">\r\n <div class=\"dis-flex\">\r\n <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\"\r\n [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\r\n (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\r\n style=\"width:-webkit-fill-available;\" style.border-color=\"{{\r\n this.questionItem.error\r\n ? 'red'\r\n : inpValue?.length > 0\r\n ? '#87be1c'\r\n : ''\r\n }}\" />\r\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\r\n *ngIf=\"inpValue?.length > 0\"></i>\r\n </div>\r\n </div>\r\n <!-- END-->\r\n\r\n <!-- AlphaNumeric -->\r\n <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\r\n <div style=\"position:relative;\">\r\n <input type=text placeholder=\"0 of 0\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\r\n </div>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"emailFlag\" class=\"col-md-12\">\r\n <div class=\"dis-flex\">\r\n <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\r\n required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem.error\r\n ? 'red'\r\n : inpValue?.length > 0\r\n ? '#87be1c'\r\n : ''\r\n }}\" />\r\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\r\n *ngIf=\"inpValue?.length > 0\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- DateTime -->\r\n <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero myt-time1\" >\r\n <!-- Error Handling -->\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n\r\n <!-- Date -->\r\n <div *ngIf=\"dateFlag\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label>\r\n <div class=\"dis-flex\">\r\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event)\"\r\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"Seleccione fecha\" (focus)=\"clearError()\">\r\n </my-date-picker>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Time -->\r\n <div *ngIf=\"timeFlag\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label>\r\n <div class=\"dis-flex\">\r\n <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\r\n dateandTime: !qbItem?.Progress_Bar__c}\" \r\n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n (focus)=\"(clearSQError) \">\r\n <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">HH</option>\r\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n {{ hour }}\r\n </option>\r\n </select>\r\n <span class=\"colon\"> : </span>\r\n <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">MM</option>\r\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n {{ minute }}\r\n </option>\r\n </select>\r\n <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem?.X24_Hours__c == false\">\r\n <span class=\"colon\"> : </span>\r\n <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n <option value=\"AM\">AM</option>\r\n <option value=\"PM\">PM</option>\r\n </select>\r\n <!-- <div [ngClass]=\"{'': qbItem.Progress_Bar__c, 'dateandTime': !qbItem.Progress_Bar__c}\"></div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- Attachment / File -->\r\n <div *ngIf=\"fileFlag\">\r\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\r\n <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\r\n <label class=\"picture-upload\" for=\"file-upload\">\r\n <span class=\"picture-upload-child\">\r\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n </span>\r\n <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\r\n <i class=\"\" aria-hidden=\"true\"></i>\r\n </span>\r\n </label>\r\n </div>\r\n <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event)\" />\r\n </div>\r\n <ul *ngIf=\"\r\n attachments?.length > 0 &&\r\n questionItem?.Type__c === 'File' &&\r\n !qbItem?.Progress_Bar__c\r\n \" class=\"attach-ulist col-md-12\">\r\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n {{ attachment.attachmentName\r\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n </li>\r\n </ul>\r\n\r\n <!-- Attachment Progress -->\r\n <div *ngIf=\"qbItem.Progress_Bar__c\">\r\n <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\r\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n </div>\r\n <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n \r\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\"> {{ questionItem?.Question_Text__c}}</span>\r\n <label class=\"file-label \">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\r\n <input name=\"attachment\" type=\"file\" placeholder=\"Ticket kaufen\" multiple\r\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\r\n class=\"file-upload-btn\">\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Book -->\r\n <div *ngIf=\"bookFlag\">\r\n <div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\r\n <div class=\"form-row\">\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\" [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\r\n *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.Id\">\r\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\r\n <span [class]=\"qbItem.isShengel__c ? 'dis-flex shengel-myt-font3 myt-font7' : 'dis-flex myt-font3 myt-font7' \">{{ ques?.Question__c }}</span>\r\n </div>\r\n <div class=\"col-md-12 paddingZero myt-dateTimeNew\" *ngIf=\"ques.Type__c === 'Time' || ques.Type__c === 'Date'\">\r\n <div *ngIf=\"ques.Type__c === 'Date'\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label>\r\n <div class=\"dis-flex dateandtime\">\r\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event)\"\r\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"Seleccione fecha\" (focus)=\"clearError()\" >\r\n </my-date-picker>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"ques.Type__c === 'Time'\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label>\r\n <div class=\"dis-flex dateandtime\">\r\n <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\r\n dateandTime: !qbItem?.Progress_Bar__c}\" \r\n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n (focus)=\"(clearSQError) \">\r\n <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">HH</option>\r\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n {{ hour }}\r\n </option>\r\n </select>\r\n <span class=\"colon\"> : </span>\r\n <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">MM</option>\r\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n {{ minute }}\r\n </option>\r\n </select>\r\n <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem.X24_Hours__c == false\">\r\n <span class=\"colon\"> : </span>\r\n <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n <option value=\"AM\">AM</option>\r\n <option value=\"PM\">PM</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\r\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\r\n </div>\r\n <div *ngIf=\"ques.Type__c === 'Text'\">\r\n <app-custom-input\r\n [fromShengel]=\"qbItem.isShengel__c\"\r\n [value]=\"ques.input\"\r\n [ngClassValue]=\"{\r\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\r\n textBox: !qbItem.Progress_Bar__c\r\n }\"\r\n [question]=\"ques\" \r\n [idValue]=\"ques.Tracking_ID__c\"\r\n [focusEvent]=\"clearSQError(ques.Id)\"\r\n [error]=\"ques.error\"\r\n [placeholder]=\"ques.Question__c\"\r\n (inputValue)=\"selectedInput($event,ques)\">\r\n </app-custom-input>\r\n </div>\r\n <div *ngIf=\"ques.Type__c === 'Location'\">\r\n <!-- for pick location -->\r\n <app-pick-location [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\r\n </div>\r\n <!-- for text area -->\r\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\r\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"ques.Type__c === 'Email'\">\r\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\r\n </div>\r\n\r\n <div *ngIf=\"ques.Type__c === 'File'\">\r\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\r\n <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\r\n <span class=\"picture-upload-child\">\r\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n </span>\r\n <span class=\"\r\n fa fa-plus fa-2x\r\n picture-upload-child\r\n pic-upload\r\n icolor\r\n \">\r\n <i class=\"\" aria-hidden=\"true\"></i>\r\n </span>\r\n </label>\r\n <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\r\n </div>\r\n\r\n <ul *ngIf=\"\r\n attachments?.length > 0 &&\r\n ques.Type__c === 'File' &&\r\n !qbItem.Progress_Bar__c\r\n \" class=\"attach-ulist col-md-12\">\r\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n {{ attachment.attachmentName\r\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n </li>\r\n </ul>\r\n <div class=\"myt-box\" *ngIf=\"qbItem.Progress_Bar__c\">\r\n\r\n <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\r\n <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n </div>\r\n <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\r\n <span class=\"f-Name\">{{ ques?.Question__c }}</span>\r\n <label class=\"file-label \">\r\n <span style=\"color: #c5281c;text-decoration:underline\">\r\n Adjuntar\r\n </span>\r\n <input name=\"attachment\" type=\"file\" placeholder=\"Ticket kaufen\" multiple\r\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\r\n class=\"file-upload-btn\">\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Table -->\r\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\r\n <app-custom-table \r\n [question]=\"ques\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-table>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\r\n <!-- for common dropdown -->\r\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\"\r\n [options]=\"ques.Question_Options__r.records\"\r\n [apiMeta]=\"ques.Sub_Text__c\"\r\n [id]=\"ques.Name\"\r\n [selectedValue]=\"ques.input\"\r\n [placeholder]=\"'---Select---'\"\r\n [errorMessage]=\"ques.Error_Message__c\"\r\n [error]=\"ques.error\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-dropdown>\r\n <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\" [certified]=\"ques.certifiedFlag\" [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\r\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n </div> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!--List start-->\r\n <div *ngIf=\"listFlag\">\r\n <div class=\"form-group\">\r\n <div class=\"form-row\">\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n <div class=\"myt-align3\" [class]=\"'col-md-' + ques.Size__c + ' paddingnone'\"\r\n *ngFor=\"let ques of getLocalSubQuestions(questionItem.Id);let i = index\">\r\n <div>\r\n <span class=\"dis-flex myt-font3 myt-font7\">{{ ques?.Question__c }}</span>\r\n </div>\r\n <div *ngIf=\"ques.Type__c === 'Text'\">\r\n <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\r\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\r\n textBox: !qbItem.Progress_Bar__c\r\n }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\"\r\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n </div>\r\n </div>\r\n <div class=\"\" *ngIf=\"addFlag\">\r\n <button (click)=\"Add(getLocalSubQuestions(questionItem.Id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>Add</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--List End-->\r\n\r\n <!-- Actions -->\r\n <div *ngIf=\"individualBookButton\" class=\"flexer\">\r\n <!-- Backward / Back -->\r\n <div class=\"backbutton\" [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\"\r\n [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\">\r\n <div [ngClass]=\"{}\">\r\n <button [ngClass]=\"{\r\n 'left-bt': qbItem.Progress_Bar__c,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color':\r\n !qbItem.Progress_Bar__c\r\n }\" (click)=\"handleBackClick()\">\r\n {{ qbItem?.Back__c }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Forward / Next -->\r\n <div [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\">\r\n <div>\r\n <button [ngClass]=\"{\r\n 'rusty': qbItem.Progress_Bar__c,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color':\r\n !qbItem.Progress_Bar__c\r\n }\" (click)=\"handleNextClick()\">\r\n {{ qbItem.Next__c }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Summary -->\r\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\r\n 'col-md-12':!qbItem.Progress_Bar__c\r\n }\">\r\n <h1 class=\"header1 summarypadd\" >{{ qbItem.SubTitle__c }}</h1> \r\n <div id=\"progress2\" *ngIf=\"!qbItem.Progress_Bar__c && this.abItem.Status__c != 'Completed' \">\r\n <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\r\n <div *ngFor=\"let qa of summary\">\r\n <div [ngClass]=\"{ non: qbItem.Progress_Bar__c }\">\r\n <div [ngClass]=\"{ summary: !qbItem.Progress_Bar__c }\">\r\n <div *ngIf=\"!qbItem.Edit__c\"\r\n [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\r\n <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n </div>\r\n <div *ngIf=\"qbItem.Edit__c\"\r\n [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\r\n <div [ngClass]=\"{ 'question': this.abItem.Status__c === 'Completed' }\"\r\n [innerHTML]=\"getText(qa.quesValue)\">\r\n {{ qa.quesValue }}\r\n </div>\r\n </div>\r\n <div class=\"answer\" >\r\n <div *ngIf=\"qa.qTyp === 'File'\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\r\n {{ qa.ansValue }}\r\n </div>\r\n <div *ngIf=\"qa.qTyp != 'File'\">{{ qa.ansValue }}</div>\r\n <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\r\n <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\r\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"this.abItem.Status__c === 'Completed'\" class=\"col-lg-12\">\r\n <div class=\"panel-group panel-group-joined\" id=\"ePTW-details\">\r\n <div class=\"panel panel-default\">\r\n <div class=\"panel-heading\">\r\n <h4 class=\"panel-title\">\r\n <a data-toggle=\"collapse\" data-parent=\"#ePTW-details\" href=\"#collapseOne\" class=\"collapsed\">\r\n PTW Details\r\n </a>\r\n </h4>\r\n </div>\r\n <div id=\"collapseOne\" class=\"panel-collapse collapse\">\r\n <div class=\"panel-body\">\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let item of summaryData; let i = index\">\r\n <ng-container *ngIf=\"i % 2 === 0\">\r\n <div class=\"col-lg-6 m-b-30\">\r\n <label>{{ getKey(item) }}</label>\r\n <p class=\"font-size\">{{ getValue(item) || 'N/A' }}</p>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"summaryData[i + 1]\">\r\n <label>{{ getKey(summaryData[i + 1]) }}</label>\r\n <p class=\"font-size\">{{ getValue(summaryData[i + 1]) || 'N/A' }}</p>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div id=\"progress2\" *ngIf=\"qbItem.Progress_Bar__c \">\r\n <div [ngClass]=\"{'bgColor summary-top' : qbItem.Progress_Bar__c }\" >\r\n <div id=\"progress-summary\" *ngIf=\"qbItem.Progress_Bar__c\">\r\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n [startFromZero]=\"false\" [responsive]=\"false\" >\r\n </circle-progress>\r\n \r\n <div *ngIf=\"qbItem.Summary_Text__c && qbItem.Progress_Bar__c\" \r\n [ngClass]=\"{ summaryTitle: qbItem.Progress_Bar__c }\">\r\n <h3 class=\"subTitle\" >{{ qbItem.Summary_Text__c }}</h3>\r\n <div *ngIf=\"abItem.Status__c != 'Completed'\" class=\"subTitle1\" >{{ qbItem.Summary_Sub_Text__c}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\r\n <h3 class=\"summary-h\">\r\n {{ qbItem.Summary_Text__c }}\r\n </h3>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\r\n <div class=\"summary-groupText myt-font2\">\r\n <!-- <p>Informe de da\u00F1o</p> -->\r\n </div>\r\n <div *ngFor=\"let qa of summary\" >\r\n <div [ngClass]=\"{ non: qbItem.Progress_Bar__c }\">\r\n <div [ngClass]=\"{ summary: this.abItem.Status__c != 'Completed' && !qbItem.Progress_Bar__c }\">\r\n <div *ngIf=\"!qbItem.Edit__c\"\r\n [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\r\n <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n </div>\r\n <div *ngIf=\"qbItem.Edit__c\"\r\n [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\r\n <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.Status__c === 'Completed' }\"\r\n [innerHTML]=\"getText(qa.quesValue)\">\r\n {{ qa.quesValue }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\r\n <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\r\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\r\n </button>\r\n </div>\r\n \r\n <div class=\"answer \" >\r\n <div *ngIf=\"qa.qTyp === 'File'\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\r\n {{ qa.ansValue }}\r\n </div>\r\n <div *ngIf=\"qa.qTyp != 'File'\">\r\n {{ qa.ansValue }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Answer Book -->\r\n <div class=\"flexer1\" *ngIf=\"abItem\">\r\n <div class=\"\" *ngIf=\"abItem.Status__c == 'Completed'\">\r\n <div class=\"col-md-12\">\r\n <button [ngClass]=\"{'btn-text': qbItem.Progress_Bar__c,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\"\r\n (click)=\"handleCancelClick()\">\r\n {{ qbItem.Cancel__c }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Group Actions -->\r\n <div class=\"align-edit-submit\" *ngIf=\"abItem.Status__c != 'Completed'\">\r\n <div class=\"col-md-6\">\r\n <button [ngClass]=\"{ 'btn-text2': qbItem.Progress_Bar__c,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c }\" \r\n (click)=\"handleSubmitClick()\">\r\n {{ qbItem.Submit__c }}\r\n </button>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <button [ngClass]=\"{'grey': qbItem.Progress_Bar__c,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\" \r\n (click)=\"handleBackClickNew()\">\r\n {{ qbItem.Edit__c }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\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%}.checkmark{left:47.5%;height:20px;margin-right:7px;width:20px;background-color:#fff0;border-radius:50%;border:1px solid grey}.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}.form-group.content-box{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.shengel-myt-font3{padding-bottom:5px;padding-top:5px;padding-right:15px;padding-left:2px!important;color:#9a9a9a!important;font-size:14px!important;font-weight:400!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}.container-radio input:checked~.checkmark{background-color:#fff0}.checkmark:after{content:\"\";display:none}.container-radio input:checked~.checkmark:after{display:block}.container-radio .checkmark:after{top:3px;left:3px;width:12px;margin:3px;height:12px;border-radius:50%;background:#C5281C}.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%}.checkmark{left:3.8rem}.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}.checkmark1{position:absolute;top:1px;left:-35%;height:21px;width:21px;background-color:#eee}.container1:hover input~.checkmark1{background-color:#ccc}.container1 input:checked~.checkmark1{content:\"\";background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE2IDEyIj4gIDxwYXRoIGZpbGw9IiM4N0JFMUMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjI0Mjk1NjUsMTcuNTcyNzczOCBMMjAuOTg1NTM0Nyw5LjEzMjYxNTg1IEMyMS4xNjg1NDM3LDguOTU1OTM3NDEgMjEuNDYyMTgwNyw4Ljk1NTc3NDM2IDIxLjY0NTM5MzYsOS4xMzIyNDk0NCBMMjIuODU5MTUxMywxMC4zMDEzNzAxIEMyMy4wNDY5NDk2LDEwLjQ4MjI2MiAyMy4wNDY5NDk2LDEwLjc3OTA1NjMgMjIuODU5MTUxMywxMC45NTk5NDgyIEwxMi41NzMwNjk2LDIwLjg2Nzc1MDYgQzEyLjM5MDAwNDcsMjEuMDQ0MDgzMSAxMi4wOTY2NTU2LDIxLjA0NDA4MzEgMTEuOTEzNTkwNiwyMC44Njc3NTA2IEw3LjE0MDg0ODc3LDE2LjI3MDUzMDMgQzYuOTU0MTc0MjgsMTYuMDkwNzIwOSA2Ljk1Mjg5MDU1LDE1Ljc5NjA5NTggNy4xMzc5OTEzMywxNS42MTQ3MjgyIEw4LjMzMTE3Njc5LDE0LjQ0NTYwNzUgQzguNTEzODA2NDgsMTQuMjY2NjYxMiA4LjgwOTMzMDgzLDE0LjI2NTQyMjYgOC45OTM1MTMyMiwxNC40NDI4MzE1IEwxMi4yNDI5NTY1LDE3LjU3Mjc3MzggWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcgLTkpIi8+PC9zdmc+);background-position:.17rem .3rem;background-repeat:no-repeat;background-color:#d2d4d6;width:21px;height:21px}.checkmark1:after{content:\"\";position:absolute;display:none}.container1 input:checked~.checkmark1:after{display:block}.container1 .checkmark1:after{left:9px;top:5px;width:5px;height:10px;border-width:0 3px 3px 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: i10.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.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: i11.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"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate"], 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", "errorMessage", "error", "fromShengel"], outputs: ["valueChange"] }], encapsulation: i0.ViewEncapsulation.None });
3211
3211
  }
3212
3212
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionnaireComponent, decorators: [{
3213
3213
  type: Component,
3214
3214
  args: [{ selector: "lib-questionnaire", encapsulation: ViewEncapsulation.None, providers: [ChangeService], template: "<!-- Spinner -->\r\n<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n\r\n<!-- Back Processing -->\r\n<div *ngIf=\"backicon == false\" >\r\n <div class=\"backicon\" [style.visibility]=\"questionStack.length >0 ? 'visible' : 'hidden'\">\r\n <button (click)=\"handleBackClick()\" [class]=\" abItem?.Status__c == 'Completed' ? 'summary-volver':'app-back1'\">\r\n <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.Back__c }}\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<!-- Question Hanlding -->\r\n<div *ngIf=\"questionItem\" [class]=\"qbItem.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\r\n <!-- Progress Bar & Title -->\r\n <div *ngIf=\"questionItem.Title__c && qbItem.Progress_Bar__c\">\r\n <h1 class=\"header1\">{{ questionItem?.Title__c }}</h1>\r\n <div class=\"header2\">{{ questionItem?.SubTitle__c }}</div>\r\n </div>\r\n\r\n <!-- Progress & Grouping -->\r\n <div [ngClass]=\"{ questiondiv2: !qbItem?.Progress_Bar__c }\">\r\n <!-- Pie Chart Progress -->\r\n <div [ngClass]=\"{ bgColor: qbItem?.Progress_Bar__c }\">\r\n <div id=\"progress\" *ngIf=\"qbItem?.Progress_Bar__c\">\r\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n [startFromZero]=\"false\" [responsive]=\"false\" >\r\n </circle-progress>\r\n </div>\r\n </div>\r\n\r\n <!-- Show the Group/Module related to the Progress -->\r\n <div *ngIf=\"questionItem.Group__c && qbItem.Progress_Bar__c\"\r\n [ngClass]=\"{ questionalign: !qbItem?.Progress_Bar__c }\">\r\n <div class=\"largeTitle\">\r\n <h3 class=\"myt-font6 myt-text3\">\r\n {{ questionItem?.Group__c }}\r\n </h3>\r\n <div *ngIf=\"questionItem.Sub_Text__c != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.Sub_Text__c}}</div>\r\n <div *ngIf=\"questionItem.Sub_Text__c === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.Sub_Text__c}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Question Handling -->\r\n <div class=\"questiondiv2\">\r\n <!-- Title -->\r\n <div *ngIf=\"questionItem.Is_Title__c\">\r\n <div *ngIf=\"questionItem.Type__c != 'Book' && questionItem.Question_No__c!='6' && questionItem.Question_No__c!='9'\"> \r\n <h3 class=\"questionalign myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\r\n {{questionItem?.Question_Text__c}}\r\n </h3>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!questionItem.Is_Title__c\" [class]=\"qbItem.isShengel__c ? 'header-style additional' : 'question-f-size additional'\">\r\n <div [innerHTML]=\"getText(questionItem?.Question_Text__c)\" >\r\n {{ questionItem?.Question_Text__c }}\r\n </div>\r\n </div>\r\n\r\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n <div *ngIf=\"questionItem.Type__c == 'Book'\">\r\n <div *ngIf=\"questionItem.Question_No__c=='6'\">\r\n <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\r\n {{ questionItem?.Question_Text__c }}\r\n </h3>\r\n </div>\r\n </div>\r\n \r\n <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n <div *ngIf=\"questionItem.Type__c == 'File' \">\r\n <div *ngIf=\"questionItem.Question_No__c=='9'\">\r\n <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\r\n {{questionItem?.Question_Text__c}}\r\n </h3>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Additional Info -->\r\n <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\r\n <div *ngIf=\"questionItem.Additional_Rich__c && qbItem.Progress_Bar__c\" >\r\n <div\r\n class=\"additional \" [innerHTML]=\"innerhtml\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"questionItem.Additional_Rich__c && !qbItem.Progress_Bar__c\">\r\n <div class=\"info-alert ques-alert1\">\r\n <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\r\n <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown-->\r\n <div *ngIf=\"dropdownFlag\" >\r\n <div class=\"dis-flex\">\r\n <select \r\n [ngClass]=\"{\r\n 'dt-line myt-align3 myt-align2 dpDown dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.Progress_Bar__c,\r\n 'custom-select': !qbItem?.Progress_Bar__c\r\n }\" class=\"mr-sm-2 dd-height dropbox \" id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\r\n }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\" style=\"margin-left: 21.5rem !important;\">\r\n <option *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"option\" value=\"{{ opt.Value__c }}\">\r\n {{ opt.Value__c }}\r\n </option>\r\n <option value=\".\" disabled hidden>Bitte treffen Sie eine Auswahl</option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <!-- Radio -->\r\n <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\r\n <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\r\n {{ questionItem?.Error_Message__c }}\r\n </div>\r\n <div class=\"dis-flex\">\r\n <div *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"radio radioOption\" >\r\n <label class=\"radiocontainer container myt-font4\">{{ opt.Value__c }}\r\n <input type=\"radio\" [id]=\"opt.Id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" value=\"{{ opt.Value__c }}\"\r\n (change)=\"optionChange(opt.Value__c)\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Checkbox -->\r\n <div *ngIf=\"checkboxFlag\" class=\"\">\r\n <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\r\n {{ questionItem?.Error_Message__c }}\r\n </div>\r\n <div class=\"dis-flex\">\r\n <div *ngFor=\"let item of optionValues\" class=\"radio col-md-6 optiondiv\">\r\n <label class=\" container1 \" >{{ item.Value__c }}\r\n <input type=\"checkbox\" [id]=\"item.Id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\r\n <span class='checkmark1'></span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Text -->\r\n <div *ngIf=\"textFlag\" class=\"col-md-12 myt-book1\">\r\n <div class=\"col-md-12\" class=\"dis-flex myt-align1\" [class]=\"'col-md-' + questionItem?.Size__c + ' paddingnone'\">\r\n <input type=\"text\" [(ngModel)]=\"inpValue\" [ngClass]=\"{\r\n 'boxoutline myt-font1 myt-book1': qbItem?.Progress_Bar__c,\r\n textBox1: !qbItem?.Progress_Bar__c\r\n }\" id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error\r\n ? 'red'\r\n : inpValue?.length > 0\r\n ? '#87be1c'\r\n : ''\r\n }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- Text Area -->\r\n <div *ngIf=\"taFlag\" class=\"col-md-12\">\r\n <div class=\"dis-flex\">\r\n <textarea class=\"ta-input\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem?.error\r\n ? 'red'\r\n : inpValue?.length > 0 && taFocusOut\r\n ? '#87be1c'\r\n : ''\r\n }}\" (focusout)=\"taFocusOut = true\"\r\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\r\n <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- CC Number Format -->\r\n <div *ngIf=\"numberFlag\" class=\"col-md-12\">\r\n <div class=\"dis-flex\">\r\n <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\"\r\n [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\r\n (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\r\n style=\"width:-webkit-fill-available;\" style.border-color=\"{{\r\n this.questionItem.error\r\n ? 'red'\r\n : inpValue?.length > 0\r\n ? '#87be1c'\r\n : ''\r\n }}\" />\r\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\r\n *ngIf=\"inpValue?.length > 0\"></i>\r\n </div>\r\n </div>\r\n <!-- END-->\r\n\r\n <!-- AlphaNumeric -->\r\n <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\r\n <div style=\"position:relative;\">\r\n <input type=text placeholder=\"0 of 0\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\r\n </div>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"emailFlag\" class=\"col-md-12\">\r\n <div class=\"dis-flex\">\r\n <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\r\n required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n this.questionItem.error\r\n ? 'red'\r\n : inpValue?.length > 0\r\n ? '#87be1c'\r\n : ''\r\n }}\" />\r\n <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\r\n *ngIf=\"inpValue?.length > 0\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- DateTime -->\r\n <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero myt-time1\" >\r\n <!-- Error Handling -->\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n\r\n <!-- Date -->\r\n <div *ngIf=\"dateFlag\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label>\r\n <div class=\"dis-flex\">\r\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event)\"\r\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"Seleccione fecha\" (focus)=\"clearError()\">\r\n </my-date-picker>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Time -->\r\n <div *ngIf=\"timeFlag\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label>\r\n <div class=\"dis-flex\">\r\n <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\r\n dateandTime: !qbItem?.Progress_Bar__c}\" \r\n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n (focus)=\"(clearSQError) \">\r\n <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">HH</option>\r\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n {{ hour }}\r\n </option>\r\n </select>\r\n <span class=\"colon\"> : </span>\r\n <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">MM</option>\r\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n {{ minute }}\r\n </option>\r\n </select>\r\n <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem?.X24_Hours__c == false\">\r\n <span class=\"colon\"> : </span>\r\n <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n <option value=\"AM\">AM</option>\r\n <option value=\"PM\">PM</option>\r\n </select>\r\n <!-- <div [ngClass]=\"{'': qbItem.Progress_Bar__c, 'dateandTime': !qbItem.Progress_Bar__c}\"></div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n </div>\r\n </div>\r\n\r\n <!-- Attachment / File -->\r\n <div *ngIf=\"fileFlag\">\r\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\r\n <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\r\n <label class=\"picture-upload\" for=\"file-upload\">\r\n <span class=\"picture-upload-child\">\r\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n </span>\r\n <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\r\n <i class=\"\" aria-hidden=\"true\"></i>\r\n </span>\r\n </label>\r\n </div>\r\n <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event)\" />\r\n </div>\r\n <ul *ngIf=\"\r\n attachments?.length > 0 &&\r\n questionItem?.Type__c === 'File' &&\r\n !qbItem?.Progress_Bar__c\r\n \" class=\"attach-ulist col-md-12\">\r\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n {{ attachment.attachmentName\r\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n </li>\r\n </ul>\r\n\r\n <!-- Attachment Progress -->\r\n <div *ngIf=\"qbItem.Progress_Bar__c\">\r\n <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\r\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n </div>\r\n <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n \r\n <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\"> {{ questionItem?.Question_Text__c}}</span>\r\n <label class=\"file-label \">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\r\n <input name=\"attachment\" type=\"file\" placeholder=\"Ticket kaufen\" multiple\r\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\r\n class=\"file-upload-btn\">\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Book -->\r\n <div *ngIf=\"bookFlag\">\r\n <div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\r\n <div class=\"form-row\">\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\" [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\r\n *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.Id\">\r\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\r\n <span [class]=\"qbItem.isShengel__c ? 'dis-flex shengel-myt-font3 myt-font7' : 'dis-flex myt-font3 myt-font7' \">{{ ques?.Question__c }}</span>\r\n </div>\r\n <div class=\"col-md-12 paddingZero myt-dateTimeNew\" *ngIf=\"ques.Type__c === 'Time' || ques.Type__c === 'Date'\">\r\n <div *ngIf=\"ques.Type__c === 'Date'\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label>\r\n <div class=\"dis-flex dateandtime\">\r\n <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event)\"\r\n [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"Seleccione fecha\" (focus)=\"clearError()\" >\r\n </my-date-picker>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"ques.Type__c === 'Time'\">\r\n <div class=\"col-md-12 paddingBottom\">\r\n <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label>\r\n <div class=\"dis-flex dateandtime\">\r\n <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\r\n dateandTime: !qbItem?.Progress_Bar__c}\" \r\n id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n (focus)=\"(clearSQError) \">\r\n <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">HH</option>\r\n <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n {{ hour }}\r\n </option>\r\n </select>\r\n <span class=\"colon\"> : </span>\r\n <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n (focus)=\"clearError()\">\r\n <option value=\"\">MM</option>\r\n <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n {{ minute }}\r\n </option>\r\n </select>\r\n <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem.X24_Hours__c == false\">\r\n <span class=\"colon\"> : </span>\r\n <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n <option value=\"AM\">AM</option>\r\n <option value=\"PM\">PM</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\r\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\r\n </div>\r\n <div *ngIf=\"ques.Type__c === 'Text'\">\r\n <app-custom-input\r\n [fromShengel]=\"qbItem.isShengel__c\"\r\n [value]=\"ques.input\"\r\n [ngClassValue]=\"{\r\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\r\n textBox: !qbItem.Progress_Bar__c\r\n }\"\r\n [question]=\"ques\" \r\n [idValue]=\"ques.Tracking_ID__c\"\r\n [focusEvent]=\"clearSQError(ques.Id)\"\r\n [error]=\"ques.error\"\r\n [placeholder]=\"ques.Question__c\"\r\n (inputValue)=\"selectedInput($event,ques)\">\r\n </app-custom-input>\r\n </div>\r\n <div *ngIf=\"ques.Type__c === 'Location'\">\r\n <!-- for pick location -->\r\n <app-pick-location [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\r\n </div>\r\n <!-- for text area -->\r\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\r\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"ques.Type__c === 'Email'\">\r\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\r\n </div>\r\n\r\n <div *ngIf=\"ques.Type__c === 'File'\">\r\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\r\n <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\r\n <span class=\"picture-upload-child\">\r\n <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n </span>\r\n <span class=\"\r\n fa fa-plus fa-2x\r\n picture-upload-child\r\n pic-upload\r\n icolor\r\n \">\r\n <i class=\"\" aria-hidden=\"true\"></i>\r\n </span>\r\n </label>\r\n <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\r\n </div>\r\n\r\n <ul *ngIf=\"\r\n attachments?.length > 0 &&\r\n ques.Type__c === 'File' &&\r\n !qbItem.Progress_Bar__c\r\n \" class=\"attach-ulist col-md-12\">\r\n <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n {{ attachment.attachmentName\r\n }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n </li>\r\n </ul>\r\n <div class=\"myt-box\" *ngIf=\"qbItem.Progress_Bar__c\">\r\n\r\n <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\r\n <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n </div>\r\n <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\r\n <span class=\"f-Name\">{{ ques?.Question__c }}</span>\r\n <label class=\"file-label \">\r\n <span style=\"color: #c5281c;text-decoration:underline\">\r\n Adjuntar\r\n </span>\r\n <input name=\"attachment\" type=\"file\" placeholder=\"Ticket kaufen\" multiple\r\n accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\r\n class=\"file-upload-btn\">\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Table -->\r\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\r\n <app-custom-table \r\n [question]=\"ques\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-table>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\r\n <!-- for common dropdown -->\r\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\"\r\n [options]=\"ques.Question_Options__r.records\"\r\n [apiMeta]=\"ques.Sub_Text__c\"\r\n [id]=\"ques.Name\"\r\n [selectedValue]=\"ques.input\"\r\n [placeholder]=\"'---Select---'\"\r\n [errorMessage]=\"ques.Error_Message__c\"\r\n [error]=\"ques.error\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-dropdown>\r\n <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\" [certified]=\"ques.certifiedFlag\" [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\r\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n </div> \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!--List start-->\r\n <div *ngIf=\"listFlag\">\r\n <div class=\"form-group\">\r\n <div class=\"form-row\">\r\n <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n <div class=\"myt-align3\" [class]=\"'col-md-' + ques.Size__c + ' paddingnone'\"\r\n *ngFor=\"let ques of getLocalSubQuestions(questionItem.Id);let i = index\">\r\n <div>\r\n <span class=\"dis-flex myt-font3 myt-font7\">{{ ques?.Question__c }}</span>\r\n </div>\r\n <div *ngIf=\"ques.Type__c === 'Text'\">\r\n <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\r\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\r\n textBox: !qbItem.Progress_Bar__c\r\n }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\"\r\n oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n </div>\r\n </div>\r\n <div class=\"\" *ngIf=\"addFlag\">\r\n <button (click)=\"Add(getLocalSubQuestions(questionItem.Id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>Add</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--List End-->\r\n\r\n <!-- Actions -->\r\n <div *ngIf=\"individualBookButton\" class=\"flexer\">\r\n <!-- Backward / Back -->\r\n <div class=\"backbutton\" [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\"\r\n [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\">\r\n <div [ngClass]=\"{}\">\r\n <button [ngClass]=\"{\r\n 'left-bt': qbItem.Progress_Bar__c,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color':\r\n !qbItem.Progress_Bar__c\r\n }\" (click)=\"handleBackClick()\">\r\n {{ qbItem?.Back__c }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Forward / Next -->\r\n <div [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\">\r\n <div>\r\n <button [ngClass]=\"{\r\n 'rusty': qbItem.Progress_Bar__c,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color':\r\n !qbItem.Progress_Bar__c\r\n }\" (click)=\"handleNextClick()\">\r\n {{ qbItem.Next__c }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Summary -->\r\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\r\n 'col-md-12':!qbItem.Progress_Bar__c\r\n }\">\r\n <h1 class=\"header1 summarypadd\" >{{ qbItem.SubTitle__c }}</h1> \r\n <div id=\"progress2\" *ngIf=\"!qbItem.Progress_Bar__c && this.abItem.Status__c != 'Completed' \">\r\n <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\r\n <div *ngFor=\"let qa of summary\">\r\n <div [ngClass]=\"{ non: qbItem.Progress_Bar__c }\">\r\n <div [ngClass]=\"{ summary: !qbItem.Progress_Bar__c }\">\r\n <div *ngIf=\"!qbItem.Edit__c\"\r\n [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\r\n <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n </div>\r\n <div *ngIf=\"qbItem.Edit__c\"\r\n [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\r\n <div [ngClass]=\"{ 'question': this.abItem.Status__c === 'Completed' }\"\r\n [innerHTML]=\"getText(qa.quesValue)\">\r\n {{ qa.quesValue }}\r\n </div>\r\n </div>\r\n <div class=\"answer\" >\r\n <div *ngIf=\"qa.qTyp === 'File'\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\r\n {{ qa.ansValue }}\r\n </div>\r\n <div *ngIf=\"qa.qTyp != 'File'\">{{ qa.ansValue }}</div>\r\n <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\r\n <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\r\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"this.abItem.Status__c === 'Completed'\" class=\"col-lg-12\">\r\n <div class=\"panel-group panel-group-joined\" id=\"ePTW-details\">\r\n <div class=\"panel panel-default\">\r\n <div class=\"panel-heading\">\r\n <h4 class=\"panel-title\">\r\n <a data-toggle=\"collapse\" data-parent=\"#ePTW-details\" href=\"#collapseOne\" class=\"collapsed\">\r\n PTW Details\r\n </a>\r\n </h4>\r\n </div>\r\n <div id=\"collapseOne\" class=\"panel-collapse collapse\">\r\n <div class=\"panel-body\">\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let item of summaryData; let i = index\">\r\n <ng-container *ngIf=\"i % 2 === 0\">\r\n <div class=\"col-lg-6 m-b-30\">\r\n <label>{{ getKey(item) }}</label>\r\n <p class=\"font-size\">{{ getValue(item) || 'N/A' }}</p>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"summaryData[i + 1]\">\r\n <label>{{ getKey(summaryData[i + 1]) }}</label>\r\n <p class=\"font-size\">{{ getValue(summaryData[i + 1]) || 'N/A' }}</p>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div id=\"progress2\" *ngIf=\"qbItem.Progress_Bar__c \">\r\n <div [ngClass]=\"{'bgColor summary-top' : qbItem.Progress_Bar__c }\" >\r\n <div id=\"progress-summary\" *ngIf=\"qbItem.Progress_Bar__c\">\r\n <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n [startFromZero]=\"false\" [responsive]=\"false\" >\r\n </circle-progress>\r\n \r\n <div *ngIf=\"qbItem.Summary_Text__c && qbItem.Progress_Bar__c\" \r\n [ngClass]=\"{ summaryTitle: qbItem.Progress_Bar__c }\">\r\n <h3 class=\"subTitle\" >{{ qbItem.Summary_Text__c }}</h3>\r\n <div *ngIf=\"abItem.Status__c != 'Completed'\" class=\"subTitle1\" >{{ qbItem.Summary_Sub_Text__c}}</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!qbItem.Progress_Bar__c\">\r\n <h3 class=\"summary-h\">\r\n {{ qbItem.Summary_Text__c }}\r\n </h3>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\r\n <div class=\"summary-groupText myt-font2\">\r\n <!-- <p>Informe de da\u00F1o</p> -->\r\n </div>\r\n <div *ngFor=\"let qa of summary\" >\r\n <div [ngClass]=\"{ non: qbItem.Progress_Bar__c }\">\r\n <div [ngClass]=\"{ summary: this.abItem.Status__c != 'Completed' && !qbItem.Progress_Bar__c }\">\r\n <div *ngIf=\"!qbItem.Edit__c\"\r\n [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\r\n <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n </div>\r\n <div *ngIf=\"qbItem.Edit__c\"\r\n [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\r\n <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.Status__c === 'Completed' }\"\r\n [innerHTML]=\"getText(qa.quesValue)\">\r\n {{ qa.quesValue }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\r\n <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\r\n <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\r\n </button>\r\n </div>\r\n \r\n <div class=\"answer \" >\r\n <div *ngIf=\"qa.qTyp === 'File'\">\r\n <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\r\n {{ qa.ansValue }}\r\n </div>\r\n <div *ngIf=\"qa.qTyp != 'File'\">\r\n {{ qa.ansValue }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Answer Book -->\r\n <div class=\"flexer1\" *ngIf=\"abItem\">\r\n <div class=\"\" *ngIf=\"abItem.Status__c == 'Completed'\">\r\n <div class=\"col-md-12\">\r\n <button [ngClass]=\"{'btn-text': qbItem.Progress_Bar__c,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\"\r\n (click)=\"handleCancelClick()\">\r\n {{ qbItem.Cancel__c }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Group Actions -->\r\n <div class=\"align-edit-submit\" *ngIf=\"abItem.Status__c != 'Completed'\">\r\n <div class=\"col-md-6\">\r\n <button [ngClass]=\"{ 'btn-text2': qbItem.Progress_Bar__c,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c }\" \r\n (click)=\"handleSubmitClick()\">\r\n {{ qbItem.Submit__c }}\r\n </button>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <button [ngClass]=\"{'grey': qbItem.Progress_Bar__c,\r\n 'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\" \r\n (click)=\"handleBackClickNew()\">\r\n {{ qbItem.Edit__c }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\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%}.checkmark{left:47.5%;height:20px;margin-right:7px;width:20px;background-color:#fff0;border-radius:50%;border:1px solid grey}.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}.form-group.content-box{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.shengel-myt-font3{padding-bottom:5px;padding-top:5px;padding-right:15px;padding-left:2px!important;color:#9a9a9a!important;font-size:14px!important;font-weight:400!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}.container-radio input:checked~.checkmark{background-color:#fff0}.checkmark:after{content:\"\";display:none}.container-radio input:checked~.checkmark:after{display:block}.container-radio .checkmark:after{top:3px;left:3px;width:12px;margin:3px;height:12px;border-radius:50%;background:#C5281C}.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%}.checkmark{left:3.8rem}.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}.checkmark1{position:absolute;top:1px;left:-35%;height:21px;width:21px;background-color:#eee}.container1:hover input~.checkmark1{background-color:#ccc}.container1 input:checked~.checkmark1{content:\"\";background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE2IDEyIj4gIDxwYXRoIGZpbGw9IiM4N0JFMUMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjI0Mjk1NjUsMTcuNTcyNzczOCBMMjAuOTg1NTM0Nyw5LjEzMjYxNTg1IEMyMS4xNjg1NDM3LDguOTU1OTM3NDEgMjEuNDYyMTgwNyw4Ljk1NTc3NDM2IDIxLjY0NTM5MzYsOS4xMzIyNDk0NCBMMjIuODU5MTUxMywxMC4zMDEzNzAxIEMyMy4wNDY5NDk2LDEwLjQ4MjI2MiAyMy4wNDY5NDk2LDEwLjc3OTA1NjMgMjIuODU5MTUxMywxMC45NTk5NDgyIEwxMi41NzMwNjk2LDIwLjg2Nzc1MDYgQzEyLjM5MDAwNDcsMjEuMDQ0MDgzMSAxMi4wOTY2NTU2LDIxLjA0NDA4MzEgMTEuOTEzNTkwNiwyMC44Njc3NTA2IEw3LjE0MDg0ODc3LDE2LjI3MDUzMDMgQzYuOTU0MTc0MjgsMTYuMDkwNzIwOSA2Ljk1Mjg5MDU1LDE1Ljc5NjA5NTggNy4xMzc5OTEzMywxNS42MTQ3MjgyIEw4LjMzMTE3Njc5LDE0LjQ0NTYwNzUgQzguNTEzODA2NDgsMTQuMjY2NjYxMiA4LjgwOTMzMDgzLDE0LjI2NTQyMjYgOC45OTM1MTMyMiwxNC40NDI4MzE1IEwxMi4yNDI5NTY1LDE3LjU3Mjc3MzggWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcgLTkpIi8+PC9zdmc+);background-position:.17rem .3rem;background-repeat:no-repeat;background-color:#d2d4d6;width:21px;height:21px}.checkmark1:after{content:\"\";position:absolute;display:none}.container1 input:checked~.checkmark1:after{display:block}.container1 .checkmark1:after{left:9px;top:5px;width:5px;height:10px;border-width:0 3px 3px 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"] }]
3215
- }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: i3.ActivatedRoute }, { type: i5.DomSanitizer }, { type: i6.NgxSpinnerService }, { type: i7.UntypedFormBuilder }, { type: i8.DeviceDetectorService }, { type: i0.ElementRef }]; }, propDecorators: { qbId: [{
3215
+ }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: i4.ActivatedRoute }, { type: i5.DomSanitizer }, { type: i6.NgxSpinnerService }, { type: i7.UntypedFormBuilder }, { type: i8.DeviceDetectorService }, { type: i0.ElementRef }]; }, propDecorators: { qbId: [{
3216
3216
  type: Input
3217
3217
  }], insuranceStartDate: [{
3218
3218
  type: Input
@@ -3226,6 +3226,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
3226
3226
  type: Output
3227
3227
  }] } });
3228
3228
 
3229
+ class StorageService {
3230
+ nxtBookletAnswer;
3231
+ constructor() { }
3232
+ save(qbJson) {
3233
+ this.nxtBookletAnswer = qbJson;
3234
+ }
3235
+ update(questionWithInput) {
3236
+ // Store the Updated Questions (with Answer/Error) in a Map
3237
+ // for (var eQuestion in this.nxtBookletAnswer.bookQuestionsMap) {
3238
+ // if(eQuestion == questionWithInput.Id) {
3239
+ // this.nxtBookletAnswer.bookQuestionsMap[eQuestion] = questionWithInput;
3240
+ // }
3241
+ // }
3242
+ for (var eQuestion in this.nxtBookletAnswer.bookQuestionsMap) {
3243
+ if (this.nxtBookletAnswer.bookQuestionsMap.hasOwnProperty(eQuestion)) {
3244
+ const questionsR = this.nxtBookletAnswer.bookQuestionsMap[eQuestion].Questions__r;
3245
+ for (let i = 0; i < questionsR.records.length; i++) {
3246
+ if (questionsR.records[i].Id == questionWithInput.Id) {
3247
+ questionsR.records[i] = questionWithInput;
3248
+ console.log('assigned success');
3249
+ }
3250
+ }
3251
+ }
3252
+ }
3253
+ }
3254
+ get() {
3255
+ // return the stored questions
3256
+ return this.nxtBookletAnswer;
3257
+ }
3258
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: StorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
3259
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: StorageService, providedIn: 'root' });
3260
+ }
3261
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: StorageService, decorators: [{
3262
+ type: Injectable,
3263
+ args: [{
3264
+ providedIn: 'root'
3265
+ }]
3266
+ }], ctorParameters: function () { return []; } });
3267
+
3229
3268
  class FileUploadComponent {
3230
3269
  selectedFileData = new EventEmitter();
3231
3270
  deletedFileData = new EventEmitter();
@@ -3386,15 +3425,17 @@ class QuestionbookComponent {
3386
3425
  sfService;
3387
3426
  dataService;
3388
3427
  changeService;
3428
+ storageService;
3389
3429
  qbItem;
3390
3430
  questionItem;
3391
3431
  questions;
3392
3432
  subQuestions;
3393
3433
  selectedFileData = [];
3394
- constructor(sfService, dataService, changeService) {
3434
+ constructor(sfService, dataService, changeService, storageService) {
3395
3435
  this.sfService = sfService;
3396
3436
  this.dataService = dataService;
3397
3437
  this.changeService = changeService;
3438
+ this.storageService = storageService;
3398
3439
  }
3399
3440
  ngOnInit() {
3400
3441
  console.log('inside QuestionBookComponent OnInit');
@@ -3419,7 +3460,18 @@ class QuestionbookComponent {
3419
3460
  console.log('inside QuestionbookComponent childEventCapture');
3420
3461
  console.log(event);
3421
3462
  this.changeService.announceChange(event);
3422
- //ques.input = event; // here when using the ng-select got event as value
3463
+ // Process the changes in Table and Dropdown and store right value in ques.input
3464
+ if (ques.Type__c == 'Table') {
3465
+ ques.input = null;
3466
+ }
3467
+ else if (ques.Type__c == 'Dropdown') {
3468
+ ques.input = event.valueObj.name;
3469
+ }
3470
+ else {
3471
+ ques.input = event;
3472
+ }
3473
+ // Once the right value is stored in ques.input store the ques (with input) in storageService
3474
+ this.storageService.update(ques);
3423
3475
  }
3424
3476
  assignSelectedFileData(fileData) {
3425
3477
  console.log('fileDATA', fileData);
@@ -3428,13 +3480,13 @@ class QuestionbookComponent {
3428
3480
  deleteFile(fileData) {
3429
3481
  console.log('fileDATA', fileData);
3430
3482
  }
3431
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
3432
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", questions: "questions" }, ngImport: i0, template: "<div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\r\n <div class=\"form-row\">\r\n <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\"\r\n [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\r\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\">\r\n <!-- Sub Question Label -->\r\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\r\n <span [class]=\"qbItem.isShengel__c ? 'dis-flex shengel-myt-font3 myt-font7' : 'dis-flex myt-font3 myt-font7' \">{{ ques?.Question__c }}</span>\r\n </div>\r\n\r\n <!-- DateTime -->\r\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\r\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-date-picker>\r\n </div>\r\n\r\n <!-- Text -->\r\n <div *ngIf=\"ques.Type__c === 'Text'\">\r\n <app-custom-input [fromShengel]=\"qbItem.isShengel__c\" [value]=\"ques.input\" [ngClassValue]=\"{\r\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\r\n textBox: !qbItem.Progress_Bar__c\r\n }\" [question]=\"ques\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\r\n [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\r\n </app-custom-input>\r\n </div>\r\n \r\n <!-- for pick location -->\r\n <div *ngIf=\"ques.Type__c === 'Location'\">\r\n <app-pick-location [address]=\"ques.input\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n </app-pick-location>\r\n </div>\r\n\r\n <!-- for text area -->\r\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\r\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\r\n (textareaValueChange)=\"childEventCapture($event)\"></app-custom-text-area>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"ques.Type__c === 'Email'\">\r\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\r\n </div>\r\n\r\n <!-- Table -->\r\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\r\n <app-custom-table [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-table>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\r\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\" [options]=\"ques.Question_Options__r.records\"\r\n [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.input\" [placeholder]=\"'---Select---'\"\r\n [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-dropdown>\r\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n </div>\r\n\r\n <!-- file Upload -->\r\n <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\r\n <app-file-upload [limitFileUploading]=\"5\" [allFiles]=\"selectedFileData\"\r\n (selectedFileData)=\"assignSelectedFileData($event)\" (deletedFileData)=\"deleteFile($event)\"\r\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".form-group.content-box{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.form-row{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.col-lg-6{width:100%}.shengel-myt-font3{padding:5px 15px 5px 2px;color:#9a9a9a;font-size:14px;font-weight:400}.myt-font7{display:flex;justify-content:flex-start}@media (min-width: 1200px){.col-lg-6{width:50%!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "errorMessage", "error", "fromShengel"], outputs: ["valueChange"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon"], outputs: ["selectedFileData", "deletedFileData"] }] });
3483
+ 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 }], target: i0.ɵɵFactoryTarget.Component });
3484
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", questions: "questions" }, ngImport: i0, template: "<div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\r\n <div class=\"form-row\">\r\n <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\"\r\n [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\r\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\">\r\n <!-- Sub Question Label -->\r\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\r\n <span [class]=\"qbItem.isShengel__c ? 'dis-flex shengel-myt-font3 myt-font7' : 'dis-flex myt-font3 myt-font7' \">{{ ques?.Question__c }}</span>\r\n </div>\r\n\r\n <!-- DateTime -->\r\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\r\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-date-picker>\r\n </div>\r\n\r\n <!-- Text -->\r\n <div *ngIf=\"ques.Type__c === 'Text'\">\r\n <app-custom-input [fromShengel]=\"qbItem.isShengel__c\" [value]=\"ques.input\" [ngClassValue]=\"{\r\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\r\n textBox: !qbItem.Progress_Bar__c\r\n }\" [question]=\"ques\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\r\n [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\r\n </app-custom-input>\r\n </div>\r\n \r\n <!-- for pick location -->\r\n <div *ngIf=\"ques.Type__c === 'Location'\">\r\n <app-pick-location [address]=\"ques.input\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n </app-pick-location>\r\n </div>\r\n\r\n <!-- for text area -->\r\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\r\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\r\n (textareaValueChange)=\"childEventCapture($event)\"></app-custom-text-area>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"ques.Type__c === 'Email'\">\r\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\r\n </div>\r\n\r\n <!-- Table -->\r\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\r\n <app-custom-table [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-table>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\r\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\" [options]=\"ques.Question_Options__r.records\"\r\n [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.input\" [placeholder]=\"'---Select---'\"\r\n [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-dropdown>\r\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n </div>\r\n\r\n <!-- Attachment / Files -->\r\n <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\r\n <app-file-upload [limitFileUploading]=\"5\" [allFiles]=\"selectedFileData\"\r\n (selectedFileData)=\"assignSelectedFileData($event)\" (deletedFileData)=\"deleteFile($event)\"\r\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".form-group.content-box{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.form-row{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.col-lg-6{width:100%}.shengel-myt-font3{padding:5px 15px 5px 2px;color:#9a9a9a;font-size:14px;font-weight:400}.myt-font7{display:flex;justify-content:flex-start}@media (min-width: 1200px){.col-lg-6{width:50%!important}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "errorMessage", "error", "fromShengel"], outputs: ["valueChange"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon"], outputs: ["selectedFileData", "deletedFileData"] }] });
3433
3485
  }
3434
3486
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionbookComponent, decorators: [{
3435
3487
  type: Component,
3436
- args: [{ selector: 'lib-questionbook', template: "<div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\r\n <div class=\"form-row\">\r\n <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\"\r\n [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\r\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\">\r\n <!-- Sub Question Label -->\r\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\r\n <span [class]=\"qbItem.isShengel__c ? 'dis-flex shengel-myt-font3 myt-font7' : 'dis-flex myt-font3 myt-font7' \">{{ ques?.Question__c }}</span>\r\n </div>\r\n\r\n <!-- DateTime -->\r\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\r\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-date-picker>\r\n </div>\r\n\r\n <!-- Text -->\r\n <div *ngIf=\"ques.Type__c === 'Text'\">\r\n <app-custom-input [fromShengel]=\"qbItem.isShengel__c\" [value]=\"ques.input\" [ngClassValue]=\"{\r\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\r\n textBox: !qbItem.Progress_Bar__c\r\n }\" [question]=\"ques\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\r\n [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\r\n </app-custom-input>\r\n </div>\r\n \r\n <!-- for pick location -->\r\n <div *ngIf=\"ques.Type__c === 'Location'\">\r\n <app-pick-location [address]=\"ques.input\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n </app-pick-location>\r\n </div>\r\n\r\n <!-- for text area -->\r\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\r\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\r\n (textareaValueChange)=\"childEventCapture($event)\"></app-custom-text-area>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"ques.Type__c === 'Email'\">\r\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\r\n </div>\r\n\r\n <!-- Table -->\r\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\r\n <app-custom-table [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-table>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\r\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\" [options]=\"ques.Question_Options__r.records\"\r\n [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.input\" [placeholder]=\"'---Select---'\"\r\n [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-dropdown>\r\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n </div>\r\n\r\n <!-- file Upload -->\r\n <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\r\n <app-file-upload [limitFileUploading]=\"5\" [allFiles]=\"selectedFileData\"\r\n (selectedFileData)=\"assignSelectedFileData($event)\" (deletedFileData)=\"deleteFile($event)\"\r\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".form-group.content-box{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.form-row{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.col-lg-6{width:100%}.shengel-myt-font3{padding:5px 15px 5px 2px;color:#9a9a9a;font-size:14px;font-weight:400}.myt-font7{display:flex;justify-content:flex-start}@media (min-width: 1200px){.col-lg-6{width:50%!important}}\n"] }]
3437
- }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }]; }, propDecorators: { qbItem: [{
3488
+ args: [{ selector: 'lib-questionbook', template: "<div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\r\n <div class=\"form-row\">\r\n <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\"\r\n [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\r\n *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\">\r\n <!-- Sub Question Label -->\r\n <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\r\n <span [class]=\"qbItem.isShengel__c ? 'dis-flex shengel-myt-font3 myt-font7' : 'dis-flex myt-font3 myt-font7' \">{{ ques?.Question__c }}</span>\r\n </div>\r\n\r\n <!-- DateTime -->\r\n <div *ngIf=\"ques.Type__c === 'DateTime'\">\r\n <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n </app-custom-date-picker>\r\n </div>\r\n\r\n <!-- Text -->\r\n <div *ngIf=\"ques.Type__c === 'Text'\">\r\n <app-custom-input [fromShengel]=\"qbItem.isShengel__c\" [value]=\"ques.input\" [ngClassValue]=\"{\r\n 'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\r\n textBox: !qbItem.Progress_Bar__c\r\n }\" [question]=\"ques\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\r\n [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\r\n </app-custom-input>\r\n </div>\r\n \r\n <!-- for pick location -->\r\n <div *ngIf=\"ques.Type__c === 'Location'\">\r\n <app-pick-location [address]=\"ques.input\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n </app-pick-location>\r\n </div>\r\n\r\n <!-- for text area -->\r\n <div *ngIf=\"ques.Type__c === 'TextArea'\">\r\n <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\r\n (textareaValueChange)=\"childEventCapture($event)\"></app-custom-text-area>\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"ques.Type__c === 'Email'\">\r\n <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\r\n style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\r\n </div>\r\n\r\n <!-- Table -->\r\n <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\r\n <app-custom-table [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-table>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\r\n <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\" [options]=\"ques.Question_Options__r.records\"\r\n [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.input\" [placeholder]=\"'---Select---'\"\r\n [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\r\n (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\r\n </app-custom-dropdown>\r\n <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n </div>\r\n\r\n <!-- Attachment / Files -->\r\n <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\r\n <app-file-upload [limitFileUploading]=\"5\" [allFiles]=\"selectedFileData\"\r\n (selectedFileData)=\"assignSelectedFileData($event)\" (deletedFileData)=\"deleteFile($event)\"\r\n [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".form-group.content-box{background:#ffffff;padding:40px;border:1px solid #e8e8e8;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.form-row{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.col-lg-6{width:100%}.shengel-myt-font3{padding:5px 15px 5px 2px;color:#9a9a9a;font-size:14px;font-weight:400}.myt-font7{display:flex;justify-content:flex-start}@media (min-width: 1200px){.col-lg-6{width:50%!important}}\n"] }]
3489
+ }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }]; }, propDecorators: { qbItem: [{
3438
3490
  type: Input
3439
3491
  }], questionItem: [{
3440
3492
  type: Input
@@ -3445,23 +3497,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
3445
3497
  class BookletComponent {
3446
3498
  sfService;
3447
3499
  dataService;
3500
+ storageService;
3448
3501
  route;
3449
3502
  sanitizer;
3450
3503
  bookletId;
3451
3504
  serv;
3452
3505
  tkn;
3506
+ bookletJSON;
3453
3507
  handleBookletActionEvent = new EventEmitter();
3454
3508
  handlePage = new EventEmitter();
3509
+ nxtBooklet;
3455
3510
  booklet = [];
3456
3511
  abItem = {};
3457
3512
  actions = [];
3458
3513
  bookQuestionsMap = new Map();
3459
3514
  sqOptions = new Map();
3515
+ isAnswerFlag = false;
3460
3516
  spinnerName;
3461
3517
  spinnerType;
3462
- constructor(sfService, dataService, route, sanitizer, el) {
3518
+ constructor(sfService, dataService, storageService, route, sanitizer, el) {
3463
3519
  this.sfService = sfService;
3464
3520
  this.dataService = dataService;
3521
+ this.storageService = storageService;
3465
3522
  this.route = route;
3466
3523
  this.sanitizer = sanitizer;
3467
3524
  this.spinnerName = "sp1";
@@ -3483,6 +3540,27 @@ class BookletComponent {
3483
3540
  this.readBooklet(this.bookletId);
3484
3541
  }
3485
3542
  }
3543
+ else if (this.bookletJSON) {
3544
+ // Try to pass a value from Backend to differentiate the QuestionBook Read and AnswerBook Read
3545
+ this.isAnswerFlag = true;
3546
+ if (this.bookletJSON != null || this.bookletJSON != undefined) {
3547
+ // Storing the API response for future use
3548
+ this.storageService.save(this.bookletJSON);
3549
+ }
3550
+ this.booklet = this.bookletJSON.records;
3551
+ this.abItem = this.bookletJSON.answerbook;
3552
+ // Process the Sub Question Options - This should be merged with bookQuestionsMap in future
3553
+ for (var sq in this.bookletJSON.sqOptions) {
3554
+ this.sqOptions.set(sq, this.bookletJSON.sqOptions[sq]);
3555
+ }
3556
+ // Process the Questions
3557
+ for (var value in this.bookletJSON.bookQuestionsMap) {
3558
+ this.bookQuestionsMap.set(value, this.bookletJSON.bookQuestionsMap[value]);
3559
+ }
3560
+ if (this.bookletJSON.questionbook?.Actions__c != undefined) {
3561
+ this.actions = JSON.parse(this.bookletJSON.questionbook.Actions__c);
3562
+ }
3563
+ }
3486
3564
  }
3487
3565
  readBooklet = (uuid) => {
3488
3566
  if (this.serv == "api") {
@@ -3496,9 +3574,13 @@ class BookletComponent {
3496
3574
  console.log('Inside the successReadBooklet');
3497
3575
  // console.log(response);
3498
3576
  if (response != null || response != undefined) {
3577
+ // Storing the API response for future use
3578
+ this.storageService.save(response);
3579
+ // Try to pass a value from Backend to differentiate the QuestionBook Read and AnswerBook Read
3580
+ // this.isAnswerFlag = true;
3499
3581
  this.booklet = response.records;
3500
3582
  this.abItem = response.answerbook;
3501
- // Process the Sub Question Options
3583
+ // Process the Sub Question Options - This should be merged with bookQuestionsMap in future
3502
3584
  for (var sq in response.sqOptions) {
3503
3585
  this.sqOptions.set(sq, response.sqOptions[sq]);
3504
3586
  }
@@ -3515,7 +3597,10 @@ class BookletComponent {
3515
3597
  };
3516
3598
  handleBookletActionClick(action) {
3517
3599
  console.log(action);
3518
- this.handleBookletActionEvent.emit(action.eventtoemit);
3600
+ let dataToParent = {};
3601
+ dataToParent['action'] = action.eventtoemit;
3602
+ dataToParent['data'] = this.storageService.get();
3603
+ this.handleBookletActionEvent.emit(dataToParent);
3519
3604
  }
3520
3605
  readQuestions(qbId) {
3521
3606
  console.log('inside BookletComponent.readQuestions ' + qbId);
@@ -3538,18 +3623,20 @@ class BookletComponent {
3538
3623
  //console.log( doc.documentElement.textContent);
3539
3624
  return this.sanitizer.bypassSecurityTrustHtml(doc.documentElement.textContent);
3540
3625
  }
3541
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BookletComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: i3.ActivatedRoute }, { token: i5.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
3542
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- Booklet Handling-->\r\n<div *ngFor=\"let qb of booklet\">\r\n <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\r\n <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire> -->\r\n\r\n <div *ngFor=\"let ques of qb.Questions__r.records\" [class]=\"qb.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\r\n <div class=\"questiondiv2\">\r\n <div *ngIf=\"!ques.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\r\n <div [innerHTML]=\"getText(ques?.Question_Text__c)\" >\r\n {{ ques?.Question_Text__c }}\r\n </div>\r\n </div>\r\n <lib-questionbook [qbItem]=\"qb\" [questionItem]=\"ques\" [questions]=\"readQuestions(qb.Id)\"></lib-questionbook>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Actions -->\r\n<div class=\"align-submit-row\" *ngIf=\"abItem.Status__c != 'Completed'\">\r\n <div *ngFor=\"let action of actions\">\r\n <button (click)=\"handleBookletActionClick(action)\">\r\n {{ action.name }}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".align-submit-row{display:flex}.align-submit-row button{margin-left:25px;background:#48B7FF;color:#fff;border:none;border-radius:5px;height:50px;width:150px}.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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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", "questions"] }] });
3626
+ 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: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
3627
+ 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" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- Booklet Handling-->\r\n<div *ngFor=\"let qb of booklet\">\r\n <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\r\n <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire> -->\r\n\r\n <div *ngFor=\"let ques of qb.Questions__r.records\" [class]=\"qb.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\r\n <div class=\"questiondiv2\">\r\n <div *ngIf=\"!ques.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\r\n <div [innerHTML]=\"getText(ques?.Question_Text__c)\" >\r\n {{ ques?.Question_Text__c }}\r\n </div>\r\n </div>\r\n <lib-questionbook [qbItem]=\"qb\" [questionItem]=\"ques\" [questions]=\"readQuestions(qb.Id)\"></lib-questionbook>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Actions -->\r\n<div class=\"align-submit-row\" *ngIf=\"abItem.Status__c != 'Completed'\">\r\n <div *ngFor=\"let action of actions\">\r\n <button (click)=\"handleBookletActionClick(action)\">\r\n {{ action.name }}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".align-submit-row{display:flex}.align-submit-row button{margin-left:25px;background:#48B7FF;color:#fff;border:none;border-radius:5px;height:50px;width:150px}.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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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", "questions"] }] });
3543
3628
  }
3544
3629
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BookletComponent, decorators: [{
3545
3630
  type: Component,
3546
3631
  args: [{ selector: 'lib-booklet', template: "<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- Booklet Handling-->\r\n<div *ngFor=\"let qb of booklet\">\r\n <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\r\n <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire> -->\r\n\r\n <div *ngFor=\"let ques of qb.Questions__r.records\" [class]=\"qb.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\r\n <div class=\"questiondiv2\">\r\n <div *ngIf=\"!ques.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\r\n <div [innerHTML]=\"getText(ques?.Question_Text__c)\" >\r\n {{ ques?.Question_Text__c }}\r\n </div>\r\n </div>\r\n <lib-questionbook [qbItem]=\"qb\" [questionItem]=\"ques\" [questions]=\"readQuestions(qb.Id)\"></lib-questionbook>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Actions -->\r\n<div class=\"align-submit-row\" *ngIf=\"abItem.Status__c != 'Completed'\">\r\n <div *ngFor=\"let action of actions\">\r\n <button (click)=\"handleBookletActionClick(action)\">\r\n {{ action.name }}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".align-submit-row{display:flex}.align-submit-row button{margin-left:25px;background:#48B7FF;color:#fff;border:none;border-radius:5px;height:50px;width:150px}.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}\n"] }]
3547
- }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: i3.ActivatedRoute }, { type: i5.DomSanitizer }, { type: i0.ElementRef }]; }, propDecorators: { bookletId: [{
3632
+ }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: StorageService }, { type: i4.ActivatedRoute }, { type: i5.DomSanitizer }, { type: i0.ElementRef }]; }, propDecorators: { bookletId: [{
3548
3633
  type: Input
3549
3634
  }], serv: [{
3550
3635
  type: Input
3551
3636
  }], tkn: [{
3552
3637
  type: Input
3638
+ }], bookletJSON: [{
3639
+ type: Input
3553
3640
  }], handleBookletActionEvent: [{
3554
3641
  type: Output
3555
3642
  }], handlePage: [{
@@ -3619,13 +3706,13 @@ class SearchBoxComponent {
3619
3706
  clickItem(event) {
3620
3707
  console.log('inside clickItem of ' + event.target.value);
3621
3708
  }
3622
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchBoxComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: i3.ActivatedRoute }, { token: i1.HttpClient }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
3709
+ 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: i1.HttpClient }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
3623
3710
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<div id=\"autocomplete-input\">\r\n <input #auto id=\"searchbox-style\" \r\n (blur)=\"clearList()\" \r\n [(ngModel)]=\"filterName\" \r\n type=\"text\" \r\n name=\"name\" \r\n (placeholder)=\"placeHolderText\" \r\n style=\"margin: 0 !important;\" \r\n class=\"searchInput\" \r\n (focusin)=\"getSourceDataLocal($event)\" \r\n (input)=\"getSourceDataLocal($event)\">\r\n <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n <div *ngIf=\"finalResults.length > 1 && showSuggestion\" \r\n style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \r\n class=\"suggestions-container\">\r\n <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n <div class=\"grid-x align-middle\" style=\"padding: 1rem\" *ngIf=\"item.id != null\">\r\n <div class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n </div>\r\n <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n <h4 >{{item.title}}</h4>\r\n <div class=\"show-for-medium\" style=\" white-space: nowrap;\r\n overflow: hidden;text-overflow: ellipsis;\" > {{item.description}}\r\n </div>\r\n <div *ngIf=\"item.price\" class=\"drop-list\">\r\n {{item.price.toFixed(2)}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] });
3624
3711
  }
3625
3712
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchBoxComponent, decorators: [{
3626
3713
  type: Component,
3627
3714
  args: [{ selector: 'lib-search-box', template: "<div id=\"autocomplete-input\">\r\n <input #auto id=\"searchbox-style\" \r\n (blur)=\"clearList()\" \r\n [(ngModel)]=\"filterName\" \r\n type=\"text\" \r\n name=\"name\" \r\n (placeholder)=\"placeHolderText\" \r\n style=\"margin: 0 !important;\" \r\n class=\"searchInput\" \r\n (focusin)=\"getSourceDataLocal($event)\" \r\n (input)=\"getSourceDataLocal($event)\">\r\n <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\r\n <div *ngIf=\"finalResults.length > 1 && showSuggestion\" \r\n style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \r\n class=\"suggestions-container\">\r\n <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\r\n <div class=\"grid-x align-middle\" style=\"padding: 1rem\" *ngIf=\"item.id != null\">\r\n <div class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\r\n <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\r\n </div>\r\n <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\r\n <h4 >{{item.title}}</h4>\r\n <div class=\"show-for-medium\" style=\" white-space: nowrap;\r\n overflow: hidden;text-overflow: ellipsis;\" > {{item.description}}\r\n </div>\r\n <div *ngIf=\"item.price\" class=\"drop-list\">\r\n {{item.price.toFixed(2)}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>" }]
3628
- }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: i3.ActivatedRoute }, { type: i1.HttpClient }, { type: i0.ElementRef }]; }, propDecorators: { placeHolderText: [{
3715
+ }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: i4.ActivatedRoute }, { type: i1.HttpClient }, { type: i0.ElementRef }]; }, propDecorators: { placeHolderText: [{
3629
3716
  type: Input
3630
3717
  }], auto: [{
3631
3718
  type: ViewChild,