@rangertechnologies/ngnxt 2.0.27

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -0,0 +1,3610 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, EventEmitter, ViewChild, Input, Output, ViewEncapsulation, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as moment from 'moment';
+import * as i3 from '@angular/router';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i4$1 from '@angular/platform-browser';
+import * as i5 from 'ngx-spinner';
+import { NgxSpinnerModule } from 'ngx-spinner';
+import * as i2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i7 from 'ngx-device-detector';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i9 from 'mydatepicker';
+import { MyDatePickerModule } from 'mydatepicker';
+import * as i10 from 'ng-circle-progress';
+import { NgCircleProgressModule } from 'ng-circle-progress';
+import * as i3$1 from '@angular/google-maps';
+import { GoogleMapsModule } from '@angular/google-maps';
+import * as i2$1 from 'ng-pick-datetime';
+import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
+import * as i4 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+
+class NxtAppService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NxtAppService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NxtAppService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NxtAppService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class NxtAppComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NxtAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: NxtAppComponent, selector: "lib-nxt-app", ngImport: i0, template: `
+    <p>
+      nxt-app works!
+    </p>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NxtAppComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-nxt-app', template: `
+    <p>
+      nxt-app works!
+    </p>
+  ` }]
+        }], ctorParameters: function () { return []; } });
+
+class QuestionBook {
+    Id;
+    Name;
+    Category__c;
+    Next__c;
+    Cancel__c;
+    Back__c;
+    Submit__c;
+    Edit__c;
+    First_Question__c;
+    Title__c;
+    Next_Tracking_ID__c;
+    Back_Tracking_ID__c;
+    Cancel_Tracking_ID__c;
+    Submit_Tracking_ID__c;
+    Total_Questions__c;
+    Summary_Text__c;
+    Questions__r;
+    Progress_Bar__c;
+    SubTitle__c;
+    Question_Type__c;
+    Possibilities__c;
+    Summary_Sub_Text__c;
+    isShengel__c;
+}
+class Question {
+    Id;
+    Name;
+    Allowed_File_Extensions__c;
+    Question__c;
+    Question_Text__c;
+    Type__c;
+    Next_Question__c;
+    Is_Optional__c;
+    Is_Title__c;
+    X24_Hours__c;
+    Error_Message__c;
+    Is_Date_Backward__c;
+    Is_Date_Forward__c;
+    Group__c;
+    Question_No__c;
+    Question_Options__r;
+    Size__c;
+    Tracking_ID__c;
+    Additional_Rich__c;
+    Questions__r;
+    RecordType;
+    input;
+    error;
+    static X24_Hours__c;
+    Time_Text__c;
+    Title__c;
+    SubTitle__c;
+    Sub_Text__c;
+    Date_Text__c;
+    valueName;
+    dropDownOnly;
+    isDependentPicklist;
+    tableDataValue;
+    tableHeader;
+    startDate;
+    minDate;
+    isShengel__c;
+}
+class LocalQuestion {
+    Id;
+    Name;
+    Allowed_File_Extensions__c;
+    Question__c;
+    Question_Text__c;
+    Type__c;
+    Title__c;
+    SubTitle__c;
+    Next_Question__c;
+    Is_Optional__c;
+    Is_Title__c;
+    X24_Hours__c;
+    Error_Message__c;
+    Is_Date_Backward__c;
+    Is_Date_Forward__c;
+    Time_Text__c;
+    Date_Text__c;
+    Group__c;
+    Question_No__c;
+    Question_Options__r;
+    Sub_Text__c;
+    Size__c;
+    Tracking_ID__c;
+    Additional_Rich__c;
+    Questions__r;
+    RecordType;
+    input;
+    error;
+    static X24_Hours__c;
+    uniqueSubQId;
+}
+class QuestionR {
+    records;
+}
+class OptionR {
+    records;
+}
+class Option {
+    Id;
+    Name;
+    Value__c;
+    Tracking_ID__c;
+    Next_Question__c;
+}
+class OptionValue {
+    Id;
+    Name;
+    Value__c;
+    Next_Question__c;
+    checked;
+}
+class AnswerBook {
+    Id;
+    Question_Book__c;
+    Status__c;
+    Answers__r;
+}
+class Answer {
+    Id;
+    Question_Rich_Text__c;
+    Answer_Long__c;
+    Question_Type__c;
+    Question_Ref__c;
+    Question_Group_Text__c;
+}
+class AnswerR {
+    records;
+}
+class AnswerWrapper {
+    ansId;
+    ansNumber;
+    abId;
+    quesId;
+    quesValue;
+    qTyp;
+    ansValue;
+    groupText;
+    squesValue;
+}
+class ErrorWrapper {
+    errorCode;
+    errorMsg;
+    errorDetails;
+}
+class AttachmentWrapper {
+    parentId;
+    fileName;
+    fileContent;
+}
+class Attachment {
+    attachmentId;
+    attachmentName;
+    attachmentMetaData;
+    constructor(id, name, metaData) {
+        this.attachmentId = id;
+        this.attachmentName = name;
+        this.attachmentMetaData = metaData;
+    }
+}
+
+/*
+export const TESTQUESTIONS: Question[] = [
+{ Id: 11, Name: '001', question: 'What is your Name?' },
+{ Id: 12, Name: '002', question: 'What is your favourite City?' },
+{ Id: 13, Name: '003', question: 'How many languages you speak?' },
+{ Id: 14, Name: '004', question: 'Share your feedback?' },
+];
+*/
+// Dynamic Field Changes
+const TESTQB = {
+    Id: 2,
+    Name: 'QB-0000',
+    Category__c: 'Simple',
+    Next__c: 'weiter',
+    Cancel__c: 'zurück',
+    Back__c: 'zurück',
+    Submit__c: 'absenden',
+    Edit__c: 'Bearbeiten',
+    Next_Tracking_ID__c: '12345',
+    Back_Tracking_ID__c: '12345',
+    Cancel_Tracking_ID__c: '12345',
+    Submit_Tracking_ID__c: '12345',
+    First_Question__c: '1',
+    Title__c: 'Demo Unconditional',
+    Total_Questions__c: 3,
+    SubTitle__c: 'subTitle',
+    Question_Type__c: 'type',
+    Possibilities__c: 'poss',
+    Summary_Sub_Text__c: 'subText',
+    Progress_Bar__c: true
+};
+// Text Question
+const TESTQUESTION = {
+    Id: '11',
+    Name: 'QN-00001',
+    Type__c: 'Text',
+    Allowed_File_Extensions__c: '.pdf',
+    Question_Text__c: 'What is your Name?',
+    Question__c: 'What is your Name?',
+    Next_Question__c: 'a013t000013SS89AAG',
+    Tracking_ID__c: '1234',
+    Is_Optional__c: false,
+    Is_Title__c: true,
+    X24_Hours__c: true,
+    Error_Message__c: 'Please Enter a Value',
+    Is_Date_Backward__c: false,
+    Is_Date_Forward__c: false,
+    Group__c: 'Basic',
+    Size__c: 1,
+    Question_No__c: '1',
+    Time_Text__c: 'hour',
+    Title__c: 'title',
+    SubTitle__c: 'subtitle',
+    Sub_Text__c: 'subtext',
+    Date_Text__c: 'datetext',
+    RecordType: {
+        Name: 'UNCONDITIONAL'
+    },
+};
+// DateTime Question
+const DTQUESTION = {
+    Id: '12',
+    Name: 'QN-00002',
+    Type__c: 'DateTime',
+    Allowed_File_Extensions__c: '.pdf',
+    Question_Text__c: 'When did the incident happen?',
+    Question__c: 'When did the incident happen?',
+    Next_Question__c: 'a013t000013SS89AAG',
+    Tracking_ID__c: '1234',
+    Is_Optional__c: false,
+    Is_Title__c: true,
+    X24_Hours__c: true,
+    Error_Message__c: 'Please Enter a Value',
+    Is_Date_Backward__c: true,
+    Is_Date_Forward__c: true,
+    Group__c: 'Basic',
+    Size__c: 1,
+    Question_No__c: '1',
+    Time_Text__c: 'hour',
+    Title__c: 'title',
+    SubTitle__c: 'subtitle',
+    Sub_Text__c: 'subtext',
+    Date_Text__c: 'datetext',
+    RecordType: {
+        Name: 'UNCONDITIONAL'
+    },
+};
+// File Question
+const FILEQUESTION = {
+    Id: '13',
+    Name: 'QN-00003',
+    Type__c: 'File',
+    Allowed_File_Extensions__c: '.pdf',
+    Question_Text__c: 'Upload the Incident Report/Images?',
+    Question__c: 'Upload the Incident Report/Images?',
+    Next_Question__c: 'a013t000013SS89AAG',
+    Tracking_ID__c: '1234',
+    Is_Optional__c: false,
+    Is_Title__c: true,
+    X24_Hours__c: true,
+    Error_Message__c: 'Please Enter a Value',
+    Is_Date_Backward__c: false,
+    Is_Date_Forward__c: false,
+    Group__c: 'Basic',
+    Size__c: 1,
+    Question_No__c: '1',
+    Time_Text__c: 'hour',
+    Title__c: 'title',
+    SubTitle__c: 'subtitle',
+    Sub_Text__c: 'subtext',
+    Date_Text__c: 'datetext',
+    RecordType: {
+        Name: 'UNCONDITIONAL'
+    },
+};
+// DateTime Question
+const TAQUESTION = {
+    Id: '14',
+    Name: 'QN-00004',
+    Type__c: 'TextArea',
+    Allowed_File_Extensions__c: '.pdf',
+    Question_Text__c: 'Explain the particulars of the Incident?',
+    Question__c: 'Explain the particulars of the Incident?',
+    Next_Question__c: 'a013t000013SS89AAG',
+    Tracking_ID__c: '1234',
+    Is_Optional__c: false,
+    Is_Title__c: true,
+    X24_Hours__c: false,
+    Error_Message__c: 'Please Enter a Value',
+    Is_Date_Backward__c: false,
+    Is_Date_Forward__c: false,
+    Group__c: 'Basic',
+    Size__c: 1,
+    Question_No__c: '1',
+    Time_Text__c: 'hour',
+    Title__c: 'title',
+    SubTitle__c: 'subtitle',
+    Sub_Text__c: 'subtext',
+    Date_Text__c: 'datetext',
+    RecordType: {
+        Name: 'UNCONDITIONAL'
+    },
+};
+// Radio Question
+const RADIOQUESTION = {
+    Id: '15',
+    Name: 'QN-00005',
+    Type__c: 'Radio',
+    Allowed_File_Extensions__c: '.pdf',
+    Question_Text__c: 'Choose your favorite role',
+    Question__c: 'Choose your favorite role',
+    Tracking_ID__c: '1234',
+    Next_Question__c: '',
+    Is_Optional__c: false,
+    Is_Title__c: true,
+    X24_Hours__c: false,
+    Error_Message__c: 'Please Enter a Value',
+    Is_Date_Backward__c: false,
+    Is_Date_Forward__c: false,
+    Group__c: 'Basic',
+    Size__c: 1,
+    Question_No__c: '5',
+    Time_Text__c: 'hour',
+    Title__c: 'title',
+    SubTitle__c: 'subtitle',
+    Sub_Text__c: 'subtext',
+    Date_Text__c: 'datetext',
+    RecordType: {
+        Name: 'UNCONDITIONAL'
+    },
+    Question_Options__r: {
+        records: [
+            {
+                Id: '121',
+                Name: '121N',
+                Value__c: '121V',
+                Tracking_ID__c: '1234',
+                Next_Question__c: '',
+            },
+            {
+                Id: '122',
+                Name: '122N',
+                Value__c: '122V',
+                Tracking_ID__c: '1234',
+                Next_Question__c: '',
+            },
+            {
+                Id: '123',
+                Name: '123N',
+                Value__c: '123V',
+                Tracking_ID__c: '1234',
+                Next_Question__c: '',
+            }
+        ]
+    }
+};
+// Checkbox Question
+const CHECKQUESTION = {
+    Id: '16',
+    Name: 'QN-00006',
+    Type__c: 'Checkbox',
+    Allowed_File_Extensions__c: '.pdf',
+    Question_Text__c: 'Choose your favorite spots',
+    Question__c: 'Choose your favorite spots',
+    Tracking_ID__c: '1234',
+    Next_Question__c: '',
+    Is_Optional__c: false,
+    Is_Title__c: false,
+    X24_Hours__c: false,
+    Error_Message__c: 'Please Enter a Value',
+    Is_Date_Backward__c: false,
+    Is_Date_Forward__c: false,
+    Group__c: 'Basic',
+    Size__c: 1,
+    Question_No__c: '6',
+    Time_Text__c: 'hour',
+    Title__c: 'title',
+    SubTitle__c: 'subtitle',
+    Sub_Text__c: 'subtext',
+    Date_Text__c: 'datetext',
+    RecordType: {
+        Name: 'CONDITIONAL'
+    },
+    Question_Options__r: {
+        records: [
+            {
+                Id: '121',
+                Name: '121N',
+                Value__c: '121V',
+                Tracking_ID__c: '1234',
+                Next_Question__c: '',
+            },
+            {
+                Id: '122',
+                Name: '122N',
+                Value__c: '122V',
+                Tracking_ID__c: '1234',
+                Next_Question__c: '',
+            },
+            {
+                Id: '123',
+                Name: '123N',
+                Value__c: '123V',
+                Tracking_ID__c: '1234',
+                Next_Question__c: '',
+            }
+        ]
+    }
+};
+const GOOGLE_MAP_API_KEY = 'AIzaSyA18odJnD-pDsu7EVJ7WiXVM5sVvpjAQxw';
+// Book Question
+const BOOKQUESTION = {
+    Id: '17',
+    Name: 'QN-00007',
+    Type__c: 'Book',
+    Allowed_File_Extensions__c: '.pdf',
+    Tracking_ID__c: '1234',
+    Question__c: 'Provide your Address',
+    Question_Text__c: 'Provide your Address',
+    Next_Question__c: '',
+    Is_Optional__c: false,
+    Is_Title__c: true,
+    X24_Hours__c: false,
+    Error_Message__c: 'Please Enter a Value',
+    Is_Date_Backward__c: false,
+    Is_Date_Forward__c: false,
+    Group__c: 'Basic',
+    Size__c: 1,
+    Question_No__c: '7',
+    Time_Text__c: 'hour',
+    Title__c: 'title',
+    SubTitle__c: 'subtitle',
+    Sub_Text__c: 'subtext',
+    Date_Text__c: 'datetext',
+    Questions__r: {
+        records: [
+            {
+                Id: '170',
+                Name: 'QN-000070',
+                Type__c: 'Dropdown',
+                Question_Text__c: 'Land',
+                Question__c: 'Land',
+                Size__c: 1,
+                Allowed_File_Extensions__c: '.pdf',
+                Tracking_ID__c: '1234',
+                Is_Optional__c: false,
+                Is_Title__c: true,
+                X24_Hours__c: false,
+                Error_Message__c: 'Please Enter a Value',
+                Is_Date_Backward__c: false,
+                Is_Date_Forward__c: false,
+                Group__c: 'Basic',
+                Time_Text__c: 'hour',
+                Title__c: 'title',
+                SubTitle__c: 'subtitle',
+                Sub_Text__c: 'subtext',
+                Date_Text__c: 'datetext',
+                RecordType: {
+                    Name: 'UNCONDITIONAL'
+                },
+                Question_Options__r: {
+                    records: [
+                        {
+                            Id: '1',
+                            Name: 'D',
+                            Value__c: 'D',
+                            Tracking_ID__c: '1234',
+                            Next_Question__c: '',
+                        },
+                        {
+                            Id: '2',
+                            Name: 'CH',
+                            Value__c: 'CH',
+                            Tracking_ID__c: '1234',
+                            Next_Question__c: '',
+                        },
+                        {
+                            Id: '3',
+                            Name: 'UK',
+                            Value__c: 'UK',
+                            Tracking_ID__c: '1234',
+                            Next_Question__c: '',
+                        }
+                    ]
+                }
+            },
+            {
+                Id: '171',
+                Name: 'QN-000071',
+                Type__c: 'Text',
+                Size__c: 3,
+                Allowed_File_Extensions__c: '.pdf',
+                Question_Text__c: 'PLZ',
+                Question__c: 'PLZ',
+                Tracking_ID__c: '1234',
+                Is_Optional__c: false,
+                Is_Title__c: true,
+                X24_Hours__c: false,
+                Error_Message__c: 'Please Enter a Value',
+                Is_Date_Backward__c: false,
+                Is_Date_Forward__c: false,
+                Group__c: 'Basic',
+                Time_Text__c: 'hour',
+                Title__c: 'title',
+                SubTitle__c: 'subtitle',
+                Sub_Text__c: 'subtext',
+                Date_Text__c: 'datetext',
+                RecordType: {
+                    Name: 'UNCONDITIONAL'
+                }
+            },
+            {
+                Id: '172',
+                Name: 'QN-000072',
+                Type__c: 'Text',
+                Allowed_File_Extensions__c: '.pdf',
+                Tracking_ID__c: '1234',
+                Question_Text__c: 'ORT',
+                Question__c: 'ORT',
+                Is_Optional__c: false,
+                Is_Title__c: true,
+                X24_Hours__c: false,
+                Error_Message__c: 'Please Enter a Value',
+                Is_Date_Backward__c: false,
+                Is_Date_Forward__c: false,
+                Size__c: 8,
+                Group__c: 'Basic',
+                Time_Text__c: 'hour',
+                Title__c: 'title',
+                SubTitle__c: 'subtitle',
+                Sub_Text__c: 'subtext',
+                Date_Text__c: 'datetext',
+                RecordType: {
+                    Name: 'UNCONDITIONAL'
+                }
+            },
+            {
+                Id: '173',
+                Name: 'QN-000073',
+                Type__c: 'Text',
+                Question_Text__c: 'StraBe',
+                Question__c: 'StraBe',
+                Tracking_ID__c: '1234',
+                Is_Optional__c: false,
+                Is_Title__c: true,
+                X24_Hours__c: false,
+                Error_Message__c: 'Please Enter a Value',
+                Is_Date_Backward__c: false,
+                Is_Date_Forward__c: false,
+                Allowed_File_Extensions__c: '.pdf',
+                Size__c: 8,
+                Group__c: 'Basic',
+                Time_Text__c: 'hour',
+                Title__c: 'title',
+                SubTitle__c: 'subtitle',
+                Sub_Text__c: 'subtext',
+                Date_Text__c: 'datetext',
+                RecordType: {
+                    Name: 'UNCONDITIONAL'
+                }
+            },
+            {
+                Id: '174',
+                Name: 'QN-000074',
+                Type__c: 'Text',
+                Allowed_File_Extensions__c: '.pdf',
+                Tracking_ID__c: '1234',
+                Question_Text__c: 'Hausnummer',
+                Question__c: 'Hausnummer',
+                Is_Optional__c: false,
+                Is_Title__c: true,
+                X24_Hours__c: false,
+                Error_Message__c: 'Please Enter a Value',
+                Is_Date_Backward__c: false,
+                Is_Date_Forward__c: false,
+                Size__c: 4,
+                Group__c: 'Basic',
+                Time_Text__c: 'hour',
+                Title__c: 'title',
+                SubTitle__c: 'subtitle',
+                Sub_Text__c: 'subtext',
+                Date_Text__c: 'datetext',
+                RecordType: {
+                    Name: 'UNCONDITIONAL'
+                }
+            },
+        ]
+    },
+    RecordType: {
+        Name: 'CONDITIONAL'
+    },
+};
+
+class SalesforceService {
+    _router;
+    getSFResource = (path) => `${window['_VfResources']}${path}`;
+    getRNXTMethodName = () => `${window['_rnxtMethodName']}`;
+    remoteAction(methodName, params, resolve, reject, config) {
+        // console.log('inside SalesforceService.remoteAction for ' + methodName);
+        const self = this;
+        var nsMethodName = this.getRNXTMethodName();
+        //console.log('method name in lib = ' + nsMethodName);
+        Visualforce.remoting.Manager.invokeAction(nsMethodName, 
+        //'NxtController.process',
+        //`{!$RemoteAction.NxtController.process}`,
+        ...params, function (result, event) {
+            try {
+                result = JSON.parse(result);
+            }
+            catch (error) {
+                reject(error);
+            }
+            //console.log('Function called was - ' + methodName);
+            //console.log(result);
+            //console.log(resolve(result));
+            if (result.status) {
+                resolve(result);
+            }
+            else {
+                resolve(result);
+            }
+        }, config || { buffer: false, escape: false });
+    }
+    constructor(_router) {
+        this._router = _router;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SalesforceService, deps: [{ token: i3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SalesforceService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SalesforceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i3.Router }]; } });
+
+class DataService {
+    http;
+    constructor(http) {
+        this.http = http;
+    }
+    getAPIData(tkn, params, resolve, reject, config) {
+        console.log('inside DataService.getAPIData for ' + tkn);
+        const self = this;
+        // Call the ShengelGo Server
+        const headers = new HttpHeaders().set('Authorization', `${tkn}`);
+        headers.append('Accept', 'application/json');
+        headers.append('Access-Control-Allow-Origin', '*');
+        // Use Shengel Go Server IP/Domain  https://dev-api.shengelgo.com
+        this.http.get('https://dev-api.shengelgo.com/nxt/api/process/?dataType=' + params[0] + '&operation=' + params[1] + '&param=' + params[2], { headers: headers, observe: 'response' })
+            .subscribe(response => {
+            if (response.status == 200) {
+                resolve(response.body);
+            }
+            else {
+                reject(response.body);
+            }
+        }, error => {
+            console.log(error.status);
+            reject(error);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+
+class PickLocationComponent {
+    ngZone;
+    latitude = null;
+    longitude = null;
+    zoom = 10;
+    geoCoder;
+    // public formGroup: FormGroup;
+    searchElementRef;
+    showModal = false;
+    address;
+    locationSelected = new EventEmitter();
+    navigatorGeolocation;
+    markerPosition;
+    center;
+    markerOptions;
+    // center: google.maps.LatLngLiteral = { lat: 37.7749, lng: -122.4194 };
+    constructor(
+    // private mapsAPILoader: MapsAPILoader,
+    ngZone) {
+        this.ngZone = ngZone;
+        this.geoCoder = new google.maps.Geocoder();
+        // this.formGroup = this.formBuilder.group({
+        //   location: [''] // Add any initial value or leave it empty
+        // });
+    }
+    ngOnInit() {
+        this.initAutocomplete();
+    }
+    initAutocomplete() {
+        if (this.geoCoder) {
+            const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef?.nativeElement, {
+                types: []
+            });
+            autocomplete.addListener('place_changed', () => {
+                this.ngZone.run(() => {
+                    const place = autocomplete.getPlace();
+                    if (place.geometry === undefined || place.geometry === null) {
+                        return;
+                    }
+                    this.latitude = place.geometry.location.lat();
+                    this.longitude = place.geometry.location.lng();
+                    this.zoom = 18;
+                    this.address = place.formatted_address;
+                    this.locationSelected.emit(this.address);
+                });
+            });
+        }
+    }
+    onMarkerDragEnd(event) {
+        console.log('onMarkerDragEnd', event);
+        this.latitude = event.latLng.lat();
+        this.longitude = event.latLng.lng();
+        this.getAddress(this.latitude, this.longitude);
+    }
+    onMapClick(event) {
+        console.log('onMapClick', event);
+        this.latitude = event.latLng.lat();
+        this.longitude = event.latLng.lng();
+        this.getAddress(this.latitude, this.longitude);
+    }
+    setCurrentLocation() {
+        if ('geolocation' in navigator) {
+            navigator.geolocation.getCurrentPosition((position) => {
+                this.latitude = position.coords.latitude;
+                this.longitude = position.coords.longitude;
+                this.markerOptions = {
+                    draggable: true,
+                    animation: google.maps.Animation.DROP
+                };
+                this.markerPosition = { lat: this.latitude, lng: this.longitude };
+                this.center = { lat: this.latitude, lng: this.longitude };
+                this.zoom = 0;
+                this.getAddress(this.latitude, this.longitude);
+            });
+        }
+    }
+    getAddress(latitude, longitude) {
+        if (this.geoCoder) {
+            this.geoCoder.geocode({ location: { lat: latitude, lng: longitude } }, (results, status) => {
+                console.log('results', results);
+                console.log('status', status);
+                if (status === 'OK') {
+                    if (results[0]) {
+                        // this.zoom = 18;
+                        this.address = results[0].formatted_address;
+                        this.locationSelected.emit(this.address);
+                    }
+                    else {
+                        console.log('No results found');
+                    }
+                }
+                else {
+                    console.log('Geocoder failed due to: ' + status);
+                }
+            });
+        }
+    }
+    openMap() {
+        this.showModal = true;
+        if (!this.address) {
+            this.latitude = this.longitude = null;
+        }
+        if (!(this.latitude && this.longitude)) {
+            this.setCurrentLocation();
+        }
+        // $("#map").modal('show');
+        //  console.log('lat-lan', typeof this.latitude, typeof this.longitude);
+        // if (!(this.latitude && this.longitude)) {
+        //   this.setCurrentLocation();
+        // }
+    }
+    closeModal() {
+        this.showModal = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PickLocationComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PickLocationComponent, selector: "app-pick-location", inputs: { address: "address" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<div>\n     <!-- <label class=\"she-label\">Location</label> -->\n    <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"Enter Location\"\n        (keydown.enter)=\"$event.preventDefault()\" placeholder=\"Search Nearest Location\" autocorrect=\"off\"\n        autocapitalize=\"off\" spellcheck=\"off\" type=\"text\"  [(ngModel)]=\"address\"\n        >\n        <a (click)=\"openMap()\"\n        style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n        <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\n        </i> Pick Location</a>\n</div>\n\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n  <div class=\"map-modal\">\n    <div class=\"map-modal-content\">\n      <div class=\"map-modal-header\">\n        <h4>Pick Your Location</h4>\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n      </div>\n      <!-- Modal content goes here -->\n    <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\n    [fullscreenControl]=\"true\">\n    <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\n      (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\n    </agm-map> -->\n    <google-map [latitude]=\"latitude\"  [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"onMapClick($event)\">\n      <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\" (dragEnd)=\"onMarkerDragEnd($event)\"></map-marker>\n    </google-map>\n    </div>\n  </div>\n</div>\n\n\n\n\n\n\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}.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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PickLocationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-pick-location', template: "<div>\n     <!-- <label class=\"she-label\">Location</label> -->\n    <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"Enter Location\"\n        (keydown.enter)=\"$event.preventDefault()\" placeholder=\"Search Nearest Location\" autocorrect=\"off\"\n        autocapitalize=\"off\" spellcheck=\"off\" type=\"text\"  [(ngModel)]=\"address\"\n        >\n        <a (click)=\"openMap()\"\n        style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n        <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\n        </i> Pick Location</a>\n</div>\n\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n  <div class=\"map-modal\">\n    <div class=\"map-modal-content\">\n      <div class=\"map-modal-header\">\n        <h4>Pick Your Location</h4>\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n      </div>\n      <!-- Modal content goes here -->\n    <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\n    [fullscreenControl]=\"true\">\n    <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\n      (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\n    </agm-map> -->\n    <google-map [latitude]=\"latitude\"  [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"onMapClick($event)\">\n      <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\" (dragEnd)=\"onMarkerDragEnd($event)\"></map-marker>\n    </google-map>\n    </div>\n  </div>\n</div>\n\n\n\n\n\n\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}.map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { searchElementRef: [{
+                type: ViewChild,
+                args: ['search', { static: true }]
+            }], address: [{
+                type: Input
+            }], locationSelected: [{
+                type: Output
+            }] } });
+
+class CustomInputComponent {
+    value; // input value
+    disabled = false; // input disabled or not
+    placeholder;
+    error;
+    fromShengel = false;
+    ngClassValue;
+    idValue;
+    focusEvent;
+    inputValue = new EventEmitter();
+    constructor() { }
+    ngOnInit() {
+    }
+    onInputChange(input) {
+        this.inputValue.emit(input.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomInputComponent, selector: "app-custom-input", inputs: { value: "value", disabled: "disabled", placeholder: "placeholder", error: "error", fromShengel: "fromShengel", ngClassValue: "ngClassValue", idValue: "idValue", focusEvent: "focusEvent" }, outputs: { inputValue: "inputValue" }, ngImport: i0, template: "<input *ngIf=\"!fromShengel\" type=\"text\" \n       [(ngModel)]=\"value\"\n       [ngClass]=\"ngClassValue\"\n       [id]=\"idValue\"\n       (focus)=\"focusEvent\"\n       [style.border-color]=\"error ? 'red' : ''\"\n       [placeholder]=\"placeholder\"\n       (input)=\"onInputChange($event)\" />\n\n\n<input  *ngIf=\"fromShengel\" class=\"input-shengel\"\n[(ngModel)]=\"value\"\n type=\"text\" \n class=\"she-line-input form-control\" \n[placeholder]=\"placeholder\"\n[disabled]=\"disabled\"\n(input)=\"onInputChange($event)\">\n<span *ngIf=\"error\" class=\"error-msg\">Required*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-input', template: "<input *ngIf=\"!fromShengel\" type=\"text\" \n       [(ngModel)]=\"value\"\n       [ngClass]=\"ngClassValue\"\n       [id]=\"idValue\"\n       (focus)=\"focusEvent\"\n       [style.border-color]=\"error ? 'red' : ''\"\n       [placeholder]=\"placeholder\"\n       (input)=\"onInputChange($event)\" />\n\n\n<input  *ngIf=\"fromShengel\" class=\"input-shengel\"\n[(ngModel)]=\"value\"\n type=\"text\" \n class=\"she-line-input form-control\" \n[placeholder]=\"placeholder\"\n[disabled]=\"disabled\"\n(input)=\"onInputChange($event)\">\n<span *ngIf=\"error\" class=\"error-msg\">Required*</span>\n", styles: [".form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], fromShengel: [{
+                type: Input
+            }], ngClassValue: [{
+                type: Input
+            }], idValue: [{
+                type: Input
+            }], focusEvent: [{
+                type: Input
+            }], inputValue: [{
+                type: Output
+            }] } });
+
+class CustomTextAreaComponent {
+    value; // input value
+    placeholder;
+    rows; //The number of visible text lines for the control
+    error;
+    textareaValueChange = new EventEmitter();
+    constructor() { }
+    ngOnInit() {
+    }
+    onTextareaChange(event) {
+        this.textareaValueChange.emit(event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: { value: "value", placeholder: "placeholder", rows: "rows", error: "error" }, outputs: { textareaValueChange: "textareaValueChange" }, ngImport: i0, template: "\n<textarea \n    [(ngModel)] =\"value\" \n    [rows]=\"rows\" \n    class=\"she-line-input form-control\" \n    [placeholder]=\"placeholder\"\n    (input)=\"onTextareaChange($event)\"\n></textarea>\n<span *ngIf=\"error\" class=\"error-msg\">Required*</span>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-text-area', template: "\n<textarea \n    [(ngModel)] =\"value\" \n    [rows]=\"rows\" \n    class=\"she-line-input form-control\" \n    [placeholder]=\"placeholder\"\n    (input)=\"onTextareaChange($event)\"\n></textarea>\n<span *ngIf=\"error\" class=\"error-msg\">Required*</span>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], textareaValueChange: [{
+                type: Output
+            }] } });
+
+class CustomTableComponent {
+    tableHeader = '';
+    tableData;
+    tableDataChange = new EventEmitter();
+    tableIndex;
+    constructor() { }
+    ngOnInit() {
+    }
+    addRow() {
+        const newItem = {
+            label: '',
+            imageSrc: 'https://media.istockphoto.com/id/943776434/vector/fire-extinguisher-icon-vector.jpg?s=612x612&w=0&k=20&c=KVaDxuV2TV7fdwn09Tg9HeF3MNyoJC5k2YqSAzpStDY=',
+            altText: '',
+            name: '',
+            value: 'YES'
+        };
+        const updatedTableData = [...this.tableData, newItem];
+        this.tableData = updatedTableData;
+        this.emitTableDataValue(updatedTableData);
+    }
+    updateRadio(item, value) {
+        item.value = value;
+        this.emitTableDataValue(this.tableData);
+    }
+    updateLabel(rowIndex, label) {
+        this.tableData[rowIndex].label = label;
+        this.emitTableDataValue(this.tableData);
+    }
+    emitTableDataValue(updatedTableData) {
+        this.tableDataChange.emit(updatedTableData);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTableComponent, selector: "app-custom-table", inputs: { tableHeader: "tableHeader", tableData: "tableData", tableIndex: "tableIndex" }, outputs: { tableDataChange: "tableDataChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n  <thead>\n    <tr>\n      <th>\n        {{ tableHeader }}\n      </th>\n      <th class=\"permission\">\n        YES\n      </th>\n      <th class=\"permission\">\n        NO\n      </th>\n      <th class=\"permission\">\n        NA\n      </th>\n    </tr>\n  </thead>\n  <tbody id=\"safetyMeasuresTableBody\">\n    <tr *ngFor=\"let item of tableData; let i = index\">\n      <td>\n        <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n        <input type=\"text\" [(ngModel)]=\"item.label\" (ngModelChange)=\"updateLabel(i, item.label)\" class=\"she-line-input table-input\">\n      </td>\n      <td class=\"permission_yes\">\n        <input type=\"radio\"  [name]=\"'tableRadio_' + i + '_' + tableIndex \" [ngModel]=\"item.value\" value=\"YES\" (change)=\"updateRadio(item, 'YES')\">\n      </td>\n      <td class=\"permission_no\">\n        <input type=\"radio\"  [name]=\"'tableRadio_' + i + '_' + tableIndex \" [ngModel]=\"item.value\" value=\"NO\" (change)=\"updateRadio(item, 'NO')\">\n      </td>\n      <td class=\"permission_na\">\n        <input type=\"radio\"  [name]=\"'tableRadio_' + i + '_' + tableIndex \" [ngModel]=\"item.value\" value=\"NA\" (change)=\"updateRadio(item, 'NA')\">\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <b>Add More</b>\n      </td>\n      <td colspan=\"3\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">\n        +\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n\n\n  <!-- <div class=\"row\">\n    <div class=\"col-lg-12 m-t-20\">\n        <table class=\"table table-striped table-bordered\" style=\"text-align:center\">\n          <thead>\n            <tr>\n              <th style=\"text-align:left\">\n                Atmospheric Condition\n              </th>\n              <th style=\"text-align:center\">\n               Test 1\n              </th>\n              <th style=\"text-align:center\">\n               Test 2\n              </th>\n              <th style=\"text-align:center\">\n                Test 3\n              </th>\n              <th style=\"text-align:center\">\n                Test 4\n              </th>\n            </tr>\n          </thead>\n          <tbody id=\"atmosphericCondition\">\n            <tr *ngFor=\"let item1 of tableData\">\n              <td class=\"permission_yes\">\n                <p style=\"text-align:left; margin-top: 9px;\">Oxygen (19.5-23.5%)  {{ item.label }}</p>\n              </td>\n              <td class=\"permission_no\">\n                <input type=\"number\" id=\"test1_oxygen\"   style=\"width: 181px; height: 27px; text-align: center; border: none; background: transparent;\" placeholder=\"item.placeholder\" >\n              </td>\n              <td class=\"permission_na\">\n                <input type=\"number\" id=\"test2_oxygen\"  style=\"width: 181px; height: 27px; text-align: center; border: none; background: transparent;\" placeholder=\"item.placeholder\">\n              </td>\n              <td class=\"permission_no\">\n                <input type=\"number\" id=\"test3_oxygen\"  style=\"width: 181px; height: 27px; text-align: center; border: none; background: transparent;\" placeholder=\"item.placeholder\" >\n              </td>\n              <td class=\"permission_na\">\n                <input type=\"number\" id=\"test4_oxygen\"  style=\"width: 181px; height: 27px; text-align: center; border: none; background: transparent;\" placeholder=\"item.placeholder\">\n              </td>\n            </tr>\n             <tr id=\"atmosphericAddmore\">\n              <td style=\"text-align: left; padding: 13px 11px; cursor: pointer; margin-right: 32px;\" #add id=\"atmos\" (click)=\"add_atmospheriCondition_row(add)\">\n                <b>Add More   +</b>\n              </td>\n              <td>\n\n              </td>\n              <td>\n\n              </td>\n              <td>\n\n              </td>\n              <td>\n\n              </td>\n            </tr> \n          \n            <tr *ngFor=\"let item2 of tableData\">\n              <td class=\"permission_yes\">\n                <p style=\"text-align:left; margin-top: 9px;\">Tested By</p>\n              </td>\n              <td class=\"permission_na\">\n                <ng-select style=\"width: 175px\" id=\"test1_tested_by\"  (change)=\"onTested1Change($event)\" [items]=\"item.dropDownItems\"\n                  formControlName=\"test1_tested_by\" placeholder=\"---Select---\"\n                  >\n                </ng-select>\n              </td>\n              <td class=\"permission_no\">\n                <ng-select style=\"width: 175px\" id=\"test2_tested_by\"  (change)=\"onTested2Change($event)\" [items]=\"item.dropDownItems\"\n                  formControlName=\"test2_tested_by\" placeholder=\"---Select---\"\n                  >\n                </ng-select>\n              </td>\n              <td class=\"permission_na\">\n                <ng-select style=\"width: 175px\" id=\"test3_tested_by\"  (change)=\"onTested3Change($event)\" [items]=\"item.dropDownItems\"\n                  formControlName=\"test3_tested_by\" placeholder=\"---Select---\"\n                >\n              </ng-select>\n              </td>\n              <td class=\"permission_no\">\n                <ng-select style=\"width: 175px\" id=\"test4_tested_by\"  (change)=\"onTested4Change($event)\" [items]=\"item.dropDownItems\"\n                  formControlName=\"test4_tested_by\" placeholder=\"---Select---\"\n                  >\n                </ng-select>\n              </td>\n            </tr>\n            <tr>\n              <td class=\"permission_yes\">\n                <p style=\"text-align:left; margin-top: 9px;\">Date & Time</p>\n              </td>\n              <td class=\"permission_no\">\n                <input [(ngModel)]=\"test1_time\" id=\"test1_time\"  formControlName=\"test1_time\"\n                type=\"datetime-local\"\n                  placeholder=\"DD/MM/YYYY HH:MM\" style=\"width: 75%;\n                  height: 35px;\n                  border:none;\n                  box-shadow: none;\n                  border-bottom: 1px solid #ccc;\">\n              \n              </td>\n              <td class=\"permission_na\">\n               <input [(ngModel)]=\"test2_time\" id=\"test2_time\"  type=\"datetime-local\" formControlName=\"test2_time\"\n                \n                  placeholder=\"DD/MM/YYYY HH:MM\" style=\"width: 75%;\n                  height: 35px;\n                  border:none;\n                  box-shadow: none;\n                  border-bottom: 1px solid #ccc;\">\n               \n              </td>\n              <td class=\"permission_no\">\n\n                <input [(ngModel)]=\"test3_time\" id=\"test3_time\"  type=\"datetime-local\" formControlName=\"test3_time\"\n                 \n                  placeholder=\"DD/MM/YYYY HH:MM\" style=\"width: 75%;\n                  height: 35px;\n                  border:none;\n                  box-shadow: none;\n                  border-bottom: 1px solid #ccc;\">\n               \n              </td>\n              <td class=\"permission_na\">\n\n               <input [(ngModel)]=\"test4MinDate\" id=\"test4_time\"  formControlName=\"test4_time\"\n               type=\"datetime-local\"\n                  placeholder=\"DD/MM/YYYY HH:MM\" style=\"width: 75%;\n                  height: 35px;\n                  border:none;\n                  box-shadow: none;\n                  border-bottom: 1px solid #ccc;\">\n              \n              </td>\n            </tr>\n            <tr>\n              <td class=\"permission_yes\">\n                <p style=\"text-align:left; margin-top: 9px;\">Atmospheric conditions are measured periodically</p>\n              </td>\n              <td class=\"permission_no\">\n                <label class=\"switch2\">\n                  <input id=\"switch-input31\" class=\"switch-input2\" (change)=\"onTestAssesment1Change($event.target.checked)\" type=\"checkbox\" [checked]=\"Certified3\"  />\n                  <span class=\"switch-label2\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n                  <span class=\"switch-handle2\"></span> \n                </label> \n              </td>\n              <td class=\"permission_na\">\n                <label class=\"switch2\">\n                  <input id=\"switch-input4\" class=\"switch-input2\" (change)=\"onTestAssesment2Change($event.target.checked)\" type=\"checkbox\" [checked]=\"Certified4\"  />\n                  <span class=\"switch-label2\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n                  <span class=\"switch-handle2\"></span> \n                </label> \n              </td>\n              <td class=\"permission_no\">\n                <label class=\"switch2\">\n                  <input id=\"switch-input5\" class=\"switch-input2\" (change)=\"onTestAssesment3Change($event.target.checked)\" type=\"checkbox\" [checked]=\"Certified5\"  />\n                  <span class=\"switch-label2\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n                  <span class=\"switch-handle2\"></span> \n                </label> \n              </td>\n              <td class=\"permission_na\">\n                <label class=\"switch2\">\n                  <input id=\"switch-input6\" class=\"switch-input2\" (change)=\"onTestAssesment4Change($event.target.checked)\" type=\"checkbox\" [checked]=\"Certified6\"  />\n                  <span class=\"switch-label2\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n                  <span class=\"switch-handle2\"></span> \n                </label> \n              </td>\n            </tr>\n            <tr class=\"docs\">\n              <td>\n                <p style=\"text-align:left; margin-top: 12px;\">Attachment</p>\n              </td>\n              <td style=\"width:130px;\">\n                <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of test1File;let i = index;\"  style=\"width:130px; margin-left: 25px; margin-bottom: 10px;\">\n                  <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                      <div class=\"col-lg-3 document_image\">\n                          <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                      </div>\n                      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                          {{file?.name}}\n                      </div>\n                  </div>\n              </div>\n                <br>\n                <label class=\"btn btn-primary\">\n                  Upload File\n                  <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)=\"Test1File($event)\">\n                </label>\n              </td>\n              <td style=\"width:130px;\">\n                <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of test2File;let i = index;\" style=\"width:130px; margin-left: 25px; margin-bottom: 10px;\">\n                  <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                      <div class=\"col-lg-3 document_image\">\n                          <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                      </div>\n                      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                          {{file?.name}}\n                      </div>\n                  </div>\n                </div>\n                <br>\n                <label class=\"btn btn-primary\">\n                  Upload File\n                  <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)=\"Test2File($event)\">\n                </label>\n              </td>\n              <td style=\"width:130px;\">\n                <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of test3File;let i = index;\" style=\"width:130px; margin-left: 25px; margin-bottom: 10px;\">\n                  <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                      <div class=\"col-lg-3 document_image\">\n                          <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                      </div>\n                      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                          {{file?.name}}\n                      </div>\n                  </div>\n                </div>\n                <br>\n                <label class=\"btn btn-primary\">\n                  Upload File\n                  <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)=\"Test3File($event)\">\n                </label>\n              </td>\n              <td style=\"width:130px;\">\n                <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of test4File;let i = index;\" style=\"width:130px; margin-left: 25px; margin-bottom: 10px;\">\n                  <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                      <div class=\"col-lg-3 document_image\">\n                          <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                      </div>\n                      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                          {{file?.name}}\n                      </div>\n                  </div>\n                </div>\n                <br>\n                <label class=\"btn btn-primary\">\n                  Upload File\n                  <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)=\"Test4File($event)\">\n                </label>\n              </td>\n            </tr>\n           \n          </tbody>\n        </table>\n    </div>\n  </div> -->\n  \n\n\n\n", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-table', template: "<table class=\"table table-striped table-bordered\">\n  <thead>\n    <tr>\n      <th>\n        {{ tableHeader }}\n      </th>\n      <th class=\"permission\">\n        YES\n      </th>\n      <th class=\"permission\">\n        NO\n      </th>\n      <th class=\"permission\">\n        NA\n      </th>\n    </tr>\n  </thead>\n  <tbody id=\"safetyMeasuresTableBody\">\n    <tr *ngFor=\"let item of tableData; let i = index\">\n      <td>\n        <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n        <input type=\"text\" [(ngModel)]=\"item.label\" (ngModelChange)=\"updateLabel(i, item.label)\" class=\"she-line-input table-input\">\n      </td>\n      <td class=\"permission_yes\">\n        <input type=\"radio\"  [name]=\"'tableRadio_' + i + '_' + tableIndex \" [ngModel]=\"item.value\" value=\"YES\" (change)=\"updateRadio(item, 'YES')\">\n      </td>\n      <td class=\"permission_no\">\n        <input type=\"radio\"  [name]=\"'tableRadio_' + i + '_' + tableIndex \" [ngModel]=\"item.value\" value=\"NO\" (change)=\"updateRadio(item, 'NO')\">\n      </td>\n      <td class=\"permission_na\">\n        <input type=\"radio\"  [name]=\"'tableRadio_' + i + '_' + tableIndex \" [ngModel]=\"item.value\" value=\"NA\" (change)=\"updateRadio(item, 'NA')\">\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <b>Add More</b>\n      </td>\n      <td colspan=\"3\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">\n        +\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n\n\n  <!-- <div class=\"row\">\n    <div class=\"col-lg-12 m-t-20\">\n        <table class=\"table table-striped table-bordered\" style=\"text-align:center\">\n          <thead>\n            <tr>\n              <th style=\"text-align:left\">\n                Atmospheric Condition\n              </th>\n              <th style=\"text-align:center\">\n               Test 1\n              </th>\n              <th style=\"text-align:center\">\n               Test 2\n              </th>\n              <th style=\"text-align:center\">\n                Test 3\n              </th>\n              <th style=\"text-align:center\">\n                Test 4\n              </th>\n            </tr>\n          </thead>\n          <tbody id=\"atmosphericCondition\">\n            <tr *ngFor=\"let item1 of tableData\">\n              <td class=\"permission_yes\">\n                <p style=\"text-align:left; margin-top: 9px;\">Oxygen (19.5-23.5%)  {{ item.label }}</p>\n              </td>\n              <td class=\"permission_no\">\n                <input type=\"number\" id=\"test1_oxygen\"   style=\"width: 181px; height: 27px; text-align: center; border: none; background: transparent;\" placeholder=\"item.placeholder\" >\n              </td>\n              <td class=\"permission_na\">\n                <input type=\"number\" id=\"test2_oxygen\"  style=\"width: 181px; height: 27px; text-align: center; border: none; background: transparent;\" placeholder=\"item.placeholder\">\n              </td>\n              <td class=\"permission_no\">\n                <input type=\"number\" id=\"test3_oxygen\"  style=\"width: 181px; height: 27px; text-align: center; border: none; background: transparent;\" placeholder=\"item.placeholder\" >\n              </td>\n              <td class=\"permission_na\">\n                <input type=\"number\" id=\"test4_oxygen\"  style=\"width: 181px; height: 27px; text-align: center; border: none; background: transparent;\" placeholder=\"item.placeholder\">\n              </td>\n            </tr>\n             <tr id=\"atmosphericAddmore\">\n              <td style=\"text-align: left; padding: 13px 11px; cursor: pointer; margin-right: 32px;\" #add id=\"atmos\" (click)=\"add_atmospheriCondition_row(add)\">\n                <b>Add More   +</b>\n              </td>\n              <td>\n\n              </td>\n              <td>\n\n              </td>\n              <td>\n\n              </td>\n              <td>\n\n              </td>\n            </tr> \n          \n            <tr *ngFor=\"let item2 of tableData\">\n              <td class=\"permission_yes\">\n                <p style=\"text-align:left; margin-top: 9px;\">Tested By</p>\n              </td>\n              <td class=\"permission_na\">\n                <ng-select style=\"width: 175px\" id=\"test1_tested_by\"  (change)=\"onTested1Change($event)\" [items]=\"item.dropDownItems\"\n                  formControlName=\"test1_tested_by\" placeholder=\"---Select---\"\n                  >\n                </ng-select>\n              </td>\n              <td class=\"permission_no\">\n                <ng-select style=\"width: 175px\" id=\"test2_tested_by\"  (change)=\"onTested2Change($event)\" [items]=\"item.dropDownItems\"\n                  formControlName=\"test2_tested_by\" placeholder=\"---Select---\"\n                  >\n                </ng-select>\n              </td>\n              <td class=\"permission_na\">\n                <ng-select style=\"width: 175px\" id=\"test3_tested_by\"  (change)=\"onTested3Change($event)\" [items]=\"item.dropDownItems\"\n                  formControlName=\"test3_tested_by\" placeholder=\"---Select---\"\n                >\n              </ng-select>\n              </td>\n              <td class=\"permission_no\">\n                <ng-select style=\"width: 175px\" id=\"test4_tested_by\"  (change)=\"onTested4Change($event)\" [items]=\"item.dropDownItems\"\n                  formControlName=\"test4_tested_by\" placeholder=\"---Select---\"\n                  >\n                </ng-select>\n              </td>\n            </tr>\n            <tr>\n              <td class=\"permission_yes\">\n                <p style=\"text-align:left; margin-top: 9px;\">Date & Time</p>\n              </td>\n              <td class=\"permission_no\">\n                <input [(ngModel)]=\"test1_time\" id=\"test1_time\"  formControlName=\"test1_time\"\n                type=\"datetime-local\"\n                  placeholder=\"DD/MM/YYYY HH:MM\" style=\"width: 75%;\n                  height: 35px;\n                  border:none;\n                  box-shadow: none;\n                  border-bottom: 1px solid #ccc;\">\n              \n              </td>\n              <td class=\"permission_na\">\n               <input [(ngModel)]=\"test2_time\" id=\"test2_time\"  type=\"datetime-local\" formControlName=\"test2_time\"\n                \n                  placeholder=\"DD/MM/YYYY HH:MM\" style=\"width: 75%;\n                  height: 35px;\n                  border:none;\n                  box-shadow: none;\n                  border-bottom: 1px solid #ccc;\">\n               \n              </td>\n              <td class=\"permission_no\">\n\n                <input [(ngModel)]=\"test3_time\" id=\"test3_time\"  type=\"datetime-local\" formControlName=\"test3_time\"\n                 \n                  placeholder=\"DD/MM/YYYY HH:MM\" style=\"width: 75%;\n                  height: 35px;\n                  border:none;\n                  box-shadow: none;\n                  border-bottom: 1px solid #ccc;\">\n               \n              </td>\n              <td class=\"permission_na\">\n\n               <input [(ngModel)]=\"test4MinDate\" id=\"test4_time\"  formControlName=\"test4_time\"\n               type=\"datetime-local\"\n                  placeholder=\"DD/MM/YYYY HH:MM\" style=\"width: 75%;\n                  height: 35px;\n                  border:none;\n                  box-shadow: none;\n                  border-bottom: 1px solid #ccc;\">\n              \n              </td>\n            </tr>\n            <tr>\n              <td class=\"permission_yes\">\n                <p style=\"text-align:left; margin-top: 9px;\">Atmospheric conditions are measured periodically</p>\n              </td>\n              <td class=\"permission_no\">\n                <label class=\"switch2\">\n                  <input id=\"switch-input31\" class=\"switch-input2\" (change)=\"onTestAssesment1Change($event.target.checked)\" type=\"checkbox\" [checked]=\"Certified3\"  />\n                  <span class=\"switch-label2\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n                  <span class=\"switch-handle2\"></span> \n                </label> \n              </td>\n              <td class=\"permission_na\">\n                <label class=\"switch2\">\n                  <input id=\"switch-input4\" class=\"switch-input2\" (change)=\"onTestAssesment2Change($event.target.checked)\" type=\"checkbox\" [checked]=\"Certified4\"  />\n                  <span class=\"switch-label2\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n                  <span class=\"switch-handle2\"></span> \n                </label> \n              </td>\n              <td class=\"permission_no\">\n                <label class=\"switch2\">\n                  <input id=\"switch-input5\" class=\"switch-input2\" (change)=\"onTestAssesment3Change($event.target.checked)\" type=\"checkbox\" [checked]=\"Certified5\"  />\n                  <span class=\"switch-label2\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n                  <span class=\"switch-handle2\"></span> \n                </label> \n              </td>\n              <td class=\"permission_na\">\n                <label class=\"switch2\">\n                  <input id=\"switch-input6\" class=\"switch-input2\" (change)=\"onTestAssesment4Change($event.target.checked)\" type=\"checkbox\" [checked]=\"Certified6\"  />\n                  <span class=\"switch-label2\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n                  <span class=\"switch-handle2\"></span> \n                </label> \n              </td>\n            </tr>\n            <tr class=\"docs\">\n              <td>\n                <p style=\"text-align:left; margin-top: 12px;\">Attachment</p>\n              </td>\n              <td style=\"width:130px;\">\n                <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of test1File;let i = index;\"  style=\"width:130px; margin-left: 25px; margin-bottom: 10px;\">\n                  <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                      <div class=\"col-lg-3 document_image\">\n                          <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                      </div>\n                      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                          {{file?.name}}\n                      </div>\n                  </div>\n              </div>\n                <br>\n                <label class=\"btn btn-primary\">\n                  Upload File\n                  <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)=\"Test1File($event)\">\n                </label>\n              </td>\n              <td style=\"width:130px;\">\n                <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of test2File;let i = index;\" style=\"width:130px; margin-left: 25px; margin-bottom: 10px;\">\n                  <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                      <div class=\"col-lg-3 document_image\">\n                          <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                      </div>\n                      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                          {{file?.name}}\n                      </div>\n                  </div>\n                </div>\n                <br>\n                <label class=\"btn btn-primary\">\n                  Upload File\n                  <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)=\"Test2File($event)\">\n                </label>\n              </td>\n              <td style=\"width:130px;\">\n                <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of test3File;let i = index;\" style=\"width:130px; margin-left: 25px; margin-bottom: 10px;\">\n                  <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                      <div class=\"col-lg-3 document_image\">\n                          <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                      </div>\n                      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                          {{file?.name}}\n                      </div>\n                  </div>\n                </div>\n                <br>\n                <label class=\"btn btn-primary\">\n                  Upload File\n                  <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)=\"Test3File($event)\">\n                </label>\n              </td>\n              <td style=\"width:130px;\">\n                <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of test4File;let i = index;\" style=\"width:130px; margin-left: 25px; margin-bottom: 10px;\">\n                  <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                      <div class=\"col-lg-3 document_image\">\n                          <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                      </div>\n                      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                          {{file?.name}}\n                      </div>\n                  </div>\n                </div>\n                <br>\n                <label class=\"btn btn-primary\">\n                  Upload File\n                  <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)=\"Test4File($event)\">\n                </label>\n              </td>\n            </tr>\n           \n          </tbody>\n        </table>\n    </div>\n  </div> -->\n  \n\n\n\n", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { tableHeader: [{
+                type: Input
+            }], tableData: [{
+                type: Input
+            }], tableDataChange: [{
+                type: Output
+            }], tableIndex: [{
+                type: Input
+            }] } });
+
+class CustomDatePickerComponent {
+    date;
+    minDate;
+    maxDate;
+    dateChange = new EventEmitter();
+    dateSelected;
+    constructor() { }
+    ngOnInit() {
+        this.dateSelected = new Date(this.date);
+    }
+    onDateChange(event) {
+        this.dateChange.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: { date: "date", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<!-- <div class=\"date-picker-container\">\n    <label>{{label}}</label>\n    <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n    <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n\n<p>\n    <input  class=\"input-shengel\"\n    [(ngModel)]=\"dateSelected\" \n    [owlDateTimeTrigger]=\"dt\" \n    [owlDateTime]=\"dt\"  \n    [min]=\"minDate\"\n    placeholder=\"DD/MM/YYYY HH:MM\"\n    style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n    (dateTimeChange)=\"onDateChange($event)\">\n    <owl-date-time #dt></owl-date-time>\n</p>\n  ", styles: [""], dependencies: [{ kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i2$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i2$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-date-picker', template: "<!-- <div class=\"date-picker-container\">\n    <label>{{label}}</label>\n    <input type=\"date\" [min]=\"minDate\" [max]=\"maxDate\" [required]=\"required\" (change)=\"onDateChanged($event)\">\n</div> -->\n<!-- <mat-form-field>\n    <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [min]=\"minDate\" [max]=\"maxDate\" [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n</mat-form-field> -->\n\n<p>\n    <input  class=\"input-shengel\"\n    [(ngModel)]=\"dateSelected\" \n    [owlDateTimeTrigger]=\"dt\" \n    [owlDateTime]=\"dt\"  \n    [min]=\"minDate\"\n    placeholder=\"DD/MM/YYYY HH:MM\"\n    style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n    (dateTimeChange)=\"onDateChange($event)\">\n    <owl-date-time #dt></owl-date-time>\n</p>\n  " }]
+        }], ctorParameters: function () { return []; }, propDecorators: { date: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }] } });
+
+class DropdownWithFlagComponent {
+    certified = false;
+    // @Input() getValue:string = '';
+    JobPerformerCertificates = [];
+    flagDropDownChange = new EventEmitter();
+    selectedValue = '';
+    constructor() { }
+    ngOnInit() {
+    }
+    ngOnChanges() {
+        this.selectedValue = null;
+    }
+    onJobPerformerCertified(event) {
+        this.flagDropDownChange.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownWithFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: { certified: "certified", JobPerformerCertificates: "JobPerformerCertificates" }, outputs: { flagDropDownChange: "flagDropDownChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"she-title\">\n    <label class=\"switch\">\n      <input  class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\n      <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \n      <span class=\"switch-handle\"></span> \n    </label> \n    <ng-select *ngIf=\"certified\"\n      style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \n      [items]=\"JobPerformerCertificates\"\n      [(ngModel)]=\"selectedValue\"\n      (change)=\"onJobPerformerCertified($event)\"\n      placeholder=\"---Select---\">\n    </ng-select>\n  </div>   ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:12px;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label:before,.switch-label:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label:before{content:attr(data-off);right:11px;color:#aaa;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input:checked~.switch-label{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input:checked~.switch-label:before{opacity:0}.switch-input:checked~.switch-label:after{opacity:1}.switch-handle{position:absolute;top:0;left:0;width:19px;height:22px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px #0003}.switch-handle:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input:checked~.switch-handle{left:86px;box-shadow:-1px 1px 5px #0003;border:2px solid aquamarine}.switch-label,.switch-handle{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownWithFlagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-dropdown-with-flag', template: "<div class=\"she-title\">\n    <label class=\"switch\">\n      <input  class=\"switch-input\" type=\"checkbox\" disabled=\"true\" [checked]=\"certified\"/>\n      <span class=\"switch-label\" data-on=\"Certified\" data-off=\"Not Certified\"></span> \n      <span class=\"switch-handle\"></span> \n    </label> \n    <ng-select *ngIf=\"certified\"\n      style=\"margin-left: 36px; width: 205px; margin-bottom: 8px;\" \n      [items]=\"JobPerformerCertificates\"\n      [(ngModel)]=\"selectedValue\"\n      (change)=\"onJobPerformerCertified($event)\"\n      placeholder=\"---Select---\">\n    </ng-select>\n  </div>   ", styles: [".she-title{display:flex;flex-direction:row;align-items:center}.switch{position:relative;width:105px;height:23px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:12px;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label:before,.switch-label:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label:before{content:attr(data-off);right:11px;color:#aaa;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input:checked~.switch-label{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input:checked~.switch-label:before{opacity:0}.switch-input:checked~.switch-label:after{opacity:1}.switch-handle{position:absolute;top:0;left:0;width:19px;height:22px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px #0003}.switch-handle:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input:checked~.switch-handle{left:86px;box-shadow:-1px 1px 5px #0003;border:2px solid aquamarine}.switch-label,.switch-handle{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { certified: [{
+                type: Input
+            }], JobPerformerCertificates: [{
+                type: Input
+            }], flagDropDownChange: [{
+                type: Output
+            }] } });
+
+class CustomDropdownComponent {
+    http;
+    options;
+    placeholder;
+    apiMeta;
+    selectedValue;
+    progressBar;
+    id;
+    errorMessage;
+    error;
+    fromShengel = false;
+    valueChange = new EventEmitter();
+    constructor(http) {
+        this.http = http;
+    }
+    ngOnInit() {
+        console.log('inside oninit of custom-dropdown of ' + this.id);
+        // console.log(this.apiMeta);
+        if (this.apiMeta !== undefined) {
+            this.options = [];
+            let apiObj = JSON.parse(this.apiMeta);
+            this.apiResponse(apiObj.endpoint).subscribe((apiResponse) => {
+                let responses = apiResponse[apiObj.variable];
+                let results = [];
+                for (let i = 0; i < responses.length; i++) {
+                    var resp = responses[i];
+                    // console.log(resp);
+                    results.push(resp[apiObj.field]);
+                }
+                this.options = results;
+            });
+        }
+    }
+    apiResponse(endpoint) {
+        return this.http.get(endpoint);
+    }
+    selectChange(event) {
+        this.valueChange.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<select *ngIf=\"!fromShengel\"\n  [ngClass]=\"{\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n    'custom-select': !progressBar\n  }\" class=\"custom-select mr-sm-2 dd-height\" \n  [id]=\"id\" \n  [(ngModel)]=\"selectedValue\"\n  (change)=\"selectChange($event.target.value);\" \n  [style.borderColor]=\"error ? 'red' : '#858585'\"\n  [style.color]=\"error ? 'red' : ''\">\n    <option *ngFor=\"let option of options\" [value]=\"option.Value__c\" class=\"option\">{{ option.Value__c }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select>\n\n<ng-select  *ngIf=\"fromShengel\"\n class=\"shengel-custom-select\"\n[(ngModel)]=\"selectedValue\" \n[placeholder]=\"placeholder\"\n(change)=\"selectChange($event)\"\n[id]=\"id\"\n >\n<ng-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</ng-option>\n<ng-option *ngIf=\"errorMessage\"  value=\"\" disabled hidden>{{ errorMessage }}</ng-option>\n</ng-select>\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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-dropdown', template: "<select *ngIf=\"!fromShengel\"\n  [ngClass]=\"{\n    'dt-line dpDown down myt-dropbox myt-border-r myt-font1': progressBar,\n    'custom-select': !progressBar\n  }\" class=\"custom-select mr-sm-2 dd-height\" \n  [id]=\"id\" \n  [(ngModel)]=\"selectedValue\"\n  (change)=\"selectChange($event.target.value);\" \n  [style.borderColor]=\"error ? 'red' : '#858585'\"\n  [style.color]=\"error ? 'red' : ''\">\n    <option *ngFor=\"let option of options\" [value]=\"option.Value__c\" class=\"option\">{{ option.Value__c }}</option>\n    <option *ngIf=\"errorMessage\" value=\"\" disabled hidden>{{ errorMessage }}</option>\n</select>\n\n<ng-select  *ngIf=\"fromShengel\"\n class=\"shengel-custom-select\"\n[(ngModel)]=\"selectedValue\" \n[placeholder]=\"placeholder\"\n(change)=\"selectChange($event)\"\n[id]=\"id\"\n >\n<ng-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</ng-option>\n<ng-option *ngIf=\"errorMessage\"  value=\"\" disabled hidden>{{ errorMessage }}</ng-option>\n</ng-select>\n<span *ngIf=\"error && fromShengel\" class=\"error-msg\">Required*</span>", styles: [".ng-select{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; }, propDecorators: { options: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], apiMeta: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], progressBar: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], fromShengel: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class QuestionnaireComponent {
+    sfService;
+    dataService;
+    route;
+    sanitizer;
+    spinner;
+    _formBuilder;
+    deviceService;
+    qbId;
+    insuranceStartDate;
+    serv;
+    tkn;
+    handleEvent = new EventEmitter();
+    handlePage = new EventEmitter();
+    params;
+    deviceInfo = null;
+    abItem;
+    qbItem;
+    questionItem;
+    answerWrap;
+    // CONDITIONAL TYPES
+    radioFlag = false;
+    dataFlag = false;
+    // OPTIONONLY TYPES
+    dropdownFlag = false;
+    checkboxFlag = false;
+    // UNCONDITIONAL TYPES
+    textFlag = false;
+    taFlag = false;
+    dtFlag = false;
+    timeFlag = false;
+    dateFlag = false;
+    fileFlag = false;
+    emailFlag = false;
+    numberFlag = false;
+    alphanumericFlag = false;
+    bookFlag = false;
+    listFlag = false;
+    //Back button
+    backButtonFlag = false;
+    optionValues = [];
+    subQuestions = [];
+    inpValue;
+    answerMap = new Map();
+    dateMap = new Map();
+    selectedhourMap = new Map();
+    selectedminuteMap = new Map();
+    attachmentsMap = new Map();
+    sqOptions = new Map();
+    subAnsMap = new Map();
+    localSubQuestions = [];
+    questionStack = [];
+    questionName = [];
+    attachments = [];
+    attachmentIdList = [];
+    attachmentId = "";
+    attachment;
+    allowedFileExtension;
+    fileExceededLimit = false;
+    fileTypeIncorrect = false;
+    back = false;
+    backicon = false;
+    check;
+    pop;
+    localDate;
+    currentName;
+    pathquestion;
+    percent;
+    count;
+    taFocusOut = false;
+    notValidAccNum = false;
+    splCCBackClick = false;
+    summary = [];
+    localSubQMap = new Map();
+    keyIndex = 0;
+    //public sques: string;
+    selDate = {};
+    selectDate;
+    today = new Date();
+    el;
+    innerhtml;
+    possibilities;
+    innerhtml1;
+    summaryData = [];
+    tableData1 = [
+        {
+            label: 'Fire Extinguisher',
+            imageSrc: 'https://media.istockphoto.com/id/943776434/vector/fire-extinguisher-icon-vector.jpg?s=612x612&w=0&k=20&c=KVaDxuV2TV7fdwn09Tg9HeF3MNyoJC5k2YqSAzpStDY=',
+            altText: 'extinguisher',
+            name: 'FireEstinguisher',
+            value: 'YES'
+        },
+        {
+            label: ' Fire Blanket',
+            imageSrc: 'https://media.istockphoto.com/id/943776434/vector/fire-extinguisher-icon-vector.jpg?s=612x612&w=0&k=20&c=KVaDxuV2TV7fdwn09Tg9HeF3MNyoJC5k2YqSAzpStDY=',
+            altText: 'fireBlanket',
+            name: 'fireBlanket',
+            value: 'YES'
+        },
+        {
+            label: 'Illumination',
+            imageSrc: 'https://media.istockphoto.com/id/943776434/vector/fire-extinguisher-icon-vector.jpg?s=612x612&w=0&k=20&c=KVaDxuV2TV7fdwn09Tg9HeF3MNyoJC5k2YqSAzpStDY=',
+            altText: 'fireBlailluminationnket',
+            name: 'illumination',
+            value: 'YES'
+        },
+        {
+            label: 'Ventilation',
+            imageSrc: 'https://media.istockphoto.com/id/943776434/vector/fire-extinguisher-icon-vector.jpg?s=612x612&w=0&k=20&c=KVaDxuV2TV7fdwn09Tg9HeF3MNyoJC5k2YqSAzpStDY=',
+            altText: 'Ventilation',
+            name: 'Ventilation',
+            value: 'YES'
+        }
+    ];
+    tableData2 = [
+        {
+            label: 'Head Protection',
+            imageSrc: 'https://media.istockphoto.com/id/943776434/vector/fire-extinguisher-icon-vector.jpg?s=612x612&w=0&k=20&c=KVaDxuV2TV7fdwn09Tg9HeF3MNyoJC5k2YqSAzpStDY=',
+            altText: 'extinguisher',
+            name: 'check1',
+            value: 'YES'
+        },
+        {
+            label: 'Welding Hood',
+            imageSrc: 'https://media.istockphoto.com/id/943776434/vector/fire-extinguisher-icon-vector.jpg?s=612x612&w=0&k=20&c=KVaDxuV2TV7fdwn09Tg9HeF3MNyoJC5k2YqSAzpStDY=',
+            altText: 'fireBlanket',
+            name: 'check2',
+            value: 'YES'
+        },
+        {
+            label: 'Eye Protection',
+            imageSrc: 'https://media.istockphoto.com/id/943776434/vector/fire-extinguisher-icon-vector.jpg?s=612x612&w=0&k=20&c=KVaDxuV2TV7fdwn09Tg9HeF3MNyoJC5k2YqSAzpStDY=',
+            altText: 'Protection',
+            name: 'Protection',
+            value: 'YES'
+        },
+        {
+            label: 'Hearing Protection',
+            imageSrc: 'https://media.istockphoto.com/id/943776434/vector/fire-extinguisher-icon-vector.jpg?s=612x612&w=0&k=20&c=KVaDxuV2TV7fdwn09Tg9HeF3MNyoJC5k2YqSAzpStDY=',
+            altText: 'Hearing',
+            name: 'Hearing',
+            value: 'YES'
+        }
+    ];
+    hours = [
+        "01",
+        "02",
+        "03",
+        "04",
+        "05",
+        "06",
+        "07",
+        "08",
+        "09",
+        "10",
+        "11",
+        "12",
+    ];
+    minutes = [
+        "00",
+        "01",
+        "02",
+        "03",
+        "04",
+        "05",
+        "06",
+        "07",
+        "08",
+        "09",
+        "10",
+        "11",
+        "12",
+        "13",
+        "14",
+        "15",
+        "16",
+        "17",
+        "18",
+        "19",
+        "20",
+        "21",
+        "22",
+        "23",
+        "24",
+        "25",
+        "26",
+        "27",
+        "28",
+        "29",
+        "30",
+        "31",
+        "32",
+        "33",
+        "34",
+        "35",
+        "36",
+        "37",
+        "38",
+        "39",
+        "40",
+        "41",
+        "42",
+        "43",
+        "44",
+        "45",
+        "46",
+        "47",
+        "48",
+        "49",
+        "50",
+        "51",
+        "52",
+        "53",
+        "54",
+        "55",
+        "56",
+        "57",
+        "58",
+        "59",
+    ];
+    selectedHour = "";
+    selectedMinute = "";
+    selectedMeridiem = "";
+    valueName = "";
+    valueName1 = "";
+    bookFlagAccept;
+    recordId;
+    currentQuestionId;
+    spinnerType;
+    spinnerName;
+    nextValue = '';
+    start_date;
+    //search component
+    tempoAddress = [];
+    selectedValue;
+    selectedPostalcode;
+    selectedProvince;
+    selectedCity;
+    selectedArea;
+    localaddress = [];
+    allAddress = [];
+    PostalCode;
+    places = [];
+    province = [];
+    // REQ-01 PROGRESS BAR
+    progressStyle = "0%";
+    answerCount = 0;
+    indexCount = 0;
+    addFlag = true;
+    myDatePickerOptions = {};
+    individualBookButton;
+    constructor(sfService, dataService, route, sanitizer, spinner, _formBuilder, 
+    //private dbService: NgxIndexedDBService,
+    deviceService, el) {
+        this.sfService = sfService;
+        this.dataService = dataService;
+        this.route = route;
+        this.sanitizer = sanitizer;
+        this.spinner = spinner;
+        this._formBuilder = _formBuilder;
+        this.deviceService = deviceService;
+        this.spinnerName = "sp1";
+        this.spinnerType = "ball-spin-clockwise";
+    }
+    onDateChanged(event) {
+        //console.log('Inside the onDateChanged');
+        //to change the border color
+        if (this.qbItem.Progress_Bar__c) {
+            //console.log('Inside the progressBar cond');
+            this.inpValue =
+                event.date.day + "/" + event.date.month + "/" + event.date.year;
+            if (this.questionItem.Type__c == "Book") {
+                this.selectDate = event.date.day + "/" + event.date.month + "/" + event.date.year;
+            }
+        }
+        else {
+            //console.log('Inside the ELSE of progressBar cond');
+            if (this.questionItem.Type__c == "Book") {
+                this.selectDate = event.date.day + "-" + event.date.month + "-" + event.date.year;
+            }
+            this.inpValue =
+                event.date.year + "-" + event.date.month + "-" + event.date.day;
+        }
+        const htmlElement = window.document.getElementsByClassName("mydp");
+        htmlElement
+            .item(0)
+            .setAttribute("style", "border-color:#87be1c;width:100%");
+        this.dateMap.set(this.questionItem.Id, event);
+        if (event.date.day === 0 &&
+            event.date.month === 0 &&
+            event.date.year === 0) {
+            this.dateMap.delete(this.questionItem.Id);
+            this.answerMap.delete(this.questionItem.Id);
+        }
+        //console.log('this.inpValue = '+this.inpValue);
+        //console.log('this.selectDate = '+this.selectDate);
+    }
+    ngOnInit() {
+        this.deviceInfo = this.deviceService.getDeviceInfo();
+        this.route.queryParams.subscribe((params) => {
+            if (params['id']) {
+                this.individualBookButton = true;
+            }
+            else if (params['bookletId']) {
+                this.individualBookButton = false;
+            }
+        });
+        console.log('Inside the ngOnInit');
+        // console.log("RNXT-Claim");
+        this.inpValue = "";
+        this.selectedMeridiem = "AM";
+        this.processQB();
+        //console.log(localStorage.getItem('address'));
+        if (localStorage.getItem("address")) {
+            this.localaddress = JSON.parse(localStorage.getItem("address"));
+            //console.log('Length='+this.localaddress.length);
+            this.allAddress = this.localaddress.filter((item, index) => {
+                if (this.localaddress.indexOf(item) == index) {
+                    return item;
+                }
+            });
+            this.allAddress.sort(function (a, b) {
+                return a.zipCode - b.zipCode;
+            });
+        }
+        else if (this.deviceInfo.os === 'iOS') {
+            let openRequest = indexedDB.open("addressDB");
+            openRequest.onsuccess = (event) => {
+                const targetNew = event.target;
+                let dbNew = targetNew.result;
+                const requestNew = dbNew.transaction('addressTable')
+                    .objectStore('addressTable')
+                    .get(1);
+                requestNew.onsuccess = () => {
+                    const tempVar = requestNew.result;
+                    this.localaddress = JSON.parse(tempVar.wholeAddressString);
+                    this.allAddress = this.localaddress.filter((item, index) => {
+                        if (this.localaddress.indexOf(item) == index) {
+                            return item;
+                        }
+                    });
+                    this.allAddress.sort(function (a, b) {
+                        return a.zipCode - b.zipCode;
+                    });
+                };
+            };
+        }
+    }
+    ngOnChanges() {
+        //console.log('inside Questionnaire ngOnChanges');
+        this.processQB();
+    }
+    date_TimeMap() {
+        this.selectedhourMap.set(this.questionItem.Id, this.selectedHour);
+        this.selectedminuteMap.set(this.questionItem.Id, this.selectedMinute);
+    }
+    day() {
+        this.myDatePickerOptions = {
+            dateFormat: "dd.mm.yyyy",
+            sunHighlight: false,
+            disableDateRanges: [],
+            showClearDateBtn: false,
+            disableSince: {
+                year: 0,
+                month: 0,
+                day: 0,
+            },
+            disableUntil: {
+                year: 0,
+                month: 0,
+                day: 0,
+            },
+            showTodayBtn: false,
+            dayLabels: {
+                su: "Dom",
+                mo: "Lun",
+                tu: "Mar",
+                we: "Mié",
+                th: "Jue",
+                fr: "Vie",
+                sa: "Sáb",
+            },
+            monthLabels: {
+                1: "Ene",
+                2: "Feb",
+                3: "Mar",
+                4: "Abr",
+                5: "Mayo",
+                6: "Jun",
+                7: "Jul",
+                8: "Ago",
+                9: "Sep",
+                10: "Oct",
+                11: "Nov",
+                12: "Dic",
+            },
+        };
+    }
+    change() {
+        const htmlElement = window.document.getElementsByClassName("mydp");
+        if (this.selDate === null || this.inpValue.length === 0) {
+            htmlElement
+                .item(0)
+                .setAttribute("style", "width:100%;border: 1px solid red");
+        }
+        else {
+            htmlElement
+                .item(0)
+                .setAttribute("style", "border: 1px solid #87be1c ;width:100%");
+        }
+    }
+    processQB() {
+        //console.log('ProcessQB');
+        //this.qbItem
+        //console.log(this.qbId);
+        //console.log('Version in process is 8bf11efa7f91a391d957bf6b5078edc7e656b67c');
+        if (this.qbId) {
+            if (this.qbId.length == 18) {
+                this.readQuestionBook(this.qbId);
+            }
+            else {
+                //console.log('Inside the else part');
+                //console.log('Setting the Question Directly for testing');
+                this.questionItem = DTQUESTION;
+                this.qbItem = TESTQB;
+                this.processQuestion();
+            }
+        }
+    }
+    trimLastDummy(input) {
+        return (input = input.substring(0, input.length - 6));
+    }
+    getProperTime(def, input) {
+        return input === "" ? def : input;
+    }
+    //Summary Question Clickable Logic
+    handleEditClick(value) {
+        this.backicon = false;
+        if (this.abItem?.Status__c == "Pending") {
+            if (value == null) {
+                return;
+            }
+            this.readQuestion(value);
+            //console.log(' in side summaryopen'+ this.summary.length);
+            //Assign question stack length from summary part
+            var arrayLength = this.questionStack.length;
+            var lengthValue = this.questionStack.indexOf(value);
+            for (let i = arrayLength; i > lengthValue; i--) {
+                this.questionStack.pop();
+            }
+            if (this.qbItem.Progress_Bar__c === true) {
+                var arrayLength1 = this.questionName.length;
+                for (let j = arrayLength1; j > lengthValue; j--) {
+                    this.questionName.pop();
+                }
+            }
+            this.summary = [];
+            this.summaryData = [];
+        }
+    }
+    handleNextClick() {
+        this.backButtonFlag = false;
+        this.AnswerSave();
+    }
+    AnswerSave() {
+        //this.updateProgress();
+        if (this.currentQuestionId === null) {
+            return;
+        }
+        var questionTxt = '';
+        this.clearError();
+        this.handleEvent.emit(this.qbItem.Next_Tracking_ID__c);
+        this.recordId = null;
+        var cQuestion = new Question();
+        cQuestion = this.questionItem;
+        // Create an array of objects to store the values
+        for (var i = 0; i < this.questionItem.Questions__r.records.length; i++) {
+            if (this.questionItem.Questions__r.records[i].Question_Text__c) {
+                var questionText = this.questionItem.Questions__r.records[i].Question_Text__c.replace(/<[^>]+>/g, ''); // Remove HTML tags from the Question_Text__c value
+            }
+            else {
+                questionText = 'undefined';
+            }
+            const input = this.questionItem.Questions__r.records[i].input;
+            const obj = { [questionText]: input }; // Create an object with the questionText as the key and the input as the value
+            this.summaryData.push(obj); // Add the object to the data array
+        }
+        var typ = cQuestion.Type__c;
+        // this.sques += cQuestion.Question__c + '@@##$$';
+        var quesValue = cQuestion.Question_Text__c;
+        var mailformat = "^[^.][a-zA-Z0-9!#$%&'*+-/=?^_`{|}~]+[^.]@[^-][a-zA-Z0-9.-]+[^-].[a-zA-Z]{2,}$";
+        // Process Inputs
+        if (this.checkboxFlag) {
+            this.inpValue = "";
+            // Save all the selected options in the inpValue
+            for (var ov of this.optionValues.filter((item) => item.checked)) {
+                this.inpValue += ov.Value__c + "@@##$$";
+                this.recordId = ov.Next_Question__c;
+            }
+            this.inpValue = this.trimLastDummy(this.inpValue);
+        }
+        else if (this.emailFlag) {
+            if (this.inpValue && this.inpValue.match(mailformat)) {
+                this.recordId = this.questionItem.Next_Question__c;
+            }
+            else {
+                this.questionItem.error = new ErrorWrapper();
+                return;
+            }
+        }
+        else if (this.alphanumericFlag) {
+            var isNotValidAccNum = this.isNotValidAccNumber(this.inpValue);
+            if (isNotValidAccNum) {
+                this.notValidAccNum = true;
+                this.recordId = this.questionItem.Next_Question__c;
+                return;
+            }
+            this.notValidAccNum = false;
+        }
+        else if (this.numberFlag) {
+            if (this.inpValue) {
+                this.recordId = this.questionItem.Next_Question__c;
+            }
+            else {
+                this.questionItem.error = new ErrorWrapper();
+                return;
+            }
+        }
+        else if (this.bookFlag) {
+            //console.log(this.questionItem.Type__c)
+            //console.log('Inside the bookFlag cond');
+            //console.log('this.inpValue = '+this.inpValue);
+            //console.log('this.selectDate = '+this.selectDate);
+            //console.log('this.selDate = ');
+            //console.log(this.selDate);
+            this.inpValue = "";
+            var hasMissingInput = false;
+            for (var item of this.questionItem.Questions__r.records) {
+                var count = 0;
+                if (item.Type__c == "Date" || item.Type__c == "Time") {
+                    //this one
+                    this.change();
+                    if (item.Type__c == "Date") {
+                        //console.log('Inside the date type cond = '+this.selectDate);
+                        this.inpValue = this.selectDate;
+                        //console.log(this.inpValue)
+                        //console.log(this.selectDate)
+                    }
+                    if (item.Type__c == "Time") {
+                        //console.log(this.selectedHour+this.selectedMeridiem+this.selectedMinute)
+                        if (this.questionItem.X24_Hours__c === false) {
+                            this.questionItem.input =
+                                (this.selectedMeridiem === "PM" && this.selectedHour != "12"
+                                    ? Number(this.selectedHour) + 12
+                                    : this.selectedHour) +
+                                    ":" +
+                                    this.selectedMinute + " PM";
+                            if (this.selectedMeridiem === "AM" && this.selectedHour === "12") {
+                                this.questionItem.input = "00" + ":" + this.selectedMinute + " AM";
+                            }
+                            if (this.qbItem.Progress_Bar__c) {
+                                if (this.selectDate) {
+                                    this.inpValue = this.selectDate + " " + this.questionItem.input;
+                                }
+                                else {
+                                    this.inpValue = " " + this.questionItem.input;
+                                }
+                            }
+                            else {
+                                if (this.selectDate) {
+                                    this.inpValue = this.selectDate + " " + this.questionItem.input;
+                                }
+                                else {
+                                    this.inpValue = " " + this.questionItem.input;
+                                }
+                            }
+                        }
+                        if (this.questionItem.X24_Hours__c === true) {
+                            this.questionItem.input =
+                                this.selectedHour + ":" + this.selectedMinute;
+                            if (this.qbItem.Progress_Bar__c) {
+                                this.inpValue = this.questionItem.input;
+                            }
+                            else {
+                                this.inpValue = this.questionItem.input;
+                            }
+                        }
+                    }
+                    if (this.selDate === null || this.selDate === undefined || !this.inpValue || !this.selectedHour || !this.selectedMinute || !this.selectDate) {
+                        //console.log('Inside the null condition of input');
+                        this.questionItem.error = new ErrorWrapper();
+                        const htmlElement = window.document.getElementsByClassName("mydp");
+                        htmlElement
+                            .item(0)
+                            .setAttribute("style", "width:100%;border-bottom: 1px solid red !important;");
+                        return;
+                    }
+                    this.date_TimeMap();
+                }
+                if (item.Type__c == "Text" && item.Question__c === 'Población') {
+                    for (var loc of this.localaddress) {
+                        if ((this.selectedPostalcode == loc.zipCode) && (this.selectedValue == loc.country) && (this.selectedCity == loc.town)) {
+                            item.input = this.selectedCity;
+                            break;
+                        }
+                        else if (count == this.localaddress.length - 1) {
+                            //console.log('error form city')
+                            item.error = new ErrorWrapper();
+                            hasMissingInput = true;
+                            return;
+                        }
+                        count++;
+                    }
+                    //console.log('testin values=='+item.input)
+                }
+                // if(item.Type__c === 'Location' && Array.isArray(item.input) && item.input.every((input) => input !== undefined)){
+                //     const inputValues = "answerString: " + item.input ;
+                //     item.input = inputValues;
+                // }
+                if (item.Type__c == "Text" && item.Question__c === 'Código postal') {
+                    for (var loc of this.localaddress) {
+                        if (loc.zipCode == this.selectedPostalcode) {
+                            //console.log('testing zipcode value*****'+ this.selectedPostalcode)
+                            item.input = this.selectedPostalcode;
+                            break;
+                        }
+                        else if (count == this.localaddress.length - 1) {
+                            //console.log('error form')
+                            item.error = new ErrorWrapper();
+                            hasMissingInput = true;
+                            return;
+                        }
+                        count++;
+                    }
+                    //console.log('testin values=='+item.input)
+                }
+                if (item.Type__c == "Text" && item.Question__c === 'Provincia') {
+                    for (var loc of this.localaddress) {
+                        if (loc.province == this.selectedProvince) {
+                            //console.log('******testing province value'+ this.selectedProvince)
+                            item.input = this.selectedProvince;
+                            break;
+                        }
+                        else if (count == this.localaddress.length - 1) {
+                            //console.log('error form')
+                            item.error = new ErrorWrapper();
+                            hasMissingInput = true;
+                            return;
+                        }
+                        count++;
+                    }
+                    //console.log('testin values=='+item.input)
+                }
+                if (!item.Is_Optional__c &&
+                    //  ((item.Type__c != "File" && !item.input && item.Type__c != 'Date' && item.Type__c != 'Time') ||
+                    //   (item.Type__c == "File" && this.attachments.length == 0))
+                    (item.Type__c == "File" && this.attachments.length == 0)) {
+                    item.error = new ErrorWrapper();
+                    hasMissingInput = true;
+                }
+                if (item.Type__c == "Radio") {
+                    if (!item.input) {
+                        item.error = new ErrorWrapper();
+                        hasMissingInput = true;
+                    }
+                }
+                if (item.Type__c == "Dropdown") {
+                    if (!item.input) {
+                        item.input = "";
+                        item.error = new ErrorWrapper();
+                        hasMissingInput = true;
+                    }
+                }
+                if (item.Type__c == "Email") {
+                    if (item.input && item.input.match(mailformat)) {
+                        this.recordId = cQuestion.Next_Question__c;
+                    }
+                    else {
+                        item.error = new ErrorWrapper();
+                        hasMissingInput = true;
+                    }
+                }
+                if (item.Type__c == "File" && this.attachments.length > 0) {
+                    for (var attachmentItem of this.attachments) {
+                        this.inpValue +=
+                            attachmentItem.attachmentId +
+                                "@#$" +
+                                attachmentItem.attachmentName +
+                                ",";
+                        if (item.input == this.inpValue) {
+                            this.recordId = cQuestion.Next_Question__c;
+                            //console.log('inside' + recordId);
+                        }
+                    }
+                    // this.attachments = [];
+                } //item.input == this.inpValue;
+                this.inpValue += (item.input != undefined ? item.input : "") + "@@##$$";
+                questionTxt += item.Question__c + "@@##$$";
+                //console.log('inside book1' + this.inpValue)
+            }
+            if (hasMissingInput) {
+                return;
+            }
+            this.inpValue = this.trimLastDummy(this.inpValue);
+            questionTxt = questionTxt ? this.trimLastDummy(questionTxt) : questionTxt;
+        }
+        else if (this.listFlag) {
+            this.inpValue = '';
+            var hasMissingInput = false;
+            if (this.localSubQMap.has(this.questionItem.Id)) {
+                this.subAnsMap = new Map();
+                for (var localQues of this.localSubQMap.get(this.questionItem.Id)) {
+                    if (!localQues.input) {
+                        localQues.error = new ErrorWrapper();
+                        hasMissingInput = true;
+                    }
+                    if (!this.subAnsMap.has(localQues.Id)) {
+                        // console.log('inside ans map')
+                        this.subAnsMap.set(localQues.Id, localQues.input);
+                    }
+                    else {
+                        // console.log('inside ans map else')
+                        this.subAnsMap.set(localQues.Id, this.subAnsMap.get(localQues.Id) + '$$@@##' + localQues.input);
+                    }
+                }
+                if (hasMissingInput) {
+                    //console.log('file two')
+                    return;
+                }
+                this.subAnsMap.forEach((value, key) => {
+                    // console.log('inside Map' );
+                    // console.log(value);
+                    this.inpValue += (value != undefined ? value : '') + '@@##$$';
+                });
+                this.inpValue = this.trimLastDummy(this.inpValue);
+            }
+        }
+        else if (this.dropdownFlag) {
+            if (this.inpValue.length <= 1) {
+                this.inpValue = ".";
+                this.questionItem.error = new ErrorWrapper();
+            }
+        }
+        else if (this.dtFlag && this.dateFlag && this.timeFlag) {
+            //this one
+            this.change();
+            if (this.inpValue) {
+                this.selectedHour = this.getProperTime("12", this.selectedHour);
+                this.selectedMinute = this.getProperTime("00", this.selectedMinute);
+                this.selectedMeridiem = this.getProperTime("AM", this.selectedMeridiem);
+                //console.log(this.inpValue.length);
+                if (this.questionItem.X24_Hours__c === false) {
+                    this.questionItem.input =
+                        (this.selectedMeridiem === "PM" && this.selectedHour != "12"
+                            ? Number(this.selectedHour) + 12
+                            : this.selectedHour) +
+                            ":" +
+                            this.selectedMinute + " PM";
+                    if (this.selectedMeridiem === "AM" && this.selectedHour === "12") {
+                        this.questionItem.input = "00" + ":" + this.selectedMinute + " AM";
+                    }
+                    if (this.qbItem.Progress_Bar__c) {
+                        this.inpValue = this.inpValue + " " + this.questionItem.input;
+                    }
+                    else {
+                        this.inpValue = this.inpValue + "T" + this.questionItem.input;
+                    }
+                }
+                if (this.questionItem.X24_Hours__c === true) {
+                    this.questionItem.input =
+                        this.selectedHour + ":" + this.selectedMinute;
+                    if (this.qbItem.Progress_Bar__c) {
+                        this.inpValue = this.inpValue + " " + this.questionItem.input;
+                    }
+                    else {
+                        this.inpValue = this.inpValue + "T" + this.questionItem.input;
+                    }
+                }
+                if (this.qbItem.Progress_Bar__c) {
+                    //console.log("ans => " + this.inpValue);
+                    var date1 = this.inpValue.split(" ");
+                    date1 = date1[0].split("/");
+                    date1 = [date1[2], date1[1], date1[0]].join("-");
+                    date1 = new Date(date1);
+                    //console.log(date1)
+                    var date2 = this.insuranceStartDate.split(" ");
+                    date2 = new Date(date2[0]);
+                    //console.log(date2);
+                    if (date1 < date2) {
+                        this.questionItem.error = new ErrorWrapper();
+                        this.questionItem.error.errorMsg =
+                            "No es posible dar de alta la reclamación debido a que la fecha del incidente es anterior a la fecha de contratación de la póliza";
+                        //console.log('inside')
+                        return;
+                    }
+                }
+                if (this.selDate === null || !this.inpValue) {
+                    this.questionItem.error = new ErrorWrapper();
+                    return;
+                }
+                this.date_TimeMap();
+            }
+        }
+        else if (this.timeFlag && this.dtFlag && !this.dateFlag) {
+            this.date_TimeMap();
+            if (this.questionItem.X24_Hours__c === false) {
+                this.inpValue =
+                    (this.selectedMeridiem === "PM" && this.selectedHour != "12"
+                        ? Number(this.selectedHour) + 12
+                        : this.selectedHour) +
+                        ":" +
+                        this.selectedMinute;
+            }
+            else {
+                this.inpValue = this.selectedHour + ":" + this.selectedMinute;
+            }
+            if (this.inpValue.length < 5) {
+                this.questionItem.error = new ErrorWrapper();
+                return;
+            }
+        }
+        else if (this.dateFlag && this.dtFlag && !this.timeFlag) {
+            this.change();
+            if (this.inpValue.length < 7 || this.selDate === null) {
+                this.questionItem.error = new ErrorWrapper();
+                return;
+            }
+        }
+        else if (this.fileFlag) {
+            //console.log('four')
+            this.inpValue = "";
+            if (this.attachments.length > 0) {
+                for (var attachmentItem of this.attachments) {
+                    this.inpValue +=
+                        attachmentItem.attachmentId +
+                            "@#$" +
+                            attachmentItem.attachmentName +
+                            ",";
+                }
+                //console.log('inside filesss' + this.inpValue);
+                this.inpValue = this.inpValue.substr(0, this.inpValue.length - 1);
+            }
+            else {
+                this.questionItem.error = new ErrorWrapper();
+                return;
+            }
+        }
+        // Check for the answer before saving to the DB
+        if (!this.questionItem.Is_Optional__c && !this.inpValue) {
+            // Show error that the question must be answered
+            this.questionItem.error = new ErrorWrapper();
+            return;
+        }
+        // Save the Answer in the DB
+        this.answerWrap = new AnswerWrapper();
+        this.answerWrap.abId = this.abItem.Id;
+        this.answerWrap.quesId = cQuestion.Id;
+        this.answerWrap.quesValue = quesValue;
+        this.answerWrap.qTyp = typ;
+        this.answerWrap.ansValue = this.inpValue;
+        this.answerWrap.groupText = cQuestion.Group__c;
+        this.answerWrap.ansValue = this.inpValue;
+        console.log('this.answerWrap.qTyp', this.answerWrap.qTyp);
+        if (this.answerWrap.qTyp == "Alphanumeric") {
+            this.answerWrap.ansValue = 'ES' + this.inpValue;
+            // console.log('Bank condition');
+            // console.log(this.answerWrap.ansValue);
+        }
+        /*if (cQuestion.Type__c == 'Book'){
+        for (var qb of cQuestion.Questions__r.records){
+          //console.log(qb.Question__c+'****'+"@@##$$")
+        }
+      }*/
+        //this.answerWrap.squesValue = cQuestion.Question__c;
+        this.answerWrap.squesValue = questionTxt ? questionTxt : cQuestion.Question__c;
+        this.saveAnswer();
+    }
+    next() {
+        var cQuestion = new Question();
+        cQuestion = this.questionItem;
+        var typ = cQuestion.Type__c;
+        // If no error then move to next steps
+        if (this.questionItem.error) {
+            return;
+        }
+        this.questionStack.push(cQuestion.Id);
+        //  this.questionName.push(cQuestion.Name);
+        // CONDITIONAL vs OPTIONONLY & UNCONDITIONAL
+        if (cQuestion.RecordType.Name == "CONDITIONAL") {
+            for (var cOpt of cQuestion.Question_Options__r.records) {
+                // Radio / Data
+                //console.log('Option => ' + cOpt.Value__c + ' matching with ' + ansVal);
+                if (cOpt.Value__c == this.inpValue) {
+                    //console.log('Match Found using ' + cOpt.Next_Question__c);
+                    this.recordId = cOpt.Next_Question__c;
+                    //console.log('conditional record id'+ this.recordId);
+                }
+            }
+            // Could be of type Data and existing value
+            if (this.recordId && typ == "Data") {
+                this.recordId = cQuestion.Next_Question__c;
+            }
+        }
+        else if (cQuestion.RecordType.Name == "OPTIONONLY") {
+            //  OPTIONONLY logic
+            this.recordId = cQuestion.Next_Question__c;
+        }
+        else if (cQuestion.RecordType.Name == "UNCONDITIONAL") {
+            //Unconditional  logic
+            //console.log("inside unconditional");
+            //inside Book Type
+            if (cQuestion.Type__c == "Book" && cQuestion.Question_No__c != '6') {
+                //console.log("inside book");
+                for (let opt of cQuestion.Questions__r.records) {
+                    //console.log(opt.Type__c);
+                    if (opt.Type__c == "Dropdown" || opt.Type__c == "Radio") {
+                        for (var opt1 of opt.Question_Options__r.records) {
+                            if (this.valueName == opt1.Value__c) {
+                                this.recordId = opt1.Next_Question__c || cQuestion.Next_Question__c;
+                            }
+                            else {
+                                //console.log('Else'+this.recordId)
+                                this.recordId = cQuestion.Next_Question__c;
+                            }
+                        }
+                    }
+                    else {
+                        this.recordId = cQuestion.Next_Question__c;
+                    }
+                }
+            }
+            else if (cQuestion.Type__c == "Book" && cQuestion.Question_No__c == '6') {
+                for (let opt of cQuestion.Questions__r.records) {
+                    if (opt.Type__c == "Dropdown" || opt.Type__c == "Radio") {
+                        for (var opt1 of opt.Question_Options__r.records) {
+                            if (this.valueName == opt1.Value__c) {
+                                this.recordId = opt1.Next_Question__c;
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                this.recordId = cQuestion.Next_Question__c;
+            }
+        }
+        // CATEGORIZATION
+        //this.stepperCateg();
+        // Calling the progres bar update function
+        this.answerCount++;
+        this.updateProgress();
+        // CATEGORIZATION
+        //this.stepperCateg();
+        if (this.recordId) {
+            //console.log('Before Calling readQuestion() using ' + recordId);
+            this.readQuestion(this.recordId);
+            this.pop = true;
+        }
+        else {
+            this.pop = false;
+            //console.log('Summary Page Logic');
+            // Reset the Variables
+            this.inpValue = "";
+            this.answerWrap = new AnswerWrapper();
+            this.optionValues = [];
+            this.subQuestions = [];
+            this.resetFlag(typ);
+            this.questionItem = null;
+            // Show Summary
+            for (var q of this.questionStack) {
+                //console.log('Handling Question => ' + q);
+                var ansWrap = this.answerMap.get(q);
+                if (ansWrap) {
+                    //console.log('Handling Answer for ' + ansWrap.quesId + ' of type ' + ansWrap.qTyp);
+                    if (ansWrap.qTyp == 'File' || ansWrap.qTyp == 'Book' || ansWrap.qTyp == 'List' || ansWrap.qTyp == 'Checkbox') {
+                        var newStr = '';
+                        for (var ansStr of ansWrap.ansValue.split('@@##$$')) {
+                            for (var ansStr1 of ansStr.split('$$@@##')) {
+                                //  if(ansStr1.includes('answerString')){ //remove the answer string  
+                                //   const withoutAnswerString = ansStr1.replace("answerString: ", "");
+                                //  ansStr1 = withoutAnswerString;
+                                //  }
+                                if (ansStr1.length > 0) {
+                                    if (newStr.length == 0) {
+                                        newStr = ansStr1;
+                                    }
+                                    else {
+                                        newStr += '; ' + ansStr1; //comma(,) changed as semi colon(;) because of address contains comma(,) 
+                                        if (this.attachmentsMap.has(ansWrap.quesId)) {
+                                            for (var att of this.attachmentsMap.get(ansWrap.quesId)) {
+                                                newStr = newStr.replace(att.attachmentId, '');
+                                            }
+                                        }
+                                        newStr = (newStr.replace(',,', ', ')).replace(', ,', ', ');
+                                        newStr = newStr.startsWith(',') ? newStr.substring(1, newStr.length) : (newStr.endsWith(',') ? newStr.substring(0, newStr.length - 1) : newStr);
+                                    }
+                                }
+                            }
+                        }
+                        ansWrap.ansValue = newStr;
+                    }
+                    this.summary.push(ansWrap);
+                    this.backicon = true;
+                }
+            }
+        }
+    }
+    getText(value) {
+        var doc = new DOMParser().parseFromString(value, "text/html");
+        //console.log( doc.documentElement.textContent);
+        return this.sanitizer.bypassSecurityTrustHtml(doc.documentElement.textContent);
+    }
+    handleBackClick() {
+        this.back = true;
+        if (this.pop === true) {
+            this.questionName.pop();
+        }
+        this.handleEvent.emit(this.qbItem.Back_Tracking_ID__c);
+        var cQuestion = new Question();
+        cQuestion = this.questionItem;
+        if (cQuestion.Question_No__c == '1') {
+            this.handleEvent.emit(this.qbItem.Back__c);
+        }
+        this.answerCount--;
+        this.updateProgress();
+        // CATEGORIZATION
+        //this.stepperCateg();
+        if (this.summary) {
+            //console.log('summary true');
+            this.summary = [];
+        }
+        if (this.summaryData) {
+            this.summaryData = [];
+        }
+        // Read the previous question from DB
+        this.readQuestion(this.questionStack.pop());
+        //console.log(this.questionStack);
+    }
+    handleBackClickNew() {
+        this.handleEvent.emit(this.qbItem.Edit__c);
+    }
+    //updating status once Q&A completed.
+    updateAnswerBook = (uuid) => {
+        if (this.serv == "api") {
+            this.dataService.getAPIData(this.tkn, ["AnswerBook", "Update", uuid], this.successupdateAB, this.failureupdateAB);
+        }
+        else {
+            this.sfService.remoteAction("NxtController.process", ["AnswerBook", "Update", uuid], this.successupdateAB, this.failureupdateAB);
+        }
+    };
+    successupdateAB = (response) => {
+        console.log(response);
+        // //console.log('status success')
+        this.abItem.Status__c = "Completed";
+    };
+    failureupdateAB = (response) => {
+        //console.log('status failed')
+    };
+    readQuestionBook = (uuid) => {
+        if (this.serv == "api") {
+            this.dataService.getAPIData(this.tkn, ["QuestionBook", "read", uuid], this.successReadBook, this.failureReadBook);
+        }
+        else {
+            this.sfService.remoteAction("NxtController.process", ["QuestionBook", "read", uuid], this.successReadBook, this.failureReadBook);
+        }
+    };
+    successReadBook = (response) => {
+        console.log('Inside the successReadBook');
+        console.log(response);
+        if (response != null || response != undefined) {
+            this.qbItem = response.questionbook;
+            this.abItem = response.answerbook;
+        }
+        // console.log('readingQuestion using ' + this.qbItem);
+        if (this.abItem?.Status__c == "Pending") {
+            if (this.abItem.Answers__r == null ||
+                this.abItem.Answers__r.records.length == 0) {
+                this.readQuestion(this.qbItem.First_Question__c);
+            }
+            else {
+                // Populate the existing answers
+                var lastQuestionId = "";
+                for (var ansObject of this.abItem.Answers__r.records) {
+                    lastQuestionId = ansObject.Question_Ref__c;
+                    this.questionStack.push(ansObject.Question_Ref__c);
+                    this.answerMap.set(ansObject.Question_Ref__c, {
+                        quesValue: ansObject.Question_Rich_Text__c,
+                        ansValue: ansObject.Answer_Long__c,
+                        quesId: ansObject.Question_Ref__c,
+                        qTyp: ansObject.Question_Type__c,
+                        groupText: ansObject.Question_Group_Text__c,
+                    });
+                    //console.log(this.questionStack)
+                    if (ansObject.Question_Type__c == "Book") {
+                        var av1 = ansObject.Answer_Long__c.split("@@##$$");
+                        // //console.log("book log");
+                        //  //console.log("bookid" + av1[0]);
+                        this.attachmentsMap.set(ansObject.Question_Ref__c, [
+                            { attachmentName: av1[1], attachmentId: av1[0] },
+                        ]);
+                        //  //console.log(this.attachmentsMap);
+                    }
+                    else if (ansObject.Question_Type__c == "File") {
+                        //  //console.log("inside if");
+                        var attList;
+                        var att;
+                        for (var attVar of ansObject.Answer_Long__c.split(",")) {
+                            var attIdName = attVar.split("@@##$$");
+                            att.attachmentName = attIdName[1];
+                            att.attachmentId = attIdName[0];
+                            attList.push(att);
+                        }
+                        this.attachmentsMap.set(ansObject.Question_Ref__c, attList);
+                        //  //console.log(this.attachmentsMap);
+                    }
+                }
+                this.questionStack.pop();
+                //console.log(this.answerMap);
+                // Read the last answered question
+                this.readQuestion(lastQuestionId);
+            }
+        }
+        else if (this.abItem?.Status__c == "Completed") {
+            this.handleEvent.emit("Summaryupdated");
+            // Temporary Fix for duplicate answers on the summary.
+            this.summary = [];
+            this.percent = 100;
+            this.progressStyle = "100%";
+            for (var answer of this.abItem.Answers__r.records) {
+                //console.log(answer.Question_Group_Text__c);
+                //console.log('repeat');
+                //console.log(answer.Question_Rich_Text__c);
+                var answers = {};
+                if (answer.Question_Type__c == "File") {
+                    var files = "";
+                    var fIndex = 0;
+                    var fileList = answer.Answer_Long__c.split(",");
+                    for (var fileIdName of fileList) {
+                        var fileName = fileIdName.split("@#$");
+                        if (fIndex == 0) {
+                            files = fileName[1];
+                        }
+                        else {
+                            files = files + " ," + fileName[1];
+                        }
+                        fIndex++;
+                    }
+                    answers = {
+                        groupText: answer.Question_Group_Text__c,
+                        quesValue: answer.Question_Rich_Text__c,
+                        ansValue: files,
+                    };
+                    this.summary.push(answers);
+                }
+                else if (answer.Question_Type__c == "Book") {
+                    /*  var quesNo=0;
+                   if(answer.Answer_Long__c.includes("@@##$$")){
+                      //console.log('line 1223');
+                      for (var bqAnswerValue of answer.Answer_Long__c.split("@@##$$")) {
+                        var quesValue=answer.Question_Text__c.split("@@##$$");
+                        answers = {};
+                        answers = {
+                         // groupText:answer.Question_Text__c,
+                          quesValue:  "&lt;p&gt;"+ quesValue[quesNo]+"&lt;p&gt;",
+                          ansValue: bqAnswerValue,
+                        };
+                        quesNo++;
+                        this.summary.push(answers);
+                      }
+                     }*/
+                    if (answer.Answer_Long__c.includes("@@##$$")) {
+                        var answervalues = answer.Answer_Long__c.split("@@##$$");
+                        //console.log('value')
+                        answers = {
+                            //groupText:answer.Question_Group_Text__c,
+                            quesValue: answer.Question_Rich_Text__c,
+                            ansValue: answervalues,
+                        };
+                        //console.log(answers)
+                        this.summary.push(answers);
+                    }
+                    else {
+                        answers = {
+                            //groupText:answer.Question_Group_Text__c,
+                            quesValue: answer.Question_Rich_Text__c,
+                            ansValue: answer.Answer_Long__c,
+                        };
+                        this.summary.push(answers);
+                    }
+                }
+                else {
+                    // var ans1 = answer.Answer_Long__c.split("@@##$$");
+                    answers = {
+                        //groupText:answer.Question_Group_Text__c,
+                        quesValue: answer.Question_Rich_Text__c,
+                        ansValue: answer.Answer_Long__c,
+                    };
+                    this.summary.push(answers);
+                }
+            }
+        }
+    };
+    failureReadBook = (response) => {
+        console.log('Inside the failureReadBook');
+        console.log(response);
+    };
+    readAnswerbook = (uuid) => {
+        if (this.serv = "api") {
+            this.dataService.getAPIData(this.tkn, ["AnswerBook", "read", uuid], this.successAnswerBookRead, this.failureAnswerBookRead);
+        }
+        else {
+            this.sfService.remoteAction("NxtController.process", ["AnswerBook", "read", uuid], this.successAnswerBookRead, this.failureAnswerBookRead);
+        }
+    };
+    successAnswerBookRead = (response) => {
+        if (this.abItem?.Status__c == "Completed") {
+            for (var answer of this.abItem.Answers__r.records) {
+                var av = answer.Answer_Long__c.split("@@##$$");
+                var answers = { quesValue: answer.Question_Rich_Text__c, ansValue: av, groupText: answer.Question_Group_Text__c };
+                //console.log(answers)
+                this.summary.push(answers);
+            }
+            this.handleEvent.emit("Summaryupdated");
+        }
+    };
+    failureAnswerBookRead = (response) => {
+        //console.log('inside failureread');
+        //console.log(response);
+    };
+    readQuestion = (uuid) => {
+        if (this.serv == "api") {
+            this.dataService.getAPIData(this.tkn, ["Question", "read", uuid], this.successRead, this.failureRead);
+        }
+        else {
+            this.sfService.remoteAction("NxtController.process", ["Question", "read", uuid], this.successRead, this.failureRead);
+        }
+    };
+    successRead = (response) => {
+        // console.log('Inside the successRead new');
+        // console.log(response);
+        // console.log(this.questionItem);
+        // Reset the Variables
+        if (this.questionItem) {
+            this.inpValue = "";
+            this.answerWrap = new AnswerWrapper();
+            this.optionValues = [];
+            this.subQuestions = [];
+            this.resetFlag(this.questionItem.Type__c);
+        }
+        this.questionItem = response.question;
+        // console.log(this.questionItem);
+        if (this.questionItem.Type__c === 'Alphanumeric') {
+            this.splCCBackClick = true;
+        }
+        this.currentQuestionId = this.questionItem.Id;
+        this.handlePage.emit(this.questionItem.Tracking_ID__c);
+        // Handle the subQuestion options
+        if (response.sqOptions) {
+            //var newRecords = [];
+            for (var q of this.questionItem.Questions__r.records) {
+                //console.log(q.Name);
+                var sq = response.sqOptions[q.Id];
+                if (sq) {
+                    //console.log('found options for subquestion ' + q.Name);
+                    if (!q.Question_Options__r) {
+                        q.Question_Options__r = sq.Question_Options__r;
+                    }
+                }
+            }
+        }
+        this.processQuestion();
+        this.innerhtml = this.sanitizer.bypassSecurityTrustHtml(this.questionItem.Additional_Rich__c);
+        this.trackId();
+    };
+    trackId() {
+        var qtrackId = this.questionItem.Tracking_ID__c;
+        //console.log('trackId-question'+qtrackId);
+    }
+    failureRead = (response) => {
+        //console.log('inside failureread');
+        //console.log(response);
+    };
+    saveAnswer = () => {
+        // Set the Answer Number based on the Question Stack Length
+        if (this.inpValue != ".") {
+            this.currentQuestionId = null;
+        }
+        this.answerWrap.ansNumber = this.questionStack.length + 1;
+        if (this.serv == "api") {
+            this.dataService.getAPIData(this.tkn, ["Answer", "create", JSON.stringify(this.answerWrap)], this.successSave, this.failureSave);
+        }
+        else {
+            this.sfService.remoteAction("NxtController.process", ["Answer", "create", JSON.stringify(this.answerWrap)], this.successSave, this.failureSave);
+        }
+    };
+    htmlDecode(input) {
+        var doc = new DOMParser().parseFromString(input, "text/html");
+        return doc.documentElement.textContent;
+    }
+    successSave = (response) => {
+        if (response.status == "success") {
+            //this.abItem = response.answerbook;
+            this.answerMap.set(response.answer.quesId, response.answer);
+        }
+        else {
+            this.questionItem.error = new ErrorWrapper();
+            this.questionItem.error.errorMsg = response.error.errorMsg;
+        }
+        if (!this.backButtonFlag) {
+            this.next();
+        }
+    };
+    failureSave = (response) => {
+        //console.log('inside failureSave');
+        //console.log(response);
+    };
+    processQuestion = () => {
+        // console.log('Inside the processQuestion');
+        // console.log('splCCBackClick = '+this.splCCBackClick);
+        // console.log(this.questionStack);
+        //console.log(this.questionItem);
+        this.pop = true;
+        // if(!this.back){
+        //   this.questionName.push(this.questionItem.Name)
+        // }
+        if (this.qbItem.Progress_Bar__c === true) {
+            if (!this.back) {
+                this.questionName.push(this.questionItem.Name);
+            }
+            this.back = false;
+            if (this.questionName[0] === this.questionName[1]) {
+                this.questionName.pop();
+            }
+            this.currentName = this.questionItem.Name;
+            this.pathquestion = this.questionName.indexOf(this.currentName);
+            this.possibilities = this.qbItem.Possibilities__c;
+        }
+        this.myDatePickerOptions;
+        this.day();
+        //console.log('processing question ' + this.questionItem.Name + ' existing answers are ' + this.answerMap.size); // => ' + JSON.stringify(this.questionItem));
+        // Set the Flags to show right fields
+        this.setFlag(this.questionItem.Type__c);
+        //console.log('After the setFlag method dtFlag = '+this.dtFlag);
+        // Check the existing answer from answerMap
+        if (this.answerMap.has(this.questionItem.Id)) {
+            //  //console.log("existing answer found for this.questionItem.Name");
+            var eAnswer = this.answerMap.get(this.questionItem.Id);
+            // Get the existing answer from the Map
+            this.inpValue = eAnswer.ansValue;
+            //console.log('inpValue has been set to ' + this.inpValue);
+            if (this.attachmentsMap.has(this.questionItem.Id)) {
+                this.attachments = this.attachmentsMap.get(this.questionItem.Id);
+            }
+        }
+        else {
+            //console.log('inside removing attachment array');
+            this.attachments = [];
+        }
+        // console.log(this.inpValue);
+        if (this.splCCBackClick && this.inpValue && this.inpValue.includes('ES')) {
+            // console.log('Inside the if cond');
+            this.splCCBackClick = false;
+            this.inpValue = this.inpValue.replace('ES', '');
+        }
+        if (this.checkboxFlag) {
+            // Set the Options for Checkbox
+            this.setOptions(this.questionItem.Question_Options__r.records);
+        }
+        else if (this.bookFlag) {
+            //console.log('Inise the expected bookFlag cond');
+            //console.log('dtFlag = '+this.dtFlag);
+            this.setSubQuestions(this.questionItem.Questions__r.records);
+        }
+        else if (this.listFlag) {
+            // Set the LocalSubQuestions
+            // console.log('inside list flag');
+            // console.log(this.questionItem.Questions__r.records);
+            // console.log(this.abItem.Questions__r.records);
+            if (!this.localSubQMap.has(this.questionItem.Id)) {
+                this.setSubQuestions(this.questionItem.Questions__r.records);
+            }
+        }
+        else if (this.dtFlag) {
+            //console.log('Inise the unexpected dtFlag cond');
+            this.selectedHour = "";
+            this.selectedMinute = "";
+            this.selDate = "";
+            // 2021-5-16T00:00
+            if (this.dateMap.has(this.questionItem.Id)) {
+                this.selDate = this.dateMap.get(this.questionItem.Id);
+            }
+            if (this.selectedhourMap.has(this.questionItem.Id)) {
+                this.selectedHour = this.selectedhourMap.get(this.questionItem.Id);
+            }
+            if (this.selectedminuteMap.has(this.questionItem.Id)) {
+                this.selectedMinute = this.selectedminuteMap.get(this.questionItem.Id);
+            }
+            if (this.questionItem.X24_Hours__c === true) {
+                this.hours.push("13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "00");
+            }
+            if (this.questionItem.X24_Hours__c === false) {
+                this.hours = this.hours.slice(0, 12);
+            }
+            if (this.dtFlag && this.inpValue) {
+                var dtVal = this.inpValue.split("T");
+                var dtval0 = this.inpValue.split(" ");
+                this.inpValue = dtVal[0];
+                this.inpValue = dtval0[0];
+                this.questionItem.input = dtVal[1];
+                this.questionItem.input = dtval0[1];
+            }
+            if (this.questionItem.Is_Date_Backward__c ||
+                this.questionItem.Is_Date_Forward__c) {
+                if (this.questionItem.Is_Date_Backward__c === true) {
+                    this.myDatePickerOptions.disableSince = {
+                        year: this.today.getFullYear(),
+                        month: this.today.getMonth() + 1,
+                        day: this.today.getDate() + 1,
+                    };
+                }
+                if (this.questionItem.Is_Date_Forward__c === true) {
+                    this.myDatePickerOptions.disableUntil = {
+                        year: this.today.getFullYear(),
+                        month: this.today.getMonth() + 1,
+                        day: this.today.getDate(),
+                    };
+                }
+            }
+        }
+        else if (this.fileFlag) {
+            this.fileUI();
+            // logic
+            this.allowedFileExtension =
+                this.questionItem.Allowed_File_Extensions__c.split(";");
+            //console.log(this.allowedFileExtension);
+        }
+        if (this.qbItem.Progress_Bar__c === true) {
+            this.updateProgress();
+        }
+    };
+    setFlag(typ) {
+        //console.log('inside setFlag for ' + typ);
+        if (typ) {
+            // Set the Flags
+            if (typ == "Text") {
+                this.textFlag = true;
+                //this.numberFlag = true;
+            }
+            else if (typ == "Number") {
+                this.numberFlag = true;
+            }
+            else if (typ == "AlphaNumeric") {
+                this.alphanumericFlag = true;
+                /*if(this.inpValue.length === 0){
+                  this.inpValue='ES'
+                }*/
+            }
+            else if (typ == "Email") {
+                this.emailFlag = true;
+            }
+            else if (typ == "File") {
+                this.fileFlag = true;
+            }
+            else if (typ == "DateTime") {
+                this.dtFlag = true;
+                this.timeFlag = true;
+                this.dateFlag = true;
+            }
+            else if (typ == "TextArea") {
+                this.taFlag = true;
+            }
+            else if (typ == "Radio") {
+                this.radioFlag = true;
+            }
+            else if (typ == "Dropdown") {
+                this.dropdownFlag = true;
+            }
+            else if (typ == "Checkbox") {
+                this.checkboxFlag = true;
+            }
+            else if (typ == "Book") {
+                this.bookFlag = true;
+            }
+            else if (typ == 'List') {
+                this.listFlag = true;
+            }
+            else if (typ == "Time") {
+                //console.log('Inside the Time cond');
+                this.dtFlag = true;
+                this.timeFlag = true;
+                //console.log(this.dtFlag);
+            }
+            else if (typ == "Date") {
+                //console.log('Inside the Date cond');
+                this.dtFlag = true;
+                this.dateFlag = true;
+                //console.log(this.dtFlag);
+            }
+        }
+    }
+    resetFlag(typ) {
+        if (typ) {
+            // Set the Flags
+            if (typ == "Text") {
+                this.textFlag = false;
+                //this.numberFlag = false;
+            }
+            else if (typ == "Number") {
+                this.numberFlag = false;
+            }
+            else if (typ == "Alphanumeric") {
+                this.alphanumericFlag = false;
+            }
+            else if (typ == "Email") {
+                this.emailFlag = false;
+            }
+            else if (typ == "File") {
+                this.fileFlag = false;
+            }
+            else if (typ == "DateTime") {
+                this.dtFlag = false;
+                this.dateFlag = false;
+                this.timeFlag = false;
+            }
+            else if (typ == "TextArea") {
+                this.taFlag = false;
+            }
+            else if (typ == "Radio") {
+                this.radioFlag = false;
+            }
+            else if (typ == "Dropdown") {
+                this.dropdownFlag = false;
+            }
+            else if (typ == "Checkbox") {
+                this.checkboxFlag = false;
+            }
+            else if (typ == "Book") {
+                this.bookFlag = false;
+            }
+            else if (typ == 'List') {
+                this.listFlag = false;
+            }
+            else if (typ == "Time") {
+                this.dtFlag = false;
+                this.timeFlag = false;
+            }
+            else if (typ == "Date") {
+                this.dtFlag = false;
+                this.dateFlag = false;
+            }
+        }
+    }
+    setOptions(records) {
+        for (var opt of records) {
+            var ov = new OptionValue();
+            ov.Id = opt.Id;
+            ov.Name = opt.Name;
+            ov.Value__c = opt.Value__c;
+            ov.Next_Question__c = opt.Next_Question__c;
+            ov.checked = false;
+            if (this.inpValue &&
+                this.inpValue.split("@@##$$").includes(opt.Value__c)) {
+                ov.checked = true;
+            }
+            this.optionValues.push(ov);
+        }
+    }
+    Dropdown(event, ques) {
+        ques.input = event; // here when using the ng-select got event as value
+    }
+    setSubQuestions(records) {
+        // console.log('inside setSubQuestions');
+        // console.log(records);
+        var qaMap = new Map();
+        // console.log(this.inpValue);
+        if (this.inpValue) {
+            var aIndex = 0;
+            // search changed as semi colon because of address contains comma 
+            if ((this.inpValue.search("; ") == -1)) {
+                // const withoutAnswerString = this.inpValue.replace("answerString: ", ""); //remove the answer string
+                // this.inpValue = withoutAnswerString;
+                this.inpValue = this.inpValue + '@@##$$';
+                for (var ansStr of this.inpValue.split("@@##$$")) {
+                    aIndex++;
+                    qaMap.set(aIndex, ansStr);
+                    //console.log('Setting the qaMap for ' + aIndex + ' with ' + ansStr);
+                }
+            }
+            else {
+                for (var ansStr of this.inpValue.split("; ")) {
+                    aIndex++;
+                    qaMap.set(aIndex, ansStr);
+                    //console.log('Setting the qaMap ' + aIndex + ' with ' + ansStr);
+                }
+            }
+        }
+        // console.log('after setting values from inpvalue qa map are');
+        // console.log(qaMap);
+        for (var ques of records) {
+            if (ques.Type__c == "File") {
+                this.valueName1 = ques.Allowed_File_Extensions__c;
+                //console.log(this.valueName1);
+            }
+            var ans = '';
+            if (qaMap.has(ques.Question_No__c)) {
+                ques.input = qaMap.get(ques.Question_No__c);
+                // console.log('after fetching map values');
+                // console.log(ques.input);
+                if (ques.input.indexOf('$$@@##') > 0) {
+                    // console.log('answer supposed to be trimmed');
+                    // console.log(ques.input);
+                    ans = ques.input.substring(ques.input.indexOf('$$@@##') + 6, ques.input.length);
+                    // console.log(ans);
+                    ques.input = ques.input.substring(0, ques.input.indexOf('$$@@##'));
+                    // console.log(ques.input);
+                }
+            }
+            if ((ques.Type__c === "Date") && (ques.Is_Date_Backward__c || ques.Is_Date_Forward__c)) {
+                //console.log('Inside the date backward/forward cond');
+                if (ques.Is_Date_Backward__c === true) {
+                    //console.log('Inside the Is_Date_Backward__c');
+                    this.myDatePickerOptions.disableSince = {
+                        year: this.today.getFullYear(),
+                        month: this.today.getMonth() + 1,
+                        day: this.today.getDate() + 1,
+                    };
+                }
+                if (ques.Is_Date_Forward__c === true) {
+                    //console.log('Inside the Is_Date_Forward__c');
+                    this.myDatePickerOptions.disableUntil = {
+                        year: this.today.getFullYear(),
+                        month: this.today.getMonth() + 1,
+                        day: this.today.getDate(),
+                    };
+                }
+                //console.log(this.myDatePickerOptions);
+            }
+            this.subQuestions.push(ques);
+            for (var i = 0; i < this.subQuestions.length; i++) {
+                // to show/hide the dependent dropdown only field using the dropDownOnly boolean
+                if (this.subQuestions[i].Size__c == 4) {
+                    this.subQuestions[i].dropDownOnly = true;
+                }
+                else {
+                    this.subQuestions[i].dropDownOnly = false;
+                }
+            }
+            if (ans != '') {
+                for (var an of (ans.split('$$@@##'))) {
+                    var sQ = new Question();
+                    Object.assign(sQ, ques);
+                    sQ.input = an;
+                    this.subQuestions.push(sQ);
+                }
+            }
+        }
+        if (this.valueName1 != null && this.valueName1.length > 0) {
+            this.bookFlagAccept = this.valueName1.split(";");
+            //console.log(this.subQuestions);
+        }
+        this.structLocalSubQuestion(null);
+    }
+    optionChange(selValue) {
+        let radioTrackingId = "";
+        for (var opt of this.questionItem.Question_Options__r.records) {
+            //console.log('optionChange TrackingId'+opt.Tracking_ID__c);
+            if (opt.Value__c == selValue) {
+                //console.log('inside if'+opt.Tracking_ID__c)
+                radioTrackingId = opt.Tracking_ID__c;
+            }
+        }
+        this.handleEvent.emit(radioTrackingId);
+        this.clearError();
+        // //console.log('inside optionChange using ' + selValue);
+        this.inpValue = selValue;
+    }
+    clearError() {
+        if (this.questionItem.error) {
+            this.questionItem.error = null;
+        }
+    }
+    clearLocalSubQuesError(quesId) {
+        quesId.error = null;
+    }
+    inputValidate(e) {
+        var keyCode = e.keyCode || e.which;
+        // Only ASCII character in that range allowed
+        var ASCIICode = (e.which) ? e.which : e.keyCode;
+        if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57)) {
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+    CCOnChange(inpValue) {
+        if (inpValue.length == 2) {
+            this.inpValue += " ";
+        }
+        else if (inpValue.length == 7) {
+            this.inpValue += " ";
+        }
+        else if (inpValue.length == 12) {
+            this.inpValue += " ";
+        }
+        else if (inpValue.length == 17) {
+            this.inpValue += " ";
+        }
+        else if (inpValue.length == 22) {
+            this.inpValue += " ";
+        }
+    }
+    isNotValidAccNumber(s) {
+        s = s.replace(/\s+/g, "");
+        s = 'ES' + s;
+        var isNotValidStr = false;
+        if (s.length == 24) {
+            for (var i = 0; i < s.length; i++) {
+                if (i <= 1 && /[a-zA-Z]/.test(s.charAt(i))) {
+                    //console.log("Valid char: " + s.charAt(i));
+                }
+                else if (i > 1 && /[0-9]/.test(s.charAt(i))) {
+                    //console.log("Valid numeric: " + s.charAt(i));
+                }
+                else {
+                    isNotValidStr = true;
+                    //console.log("Not a valid char");
+                }
+            }
+        }
+        else {
+            isNotValidStr = true;
+            //console.log("Not a valid acc number");
+        }
+        return isNotValidStr;
+    }
+    clearSQError(quesId) {
+        var sqList = this.subQuestions.filter((item) => item.Id == quesId);
+        for (var sq of sqList) {
+            sq.error = null;
+        }
+    }
+    uploadFile(event, ques) {
+        //console.log('inside upload');
+        this.clearError();
+        this.fileTypeIncorrect = false;
+        var local = this;
+        local.attachment = event.target.files[0];
+        // Validate the file extension
+        //console.log(local.attachment);
+        let fileNameWithType = local.attachment && local.attachment.name.toLowerCase();
+        if (!fileNameWithType.endsWith(".jpg") &&
+            !fileNameWithType.endsWith(".png") &&
+            !fileNameWithType.endsWith(".pdf") &&
+            !fileNameWithType.endsWith(".jpeg") &&
+            !fileNameWithType.endsWith(".heic") &&
+            !fileNameWithType.endsWith(".heif") &&
+            !fileNameWithType.endsWith(".JPG") &&
+            !fileNameWithType.endsWith(".PNG") &&
+            !fileNameWithType.endsWith(".PDF") &&
+            !fileNameWithType.endsWith(".JPEG") &&
+            !fileNameWithType.endsWith(".HEIC") &&
+            !fileNameWithType.endsWith(".HEIF")) {
+            local.fileTypeIncorrect = true;
+        }
+        // Return when the file type is incorrect
+        if (local.fileTypeIncorrect) {
+            return;
+        }
+        let fileContent;
+        var reader = new FileReader();
+        reader.onload = function () {
+            fileContent = reader.result;
+            local.fileExceededLimit = local.attachment.size > 3242880; //Validating file size
+            // Upload the file to Salesforce when the limit is within range
+            if (!local.fileExceededLimit) {
+                let fileWrapper = new AttachmentWrapper();
+                fileWrapper.parentId = local.abItem.Id;
+                fileWrapper.fileName = local.attachment.name;
+                fileWrapper.fileContent = fileContent;
+                local.createAttachment(fileWrapper);
+                ques.input = fileWrapper.fileName;
+            }
+        };
+        this.spinner.show(this.spinnerName);
+        reader.readAsDataURL(event.target.files[0]);
+    }
+    successAttachmentCreate = (response) => {
+        let createdAttachment = new Attachment(response.attachmentId, response.attachmentName, this.attachment.lastModifiedDate);
+        this.attachments.push(createdAttachment);
+        this.attachmentsMap.set(this.questionItem.Id, this.attachments);
+        this.spinner.hide(this.spinnerName);
+    };
+    successAttachmentDelete = (response) => {
+        for (let i = 0; i < this.attachments.length; i++) {
+            if (this.attachments[i].attachmentId === this.attachmentId) {
+                this.attachments.splice(i, 1);
+            }
+        }
+    };
+    failureAttachmentCreate = (response) => {
+        //console.log('inside failureAttachmentCreate');
+    };
+    failureAttachmentDelete = (response) => {
+        //console.log('inside failureAttachmentDelete');
+    };
+    handleSubmitClick() {
+        this.handleEvent.emit(this.qbItem.Submit_Tracking_ID__c);
+        this.updateAnswerBook(this.abItem.Id);
+    }
+    handleCancelClick() {
+        this.handleEvent.emit(this.qbItem.Cancel_Tracking_ID__c);
+    }
+    createAttachment = (fileWrapper) => {
+        if (this.serv == "api") {
+            this.dataService.getAPIData(this.tkn, ["Attachment", "create", JSON.stringify(fileWrapper)], this.successAttachmentCreate, this.failureAttachmentCreate);
+        }
+        else {
+            this.sfService.remoteAction("NxtController.process", ["Attachment", "create", JSON.stringify(fileWrapper)], this.successAttachmentCreate, this.failureAttachmentCreate);
+        }
+    };
+    deleteAttachment(attachmentId) {
+        this.attachmentId = attachmentId;
+        this.handleEvent.emit("deleteAttachment");
+        this.deleteSFAttachment(attachmentId);
+    }
+    deleteSFAttachment = (fileId) => {
+        if (this.serv == "api") {
+            this.dataService.getAPIData(this.tkn, ["Attachment", "delete", fileId], this.successAttachmentDelete, this.failureAttachmentDelete);
+        }
+        else {
+            this.sfService.remoteAction("NxtController.process", ["Attachment", "delete", fileId], this.successAttachmentDelete, this.failureAttachmentDelete);
+        }
+    };
+    getFileName(fileNamewithIdandType) {
+        //truncate file path
+        var fileNameWithType = fileNamewithIdandType.substr(fileNamewithIdandType.indexOf("::::") + 4);
+        return fileNameWithType; //fileNameWithType.replace(/^(.*(\/|\\))(.+)$/, '$3');
+    }
+    fileUI() {
+        if (this.attachments.length === 0) {
+        }
+    }
+    //Update function for categorization
+    // stepperCateg() {
+    //   this.firstFormGroup = this._formBuilder.group({
+    //     firstCtrl: ['', Validators.required]
+    //   });
+    //   this.secondFormGroup = this._formBuilder.group({
+    //     secondCtrl: ['', Validators.required]
+    //   });
+    // }
+    // Update Function for the Progress Bar
+    updateProgress() {
+        if (this.qbItem.Progress_Bar__c === true) {
+            let j = [];
+            for (let i = 0; i < this.possibilities.total; i++) {
+                var pathposs = Object.values(this.possibilities.paths[i].questions);
+                if (pathposs[this.pathquestion] === this.currentName) {
+                    j.push(i);
+                    this.check = true;
+                }
+                else {
+                    this.check = false;
+                }
+            }
+            if (j.length === 1) {
+                this.count = j[0];
+            }
+            if (j.length > 1) {
+                var width = 90 * (this.questionStack.length / this.possibilities.maxQuestions);
+                this.progressStyle = Math.round(width) + "%";
+            }
+            else if (j.length === 1) {
+                var width = 90 *
+                    (this.questionStack.length /
+                        this.possibilities.paths[this.count].count);
+                this.progressStyle = Math.round(width) + "%";
+            }
+            this.percent = +Math.round(width);
+        }
+    }
+    townName(area) {
+        this.selectedValue = area.town;
+        //console.log('this value='+this.selectedValue)
+        this.tempoAddress = [];
+    }
+    getTownLocal() {
+        this.tempoAddress = [];
+        if (this.selectedValue.length > 0) {
+            for (var val of this.localaddress) {
+                if (val.town.substring(0, this.selectedValue.length) == this.selectedValue) {
+                    //console.log(val.country)
+                    this.tempoAddress.push(val);
+                    //console.log('tempoAddress'+this.tempoAddress)
+                    if (this.tempoAddress.length == 6) {
+                        break;
+                    }
+                }
+            }
+        }
+        document.getElementById("selectList").style.display = "block";
+        this.setSearchListWidth();
+    }
+    clearList() {
+        setTimeout(() => {
+            this.tempoAddress = [];
+        }, 500);
+    }
+    setSearchListWidth() {
+        //to resize search list based on the screen size
+        const searchBoxWidth = window.document.getElementById("autocomplete-input").offsetWidth;
+        document.getElementById("selectList").style.width = searchBoxWidth + "px";
+    }
+    getCode() {
+        this.tempoAddress = [];
+        if (this.selectedPostalcode.length > 0) {
+            for (var val of this.allAddress) {
+                if (val.zipCode.substring(0, this.selectedPostalcode.length) == this.selectedPostalcode) {
+                    //console.log(val.country)
+                    this.tempoAddress.push(val);
+                    //console.log('tempoAddress'+this.tempoAddress)
+                    if (this.tempoAddress.length == 6) {
+                        break;
+                    }
+                }
+            }
+        }
+        document.getElementById("selectList").style.display = "block";
+        this.setSearchListWidth();
+    }
+    getPostalcode(value) {
+        this.places = [];
+        this.province = [];
+        var province;
+        var town;
+        this.selectedPostalcode = value.zipCode;
+        this.selectedValue = value.country;
+        this.tempoAddress = [];
+        for (var val of this.localaddress) {
+            if (this.selectedPostalcode == val.zipCode) {
+                this.places.push(val);
+                this.province.push(val);
+                this.selectedValue = val.country;
+                province = val.province;
+                town = val.town;
+            }
+        }
+        if (this.places.length == 1) {
+            this.selectedProvince = province;
+            this.selectedCity = town;
+        }
+        else if (this.places.length > 1 || this.places.length == 0) {
+            this.selectedCity = '';
+            this.selectedProvince = '';
+        }
+    }
+    closeDropdown() {
+        if (this.selectedPostalcode.length == 5) {
+            this.getPostalcode({ zipCode: this.selectedPostalcode });
+        }
+        setTimeout(() => {
+            document.getElementById('selectList').style.display = "none";
+        }, 500);
+    }
+    //Plus button implementation.
+    structLocalSubQuestion(ques) {
+        // console.log('inside structLocalSubQuestion');
+        for (var i = 0; i < this.subQuestions.length; i++) {
+            var localSubQuestion = new LocalQuestion();
+            localSubQuestion.Id = this.subQuestions[i].Id;
+            localSubQuestion.Name = this.subQuestions[i].Name;
+            localSubQuestion.Question__c = this.subQuestions[i].Question__c;
+            localSubQuestion.Question_Text__c = this.subQuestions[i].Question_Text__c;
+            localSubQuestion.Type__c = this.subQuestions[i].Type__c;
+            localSubQuestion.Title__c = this.subQuestions[i].Title__c;
+            localSubQuestion.SubTitle__c = this.subQuestions[i].SubTitle__c;
+            localSubQuestion.Is_Optional__c = this.subQuestions[i].Is_Optional__c;
+            localSubQuestion.Error_Message__c = this.subQuestions[i].Error_Message__c;
+            localSubQuestion.Next_Question__c = this.subQuestions[i].Next_Question__c;
+            localSubQuestion.Group__c = this.subQuestions[i].Group__c;
+            localSubQuestion.Question_No__c = this.subQuestions[i].Question_No__c;
+            localSubQuestion.Allowed_File_Extensions__c = this.subQuestions[i].Allowed_File_Extensions__c;
+            localSubQuestion.uniqueSubQId = '' + this.subQuestions[i].Id + i;
+            localSubQuestion.input = this.subQuestions[i].input;
+            this.localSubQuestions.push(localSubQuestion);
+        }
+        // console.log('final local sub questions');
+        // console.log(this.localSubQuestions);
+        // console.log(this.questionItem.Id);
+        this.localSubQMap.set(this.questionItem.Id, this.localSubQuestions);
+        this.localSubQuestions = [];
+        // console.log('final key localSubQMap map');
+        // console.log(this.localSubQMap);
+    }
+    addInputBox(question, index) {
+        var arra = this.localSubQMap.get(this.questionItem.Id);
+        var qIndex = arra.indexOf(question);
+        var ques = new LocalQuestion();
+        Object.assign(ques, question);
+        //console.log((ques.uniqueSubQId).substring(18, (ques.uniqueSubQId).length)+1);
+        if (this.keyIndex == index) {
+            ques.uniqueSubQId = ques.Id + (String(index + 1));
+            this.keyIndex++;
+        }
+        else {
+            this.keyIndex++;
+            ques.uniqueSubQId = ques.Id + (String(this.keyIndex));
+        }
+        ques.input = '';
+        arra.splice(qIndex + 1, 0, ques);
+        this.localSubQMap.set(this.questionItem.Id, arra);
+        //console.log(this.localSubQMap);
+    }
+    removeAddress(quesUniqueId, qName) {
+        //console.log(quesUniqueId)
+        var val = this.localSubQMap.get(this.questionItem.Id);
+        var keyindex = 0;
+        for (let i = 0; i < val.length; i++) {
+            if (val[i].Name == qName) {
+                keyindex++;
+            }
+        }
+        if (this.localSubQMap.has(this.questionItem.Id) && keyindex > 1) {
+            var reorder = val.filter((item) => item.uniqueSubQId !== quesUniqueId);
+            this.localSubQMap.set(this.questionItem.Id, reorder);
+            keyindex--;
+        }
+    }
+    getLocalSubQuestions(id) {
+        return this.localSubQMap.get(id);
+    }
+    //Single Add button functionality for List type
+    Add(question) {
+        this.addFlag = false;
+        var arra = this.localSubQMap.get(this.questionItem.Id);
+        var index = arra.length;
+        var a = arra.slice(-1).pop();
+        this.indexCount = a.Question_No__c;
+        for (var i = 0; i < this.indexCount; i++) {
+            var ques = new LocalQuestion();
+            Object.assign(ques, question[i]);
+            this.keyIndex++;
+            ques.uniqueSubQId = ques.Id + (String(this.keyIndex));
+            ques.input = '';
+            arra.splice(index + (this.indexCount - 1), 0, ques);
+            this.localSubQMap.set(this.questionItem.Id, arra);
+        }
+        this.addFlag = true;
+    }
+    handleLocationSelected(location, ques) {
+        ques.input = location;
+    }
+    selectedInput(input, ques) {
+        ques.input = input;
+    }
+    handleTextareaValueChange(value) {
+        console.log('Selected text-area text:', value);
+    }
+    getData(data) {
+        console.log('table data', data);
+    }
+    dependentChange(value) {
+        this.nextValue = value;
+    }
+    displayDate(dateSelected, ques) {
+        // Parse the date string using moment and assign it to this.selectedDate
+        ques.input = moment(dateSelected.value, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss').toString();
+    }
+    getKey(item) {
+        return Object.keys(item)[0];
+    }
+    getValue(item) {
+        return Object.values(item)[0];
+    }
+    // In the parent component class
+    getTableData(ques) {
+        // Return a new array to ensure each table instance has its own separate array
+        if (ques.Name === 'QN-02251') {
+            ques.tableDataValue = this.tableData1;
+            ques.tableHeader = 'Safety Precautions';
+            return [...ques.tableDataValue];
+        }
+        else {
+            ques.tableDataValue = this.tableData2;
+            ques.tableHeader = 'Personal Protective Equipments';
+            return [...ques.tableDataValue];
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: i3.ActivatedRoute }, { token: i4$1.DomSanitizer }, { token: i5.NgxSpinnerService }, { token: i2.UntypedFormBuilder }, { token: i7.DeviceDetectorService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage" }, usesOnChanges: true, ngImport: i0, template: "<!-- Spinner -->\n<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n\n<!-- Back Processing -->\n<div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" [style.visibility]=\"questionStack.length >0 ? 'visible' : 'hidden'\">\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.Status__c == 'Completed' ? 'summary-volver':'app-back1'\">\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.Back__c }}\n    </button>\n  </div>\n</div>\n\n<!-- Question Hanlding -->\n<div *ngIf=\"questionItem\" [class]=\"qbItem.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.Title__c && qbItem.Progress_Bar__c\">\n    <h1 class=\"header1\">{{ questionItem?.Title__c }}</h1>\n    <div class=\"header2\">{{ questionItem?.SubTitle__c }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div [ngClass]=\"{ questiondiv2: !qbItem?.Progress_Bar__c }\">\n    <!-- Pie Chart Progress -->\n    <div [ngClass]=\"{ bgColor: qbItem?.Progress_Bar__c }\">\n      <div id=\"progress\" *ngIf=\"qbItem?.Progress_Bar__c\">\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n        [startFromZero]=\"false\" [responsive]=\"false\" >\n        </circle-progress>\n      </div>\n    </div>\n\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.Group__c && qbItem.Progress_Bar__c\"\n        [ngClass]=\"{ questionalign: !qbItem?.Progress_Bar__c }\">\n      <div class=\"largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.Group__c }}\n        </h3>\n        <div *ngIf=\"questionItem.Sub_Text__c != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.Sub_Text__c}}</div>\n        <div *ngIf=\"questionItem.Sub_Text__c === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.Sub_Text__c}}</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Question Handling -->\n  <div class=\"questiondiv2\">\n    <!-- Title -->\n    <div *ngIf=\"questionItem.Is_Title__c\">\n      <div *ngIf=\"questionItem.Type__c != 'Book' && questionItem.Question_No__c!='6' && questionItem.Question_No__c!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{questionItem?.Question_Text__c}}\n        </h3>\n      </div>\n    </div>\n    <div *ngIf=\"!questionItem.Is_Title__c\" [class]=\"qbItem.isShengel__c ? 'header-style additional' : 'question-f-size additional'\">\n      <div [innerHTML]=\"getText(questionItem?.Question_Text__c)\" >\n        {{ questionItem?.Question_Text__c }}\n      </div>\n    </div>\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <div *ngIf=\"questionItem.Type__c == 'Book'\">\n      <div *ngIf=\"questionItem.Question_No__c=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{ questionItem?.Question_Text__c }}\n        </h3>\n      </div>\n    </div>\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <div *ngIf=\"questionItem.Type__c == 'File' \">\n      <div *ngIf=\"questionItem.Question_No__c=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{questionItem?.Question_Text__c}}\n        </h3>\n      </div>\n    </div>\n  </div>\n\n  <!-- Additional Info -->\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n  <div *ngIf=\"questionItem.Additional_Rich__c && qbItem.Progress_Bar__c\" >\n    <div\n      class=\"additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.Additional_Rich__c && !qbItem.Progress_Bar__c\">\n    <div class=\"info-alert ques-alert1\">\n      <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n    </div>\n  </div>\n\n  <!-- Dropdown-->\n  <div *ngIf=\"dropdownFlag\" >\n    <div class=\"dis-flex\">\n      <select \n        [ngClass]=\"{\n          'dt-line myt-align3 myt-align2 dpDown dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.Progress_Bar__c,\n          'custom-select': !qbItem?.Progress_Bar__c\n        }\" class=\"mr-sm-2 dd-height dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\" style=\"margin-left: 21.5rem !important;\">\n        <option *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"option\" value=\"{{ opt.Value__c }}\">\n          {{ opt.Value__c }}\n        </option>\n        <option value=\".\" disabled hidden>Bitte treffen Sie eine Auswahl</option>\n      </select>\n    </div>\n  </div>\n\n  <!-- Radio -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n      {{ questionItem?.Error_Message__c }}\n    </div>\n    <div class=\"dis-flex\">\n      <div *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"radio radioOption\" >\n        <label class=\"radiocontainer container  myt-font4\">{{ opt.Value__c }}\n          <input type=\"radio\" [id]=\"opt.Id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" value=\"{{ opt.Value__c }}\"\n            (change)=\"optionChange(opt.Value__c)\" />\n          <span class=\"checkmark\"></span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n      {{ questionItem?.Error_Message__c }}\n    </div>\n    <div class=\"dis-flex\">\n      <div *ngFor=\"let item of optionValues\" class=\"radio col-md-6 optiondiv\">\n        <label class=\" container1 \" >{{ item.Value__c }}\n          <input type=\"checkbox\" [id]=\"item.Id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n          <span class='checkmark1'></span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\" class=\"col-md-12 myt-book1\">\n    <div class=\"col-md-12\" class=\"dis-flex myt-align1\" [class]=\"'col-md-' + questionItem?.Size__c + ' paddingnone'\">\n      <input type=\"text\" [(ngModel)]=\"inpValue\" [ngClass]=\"{\n          'boxoutline myt-font1 myt-book1': qbItem?.Progress_Bar__c,\n          textBox1: !qbItem?.Progress_Bar__c\n        }\" id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <textarea class=\"ta-input\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0 && taFocusOut\n            ? '#87be1c'\n            : ''\n        }}\" (focusout)=\"taFocusOut = true\"\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n      <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\"></i>\n    </div>\n  </div>\n\n  <!-- CC Number Format -->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\"\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\n        *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n  <!-- END-->\n\n  <!-- AlphaNumeric -->\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n    <div style=\"position:relative;\">\n      <input type=text placeholder=\"0 of 0\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n    </div>\n  </div>\n\n  <!-- Email -->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\n        *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- DateTime -->\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero myt-time1\" >\n    <!-- Error Handling -->\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n    <!-- Date -->\n    <div *ngIf=\"dateFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label>\n        <div class=\"dis-flex\">\n          <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event)\"\n            [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"Seleccione fecha\" (focus)=\"clearError()\">\n          </my-date-picker>\n        </div>\n      </div>\n    </div>\n\n    <!-- Time -->\n    <div *ngIf=\"timeFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label>\n        <div class=\"dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n                           dateandTime: !qbItem?.Progress_Bar__c}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n            (focus)=\"clearError()\">\n            <option value=\"\">HH</option>\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n              {{ hour }}\n            </option>\n          </select>\n          <span class=\"colon\"> : </span>\n          <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n            (focus)=\"clearError()\">\n            <option value=\"\">MM</option>\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n              {{ minute }}\n            </option>\n          </select>\n          <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem?.X24_Hours__c == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.Progress_Bar__c, 'dateandTime': !qbItem.Progress_Bar__c}\"></div> -->\n          </div>\n        </div>\n      </div>\n      </div>\n      <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- Attachment / File -->\n  <div *ngIf=\"fileFlag\">\n    <div *ngIf=\"!qbItem.Progress_Bar__c\">\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n        <label class=\"picture-upload\" for=\"file-upload\">\n          <span class=\"picture-upload-child\">\n            <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n          </span>\n          <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\n            <i class=\"\" aria-hidden=\"true\"></i>\n          </span>\n        </label>\n      </div>\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.Type__c === 'File' &&\n        !qbItem?.Progress_Bar__c\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName\n        }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.Progress_Bar__c\">\n      <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\n      </div>\n      <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n      \n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\"> {{ questionItem?.Question_Text__c}}</span>\n        <label class=\"file-label \">\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n          <input name=\"attachment\" type=\"file\" placeholder=\"Ticket kaufen\" multiple\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n            class=\"file-upload-btn\">\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\" [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\">\n          <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\n            <span [class]=\"qbItem.isShengel__c ? 'dis-flex shengel-myt-font3 myt-font7'  : 'dis-flex myt-font3 myt-font7' \">{{ ques?.Question__c }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero myt-dateTimeNew\" *ngIf=\"ques.Type__c === 'Time' || ques.Type__c === 'Date'\">\n            <div *ngIf=\"ques.Type__c === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label>\n                <div class=\"dis-flex dateandtime\">\n                  <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event)\"\n                    [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"Seleccione fecha\"  (focus)=\"clearError()\" >\n                  </my-date-picker>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label>\n                <div class=\"dis-flex dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n                                  dateandTime: !qbItem?.Progress_Bar__c}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">HH</option>\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n                      {{ hour }}\n                    </option>\n                  </select>\n                  <span class=\"colon\"> : </span>\n                  <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">MM</option>\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n                      {{ minute }}\n                    </option>\n                  </select>\n                  <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem.X24_Hours__c == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n                      <option value=\"AM\">AM</option>\n                      <option value=\"PM\">PM</option>\n                    </select>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'DateTime'\">\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Text'\">\n            <app-custom-input\n                  [fromShengel]=\"qbItem.isShengel__c\"\n                  [value]=\"ques.input\"\n                  [ngClassValue]=\"{\n                      'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                      textBox: !qbItem.Progress_Bar__c\n                  }\"\n                  [idValue]=\"ques.Id\"\n                  [focusEvent]=\"clearSQError(ques.Id)\"\n                  [error]=\"ques.error\"\n                  [placeholder]=\"ques.Question__c\"\n                  (inputValue)=\"selectedInput($event,ques)\">\n            </app-custom-input>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- for pick location -->\n            <app-pick-location [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n          </div>\n          <!-- for  text area   -->\n          <div *ngIf=\"ques.Type__c === 'TextArea'\">\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n          </div>\n          <!-- for to data table we use 'data' type question  -->\n          <div *ngIf=\"ques.Type__c === 'Data'\">\n            <app-custom-table [tableHeader]=\"ques.tableHeader\" [tableData]=\"getTableData(ques)\" [tableIndex]=\"i\" (tableDataChange)=\"getData($event)\"></app-custom-table>\n          </div>\n\n          <div *ngIf=\"ques.Type__c === 'Email'\">\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n          </div>\n\n          <div *ngIf=\"ques.Type__c === 'File'\">\n            <div *ngIf=\"!qbItem.Progress_Bar__c\">\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n                <span class=\"picture-upload-child\">\n                  <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n                </span>\n                <span class=\"\n                    fa fa-plus fa-2x\n                    picture-upload-child\n                    pic-upload\n                    icolor\n                  \">\n                  <i class=\"\" aria-hidden=\"true\"></i>\n                </span>\n              </label>\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n            </div>\n\n            <ul *ngIf=\"\n                attachments?.length > 0 &&\n                ques.Type__c === 'File' &&\n                !qbItem.Progress_Bar__c\n              \" class=\"attach-ulist col-md-12\">\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n                {{ attachment.attachmentName\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n              </li>\n            </ul>\n            <div class=\"myt-box\" *ngIf=\"qbItem.Progress_Bar__c\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\n              </div>\n              <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.Question__c }}</span>\n                <label class=\"file-label \">\n                  <span style=\"color: #c5281c;text-decoration:underline\">\n                    Adjuntar\n                  </span>\n                  <input name=\"attachment\" type=\"file\" placeholder=\"Ticket kaufen\" multiple\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n                    class=\"file-upload-btn\">\n                </label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Dropdown -->\n          <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\n            <!-- for common dropdown -->\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\"\n                    [options]=\"ques.Question_Options__r.records\"\n                    [apiMeta]=\"ques.Sub_Text__c\"\n                    [id]=\"ques.Name\"\n                    [selectedValue]=\"ques.input\"\n                    [placeholder]=\"'---Select---'\"\n                    [errorMessage]=\"ques.Error_Message__c\"\n                    [error]=\"ques.error\"\n                    (valueChange)=\"Dropdown($event, ques); clearSQError(ques.Id)\">\n            </app-custom-dropdown>\n            <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\"  [certified]=\"ques.certifiedFlag\"  [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\n            <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n          </div>          \n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!--List start-->\n  <div *ngIf=\"listFlag\">\n    <div class=\"form-group\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div class=\"myt-align3\" [class]=\"'col-md-' + ques.Size__c + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.Id);let i = index\">\n          <div>\n            <span class=\"dis-flex myt-font3 myt-font7\">{{ ques?.Question__c }}</span>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n             textBox: !qbItem.Progress_Bar__c\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\"\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n          </div>\n        </div>\n        <div class=\"\" *ngIf=\"addFlag\">\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.Id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>Add</button>\n         </div>\n      </div>\n    </div>\n  </div>\n  <!--List End-->\n\n  <!-- Actions -->\n  <div *ngIf=\"individualBookButton\" class=\"flexer\">\n    <!-- Backward / Back -->\n    <div class=\"backbutton\" [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\"\n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\">\n      <div [ngClass]=\"{}\">\n        <button [ngClass]=\"{\n            'left-bt': qbItem.Progress_Bar__c,\n            'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n              !qbItem.Progress_Bar__c\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.Back__c }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Forward / Next -->\n    <div [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\">\n      <div>\n        <button [ngClass]=\"{\n            'rusty': qbItem.Progress_Bar__c,\n            'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n              !qbItem.Progress_Bar__c\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.Next__c }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.Progress_Bar__c\n               }\">\n    <h1 class=\"header1 summarypadd\" >{{ qbItem.SubTitle__c }}</h1>         \n  <div id=\"progress2\" *ngIf=\"!qbItem.Progress_Bar__c && this.abItem.Status__c != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.Progress_Bar__c }\">\n          <div [ngClass]=\"{ summary:  !qbItem.Progress_Bar__c }\">\n           <div *ngIf=\"!qbItem.Edit__c\"\n              [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c\"\n              [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.Status__c === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n                  {{ qa.ansValue }}\n                </div>\n                <div *ngIf=\"qa.qTyp != 'File'\">{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"this.abItem.Status__c === 'Completed'\" class=\"col-lg-12\">\n    <div class=\"panel-group panel-group-joined\" id=\"ePTW-details\">\n      <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n          <h4 class=\"panel-title\">\n            <a data-toggle=\"collapse\" data-parent=\"#ePTW-details\" href=\"#collapseOne\" class=\"collapsed\">\n              PTW Details\n            </a>\n          </h4>\n        </div>\n        <div id=\"collapseOne\" class=\"panel-collapse collapse\">\n          <div class=\"panel-body\">\n            <div class=\"row\">\n              <ng-container *ngFor=\"let item of summaryData; let i = index\">\n                <ng-container *ngIf=\"i % 2 === 0\">\n                  <div class=\"col-lg-6 m-b-30\">\n                    <label>{{ getKey(item) }}</label>\n                    <p class=\"font-size\">{{ getValue(item) || 'N/A' }}</p>\n                  </div>\n                  <div class=\"col-lg-6\" *ngIf=\"summaryData[i + 1]\">\n                    <label>{{ getKey(summaryData[i + 1]) }}</label>\n                    <p class=\"font-size\">{{ getValue(summaryData[i + 1]) || 'N/A' }}</p>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div id=\"progress2\" *ngIf=\"qbItem.Progress_Bar__c \">\n    <div [ngClass]=\"{'bgColor summary-top' : qbItem.Progress_Bar__c }\" >\n      <div id=\"progress-summary\" *ngIf=\"qbItem.Progress_Bar__c\">\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n        [startFromZero]=\"false\" [responsive]=\"false\" >\n      </circle-progress>\n      \n      <div *ngIf=\"qbItem.Summary_Text__c && qbItem.Progress_Bar__c\" \n      [ngClass]=\"{ summaryTitle: qbItem.Progress_Bar__c }\">\n        <h3 class=\"subTitle\" >{{ qbItem.Summary_Text__c }}</h3>\n        <div *ngIf=\"abItem.Status__c != 'Completed'\" class=\"subTitle1\" >{{ qbItem.Summary_Sub_Text__c}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.Progress_Bar__c\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.Summary_Text__c }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n    <div class=\"summary-groupText myt-font2\">\n      <!-- <p>Informe de da\u00F1o</p> -->\n    </div>\n    <div *ngFor=\"let qa of summary\" >\n        <div [ngClass]=\"{ non:  qbItem.Progress_Bar__c }\">\n          <div [ngClass]=\"{ summary: this.abItem.Status__c != 'Completed' && !qbItem.Progress_Bar__c }\">\n            <div *ngIf=\"!qbItem.Edit__c\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.Status__c === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"answer \" >\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n                {{ qa.ansValue }}\n              </div>\n              <div *ngIf=\"qa.qTyp != 'File'\">\n                {{ qa.ansValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Answer Book -->\n  <div class=\"flexer1\" *ngIf=\"abItem\">\n    <div class=\"\" *ngIf=\"abItem.Status__c == 'Completed'\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.Cancel__c }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.Status__c != 'Completed'\">\n    <div class=\"col-md-6\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.Submit__c }}\n      </button>\n    </div>\n    <div class=\"col-md-6\">\n      <button [ngClass]=\"{'grey': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.Edit__c }}\n      </button>\n    </div>\n  </div>\n\n</div>", styles: [".rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.edit{background-color:#dedddd;border:none;color:#c5281c;text-decoration:underline;margin-left:50%;font-size:16px;vertical-align:super;font-weight:700}.icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.icon-edit1,.icon-edit-summary{width:29px;height:28px}.questiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.questiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.questiondiv2{padding-left:0!important;padding-bottom:0!important}@media screen and (min-width: 689px){#progress,#progress-summary{padding-left:12px}.backicon{display:none}.dt-time{background-position:98%!important}}.bgColor{text-align:center;background-color:#dedddd}.questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.largeTitle{padding-left:16px;padding-top:12px}.question-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1.5;padding:.5rem 1rem;width:100%;cursor:pointer;outline:0}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.radiotext{margin-top:-30px}.radiocontainer{display:flex;flex-direction:row-reverse;border:1px solid none;border-radius:.3em;padding:0;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#a3a2a2}.radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.MyDatePicker, selector: "my-date-picker", inputs: ["placeholder", "locale", "disabled", "options", "defaultMonth", "selDate", "selector"], outputs: ["dateChanged", "inputFieldChanged", "calendarViewChanged", "calendarToggle", "inputFocusBlur"], exportAs: ["mydatepicker"] }, { kind: "component", type: i5.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: i10.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", "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: ["tableHeader", "tableData", "tableIndex"], outputs: ["tableDataChange"] }, { 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionnaireComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "lib-questionnaire", encapsulation: ViewEncapsulation.None, template: "<!-- Spinner -->\n<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n\n<!-- Back Processing -->\n<div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" [style.visibility]=\"questionStack.length >0 ? 'visible' : 'hidden'\">\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.Status__c == 'Completed' ? 'summary-volver':'app-back1'\">\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.Back__c }}\n    </button>\n  </div>\n</div>\n\n<!-- Question Hanlding -->\n<div *ngIf=\"questionItem\" [class]=\"qbItem.isShengel__c ? 'questiondiv1' : 'questiondiv1 padd-bottom'\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.Title__c && qbItem.Progress_Bar__c\">\n    <h1 class=\"header1\">{{ questionItem?.Title__c }}</h1>\n    <div class=\"header2\">{{ questionItem?.SubTitle__c }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div [ngClass]=\"{ questiondiv2: !qbItem?.Progress_Bar__c }\">\n    <!-- Pie Chart Progress -->\n    <div [ngClass]=\"{ bgColor: qbItem?.Progress_Bar__c }\">\n      <div id=\"progress\" *ngIf=\"qbItem?.Progress_Bar__c\">\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n        [startFromZero]=\"false\" [responsive]=\"false\" >\n        </circle-progress>\n      </div>\n    </div>\n\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.Group__c && qbItem.Progress_Bar__c\"\n        [ngClass]=\"{ questionalign: !qbItem?.Progress_Bar__c }\">\n      <div class=\"largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.Group__c }}\n        </h3>\n        <div *ngIf=\"questionItem.Sub_Text__c != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.Sub_Text__c}}</div>\n        <div *ngIf=\"questionItem.Sub_Text__c === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.Sub_Text__c}}</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Question Handling -->\n  <div class=\"questiondiv2\">\n    <!-- Title -->\n    <div *ngIf=\"questionItem.Is_Title__c\">\n      <div *ngIf=\"questionItem.Type__c != 'Book' && questionItem.Question_No__c!='6' && questionItem.Question_No__c!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{questionItem?.Question_Text__c}}\n        </h3>\n      </div>\n    </div>\n    <div *ngIf=\"!questionItem.Is_Title__c\" [class]=\"qbItem.isShengel__c ? 'header-style additional' : 'question-f-size additional'\">\n      <div [innerHTML]=\"getText(questionItem?.Question_Text__c)\" >\n        {{ questionItem?.Question_Text__c }}\n      </div>\n    </div>\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <div *ngIf=\"questionItem.Type__c == 'Book'\">\n      <div *ngIf=\"questionItem.Question_No__c=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{ questionItem?.Question_Text__c }}\n        </h3>\n      </div>\n    </div>\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <div *ngIf=\"questionItem.Type__c == 'File' \">\n      <div *ngIf=\"questionItem.Question_No__c=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\">\n          {{questionItem?.Question_Text__c}}\n        </h3>\n      </div>\n    </div>\n  </div>\n\n  <!-- Additional Info -->\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n  <div *ngIf=\"questionItem.Additional_Rich__c && qbItem.Progress_Bar__c\" >\n    <div\n      class=\"additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.Additional_Rich__c && !qbItem.Progress_Bar__c\">\n    <div class=\"info-alert ques-alert1\">\n      <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n    </div>\n  </div>\n\n  <!-- Dropdown-->\n  <div *ngIf=\"dropdownFlag\" >\n    <div class=\"dis-flex\">\n      <select \n        [ngClass]=\"{\n          'dt-line myt-align3 myt-align2 dpDown dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.Progress_Bar__c,\n          'custom-select': !qbItem?.Progress_Bar__c\n        }\" class=\"mr-sm-2 dd-height dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\" style=\"margin-left: 21.5rem !important;\">\n        <option *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"option\" value=\"{{ opt.Value__c }}\">\n          {{ opt.Value__c }}\n        </option>\n        <option value=\".\" disabled hidden>Bitte treffen Sie eine Auswahl</option>\n      </select>\n    </div>\n  </div>\n\n  <!-- Radio -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n      {{ questionItem?.Error_Message__c }}\n    </div>\n    <div class=\"dis-flex\">\n      <div *ngFor=\"let opt of questionItem.Question_Options__r.records\" class=\"radio radioOption\" >\n        <label class=\"radiocontainer container  myt-font4\">{{ opt.Value__c }}\n          <input type=\"radio\" [id]=\"opt.Id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" value=\"{{ opt.Value__c }}\"\n            (change)=\"optionChange(opt.Value__c)\" />\n          <span class=\"checkmark\"></span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"this.questionItem.error\" class=\"cond-div2\">\n      {{ questionItem?.Error_Message__c }}\n    </div>\n    <div class=\"dis-flex\">\n      <div *ngFor=\"let item of optionValues\" class=\"radio col-md-6 optiondiv\">\n        <label class=\" container1 \" >{{ item.Value__c }}\n          <input type=\"checkbox\" [id]=\"item.Id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n          <span class='checkmark1'></span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\" class=\"col-md-12 myt-book1\">\n    <div class=\"col-md-12\" class=\"dis-flex myt-align1\" [class]=\"'col-md-' + questionItem?.Size__c + ' paddingnone'\">\n      <input type=\"text\" [(ngModel)]=\"inpValue\" [ngClass]=\"{\n          'boxoutline myt-font1 myt-book1': qbItem?.Progress_Bar__c,\n          textBox1: !qbItem?.Progress_Bar__c\n        }\" id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <textarea class=\"ta-input\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0 && taFocusOut\n            ? '#87be1c'\n            : ''\n        }}\" (focusout)=\"taFocusOut = true\"\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n      <i class=\"fa fa-check check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\"></i>\n    </div>\n  </div>\n\n  <!-- CC Number Format -->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\"\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\n        *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n  <!-- END-->\n\n  <!-- AlphaNumeric -->\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n    <div style=\"position:relative;\">\n      <input type=text placeholder=\"0 of 0\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n    </div>\n  </div>\n\n  <!-- Email -->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.Progress_Bar__c }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\n        *ngIf=\"inpValue?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- DateTime -->\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero myt-time1\" >\n    <!-- Error Handling -->\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n    <!-- Date -->\n    <div *ngIf=\"dateFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label>\n        <div class=\"dis-flex\">\n          <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event)\"\n            [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"Seleccione fecha\" (focus)=\"clearError()\">\n          </my-date-picker>\n        </div>\n      </div>\n    </div>\n\n    <!-- Time -->\n    <div *ngIf=\"timeFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label>\n        <div class=\"dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n                           dateandTime: !qbItem?.Progress_Bar__c}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n            (focus)=\"clearError()\">\n            <option value=\"\">HH</option>\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n              {{ hour }}\n            </option>\n          </select>\n          <span class=\"colon\"> : </span>\n          <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n            (focus)=\"clearError()\">\n            <option value=\"\">MM</option>\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n              {{ minute }}\n            </option>\n          </select>\n          <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem?.X24_Hours__c == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.Progress_Bar__c, 'dateandTime': !qbItem.Progress_Bar__c}\"></div> -->\n          </div>\n        </div>\n      </div>\n      </div>\n      <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n    </div>\n  </div>\n\n  <!-- Attachment / File -->\n  <div *ngIf=\"fileFlag\">\n    <div *ngIf=\"!qbItem.Progress_Bar__c\">\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n        <label class=\"picture-upload\" for=\"file-upload\">\n          <span class=\"picture-upload-child\">\n            <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n          </span>\n          <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\n            <i class=\"\" aria-hidden=\"true\"></i>\n          </span>\n        </label>\n      </div>\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.Type__c === 'File' &&\n        !qbItem?.Progress_Bar__c\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName\n        }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.Progress_Bar__c\">\n      <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\n      </div>\n      <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n      \n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.Question_Text__c)\"> {{ questionItem?.Question_Text__c}}</span>\n        <label class=\"file-label \">\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n          <input name=\"attachment\" type=\"file\" placeholder=\"Ticket kaufen\" multiple\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n            class=\"file-upload-btn\">\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel__c ? 'form-group content-box' : 'form-group'\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div [class]=\"qbItem.isShengel__c ? '' : 'myt-align3'\" [class]=\"qbItem.isShengel__c ? 'col-lg-' + ques.Size__c + ' paddingnone' : 'col-md-' + ques.Size__c + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\">\n          <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\">\n            <span [class]=\"qbItem.isShengel__c ? 'dis-flex shengel-myt-font3 myt-font7'  : 'dis-flex myt-font3 myt-font7' \">{{ ques?.Question__c }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero myt-dateTimeNew\" *ngIf=\"ques.Type__c === 'Time' || ques.Type__c === 'Date'\">\n            <div *ngIf=\"ques.Type__c === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <label class=\"date-time colorf\">{{ questionItem?.Date_Text__c }}</label>\n                <div class=\"dis-flex dateandtime\">\n                  <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event)\"\n                    [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"Seleccione fecha\"  (focus)=\"clearError()\" >\n                  </my-date-picker>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <label class=\"date-time colorf\">{{ questionItem?.Time_Text__c }}</label>\n                <div class=\"dis-flex dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line dt-time': qbItem?.Progress_Bar__c,\n                                  dateandTime: !qbItem?.Progress_Bar__c}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour myt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">HH</option>\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n                      {{ hour }}\n                    </option>\n                  </select>\n                  <span class=\"colon\"> : </span>\n                  <select name=\"minutes\" class=\"datetime showminute myt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">MM</option>\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n                      {{ minute }}\n                    </option>\n                  </select>\n                  <div [ngClass]=\"{ colon1: qbItem?.Progress_Bar__c }\" *ngIf=\"questionItem.X24_Hours__c == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"myt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n                      <option value=\"AM\">AM</option>\n                      <option value=\"PM\">PM</option>\n                    </select>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'DateTime'\">\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Text'\">\n            <app-custom-input\n                  [fromShengel]=\"qbItem.isShengel__c\"\n                  [value]=\"ques.input\"\n                  [ngClassValue]=\"{\n                      'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                      textBox: !qbItem.Progress_Bar__c\n                  }\"\n                  [idValue]=\"ques.Id\"\n                  [focusEvent]=\"clearSQError(ques.Id)\"\n                  [error]=\"ques.error\"\n                  [placeholder]=\"ques.Question__c\"\n                  (inputValue)=\"selectedInput($event,ques)\">\n            </app-custom-input>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- for pick location -->\n            <app-pick-location [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n          </div>\n          <!-- for  text area   -->\n          <div *ngIf=\"ques.Type__c === 'TextArea'\">\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\n          </div>\n          <!-- for to data table we use 'data' type question  -->\n          <div *ngIf=\"ques.Type__c === 'Data'\">\n            <app-custom-table [tableHeader]=\"ques.tableHeader\" [tableData]=\"getTableData(ques)\" [tableIndex]=\"i\" (tableDataChange)=\"getData($event)\"></app-custom-table>\n          </div>\n\n          <div *ngIf=\"ques.Type__c === 'Email'\">\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n          </div>\n\n          <div *ngIf=\"ques.Type__c === 'File'\">\n            <div *ngIf=\"!qbItem.Progress_Bar__c\">\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n                <span class=\"picture-upload-child\">\n                  <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\n                </span>\n                <span class=\"\n                    fa fa-plus fa-2x\n                    picture-upload-child\n                    pic-upload\n                    icolor\n                  \">\n                  <i class=\"\" aria-hidden=\"true\"></i>\n                </span>\n              </label>\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n            </div>\n\n            <ul *ngIf=\"\n                attachments?.length > 0 &&\n                ques.Type__c === 'File' &&\n                !qbItem.Progress_Bar__c\n              \" class=\"attach-ulist col-md-12\">\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n                {{ attachment.attachmentName\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n              </li>\n            </ul>\n            <div class=\"myt-box\" *ngIf=\"qbItem.Progress_Bar__c\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"file-uploading-box\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\n              </div>\n              <div class=\"file-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.Question__c }}</span>\n                <label class=\"file-label \">\n                  <span style=\"color: #c5281c;text-decoration:underline\">\n                    Adjuntar\n                  </span>\n                  <input name=\"attachment\" type=\"file\" placeholder=\"Ticket kaufen\" multiple\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n                    class=\"file-upload-btn\">\n                </label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Dropdown -->\n          <div *ngIf=\"ques.Type__c === 'Dropdown'\" class=\"\">\n            <!-- for common dropdown -->\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel__c\"\n                    [options]=\"ques.Question_Options__r.records\"\n                    [apiMeta]=\"ques.Sub_Text__c\"\n                    [id]=\"ques.Name\"\n                    [selectedValue]=\"ques.input\"\n                    [placeholder]=\"'---Select---'\"\n                    [errorMessage]=\"ques.Error_Message__c\"\n                    [error]=\"ques.error\"\n                    (valueChange)=\"Dropdown($event, ques); clearSQError(ques.Id)\">\n            </app-custom-dropdown>\n            <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\"  [certified]=\"ques.certifiedFlag\"  [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\n            <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\n          </div>          \n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!--List start-->\n  <div *ngIf=\"listFlag\">\n    <div class=\"form-group\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div class=\"myt-align3\" [class]=\"'col-md-' + ques.Size__c + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.Id);let i = index\">\n          <div>\n            <span class=\"dis-flex myt-font3 myt-font7\">{{ ques?.Question__c }}</span>\n          </div>\n          <div *ngIf=\"ques.Type__c === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n             textBox: !qbItem.Progress_Bar__c\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\"\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n          </div>\n        </div>\n        <div class=\"\" *ngIf=\"addFlag\">\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.Id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>Add</button>\n         </div>\n      </div>\n    </div>\n  </div>\n  <!--List End-->\n\n  <!-- Actions -->\n  <div *ngIf=\"individualBookButton\" class=\"flexer\">\n    <!-- Backward / Back -->\n    <div class=\"backbutton\" [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\"\n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\">\n      <div [ngClass]=\"{}\">\n        <button [ngClass]=\"{\n            'left-bt': qbItem.Progress_Bar__c,\n            'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n              !qbItem.Progress_Bar__c\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.Back__c }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Forward / Next -->\n    <div [ngClass]=\"{ 'col-md-6': !qbItem.Progress_Bar__c }\">\n      <div>\n        <button [ngClass]=\"{\n            'rusty': qbItem.Progress_Bar__c,\n            'nxt-btn btn-primary btn-lg btn-block btn-back-color':\n              !qbItem.Progress_Bar__c\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.Next__c }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.Progress_Bar__c\n               }\">\n    <h1 class=\"header1 summarypadd\" >{{ qbItem.SubTitle__c }}</h1>         \n  <div id=\"progress2\" *ngIf=\"!qbItem.Progress_Bar__c && this.abItem.Status__c != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.Progress_Bar__c }\">\n          <div [ngClass]=\"{ summary:  !qbItem.Progress_Bar__c }\">\n           <div *ngIf=\"!qbItem.Edit__c\"\n              [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c\"\n              [ngClass]=\"{ 'question': this.abItem.Status__c != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.Status__c === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n                  {{ qa.ansValue }}\n                </div>\n                <div *ngIf=\"qa.qTyp != 'File'\">{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"this.abItem.Status__c === 'Completed'\" class=\"col-lg-12\">\n    <div class=\"panel-group panel-group-joined\" id=\"ePTW-details\">\n      <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n          <h4 class=\"panel-title\">\n            <a data-toggle=\"collapse\" data-parent=\"#ePTW-details\" href=\"#collapseOne\" class=\"collapsed\">\n              PTW Details\n            </a>\n          </h4>\n        </div>\n        <div id=\"collapseOne\" class=\"panel-collapse collapse\">\n          <div class=\"panel-body\">\n            <div class=\"row\">\n              <ng-container *ngFor=\"let item of summaryData; let i = index\">\n                <ng-container *ngIf=\"i % 2 === 0\">\n                  <div class=\"col-lg-6 m-b-30\">\n                    <label>{{ getKey(item) }}</label>\n                    <p class=\"font-size\">{{ getValue(item) || 'N/A' }}</p>\n                  </div>\n                  <div class=\"col-lg-6\" *ngIf=\"summaryData[i + 1]\">\n                    <label>{{ getKey(summaryData[i + 1]) }}</label>\n                    <p class=\"font-size\">{{ getValue(summaryData[i + 1]) || 'N/A' }}</p>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div id=\"progress2\" *ngIf=\"qbItem.Progress_Bar__c \">\n    <div [ngClass]=\"{'bgColor summary-top' : qbItem.Progress_Bar__c }\" >\n      <div id=\"progress-summary\" *ngIf=\"qbItem.Progress_Bar__c\">\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\n        [startFromZero]=\"false\" [responsive]=\"false\" >\n      </circle-progress>\n      \n      <div *ngIf=\"qbItem.Summary_Text__c && qbItem.Progress_Bar__c\" \n      [ngClass]=\"{ summaryTitle: qbItem.Progress_Bar__c }\">\n        <h3 class=\"subTitle\" >{{ qbItem.Summary_Text__c }}</h3>\n        <div *ngIf=\"abItem.Status__c != 'Completed'\" class=\"subTitle1\" >{{ qbItem.Summary_Sub_Text__c}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.Progress_Bar__c\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.Summary_Text__c }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.Progress_Bar__c }\">\n    <div class=\"summary-groupText myt-font2\">\n      <!-- <p>Informe de da\u00F1o</p> -->\n    </div>\n    <div *ngFor=\"let qa of summary\" >\n        <div [ngClass]=\"{ non:  qbItem.Progress_Bar__c }\">\n          <div [ngClass]=\"{ summary: this.abItem.Status__c != 'Completed' && !qbItem.Progress_Bar__c }\">\n            <div *ngIf=\"!qbItem.Edit__c\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.Status__c === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.Status__c != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.Status__c === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div *ngIf=\"qbItem.Edit__c && this.abItem.Status__c != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"edit\" (click)=\"handleEditClick(qa.quesId)\">\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"answer \" >\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"icon-edit-summary\" />\n                {{ qa.ansValue }}\n              </div>\n              <div *ngIf=\"qa.qTyp != 'File'\">\n                {{ qa.ansValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Answer Book -->\n  <div class=\"flexer1\" *ngIf=\"abItem\">\n    <div class=\"\" *ngIf=\"abItem.Status__c == 'Completed'\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.Cancel__c }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.Status__c != 'Completed'\">\n    <div class=\"col-md-6\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.Submit__c }}\n      </button>\n    </div>\n    <div class=\"col-md-6\">\n      <button [ngClass]=\"{'grey': qbItem.Progress_Bar__c,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.Progress_Bar__c}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.Edit__c }}\n      </button>\n    </div>\n  </div>\n\n</div>", styles: [".rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.edit{background-color:#dedddd;border:none;color:#c5281c;text-decoration:underline;margin-left:50%;font-size:16px;vertical-align:super;font-weight:700}.icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.icon-edit1,.icon-edit-summary{width:29px;height:28px}.questiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.questiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.questiondiv2{padding-left:0!important;padding-bottom:0!important}@media screen and (min-width: 689px){#progress,#progress-summary{padding-left:12px}.backicon{display:none}.dt-time{background-position:98%!important}}.bgColor{text-align:center;background-color:#dedddd}.questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.largeTitle{padding-left:16px;padding-top:12px}.question-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1.5;padding:.5rem 1rem;width:100%;cursor:pointer;outline:0}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.radiotext{margin-top:-30px}.radiocontainer{display:flex;flex-direction:row-reverse;border:1px solid none;border-radius:.3em;padding:0;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#a3a2a2}.radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.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"] }]
+        }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: i3.ActivatedRoute }, { type: i4$1.DomSanitizer }, { type: i5.NgxSpinnerService }, { type: i2.UntypedFormBuilder }, { type: i7.DeviceDetectorService }, { type: i0.ElementRef }]; }, propDecorators: { qbId: [{
+                type: Input
+            }], insuranceStartDate: [{
+                type: Input
+            }], serv: [{
+                type: Input
+            }], tkn: [{
+                type: Input
+            }], handleEvent: [{
+                type: Output
+            }], handlePage: [{
+                type: Output
+            }] } });
+
+class BookletComponent {
+    sfService;
+    dataService;
+    route;
+    sanitizer;
+    bookletId;
+    serv;
+    tkn;
+    handleEvent = new EventEmitter();
+    handlePage = new EventEmitter();
+    booklet = [];
+    spinnerName;
+    spinnerType;
+    constructor(sfService, dataService, route, sanitizer, el) {
+        this.sfService = sfService;
+        this.dataService = dataService;
+        this.route = route;
+        this.sanitizer = sanitizer;
+        this.spinnerName = "sp1";
+        this.spinnerType = "ball-spin-clockwise";
+    }
+    ngOnInit() {
+        this.processBooklet();
+    }
+    ngOnChanges() {
+        //console.log('inside Questionnaire ngOnChanges');
+        this.processBooklet();
+    }
+    processBooklet() {
+        if (this.bookletId) {
+            if (this.bookletId.length == 18) {
+                this.readBooklet(this.bookletId);
+            }
+        }
+    }
+    readBooklet = (uuid) => {
+        if (this.serv == "api") {
+            this.dataService.getAPIData(this.tkn, ["Booklet", "read", uuid], this.successReadBooklet, this.failureReadBooklet);
+        }
+        else {
+            this.sfService.remoteAction("NxtController.process", ["Booklet", "read", uuid], this.successReadBooklet, this.failureReadBooklet);
+        }
+    };
+    successReadBooklet = (response) => {
+        console.log('Inside the successReadBooklet');
+        console.log(response);
+        if (response != null || response != undefined) {
+            this.booklet = response.records;
+        }
+    };
+    failureReadBooklet = (response) => {
+    };
+    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: i4$1.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<div *ngFor=\"let qb of booklet\">\n    <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: ["qbId", "insuranceStartDate", "serv", "tkn"], outputs: ["handleEvent", "handlePage"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BookletComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-booklet', template: "<ngx-spinner [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<div *ngFor=\"let qb of booklet\">\n    <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: i3.ActivatedRoute }, { type: i4$1.DomSanitizer }, { type: i0.ElementRef }]; }, propDecorators: { bookletId: [{
+                type: Input
+            }], serv: [{
+                type: Input
+            }], tkn: [{
+                type: Input
+            }], handleEvent: [{
+                type: Output
+            }], handlePage: [{
+                type: Output
+            }] } });
+
+class SearchBoxComponent {
+    sfService;
+    dataService;
+    route;
+    http;
+    placeHolderText;
+    auto;
+    filterName;
+    finalResults = [];
+    searchKeyWord = '';
+    newResult;
+    showResult = false;
+    noResult = false;
+    showSuggestion = true;
+    el;
+    serv = 'api';
+    tkn = '';
+    constructor(sfService, dataService, route, http, el) {
+        this.sfService = sfService;
+        this.dataService = dataService;
+        this.route = route;
+        this.http = http;
+    }
+    ngOnInit() {
+    }
+    clearList() {
+        setTimeout(() => {
+            this.finalResults = [];
+        }, 1000);
+    }
+    getSourceDataLocal(event) {
+        if (event.target.value.length > 2) {
+            this.showSuggestion = true;
+            this.finalResults = [];
+            this.searchKeyWord = event.target.value;
+            this.showResult = false;
+            this.getSourceData(event.target.value);
+        }
+        else {
+            this.showSuggestion = false;
+            this.finalResults = [];
+            this.noResult = false;
+        }
+    }
+    apiResponse(keyword) {
+        return this.http.get('https://dummyjson.com/products');
+    }
+    getSourceData = (keyword) => {
+        this.apiResponse('ok').subscribe((apiResponse) => {
+            let results = [];
+            for (let i = 0; i < apiResponse.products.length; i++) {
+                if (apiResponse.products[i].title.indexOf(keyword) >= 0) {
+                    console.log('pushing ' + apiResponse.products[i].title);
+                    results.push(apiResponse.products[i]);
+                }
+            }
+            this.noResult = !(results.length > 1);
+            this.finalResults = results;
+        });
+    };
+    clickItem(event) {
+        console.log('inside clickItem of ' + event.target.value);
+    }
+    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 });
+    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\">\n    <input #auto id=\"searchbox-style\" \n            (blur)=\"clearList()\" \n            [(ngModel)]=\"filterName\" \n            type=\"text\" \n            name=\"name\" \n            (placeholder)=\"placeHolderText\" \n            style=\"margin: 0 !important;\" \n            class=\"searchInput\" \n            (focusin)=\"getSourceDataLocal($event)\" \n            (input)=\"getSourceDataLocal($event)\">\n    <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n    <div *ngIf=\"finalResults.length > 1 && showSuggestion\" \n        style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \n        class=\"suggestions-container\">\n        <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n            <div class=\"grid-x align-middle\" style=\"padding: 1rem\" *ngIf=\"item.id != null\">\n                <div class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                    <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n                </div>\n                <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n                    <h4 >{{item.title}}</h4>\n                    <div class=\"show-for-medium\" style=\" white-space: nowrap;\n                    overflow: hidden;text-overflow: ellipsis;\" > {{item.description}}\n                    </div>\n                    <div *ngIf=\"item.price\"  class=\"drop-list\">\n                        {{item.price.toFixed(2)}}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-search-box', template: "<div id=\"autocomplete-input\">\n    <input #auto id=\"searchbox-style\" \n            (blur)=\"clearList()\" \n            [(ngModel)]=\"filterName\" \n            type=\"text\" \n            name=\"name\" \n            (placeholder)=\"placeHolderText\" \n            style=\"margin: 0 !important;\" \n            class=\"searchInput\" \n            (focusin)=\"getSourceDataLocal($event)\" \n            (input)=\"getSourceDataLocal($event)\">\n    <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n    <div *ngIf=\"finalResults.length > 1 && showSuggestion\" \n        style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \n        class=\"suggestions-container\">\n        <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n            <div class=\"grid-x align-middle\" style=\"padding: 1rem\" *ngIf=\"item.id != null\">\n                <div class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                    <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n                </div>\n                <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n                    <h4 >{{item.title}}</h4>\n                    <div class=\"show-for-medium\" style=\" white-space: nowrap;\n                    overflow: hidden;text-overflow: ellipsis;\" > {{item.description}}\n                    </div>\n                    <div *ngIf=\"item.price\"  class=\"drop-list\">\n                        {{item.price.toFixed(2)}}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: i3.ActivatedRoute }, { type: i1.HttpClient }, { type: i0.ElementRef }]; }, propDecorators: { placeHolderText: [{
+                type: Input
+            }], auto: [{
+                type: ViewChild,
+                args: ['auto']
+            }] } });
+
+// export const MY_CUSTOM_FORMATS = {
+//   fullPickerInput: 'DD/MM/YYYY HH:mm:ss',
+//   useUtc: true,
+// };
+class NxtAppModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NxtAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: NxtAppModule, declarations: [NxtAppComponent,
+            QuestionnaireComponent,
+            PickLocationComponent,
+            CustomInputComponent,
+            CustomTextAreaComponent,
+            CustomTableComponent,
+            CustomDatePickerComponent,
+            DropdownWithFlagComponent,
+            CustomDropdownComponent,
+            BookletComponent,
+            SearchBoxComponent], imports: [CommonModule, FormsModule,
+            MyDatePickerModule,
+            OwlDateTimeModule,
+            OwlNativeDateTimeModule,
+            HttpClientModule,
+            NgSelectModule,
+            GoogleMapsModule,
+            //AgmCoreModule.forRoot({
+            //  apiKey: GOOGLE_MAP_API_KEY,
+            //  libraries: ['geometry', 'places', 'visualization', 'drawing']
+            //  }),
+            ReactiveFormsModule, NgxSpinnerModule, i10.NgCircleProgressModule], exports: [NxtAppComponent,
+            QuestionnaireComponent,
+            BookletComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NxtAppModule, imports: [CommonModule, FormsModule,
+            MyDatePickerModule,
+            OwlDateTimeModule,
+            OwlNativeDateTimeModule,
+            HttpClientModule,
+            NgSelectModule,
+            GoogleMapsModule,
+            //AgmCoreModule.forRoot({
+            //  apiKey: GOOGLE_MAP_API_KEY,
+            //  libraries: ['geometry', 'places', 'visualization', 'drawing']
+            //  }),
+            ReactiveFormsModule, NgxSpinnerModule,
+            /*NgCircleProgressModule.forRoot({
+              "backgroundPadding": -10,
+              "radius": 60,
+              "space": -6,
+              "innerStrokeColor": "#919191",
+              "outerStrokeColor": "#db9594",
+              "outerStrokeGradientStopColor": "#e0b1b0",
+              "innerStrokeWidth": 2,
+              "backgroundGradient": true,
+              "backgroundColor": "#dd2e13",
+              "backgroundGradientStopColor": "#dd2e13",
+              "backgroundStroke": "#d3cfcf",
+              "title": [
+                        
+                        "%"
+              ],
+              // titleFontSize: 12,
+              // "subtitleFontSize": 20,
+              "animateTitle": false,
+              "animationDuration": 1000,
+              "showUnits": false,
+              "clockwise":true
+        
+              //"backgroundStrokeWidth": "0",
+        "backgroundGradient": true,
+              //"backgroundColor": "#dd2e13",
+              "backgroundGradientStopColor": "#dd2e13",
+              "backgroundStroke": "#000000",
+              "backgroundPadding": -10,
+              "radius": 60,
+              "unitsFontWeight": "600",
+              "unitsColor": "#f2f2f2",
+              "outerStrokeGradient": true,
+              "outerStrokeColor": "#e0b1b0",
+              "outerStrokeGradientStopColor": "#e0b1b0",
+              "outerStrokeLinecap": "inherit",
+              "innerStrokeColor": "#f6dfdf",
+              "title": [
+                        
+                "%"
+        ],
+              "titleColor": "#e7d9d9",
+              "titleFontSize": "31",
+              "titleFontWeight": "100",
+              "subtitleColor": "#f7f7f7",
+              "subtitleFontSize": "36",
+              "subtitleFontWeight": "900",
+              "animateTitle": false,
+              "animationDuration": 1000,
+              "showTitle": true,
+              "showUnits": true,
+              "clockwise": false,
+              "startFromZero": true,
+              "showZeroOuterStroke": false,
+              "lazy": true})*/
+            NgCircleProgressModule.forRoot({
+                "backgroundGradient": true,
+                "backgroundColor": "#e29d98",
+                "backgroundGradientStopColor": "#c5281c",
+                "backgroundStroke": "#ece4e4",
+                "backgroundStrokeWidth": 0,
+                "backgroundPadding": -10,
+                "radius": 60,
+                "space": 4,
+                "maxPercent": 100,
+                "unitsFontSize": "35",
+                "unitsColor": "#f0ebeb",
+                "outerStrokeGradient": true,
+                "outerStrokeWidth": 10,
+                "outerStrokeColor": "#f7c0bf",
+                "outerStrokeGradientStopColor": "#f9c9c8",
+                "innerStrokeWidth": 0,
+                "titleColor": "#f3eded",
+                "titleFontSize": "40",
+                "subtitleColor": "#444444",
+                "showSubtitle": false
+            })] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NxtAppModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NxtAppComponent,
+                        QuestionnaireComponent,
+                        PickLocationComponent,
+                        CustomInputComponent,
+                        CustomTextAreaComponent,
+                        CustomTableComponent,
+                        CustomDatePickerComponent,
+                        DropdownWithFlagComponent,
+                        CustomDropdownComponent,
+                        BookletComponent,
+                        SearchBoxComponent
+                    ],
+                    imports: [
+                        CommonModule, FormsModule,
+                        MyDatePickerModule,
+                        OwlDateTimeModule,
+                        OwlNativeDateTimeModule,
+                        HttpClientModule,
+                        NgSelectModule,
+                        GoogleMapsModule,
+                        //AgmCoreModule.forRoot({
+                        //  apiKey: GOOGLE_MAP_API_KEY,
+                        //  libraries: ['geometry', 'places', 'visualization', 'drawing']
+                        //  }),
+                        ReactiveFormsModule, NgxSpinnerModule,
+                        /*NgCircleProgressModule.forRoot({
+                          "backgroundPadding": -10,
+                          "radius": 60,
+                          "space": -6,
+                          "innerStrokeColor": "#919191",
+                          "outerStrokeColor": "#db9594",
+                          "outerStrokeGradientStopColor": "#e0b1b0",
+                          "innerStrokeWidth": 2,
+                          "backgroundGradient": true,
+                          "backgroundColor": "#dd2e13",
+                          "backgroundGradientStopColor": "#dd2e13",
+                          "backgroundStroke": "#d3cfcf",
+                          "title": [
+                                    
+                                    "%"
+                          ],
+                          // titleFontSize: 12,
+                          // "subtitleFontSize": 20,
+                          "animateTitle": false,
+                          "animationDuration": 1000,
+                          "showUnits": false,
+                          "clockwise":true
+                    
+                          //"backgroundStrokeWidth": "0",
+                    "backgroundGradient": true,
+                          //"backgroundColor": "#dd2e13",
+                          "backgroundGradientStopColor": "#dd2e13",
+                          "backgroundStroke": "#000000",
+                          "backgroundPadding": -10,
+                          "radius": 60,
+                          "unitsFontWeight": "600",
+                          "unitsColor": "#f2f2f2",
+                          "outerStrokeGradient": true,
+                          "outerStrokeColor": "#e0b1b0",
+                          "outerStrokeGradientStopColor": "#e0b1b0",
+                          "outerStrokeLinecap": "inherit",
+                          "innerStrokeColor": "#f6dfdf",
+                          "title": [
+                                    
+                            "%"
+                    ],
+                          "titleColor": "#e7d9d9",
+                          "titleFontSize": "31",
+                          "titleFontWeight": "100",
+                          "subtitleColor": "#f7f7f7",
+                          "subtitleFontSize": "36",
+                          "subtitleFontWeight": "900",
+                          "animateTitle": false,
+                          "animationDuration": 1000,
+                          "showTitle": true,
+                          "showUnits": true,
+                          "clockwise": false,
+                          "startFromZero": true,
+                          "showZeroOuterStroke": false,
+                          "lazy": true})*/
+                        NgCircleProgressModule.forRoot({
+                            "backgroundGradient": true,
+                            "backgroundColor": "#e29d98",
+                            "backgroundGradientStopColor": "#c5281c",
+                            "backgroundStroke": "#ece4e4",
+                            "backgroundStrokeWidth": 0,
+                            "backgroundPadding": -10,
+                            "radius": 60,
+                            "space": 4,
+                            "maxPercent": 100,
+                            "unitsFontSize": "35",
+                            "unitsColor": "#f0ebeb",
+                            "outerStrokeGradient": true,
+                            "outerStrokeWidth": 10,
+                            "outerStrokeColor": "#f7c0bf",
+                            "outerStrokeGradientStopColor": "#f9c9c8",
+                            "innerStrokeWidth": 0,
+                            "titleColor": "#f3eded",
+                            "titleFontSize": "40",
+                            "subtitleColor": "#444444",
+                            "showSubtitle": false
+                        })
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    exports: [NxtAppComponent,
+                        QuestionnaireComponent,
+                        BookletComponent
+                    ]
+                    // providers: [
+                    //   { provide: OWL_MOMENT_DATE_TIME_ADAPTER_OPTIONS, useValue: { useUtc: false } },
+                    //   { provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS },
+                    // ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of nxt-app
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BookletComponent, NxtAppComponent, NxtAppModule, NxtAppService, QuestionnaireComponent, SalesforceService };
+//# sourceMappingURL=rangertechnologies-ngnxt.mjs.map