@rangertechnologies/ngnxt 2.1.77 → 2.1.78

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -6,7 +6,6 @@ import * as i1 from '@angular/router';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import * as i6$1 from '@angular/platform-browser';
-import { BrowserModule } from '@angular/platform-browser';
 import * as i7 from 'ngx-spinner';
 import { NgxSpinnerModule } from 'ngx-spinner';
 import * as i3 from '@angular/forms';
@@ -24,11 +23,6 @@ import * as i4$1 from 'ng-pick-datetime';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
 import * as i6 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import Quill from 'quill';
-import { Mention } from 'quill-mention';
-import ImageResize from 'quill-image-resize-module';
-import * as i3$1 from 'ngx-quill';
-import { QuillModule } from 'ngx-quill';
 import * as i8 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i9$1 from '@angular/cdk/bidi';
@@ -1189,290 +1183,6 @@ const FILEQUESTION = {
         "questionStyle": ""
     },
 };
-//RS 06JAN25
-//Rich text Questions
-const RTAQUESTION = {
-    id: '14',
-    options: {
-        records: [
-            {
-                id: '1',
-                Name: 'D',
-                value: 'D',
-                trackingId: '1234',
-                nextQuestion: '',
-            },
-            {
-                id: '2',
-                Name: 'CH',
-                value: 'CH',
-                trackingId: '1234',
-                nextQuestion: '',
-            },
-            {
-                id: '3',
-                Name: 'UK',
-                value: 'UK',
-                trackingId: '1234',
-                nextQuestion: '',
-            }
-        ]
-    },
-    Name: 'QN-00004',
-    type: 'RichTextArea',
-    subQuestions: [
-        {
-            id: '170',
-            options: {
-                records: [
-                    {
-                        id: '1',
-                        Name: 'D',
-                        value: 'D',
-                        trackingId: '1234',
-                        nextQuestion: '',
-                    },
-                    {
-                        id: '2',
-                        Name: 'CH',
-                        value: 'CH',
-                        trackingId: '1234',
-                        nextQuestion: '',
-                    },
-                    {
-                        id: '3',
-                        Name: 'UK',
-                        value: 'UK',
-                        trackingId: '1234',
-                        nextQuestion: '',
-                    }
-                ]
-            },
-            Name: 'QN-000070',
-            type: 'Dropdown',
-            questionText: 'Land',
-            question: 'Land',
-            size: 1,
-            allowedFileExtensions: '.pdf',
-            trackingId: '1234',
-            isOptional: false,
-            isTitle: true,
-            x24Hours: false,
-            selectedValue: 'test',
-            errorMessage: 'Please Enter a Value',
-            isDateBackward: false,
-            isDateForward: false,
-            isHidden: false,
-            groupName: 'Basic',
-            timeText: 'hour',
-            title: 'title',
-            subTitle: 'subtitle',
-            subText: 'subtext',
-            dateText: 'datetext',
-            RecordType: {
-                Name: 'UNCONDITIONAL'
-            },
-            style: {
-                "labelClass": "slds-grid",
-                "labelStyle": "align-items: baseline;",
-                "labelValueStyle": "",
-                "inputClass": "",
-                "inputStyle": "border-style: dashed;",
-                "showLabel": true,
-                "bookStyle": "",
-                "direction": "ltr",
-                "questionStyle": ""
-            },
-        },
-        {
-            id: '171',
-            Name: 'QN-000071',
-            type: 'Text',
-            size: 3,
-            allowedFileExtensions: '.pdf',
-            questionText: 'PLZ',
-            question: 'PLZ',
-            trackingId: '1234',
-            isOptional: false,
-            isTitle: true,
-            x24Hours: false,
-            errorMessage: 'Please Enter a Value',
-            isDateBackward: false,
-            isDateForward: false,
-            isHidden: false,
-            groupName: 'Basic',
-            timeText: 'hour',
-            selectedValue: 'test',
-            title: 'title',
-            subTitle: 'subtitle',
-            subText: 'subtext',
-            dateText: 'datetext',
-            RecordType: {
-                Name: 'UNCONDITIONAL'
-            },
-            style: {
-                "labelClass": "slds-grid",
-                "labelStyle": "align-items: baseline;",
-                "labelValueStyle": "",
-                "inputClass": "",
-                "inputStyle": "border-style: dashed;",
-                "showLabel": true,
-                "bookStyle": "",
-                "direction": "ltr",
-                "questionStyle": ""
-            },
-        },
-        {
-            id: '172',
-            Name: 'QN-000072',
-            type: 'Text',
-            allowedFileExtensions: '.pdf',
-            trackingId: '1234',
-            questionText: 'ORT',
-            question: 'ORT',
-            isOptional: false,
-            isTitle: true,
-            x24Hours: false,
-            errorMessage: 'Please Enter a Value',
-            isDateBackward: false,
-            isDateForward: false,
-            selectedValue: 'test',
-            isHidden: false,
-            size: 8,
-            groupName: 'Basic',
-            timeText: 'hour',
-            title: 'title',
-            subTitle: 'subtitle',
-            subText: 'subtext',
-            dateText: 'datetext',
-            RecordType: {
-                Name: 'UNCONDITIONAL'
-            },
-            style: {
-                "labelClass": "slds-grid",
-                "labelStyle": "align-items: baseline;",
-                "labelValueStyle": "",
-                "inputClass": "",
-                "inputStyle": "border-style: dashed;",
-                "showLabel": true,
-                "bookStyle": "",
-                "direction": "ltr",
-                "questionStyle": ""
-            },
-        },
-        {
-            id: '173',
-            Name: 'QN-000073',
-            type: 'Text',
-            questionText: 'StraBe',
-            selectedValue: 'test',
-            question: 'StraBe',
-            trackingId: '1234',
-            isOptional: false,
-            isTitle: true,
-            x24Hours: false,
-            errorMessage: 'Please Enter a Value',
-            isDateBackward: false,
-            isHidden: false,
-            isDateForward: false,
-            allowedFileExtensions: '.pdf',
-            size: 8,
-            groupName: 'Basic',
-            timeText: 'hour',
-            title: 'title',
-            subTitle: 'subtitle',
-            subText: 'subtext',
-            dateText: 'datetext',
-            RecordType: {
-                Name: 'UNCONDITIONAL'
-            },
-            style: {
-                "labelClass": "slds-grid",
-                "labelStyle": "align-items: baseline;",
-                "labelValueStyle": "",
-                "inputClass": "",
-                "inputStyle": "border-style: dashed;",
-                "showLabel": true,
-                "bookStyle": "",
-                "direction": "ltr",
-                "questionStyle": ""
-            },
-        },
-        {
-            id: '174',
-            Name: 'QN-000074',
-            type: 'Text',
-            allowedFileExtensions: '.pdf',
-            trackingId: '1234',
-            questionText: 'Hausnummer',
-            question: 'Hausnummer',
-            isOptional: false,
-            isTitle: true,
-            x24Hours: false,
-            errorMessage: 'Please Enter a Value',
-            isDateBackward: false,
-            isDateForward: false,
-            isHidden: false,
-            size: 4,
-            groupName: 'Basic',
-            timeText: 'hour',
-            selectedValue: 'test',
-            title: 'title',
-            subTitle: 'subtitle',
-            subText: 'subtext',
-            dateText: 'datetext',
-            RecordType: {
-                Name: 'UNCONDITIONAL'
-            },
-            style: {
-                "labelClass": "slds-grid",
-                "labelStyle": "align-items: baseline;",
-                "labelValueStyle": "",
-                "inputClass": "",
-                "inputStyle": "border-style: dashed;",
-                "showLabel": true,
-                "bookStyle": "",
-                "direction": "ltr",
-                "questionStyle": ""
-            },
-        },
-    ],
-    allowedFileExtensions: '.pdf',
-    questionText: 'Explain the particulars of the Incident?',
-    question: 'Explain the particulars of the Incident?',
-    nextQuestion: 'a013t000013SS89AAG',
-    trackingId: '1234',
-    isOptional: false,
-    isTitle: true,
-    x24Hours: false,
-    errorMessage: 'Please Enter a Value',
-    isDateBackward: false,
-    isDateForward: false,
-    selectedValue: 'test',
-    isHidden: false,
-    groupName: 'Basic',
-    size: 1,
-    questionNumber: '1',
-    timeText: 'hour',
-    title: 'title',
-    subTitle: 'subtitle',
-    subText: 'subtext',
-    dateText: 'datetext',
-    RecordType: {
-        Name: 'UNCONDITIONAL'
-    },
-    style: {
-        "labelClass": "slds-grid",
-        "labelStyle": "align-items: baseline;",
-        "labelValueStyle": "",
-        "inputClass": "",
-        "inputStyle": "border-style: dashed;",
-        "showLabel": true,
-        "bookStyle": "",
-        "direction": "ltr",
-        "questionStyle": ""
-    },
-};
 // DateTime Question
 const TAQUESTION = {
     id: '14',
@@ -5128,173 +4838,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-// RS 06JAN2025
-// Register Quill modules
-Quill.register('modules/mention', Mention);
-Quill.register('modules/imageResize', ImageResize);
-// Define font families with their display names and actual CSS values
-const fontFamilyArr = [
-    "Roboto Condensed",
-    "Times New Roman",
-    "Calibri",
-    "Calibri Light",
-    "Sans-Serif",
-    "Arial",
-    "Verdana",
-    "Georgia",
-    "Courier New",
-    "Comic Sans MS",
-    "Trebuchet MS",
-    "Lucida Console",
-    "Tahoma",
-    "Impact",
-    "Palatino Linotype",
-    "Segoe UI",
-    "Helvetica"
-];
-let fonts = Quill.import("attributors/style/font");
-fonts.whitelist = fontFamilyArr; // Updated with additional fonts
-Quill.register(fonts, true);
-const QuillConfiguration = {
-    toolbar: {
-        container: [
-            [{ 'font': fontFamilyArr }],
-            ['bold', 'italic', 'underline', 'strike'],
-            ['blockquote', 'code-block'],
-            [{ header: [1, 2, 3, 4, 5, 6, false] }],
-            [{ list: 'ordered' }, { list: 'bullet' }],
-            [{ color: [] }, { background: [] }],
-            [{ align: [] }],
-            ['link', 'image', 'video'],
-            ['formula'],
-            ['clean'],
-        ],
-    },
-    imageResize: {
-        displaySize: true,
-        modules: ['Resize', 'DisplaySize', 'Toolbar'],
-        toolbarStyles: {
-            backgroundColor: 'black',
-            border: 'none',
-            color: 'white'
-        },
-        handleStyles: {
-            backgroundColor: 'black',
-            border: 'none',
-            color: 'white'
-        }
-    },
-    mention: {
-        allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
-        mentionDenotationChars: ['@', '#'],
-        source: function (searchTerm, renderList) {
-            const values = [
-                { id: 1, value: 'User 1' },
-                { id: 2, value: 'User 2' },
-            ];
-            if (searchTerm.length === 0) {
-                renderList(values, searchTerm);
-            }
-            else {
-                const matches = values.filter((item) => item.value.toLowerCase().includes(searchTerm.toLowerCase()));
-                renderList(matches, searchTerm);
-            }
-        },
-    },
-};
-class CustomRichTextComponent {
-    i18nService;
-    changeService;
-    value = '';
-    placeholder;
-    error;
-    question;
-    rows; //The number of visible text lines for the control
-    readOnly = false;
-    textValueChange = new EventEmitter();
-    minLength;
-    maxLength;
-    // @Input() value: any = ''; // Set default value
-    quillConfiguration = QuillConfiguration;
-    subscription;
-    constructor(i18nService, changeService) {
-        this.i18nService = i18nService;
-        this.changeService = changeService;
-    }
-    ngOnInit() {
-        console.log('Rich Text Init:', {
-            value: this.value,
-            question: this.question
-        });
-        if (this.value === undefined || this.value === null) {
-            this.value = '';
-            this.textValueChange.emit('');
-        }
-        this.initializeDependency();
-    }
-    // Separated dependency initialization for better organization
-    initializeDependency() {
-        if (this.question?.subText) {
-            console.log('subText:', this.question.subText);
-            try {
-                const dependencyObj = JSON.parse(this.question.subText);
-                if (dependencyObj?.sourceQuestionId) {
-                    this.subscription = this.changeService.changeAnnounced$.subscribe((changeValue) => {
-                        console.log('Change Value:', changeValue);
-                        if (changeValue && changeValue.valueObj &&
-                            changeValue.fromQuestionId === dependencyObj.sourceQuestionId) {
-                            this.value = changeValue.valueObj[dependencyObj.valueField];
-                            this.textValueChange.emit(this.value);
-                        }
-                        this.changeService.confirmChange(dependencyObj.sourceQuestionId);
-                    });
-                }
-            }
-            catch (error) {
-                console.error('Error parsing subText:', error);
-            }
-        }
-    }
-    onEditorChange(event) {
-        if (event && event.html !== undefined) {
-            this.textValueChange.emit(event.html);
-        }
-        else {
-            this.textValueChange.emit('');
-        }
-    }
-    // Added ngOnDestroy to prevent memory leaks
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomRichTextComponent, deps: [{ token: I18nService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: { value: "value", placeholder: "placeholder", error: "error", question: "question", rows: "rows", readOnly: "readOnly", minLength: "minLength", maxLength: "maxLength" }, outputs: { textValueChange: "textValueChange" }, ngImport: i0, template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\" >\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onContentChanged)=\"onEditorChange($event)\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}\n"], dependencies: [{ kind: "component", type: i3$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomRichTextComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-custom-rich-text', template: "<!-- RS 06JAN25 -->\r\n<div class=\"rich-text-container\" >\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onContentChanged)=\"onEditorChange($event)\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}\n"] }]
-        }], ctorParameters: function () { return [{ type: I18nService }, { type: ChangeService }]; }, propDecorators: { value: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], question: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], readOnly: [{
-                type: Input
-            }], textValueChange: [{
-                type: Output
-            }], minLength: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }] } });
-
 class CustomLabelComponent {
     labelValue;
     labelStyle;
@@ -5350,7 +4893,6 @@ class QuestionnaireComponent {
     // UNCONDITIONAL TYPES
     textFlag = false;
     taFlag = false;
-    rtaFlag = false;
     dtFlag = false;
     timeFlag = false;
     dateFlag = false;
@@ -6957,9 +6499,6 @@ class QuestionnaireComponent {
             else if (typ == "Radio") {
                 this.radioFlag = true;
             }
-            else if (typ == "RichTextArea") {
-                this.rtaFlag = true;
-            }
             else if (typ == "Dropdown") {
                 this.dropdownFlag = true;
             }
@@ -7005,9 +6544,6 @@ class QuestionnaireComponent {
             else if (typ == "File") {
                 this.fileFlag = false;
             }
-            else if (typ == "RichTextArea") {
-                this.rtaFlag = false;
-            }
             else if (typ == "DateTime") {
                 this.dtFlag = false;
                 this.dateFlag = false;
@@ -7065,17 +6601,6 @@ class QuestionnaireComponent {
         ques.input = event?.valueObj;
         //ques.input = event; // here when using the ng-select got event as value
     }
-    //  RS 06JAN25
-    // for richtext
-    handleRichTextChange(value) {
-        // this.inpValue = value;
-        // this.clearError(); 
-        console.log('Rich Text Change Captured:', value);
-    }
-    //  childEventCapture(value: string, question: any): void {
-    //   console.log('Rich Text Change Captured:', value);
-    //   question.selectedValue = value;
-    // }
     setSubQuestions(records) {
         // console.log('inside setSubQuestions');
         // console.log(records);
@@ -7649,11 +7174,11 @@ class QuestionnaireComponent {
         return Object.values(item)[0];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: SharedService }, { token: i1.ActivatedRoute }, { token: i6$1.DomSanitizer }, { token: i7.NgxSpinnerService }, { token: i3.UntypedFormBuilder }, { token: i9.DeviceDetectorService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, providers: [ChangeService], usesOnChanges: true, ngImport: i0, template: "<!-- Spinner -->\r\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- custom loader -->\r\n<!-- <app-loader></app-loader> -->\r\n<!-- Back Processing -->\r\n<!-- <div *ngIf=\"backicon == false\" >\r\n  <div class=\"backicon\" >\r\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\r\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\r\n    </button>\r\n  </div>\r\n</div> -->\r\n\r\n<!-- Question Hanlding -->\r\n<!-- VD removed unwanted condition -->\r\n<!-- RS 09DEC24 Changed keys-->\r\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\r\n  <!-- Progress Bar & Title -->\r\n  <div *ngIf=\"questionItem.title\">\r\n    <h1>{{ questionItem?.title }}</h1>\r\n    <div>{{ questionItem?.subTitle }}</div>\r\n  </div>\r\n\r\n  <!-- Progress & Grouping -->\r\n  <div>\r\n    <!-- Pie Chart Progress -->\r\n    <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\r\n      <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n        </circle-progress>\r\n      </div>\r\n    </div>\r\n    <!-- RS 09DEC24 Changed keys-->\r\n    <!-- Show the Group/Module related to the Progress -->\r\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\r\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\r\n      <div class=\"nxt-largeTitle\">\r\n        <h3 class=\"myt-font6 myt-text3\">\r\n          {{ questionItem?.groupName }}\r\n        </h3>\r\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\r\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Question Handling -->\r\n    <!-- VD 10Aug24- question no -->\r\n  <div>\r\n    <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\r\n      <span>{{questionItem?.questionNumber}}.</span>\r\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n       {{questionItem?.questionText}}\r\n      </p>\r\n    </div>\r\n    <!-- Title -->\r\n    <!-- <div *ngIf=\"questionItem.isTitle\">\r\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \r\n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\r\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\r\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\r\n        {{ questionItem?.questionText }}\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\r\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\r\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{ questionItem?.questionText }}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    \r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\r\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\r\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n  </div>\r\n\r\n  <!-- Additional Info -->\r\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\r\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\r\n    <div\r\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\r\n    <div class=\"info-alert ques-alert1\">\r\n      <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\r\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dropdown-->\r\n  <div *ngIf=\"dropdownFlag\" >\r\n    <div class=\"nxt-dis-flex\">\r\n      <select class=\"nxtdropdown\"\r\n        [ngClass]=\"{\r\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\r\n          'custom-select': !qbItem?.progressBar\r\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\r\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\r\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\r\n          {{ opt.value }}\r\n        </option>\r\n        <!-- HA 20DEC23 For Translation -->\r\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n\r\n  <!--VD Radio update -->\r\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\r\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\r\n    <div class=\"nxt-custom-radio-container\">\r\n      <div *ngFor=\"let opt of questionItem.options\" \r\n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\r\n        <input\r\n          type=\"radio\"\r\n          [id]=\"opt.value\"\r\n          [(ngModel)]=\"inpValue\"\r\n          name=\"inpValue\"\r\n          [value]=\"opt.value\"\r\n          (change)=\"optionChange(opt.value)\"\r\n        />\r\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- <div class=\"nxt-dis-flex\">\r\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\r\n        <label class=\"nxt-radiocontainer container myt-font4\">\r\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\r\n            (change)=\"optionChange(opt.value)\" />\r\n          {{ opt.value }}\r\n        </label>\r\n      </div>\r\n    </div> -->\r\n  </div>  \r\n  <!-- Checkbox -->\r\n  <div *ngIf=\"checkboxFlag\" class=\"\">\r\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\r\n      {{ questionItem?.errorMessage }}\r\n    </div>\r\n    <div class=\"nxt-checkbox-container\">\r\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\r\n        <label class=\"nxt-container1\">\r\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\r\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text -->\r\n  <div *ngIf=\"textFlag\">\r\n    <!-- HA 31-JAN-24 To reduce the margin -->\r\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \r\n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : ''\r\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text Area -->\r\n  <div *ngIf=\"taFlag\" >\r\n    <div>\r\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : inpValue?.length > 0 && taFocusOut\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" (focusout)=\"taFocusOut = true\"\r\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- RS 06JAN25 -->\r\n   <!-- for rich text -->\r\n\r\n  <div *ngIf=\"rtaFlag\">\r\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n      <app-custom-rich-text\r\n        [value]=\"inpValue\"\r\n        [question]=\"questionItem\"\r\n        [error]=\"questionItem?.error\"\r\n        (textValueChange)=\"handleRichTextChange($event)\">\r\n      </app-custom-rich-text>\r\n    </div>\r\n  </div>\r\n  \r\n        \r\n  <!-- <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n\r\n    <app-custom-rich-text\r\n      [value]=\"ques.input\"\r\n      [rows]=\"3\"\r\n      [error]=\"ques.error\"                [placeholder]=\"ques.question \" \r\n      (textValueChange)=\"handleRichTextChange($event)\">\r\n    </app-custom-rich-text>\r\n</div> -->\r\n  <!-- CC Number Format -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\r\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\r\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\r\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n  <!-- END-->\r\n\r\n  <!-- AlphaNumeric -->\r\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\r\n    <div style=\"position:relative;\">\r\n      <!-- HA 20DEC23 For Translation -->\r\n      <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Email -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\r\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- DateTime -->\r\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\r\n    <!-- Error Handling -->\r\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n\r\n    <!-- Date -->\r\n    <div *ngIf=\"dateFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <!-- HA 02FEB24 Additional param to update the question -->\r\n          <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, questionItem)\"\r\n            [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\r\n          </my-date-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Time -->\r\n    <div *ngIf=\"timeFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                           dateandTime: !qbItem?.progressBar}\" \r\n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n              (focus)=\"(clearSQError) \">\r\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">HH</option>\r\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n              {{ hour }}\r\n            </option>\r\n          </select>\r\n          <span class=\"colon\"> : </span>\r\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">MM</option>\r\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n              {{ minute }}\r\n            </option>\r\n          </select>\r\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\r\n            <span class=\"colon\"> : </span>\r\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n              <option value=\"AM\">AM</option>\r\n              <option value=\"PM\">PM</option>\r\n            </select>\r\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n      </div>\r\n      <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Attachment / File -->\r\n  <div *ngIf=\"fileFlag\">\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\r\n        <label class=\"picture-upload\" for=\"file-upload\">\r\n          <span class=\"picture-upload-child\">\r\n            <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n          </span>\r\n          <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\r\n            <i class=\"\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        </label>\r\n      </div>\r\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\r\n    </div>\r\n    <ul *ngIf=\"\r\n        attachments?.length > 0 &&\r\n        questionItem?.type === 'File' &&\r\n        !qbItem?.progressBar\r\n      \" class=\"attach-ulist col-md-12\">\r\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n      </li>\r\n    </ul>\r\n\r\n    <!-- Attachment Progress -->\r\n    <div *ngIf=\"qbItem.progressBar\">\r\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\r\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n      </div>\r\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n      \r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\r\n        <label class=\"file-label \">\r\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\r\n            class=\"file-upload-btn\">\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Book -->\r\n  <div *ngIf=\"bookFlag\">\r\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\r\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\r\n            <span>{{ ques?.questionText }}</span>\r\n          </div>\r\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\r\n            <div *ngIf=\"ques.type === 'Date'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <!-- HA 02FEB24 Additional param to update the question -->\r\n                  <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\r\n                    [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\"  (focus)=\"clearError()\" >\r\n                  </my-date-picker>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Time'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                                  dateandTime: !qbItem?.progressBar}\" \r\n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n                      (focus)=\"(clearSQError) \">\r\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">HH</option>\r\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n                      {{ hour }}\r\n                    </option>\r\n                  </select>\r\n                  <span class=\"colon\"> : </span>\r\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">MM</option>\r\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n                      {{ minute }}\r\n                    </option>\r\n                  </select>\r\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\r\n                    <span class=\"colon\"> : </span>\r\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n                      <option value=\"AM\">AM</option>\r\n                      <option value=\"PM\">PM</option>\r\n                    </select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'DateTime'\">\r\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\r\n          </div>\r\n          <!-- VD to show lable-->\r\n          <div *ngIf=\"ques.type === 'Label'\">\r\n            <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n            </app-custom-label>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <label>{{ ques.questionText }}</label>\r\n            <app-custom-input\r\n                  [value]=\"ques?.input\"\r\n                  [question]=\"ques\" \r\n                  [idValue]=\"ques?.trackingId\"\r\n                  [focusEvent]=\"clearSQError(ques?.id)\"\r\n                  [error]=\"ques?.error\"\r\n                  [placeholder]=\"ques?.question\"\r\n                  (inputValue)=\"selectedInput($event,ques)\">\r\n            </app-custom-input>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- for pick location -->\r\n            <!-- HA10012024 Added Api key as input -->\r\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\r\n          </div>\r\n          <!-- for  text area   -->\r\n          <div *ngIf=\"ques.type === 'TextArea'\">\r\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\r\n          </div>\r\n\r\n          <!-- Email -->\r\n          <div *ngIf=\"ques.type === 'Email'\">\r\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n          </div>\r\n\r\n          <div *ngIf=\"ques.type === 'File'\">\r\n            <div *ngIf=\"!qbItem.progressBar\">\r\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\r\n                <span class=\"picture-upload-child\">\r\n                  <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n                </span>\r\n                <span class=\"\r\n                    fa fa-plus fa-2x\r\n                    picture-upload-child\r\n                    pic-upload\r\n                    icolor\r\n                  \">\r\n                  <i class=\"\" aria-hidden=\"true\"></i>\r\n                </span>\r\n              </label>\r\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\r\n            </div>\r\n\r\n            <ul *ngIf=\"\r\n                attachments?.length > 0 &&\r\n                ques.type === 'File' &&\r\n                !qbItem.progressBar\r\n              \" class=\"attach-ulist col-md-12\">\r\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n                {{ attachment.attachmentName\r\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n              </li>\r\n            </ul>\r\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\r\n\r\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n              </div>\r\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"f-Name\">{{ ques?.question }}</span>\r\n                <label class=\"file-label \">\r\n                  <span style=\"color: #c5281c;text-decoration:underline\">\r\n                    {{'attach' | i18n:i18nService.currentLanguage}}\r\n                  </span>\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\r\n                    class=\"file-upload-btn\">\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Table -->\r\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n            <app-custom-table \r\n              [question]=\"ques\"\r\n              (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-table>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\r\n            <!-- for common dropdown -->\r\n            <!-- HA 20DEC23 For Translation -->\r\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\r\n                    [options]=\"ques.options\"\r\n                    [apiMeta]=\"ques.subText\"\r\n                    [id]=\"ques.Name\"\r\n                    [selectedValue]=\"ques.input\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques?.errorMessage\"\r\n                    [error]=\"ques?.error\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-dropdown>\r\n            <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\"  [certified]=\"ques.certifiedFlag\"  [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\r\n            <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n          </div>          \r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!--List start-->\r\n  <div *ngIf=\"listFlag\">\r\n    <div class=\"form-group\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\r\n          <div>\r\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\r\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\r\n             textBox: !qbItem.progressBar\r\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\r\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\r\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"\" *ngIf=\"addFlag\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\r\n         </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--List End-->\r\n\r\n  <!-- Actions -->\r\n  <!-- VD button condition removed-->\r\n  <div class=\"flexer\">\r\n    <!-- Backward / Back -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n     <!--VD disabled -->\r\n    <div class=\"backbutton\" \r\n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-left-bt': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleBackClick()\">\r\n          {{ qbItem?.back }}\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Forward / Next -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div  *ngIf=\"qbItem.next\" >\r\n      <div class=\"nxtbutton\">\r\n         <!--VD disabled -->\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-rusty': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleNextClick()\">\r\n          {{ qbItem.next }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Summary -->\r\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\r\n  <h2>{{this.qbItem.summaryText}}</h2>\r\n  <p>{{this.qbItem.summarySubText}}</p>\r\n</div>\r\n\r\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\r\n              'col-md-12':!qbItem.progressBar\r\n               }\">\r\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \r\n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div *ngFor=\"let qa of summary\">\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\r\n           <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\r\n            </div>\r\n            <!-- VD Question No added -->\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div>\r\n            <div class=\"nxt-answer\" >\r\n                <div *ngIf=\"qa.qTyp === 'File'\">\r\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                  {{ qa.ansValue }}\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\r\n                <div *ngIf=\"qa.qTyp == 'Book'\">\r\n                  <div *ngFor=\"let val of qa.myVal\">\r\n                    <p>{{ val.questionText }}:<span>{{ val.input }}</span></p>\r\n                  </div>\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the value for direct question -->\r\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.questionText }} <span></span>{{ qa.ansValue }}</div>\r\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n                  </button>\r\n                </div>\r\n          </div>\r\n        </div>\r\n        </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\r\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\r\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n      </circle-progress>\r\n      \r\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \r\n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\r\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\r\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <h3 class=\"summary-h\">\r\n        {{ qbItem.summaryText }}\r\n      </h3>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div class=\"summary-groupText myt-font2\">\r\n      <!-- <p>Informe de da\u00F1o</p> -->\r\n    </div>\r\n    <div *ngFor=\"let qa of summary\" >\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div class=\"summary\">\r\n            <!-- <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n            </div>\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div> -->\r\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n              </button>\r\n            </div>\r\n           \r\n            <div class=\"nxt-answer\">\r\n              <div *ngIf=\"qa.qTyp === 'File'\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                {{ qa.ansValue }}\r\n              </div>\r\n              <div *ngIf=\"qa.qTyp != 'File'\">\r\n                {{ qa.ansValue }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\r\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\r\n      <div class=\"col-md-12\">\r\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\r\n          (click)=\"handleCancelClick()\">\r\n          {{ qbItem.cancel }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n\r\n  <!-- Group Actions -->\r\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\r\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \r\n        (click)=\"handleSubmitClick()\">\r\n        {{ qbItem.submit }}\r\n      </button>\r\n    </div>\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\r\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \r\n              (click)=\"handleBackClickNew()\">\r\n        {{ qbItem.edit }}\r\n      </button>\r\n    </div> -->\r\n  </div>\r\n\r\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:-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}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-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}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i12.MyDatePicker, selector: "my-date-picker", inputs: ["placeholder", "locale", "disabled", "options", "defaultMonth", "selDate", "selector"], outputs: ["dateChanged", "inputFieldChanged", "calendarViewChanged", "calendarToggle", "inputFocusBlur"], exportAs: ["mydatepicker"] }, { kind: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: i13.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: ["certified", "JobPerformerCertificates"], outputs: ["flagDropDownChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: QuestionnaireComponent, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, providers: [ChangeService], usesOnChanges: true, ngImport: i0, template: "<!-- Spinner -->\r\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- custom loader -->\r\n<!-- <app-loader></app-loader> -->\r\n<!-- Back Processing -->\r\n<!-- <div *ngIf=\"backicon == false\" >\r\n  <div class=\"backicon\" >\r\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\r\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\r\n    </button>\r\n  </div>\r\n</div> -->\r\n\r\n<!-- Question Hanlding -->\r\n<!-- VD removed unwanted condition -->\r\n<!-- RS 09DEC24 Changed keys-->\r\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\r\n  <!-- Progress Bar & Title -->\r\n  <div *ngIf=\"questionItem.title\">\r\n    <h1>{{ questionItem?.title }}</h1>\r\n    <div>{{ questionItem?.subTitle }}</div>\r\n  </div>\r\n\r\n  <!-- Progress & Grouping -->\r\n  <div>\r\n    <!-- Pie Chart Progress -->\r\n    <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\r\n      <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n        </circle-progress>\r\n      </div>\r\n    </div>\r\n    <!-- RS 09DEC24 Changed keys-->\r\n    <!-- Show the Group/Module related to the Progress -->\r\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\r\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\r\n      <div class=\"nxt-largeTitle\">\r\n        <h3 class=\"myt-font6 myt-text3\">\r\n          {{ questionItem?.groupName }}\r\n        </h3>\r\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\r\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Question Handling -->\r\n    <!-- VD 10Aug24- question no -->\r\n  <div>\r\n    <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\r\n      <span>{{questionItem?.questionNumber}}.</span>\r\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n       {{questionItem?.questionText}}\r\n      </p>\r\n    </div>\r\n    <!-- Title -->\r\n    <!-- <div *ngIf=\"questionItem.isTitle\">\r\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \r\n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\r\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\r\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\r\n        {{ questionItem?.questionText }}\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\r\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\r\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{ questionItem?.questionText }}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    \r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\r\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\r\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n  </div>\r\n\r\n  <!-- Additional Info -->\r\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\r\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\r\n    <div\r\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\r\n    <div class=\"info-alert ques-alert1\">\r\n      <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\r\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dropdown-->\r\n  <div *ngIf=\"dropdownFlag\" >\r\n    <div class=\"nxt-dis-flex\">\r\n      <select class=\"nxtdropdown\"\r\n        [ngClass]=\"{\r\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\r\n          'custom-select': !qbItem?.progressBar\r\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\r\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\r\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\r\n          {{ opt.value }}\r\n        </option>\r\n        <!-- HA 20DEC23 For Translation -->\r\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n\r\n  <!--VD Radio update -->\r\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\r\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\r\n    <div class=\"nxt-custom-radio-container\">\r\n      <div *ngFor=\"let opt of questionItem.options\" \r\n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\r\n        <input\r\n          type=\"radio\"\r\n          [id]=\"opt.value\"\r\n          [(ngModel)]=\"inpValue\"\r\n          name=\"inpValue\"\r\n          [value]=\"opt.value\"\r\n          (change)=\"optionChange(opt.value)\"\r\n        />\r\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- <div class=\"nxt-dis-flex\">\r\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\r\n        <label class=\"nxt-radiocontainer container myt-font4\">\r\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\r\n            (change)=\"optionChange(opt.value)\" />\r\n          {{ opt.value }}\r\n        </label>\r\n      </div>\r\n    </div> -->\r\n  </div>  \r\n  <!-- Checkbox -->\r\n  <div *ngIf=\"checkboxFlag\" class=\"\">\r\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\r\n      {{ questionItem?.errorMessage }}\r\n    </div>\r\n    <div class=\"nxt-checkbox-container\">\r\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\r\n        <label class=\"nxt-container1\">\r\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\r\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text -->\r\n  <div *ngIf=\"textFlag\">\r\n    <!-- HA 31-JAN-24 To reduce the margin -->\r\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \r\n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : ''\r\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text Area -->\r\n  <div *ngIf=\"taFlag\" >\r\n    <div>\r\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : inpValue?.length > 0 && taFocusOut\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" (focusout)=\"taFocusOut = true\"\r\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- CC Number Format -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\r\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\r\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\r\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n  <!-- END-->\r\n\r\n  <!-- AlphaNumeric -->\r\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\r\n    <div style=\"position:relative;\">\r\n      <!-- HA 20DEC23 For Translation -->\r\n      <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Email -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\r\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- DateTime -->\r\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\r\n    <!-- Error Handling -->\r\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n\r\n    <!-- Date -->\r\n    <div *ngIf=\"dateFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <!-- HA 02FEB24 Additional param to update the question -->\r\n          <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, questionItem)\"\r\n            [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\r\n          </my-date-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Time -->\r\n    <div *ngIf=\"timeFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                           dateandTime: !qbItem?.progressBar}\" \r\n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n              (focus)=\"(clearSQError) \">\r\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">HH</option>\r\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n              {{ hour }}\r\n            </option>\r\n          </select>\r\n          <span class=\"colon\"> : </span>\r\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">MM</option>\r\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n              {{ minute }}\r\n            </option>\r\n          </select>\r\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\r\n            <span class=\"colon\"> : </span>\r\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n              <option value=\"AM\">AM</option>\r\n              <option value=\"PM\">PM</option>\r\n            </select>\r\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n      </div>\r\n      <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Attachment / File -->\r\n  <div *ngIf=\"fileFlag\">\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\r\n        <label class=\"picture-upload\" for=\"file-upload\">\r\n          <span class=\"picture-upload-child\">\r\n            <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n          </span>\r\n          <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\r\n            <i class=\"\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        </label>\r\n      </div>\r\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\r\n    </div>\r\n    <ul *ngIf=\"\r\n        attachments?.length > 0 &&\r\n        questionItem?.type === 'File' &&\r\n        !qbItem?.progressBar\r\n      \" class=\"attach-ulist col-md-12\">\r\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n      </li>\r\n    </ul>\r\n\r\n    <!-- Attachment Progress -->\r\n    <div *ngIf=\"qbItem.progressBar\">\r\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\r\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n      </div>\r\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n      \r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\r\n        <label class=\"file-label \">\r\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\r\n            class=\"file-upload-btn\">\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Book -->\r\n  <div *ngIf=\"bookFlag\">\r\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\r\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\r\n            <span>{{ ques?.questionText }}</span>\r\n          </div>\r\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\r\n            <div *ngIf=\"ques.type === 'Date'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <!-- HA 02FEB24 Additional param to update the question -->\r\n                  <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\r\n                    [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\"  (focus)=\"clearError()\" >\r\n                  </my-date-picker>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Time'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                                  dateandTime: !qbItem?.progressBar}\" \r\n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n                      (focus)=\"(clearSQError) \">\r\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">HH</option>\r\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n                      {{ hour }}\r\n                    </option>\r\n                  </select>\r\n                  <span class=\"colon\"> : </span>\r\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">MM</option>\r\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n                      {{ minute }}\r\n                    </option>\r\n                  </select>\r\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\r\n                    <span class=\"colon\"> : </span>\r\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n                      <option value=\"AM\">AM</option>\r\n                      <option value=\"PM\">PM</option>\r\n                    </select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'DateTime'\">\r\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\r\n          </div>\r\n          <!-- VD to show lable-->\r\n          <div *ngIf=\"ques.type === 'Label'\">\r\n            <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n            </app-custom-label>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <label>{{ ques.questionText }}</label>\r\n            <app-custom-input\r\n                  [value]=\"ques?.input\"\r\n                  [question]=\"ques\" \r\n                  [idValue]=\"ques?.trackingId\"\r\n                  [focusEvent]=\"clearSQError(ques?.id)\"\r\n                  [error]=\"ques?.error\"\r\n                  [placeholder]=\"ques?.question\"\r\n                  (inputValue)=\"selectedInput($event,ques)\">\r\n            </app-custom-input>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- for pick location -->\r\n            <!-- HA10012024 Added Api key as input -->\r\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\r\n          </div>\r\n          <!-- for  text area   -->\r\n          <div *ngIf=\"ques.type === 'TextArea'\">\r\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\r\n          </div>\r\n\r\n          <!-- Email -->\r\n          <div *ngIf=\"ques.type === 'Email'\">\r\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n          </div>\r\n\r\n          <div *ngIf=\"ques.type === 'File'\">\r\n            <div *ngIf=\"!qbItem.progressBar\">\r\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\r\n                <span class=\"picture-upload-child\">\r\n                  <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n                </span>\r\n                <span class=\"\r\n                    fa fa-plus fa-2x\r\n                    picture-upload-child\r\n                    pic-upload\r\n                    icolor\r\n                  \">\r\n                  <i class=\"\" aria-hidden=\"true\"></i>\r\n                </span>\r\n              </label>\r\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\r\n            </div>\r\n\r\n            <ul *ngIf=\"\r\n                attachments?.length > 0 &&\r\n                ques.type === 'File' &&\r\n                !qbItem.progressBar\r\n              \" class=\"attach-ulist col-md-12\">\r\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n                {{ attachment.attachmentName\r\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n              </li>\r\n            </ul>\r\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\r\n\r\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n              </div>\r\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"f-Name\">{{ ques?.question }}</span>\r\n                <label class=\"file-label \">\r\n                  <span style=\"color: #c5281c;text-decoration:underline\">\r\n                    {{'attach' | i18n:i18nService.currentLanguage}}\r\n                  </span>\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\r\n                    class=\"file-upload-btn\">\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Table -->\r\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n            <app-custom-table \r\n              [question]=\"ques\"\r\n              (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-table>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\r\n            <!-- for common dropdown -->\r\n            <!-- HA 20DEC23 For Translation -->\r\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\r\n                    [options]=\"ques.options\"\r\n                    [apiMeta]=\"ques.subText\"\r\n                    [id]=\"ques.Name\"\r\n                    [selectedValue]=\"ques.input\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques?.errorMessage\"\r\n                    [error]=\"ques?.error\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-dropdown>\r\n            <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\"  [certified]=\"ques.certifiedFlag\"  [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\r\n            <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n          </div>          \r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!--List start-->\r\n  <div *ngIf=\"listFlag\">\r\n    <div class=\"form-group\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\r\n          <div>\r\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\r\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\r\n             textBox: !qbItem.progressBar\r\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\r\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\r\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"\" *ngIf=\"addFlag\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\r\n         </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--List End-->\r\n\r\n  <!-- Actions -->\r\n  <!-- VD button condition removed-->\r\n  <div class=\"flexer\">\r\n    <!-- Backward / Back -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n     <!--VD disabled -->\r\n    <div class=\"backbutton\" \r\n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-left-bt': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleBackClick()\">\r\n          {{ qbItem?.back }}\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Forward / Next -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div  *ngIf=\"qbItem.next\" >\r\n      <div class=\"nxtbutton\">\r\n         <!--VD disabled -->\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-rusty': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleNextClick()\">\r\n          {{ qbItem.next }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Summary -->\r\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\r\n  <h2>{{this.qbItem.summaryText}}</h2>\r\n  <p>{{this.qbItem.summarySubText}}</p>\r\n</div>\r\n\r\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\r\n              'col-md-12':!qbItem.progressBar\r\n               }\">\r\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \r\n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div *ngFor=\"let qa of summary\">\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\r\n           <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\r\n            </div>\r\n            <!-- VD Question No added -->\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div>\r\n            <div class=\"nxt-answer\" >\r\n                <div *ngIf=\"qa.qTyp === 'File'\">\r\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                  {{ qa.ansValue }}\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\r\n                <div *ngIf=\"qa.qTyp == 'Book'\">\r\n                  <div *ngFor=\"let val of qa.myVal\">\r\n                    <p>{{ val.questionText }}:<span>{{ val.input }}</span></p>\r\n                  </div>\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the value for direct question -->\r\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.questionText }} <span></span>{{ qa.ansValue }}</div>\r\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n                  </button>\r\n                </div>\r\n          </div>\r\n        </div>\r\n        </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\r\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\r\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n      </circle-progress>\r\n      \r\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \r\n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\r\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\r\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <h3 class=\"summary-h\">\r\n        {{ qbItem.summaryText }}\r\n      </h3>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div class=\"summary-groupText myt-font2\">\r\n      <!-- <p>Informe de da\u00F1o</p> -->\r\n    </div>\r\n    <div *ngFor=\"let qa of summary\" >\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div class=\"summary\">\r\n            <!-- <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n            </div>\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div> -->\r\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n              </button>\r\n            </div>\r\n           \r\n            <div class=\"nxt-answer\">\r\n              <div *ngIf=\"qa.qTyp === 'File'\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                {{ qa.ansValue }}\r\n              </div>\r\n              <div *ngIf=\"qa.qTyp != 'File'\">\r\n                {{ qa.ansValue }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\r\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\r\n      <div class=\"col-md-12\">\r\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\r\n          (click)=\"handleCancelClick()\">\r\n          {{ qbItem.cancel }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n\r\n  <!-- Group Actions -->\r\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\r\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \r\n        (click)=\"handleSubmitClick()\">\r\n        {{ qbItem.submit }}\r\n      </button>\r\n    </div>\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\r\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \r\n              (click)=\"handleBackClickNew()\">\r\n        {{ qbItem.edit }}\r\n      </button>\r\n    </div> -->\r\n  </div>\r\n\r\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:-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}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-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}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i12.MyDatePicker, selector: "my-date-picker", inputs: ["placeholder", "locale", "disabled", "options", "defaultMonth", "selDate", "selector"], outputs: ["dateChanged", "inputFieldChanged", "calendarViewChanged", "calendarToggle", "inputFocusBlur"], exportAs: ["mydatepicker"] }, { kind: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: i13.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: DropdownWithFlagComponent, selector: "app-dropdown-with-flag", inputs: ["certified", "JobPerformerCertificates"], outputs: ["flagDropDownChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: QuestionnaireComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-questionnaire", encapsulation: ViewEncapsulation.None, providers: [ChangeService], template: "<!-- Spinner -->\r\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- custom loader -->\r\n<!-- <app-loader></app-loader> -->\r\n<!-- Back Processing -->\r\n<!-- <div *ngIf=\"backicon == false\" >\r\n  <div class=\"backicon\" >\r\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\r\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\r\n    </button>\r\n  </div>\r\n</div> -->\r\n\r\n<!-- Question Hanlding -->\r\n<!-- VD removed unwanted condition -->\r\n<!-- RS 09DEC24 Changed keys-->\r\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\r\n  <!-- Progress Bar & Title -->\r\n  <div *ngIf=\"questionItem.title\">\r\n    <h1>{{ questionItem?.title }}</h1>\r\n    <div>{{ questionItem?.subTitle }}</div>\r\n  </div>\r\n\r\n  <!-- Progress & Grouping -->\r\n  <div>\r\n    <!-- Pie Chart Progress -->\r\n    <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\r\n      <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n        </circle-progress>\r\n      </div>\r\n    </div>\r\n    <!-- RS 09DEC24 Changed keys-->\r\n    <!-- Show the Group/Module related to the Progress -->\r\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\r\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\r\n      <div class=\"nxt-largeTitle\">\r\n        <h3 class=\"myt-font6 myt-text3\">\r\n          {{ questionItem?.groupName }}\r\n        </h3>\r\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\r\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Question Handling -->\r\n    <!-- VD 10Aug24- question no -->\r\n  <div>\r\n    <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\r\n      <span>{{questionItem?.questionNumber}}.</span>\r\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n       {{questionItem?.questionText}}\r\n      </p>\r\n    </div>\r\n    <!-- Title -->\r\n    <!-- <div *ngIf=\"questionItem.isTitle\">\r\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \r\n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\r\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\r\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\r\n        {{ questionItem?.questionText }}\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\r\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\r\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{ questionItem?.questionText }}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    \r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\r\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\r\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n  </div>\r\n\r\n  <!-- Additional Info -->\r\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\r\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\r\n    <div\r\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\r\n    <div class=\"info-alert ques-alert1\">\r\n      <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\r\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dropdown-->\r\n  <div *ngIf=\"dropdownFlag\" >\r\n    <div class=\"nxt-dis-flex\">\r\n      <select class=\"nxtdropdown\"\r\n        [ngClass]=\"{\r\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\r\n          'custom-select': !qbItem?.progressBar\r\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\r\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\r\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\r\n          {{ opt.value }}\r\n        </option>\r\n        <!-- HA 20DEC23 For Translation -->\r\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n\r\n  <!--VD Radio update -->\r\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\r\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\r\n    <div class=\"nxt-custom-radio-container\">\r\n      <div *ngFor=\"let opt of questionItem.options\" \r\n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\r\n        <input\r\n          type=\"radio\"\r\n          [id]=\"opt.value\"\r\n          [(ngModel)]=\"inpValue\"\r\n          name=\"inpValue\"\r\n          [value]=\"opt.value\"\r\n          (change)=\"optionChange(opt.value)\"\r\n        />\r\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- <div class=\"nxt-dis-flex\">\r\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\r\n        <label class=\"nxt-radiocontainer container myt-font4\">\r\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\r\n            (change)=\"optionChange(opt.value)\" />\r\n          {{ opt.value }}\r\n        </label>\r\n      </div>\r\n    </div> -->\r\n  </div>  \r\n  <!-- Checkbox -->\r\n  <div *ngIf=\"checkboxFlag\" class=\"\">\r\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\r\n      {{ questionItem?.errorMessage }}\r\n    </div>\r\n    <div class=\"nxt-checkbox-container\">\r\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\r\n        <label class=\"nxt-container1\">\r\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\r\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text -->\r\n  <div *ngIf=\"textFlag\">\r\n    <!-- HA 31-JAN-24 To reduce the margin -->\r\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \r\n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : ''\r\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text Area -->\r\n  <div *ngIf=\"taFlag\" >\r\n    <div>\r\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : inpValue?.length > 0 && taFocusOut\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" (focusout)=\"taFocusOut = true\"\r\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- RS 06JAN25 -->\r\n   <!-- for rich text -->\r\n\r\n  <div *ngIf=\"rtaFlag\">\r\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n      <app-custom-rich-text\r\n        [value]=\"inpValue\"\r\n        [question]=\"questionItem\"\r\n        [error]=\"questionItem?.error\"\r\n        (textValueChange)=\"handleRichTextChange($event)\">\r\n      </app-custom-rich-text>\r\n    </div>\r\n  </div>\r\n  \r\n        \r\n  <!-- <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n\r\n    <app-custom-rich-text\r\n      [value]=\"ques.input\"\r\n      [rows]=\"3\"\r\n      [error]=\"ques.error\"                [placeholder]=\"ques.question \" \r\n      (textValueChange)=\"handleRichTextChange($event)\">\r\n    </app-custom-rich-text>\r\n</div> -->\r\n  <!-- CC Number Format -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\r\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\r\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\r\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n  <!-- END-->\r\n\r\n  <!-- AlphaNumeric -->\r\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\r\n    <div style=\"position:relative;\">\r\n      <!-- HA 20DEC23 For Translation -->\r\n      <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Email -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\r\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- DateTime -->\r\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\r\n    <!-- Error Handling -->\r\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n\r\n    <!-- Date -->\r\n    <div *ngIf=\"dateFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <!-- HA 02FEB24 Additional param to update the question -->\r\n          <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, questionItem)\"\r\n            [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\r\n          </my-date-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Time -->\r\n    <div *ngIf=\"timeFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                           dateandTime: !qbItem?.progressBar}\" \r\n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n              (focus)=\"(clearSQError) \">\r\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">HH</option>\r\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n              {{ hour }}\r\n            </option>\r\n          </select>\r\n          <span class=\"colon\"> : </span>\r\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">MM</option>\r\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n              {{ minute }}\r\n            </option>\r\n          </select>\r\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\r\n            <span class=\"colon\"> : </span>\r\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n              <option value=\"AM\">AM</option>\r\n              <option value=\"PM\">PM</option>\r\n            </select>\r\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n      </div>\r\n      <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Attachment / File -->\r\n  <div *ngIf=\"fileFlag\">\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\r\n        <label class=\"picture-upload\" for=\"file-upload\">\r\n          <span class=\"picture-upload-child\">\r\n            <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n          </span>\r\n          <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\r\n            <i class=\"\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        </label>\r\n      </div>\r\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\r\n    </div>\r\n    <ul *ngIf=\"\r\n        attachments?.length > 0 &&\r\n        questionItem?.type === 'File' &&\r\n        !qbItem?.progressBar\r\n      \" class=\"attach-ulist col-md-12\">\r\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n      </li>\r\n    </ul>\r\n\r\n    <!-- Attachment Progress -->\r\n    <div *ngIf=\"qbItem.progressBar\">\r\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\r\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n      </div>\r\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n      \r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\r\n        <label class=\"file-label \">\r\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\r\n            class=\"file-upload-btn\">\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Book -->\r\n  <div *ngIf=\"bookFlag\">\r\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\r\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\r\n            <span>{{ ques?.questionText }}</span>\r\n          </div>\r\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\r\n            <div *ngIf=\"ques.type === 'Date'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <!-- HA 02FEB24 Additional param to update the question -->\r\n                  <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\r\n                    [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\"  (focus)=\"clearError()\" >\r\n                  </my-date-picker>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Time'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                                  dateandTime: !qbItem?.progressBar}\" \r\n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n                      (focus)=\"(clearSQError) \">\r\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">HH</option>\r\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n                      {{ hour }}\r\n                    </option>\r\n                  </select>\r\n                  <span class=\"colon\"> : </span>\r\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">MM</option>\r\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n                      {{ minute }}\r\n                    </option>\r\n                  </select>\r\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\r\n                    <span class=\"colon\"> : </span>\r\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n                      <option value=\"AM\">AM</option>\r\n                      <option value=\"PM\">PM</option>\r\n                    </select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'DateTime'\">\r\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\r\n          </div>\r\n          <!-- VD to show lable-->\r\n          <div *ngIf=\"ques.type === 'Label'\">\r\n            <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n            </app-custom-label>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <label>{{ ques.questionText }}</label>\r\n            <app-custom-input\r\n                  [value]=\"ques?.input\"\r\n                  [question]=\"ques\" \r\n                  [idValue]=\"ques?.trackingId\"\r\n                  [focusEvent]=\"clearSQError(ques?.id)\"\r\n                  [error]=\"ques?.error\"\r\n                  [placeholder]=\"ques?.question\"\r\n                  (inputValue)=\"selectedInput($event,ques)\">\r\n            </app-custom-input>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- for pick location -->\r\n            <!-- HA10012024 Added Api key as input -->\r\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\r\n          </div>\r\n          <!-- for  text area   -->\r\n          <div *ngIf=\"ques.type === 'TextArea'\">\r\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\r\n          </div>\r\n\r\n          <!-- Email -->\r\n          <div *ngIf=\"ques.type === 'Email'\">\r\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n          </div>\r\n\r\n          <div *ngIf=\"ques.type === 'File'\">\r\n            <div *ngIf=\"!qbItem.progressBar\">\r\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\r\n                <span class=\"picture-upload-child\">\r\n                  <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n                </span>\r\n                <span class=\"\r\n                    fa fa-plus fa-2x\r\n                    picture-upload-child\r\n                    pic-upload\r\n                    icolor\r\n                  \">\r\n                  <i class=\"\" aria-hidden=\"true\"></i>\r\n                </span>\r\n              </label>\r\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\r\n            </div>\r\n\r\n            <ul *ngIf=\"\r\n                attachments?.length > 0 &&\r\n                ques.type === 'File' &&\r\n                !qbItem.progressBar\r\n              \" class=\"attach-ulist col-md-12\">\r\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n                {{ attachment.attachmentName\r\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n              </li>\r\n            </ul>\r\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\r\n\r\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n              </div>\r\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"f-Name\">{{ ques?.question }}</span>\r\n                <label class=\"file-label \">\r\n                  <span style=\"color: #c5281c;text-decoration:underline\">\r\n                    {{'attach' | i18n:i18nService.currentLanguage}}\r\n                  </span>\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\r\n                    class=\"file-upload-btn\">\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Table -->\r\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n            <app-custom-table \r\n              [question]=\"ques\"\r\n              (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-table>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\r\n            <!-- for common dropdown -->\r\n            <!-- HA 20DEC23 For Translation -->\r\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\r\n                    [options]=\"ques.options\"\r\n                    [apiMeta]=\"ques.subText\"\r\n                    [id]=\"ques.Name\"\r\n                    [selectedValue]=\"ques.input\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques?.errorMessage\"\r\n                    [error]=\"ques?.error\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-dropdown>\r\n            <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\"  [certified]=\"ques.certifiedFlag\"  [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\r\n            <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n          </div>          \r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!--List start-->\r\n  <div *ngIf=\"listFlag\">\r\n    <div class=\"form-group\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\r\n          <div>\r\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\r\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\r\n             textBox: !qbItem.progressBar\r\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\r\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\r\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"\" *ngIf=\"addFlag\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\r\n         </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--List End-->\r\n\r\n  <!-- Actions -->\r\n  <!-- VD button condition removed-->\r\n  <div class=\"flexer\">\r\n    <!-- Backward / Back -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n     <!--VD disabled -->\r\n    <div class=\"backbutton\" \r\n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-left-bt': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleBackClick()\">\r\n          {{ qbItem?.back }}\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Forward / Next -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div  *ngIf=\"qbItem.next\" >\r\n      <div class=\"nxtbutton\">\r\n         <!--VD disabled -->\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-rusty': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleNextClick()\">\r\n          {{ qbItem.next }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Summary -->\r\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\r\n  <h2>{{this.qbItem.summaryText}}</h2>\r\n  <p>{{this.qbItem.summarySubText}}</p>\r\n</div>\r\n\r\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\r\n              'col-md-12':!qbItem.progressBar\r\n               }\">\r\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \r\n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div *ngFor=\"let qa of summary\">\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\r\n           <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\r\n            </div>\r\n            <!-- VD Question No added -->\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div>\r\n            <div class=\"nxt-answer\" >\r\n                <div *ngIf=\"qa.qTyp === 'File'\">\r\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                  {{ qa.ansValue }}\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\r\n                <div *ngIf=\"qa.qTyp == 'Book'\">\r\n                  <div *ngFor=\"let val of qa.myVal\">\r\n                    <p>{{ val.questionText }}:<span>{{ val.input }}</span></p>\r\n                  </div>\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the value for direct question -->\r\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.questionText }} <span></span>{{ qa.ansValue }}</div>\r\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n                  </button>\r\n                </div>\r\n          </div>\r\n        </div>\r\n        </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\r\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\r\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n      </circle-progress>\r\n      \r\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \r\n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\r\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\r\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <h3 class=\"summary-h\">\r\n        {{ qbItem.summaryText }}\r\n      </h3>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div class=\"summary-groupText myt-font2\">\r\n      <!-- <p>Informe de da\u00F1o</p> -->\r\n    </div>\r\n    <div *ngFor=\"let qa of summary\" >\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div class=\"summary\">\r\n            <!-- <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n            </div>\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div> -->\r\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n              </button>\r\n            </div>\r\n           \r\n            <div class=\"nxt-answer\">\r\n              <div *ngIf=\"qa.qTyp === 'File'\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                {{ qa.ansValue }}\r\n              </div>\r\n              <div *ngIf=\"qa.qTyp != 'File'\">\r\n                {{ qa.ansValue }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\r\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\r\n      <div class=\"col-md-12\">\r\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\r\n          (click)=\"handleCancelClick()\">\r\n          {{ qbItem.cancel }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n\r\n  <!-- Group Actions -->\r\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\r\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \r\n        (click)=\"handleSubmitClick()\">\r\n        {{ qbItem.submit }}\r\n      </button>\r\n    </div>\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\r\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \r\n              (click)=\"handleBackClickNew()\">\r\n        {{ qbItem.edit }}\r\n      </button>\r\n    </div> -->\r\n  </div>\r\n\r\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:-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}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-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}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"] }]
+            args: [{ selector: "lib-questionnaire", encapsulation: ViewEncapsulation.None, providers: [ChangeService], template: "<!-- Spinner -->\r\n<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- custom loader -->\r\n<!-- <app-loader></app-loader> -->\r\n<!-- Back Processing -->\r\n<!-- <div *ngIf=\"backicon == false\" >\r\n  <div class=\"backicon\" >\r\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\r\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\r\n    </button>\r\n  </div>\r\n</div> -->\r\n\r\n<!-- Question Hanlding -->\r\n<!-- VD removed unwanted condition -->\r\n<!-- RS 09DEC24 Changed keys-->\r\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\">\r\n  <!-- Progress Bar & Title -->\r\n  <div *ngIf=\"questionItem.title\">\r\n    <h1>{{ questionItem?.title }}</h1>\r\n    <div>{{ questionItem?.subTitle }}</div>\r\n  </div>\r\n\r\n  <!-- Progress & Grouping -->\r\n  <div>\r\n    <!-- Pie Chart Progress -->\r\n    <div [ngClass]=\"{ bgColor: qbItem?.progressBar }\">\r\n      <div id=\"nxt-progress\" *ngIf=\"qbItem?.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n        </circle-progress>\r\n      </div>\r\n    </div>\r\n    <!-- RS 09DEC24 Changed keys-->\r\n    <!-- Show the Group/Module related to the Progress -->\r\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\r\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\r\n      <div class=\"nxt-largeTitle\">\r\n        <h3 class=\"myt-font6 myt-text3\">\r\n          {{ questionItem?.groupName }}\r\n        </h3>\r\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\r\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Question Handling -->\r\n    <!-- VD 10Aug24- question no -->\r\n  <div>\r\n    <div *ngIf=\"questionItem.questionText\" style=\"display: flex;\">\r\n      <span>{{questionItem?.questionNumber}}.</span>\r\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n       {{questionItem?.questionText}}\r\n      </p>\r\n    </div>\r\n    <!-- Title -->\r\n    <!-- <div *ngIf=\"questionItem.isTitle\">\r\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \r\n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\r\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\r\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\r\n        {{ questionItem?.questionText }}\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\r\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\r\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{ questionItem?.questionText }}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n    \r\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\r\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\r\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\r\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\r\n          {{questionItem?.questionText}}\r\n        </h3>\r\n      </div>\r\n    </div> -->\r\n  </div>\r\n\r\n  <!-- Additional Info -->\r\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\r\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\r\n    <div\r\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\r\n    <div class=\"info-alert ques-alert1\">\r\n      <i class=\"fa fa-info fa-3x iposition icolor\" aria-hidden=\"true\"></i>\r\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Dropdown-->\r\n  <div *ngIf=\"dropdownFlag\" >\r\n    <div class=\"nxt-dis-flex\">\r\n      <select class=\"nxtdropdown\"\r\n        [ngClass]=\"{\r\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\r\n          'custom-select': !qbItem?.progressBar\r\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\r\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\r\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\r\n          {{ opt.value }}\r\n        </option>\r\n        <!-- HA 20DEC23 For Translation -->\r\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\r\n      </select>\r\n    </div>\r\n  </div>\r\n\r\n  <!--VD Radio update -->\r\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\r\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\r\n    <div class=\"nxt-custom-radio-container\">\r\n      <div *ngFor=\"let opt of questionItem.options\" \r\n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\r\n        <input\r\n          type=\"radio\"\r\n          [id]=\"opt.value\"\r\n          [(ngModel)]=\"inpValue\"\r\n          name=\"inpValue\"\r\n          [value]=\"opt.value\"\r\n          (change)=\"optionChange(opt.value)\"\r\n        />\r\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- <div class=\"nxt-dis-flex\">\r\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\r\n        <label class=\"nxt-radiocontainer container myt-font4\">\r\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\r\n            (change)=\"optionChange(opt.value)\" />\r\n          {{ opt.value }}\r\n        </label>\r\n      </div>\r\n    </div> -->\r\n  </div>  \r\n  <!-- Checkbox -->\r\n  <div *ngIf=\"checkboxFlag\" class=\"\">\r\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\r\n      {{ questionItem?.errorMessage }}\r\n    </div>\r\n    <div class=\"nxt-checkbox-container\">\r\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\r\n        <label class=\"nxt-container1\">\r\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\r\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text -->\r\n  <div *ngIf=\"textFlag\">\r\n    <!-- HA 31-JAN-24 To reduce the margin -->\r\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\r\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \r\n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : ''\r\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Text Area -->\r\n  <div *ngIf=\"taFlag\" >\r\n    <div>\r\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem?.error\r\n            ? 'red'\r\n            : inpValue?.length > 0 && taFocusOut\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" (focusout)=\"taFocusOut = true\"\r\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\r\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- CC Number Format -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\r\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\r\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\r\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px;\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n  <!-- END-->\r\n\r\n  <!-- AlphaNumeric -->\r\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\r\n    <div style=\"position:relative;\">\r\n      <!-- HA 20DEC23 For Translation -->\r\n      <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Email -->\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\r\n    <div class=\"nxt-dis-flex\">\r\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\r\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\r\n          this.questionItem.error\r\n            ? 'red'\r\n            : inpValue?.length > 0\r\n            ? '#87be1c'\r\n            : ''\r\n        }}\" />\r\n      <i class=\"fa fa-check\" aria-hidden=\"true\" style=\"color: #87be1c; margin-left: -2rem; z-index: 1; padding: 5px\"\r\n        *ngIf=\"inpValue?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- DateTime -->\r\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\r\n    <!-- Error Handling -->\r\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n\r\n    <!-- Date -->\r\n    <div *ngIf=\"dateFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <!-- HA 02FEB24 Additional param to update the question -->\r\n          <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, questionItem)\"\r\n            [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\" (focus)=\"clearError()\">\r\n          </my-date-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Time -->\r\n    <div *ngIf=\"timeFlag\">\r\n      <div class=\"col-md-12 paddingBottom\">\r\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n        <div class=\"nxt-dis-flex\">\r\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                           dateandTime: !qbItem?.progressBar}\" \r\n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n              (focus)=\"(clearSQError) \">\r\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">HH</option>\r\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n              {{ hour }}\r\n            </option>\r\n          </select>\r\n          <span class=\"colon\"> : </span>\r\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n            (focus)=\"clearError()\">\r\n            <option value=\"\">MM</option>\r\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n              {{ minute }}\r\n            </option>\r\n          </select>\r\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\r\n            <span class=\"colon\"> : </span>\r\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n              <option value=\"AM\">AM</option>\r\n              <option value=\"PM\">PM</option>\r\n            </select>\r\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n      </div>\r\n      <i class=\"fa check-icon3\" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Attachment / File -->\r\n  <div *ngIf=\"fileFlag\">\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\r\n        <label class=\"picture-upload\" for=\"file-upload\">\r\n          <span class=\"picture-upload-child\">\r\n            <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n          </span>\r\n          <span class=\"fa fa-plus fa-2x picture-upload-child pic-upload icolor\">\r\n            <i class=\"\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        </label>\r\n      </div>\r\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\r\n    </div>\r\n    <ul *ngIf=\"\r\n        attachments?.length > 0 &&\r\n        questionItem?.type === 'File' &&\r\n        !qbItem?.progressBar\r\n      \" class=\"attach-ulist col-md-12\">\r\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n      </li>\r\n    </ul>\r\n\r\n    <!-- Attachment Progress -->\r\n    <div *ngIf=\"qbItem.progressBar\">\r\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\r\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n      </div>\r\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n      \r\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\r\n        <span class=\"f-Name\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\r\n        <label class=\"file-label \">\r\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\r\n            class=\"file-upload-btn\">\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- RS 09DEC24 Changed keys-->\r\n  <!-- Book -->\r\n  <div *ngIf=\"bookFlag\">\r\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\r\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\r\n            <span>{{ ques?.questionText }}</span>\r\n          </div>\r\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\r\n            <div *ngIf=\"ques.type === 'Date'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <!-- HA 02FEB24 Additional param to update the question -->\r\n                  <my-date-picker name=\"mydate\" [options]=\"myDatePickerOptions\" id=\"date\" style=\"font-size: 18px !important;\" (dateChanged)=\"onDateChanged($event, ques)\"\r\n                    [(ngModel)]=\"selDate\" class=\"date-picker\" placeholder=\"{{'selectDate' | i18n:i18nService.currentLanguage}}\"  (focus)=\"clearError()\" >\r\n                  </my-date-picker>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Time'\">\r\n              <div class=\"col-md-12 paddingBottom\">\r\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\r\n                <div class=\"dateandtime\">\r\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\r\n                                  dateandTime: !qbItem?.progressBar}\" \r\n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\r\n                      (focus)=\"(clearSQError) \">\r\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">HH</option>\r\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\r\n                      {{ hour }}\r\n                    </option>\r\n                  </select>\r\n                  <span class=\"colon\"> : </span>\r\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\r\n                    (focus)=\"clearError()\">\r\n                    <option value=\"\">MM</option>\r\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\r\n                      {{ minute }}\r\n                    </option>\r\n                  </select>\r\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\r\n                    <span class=\"colon\"> : </span>\r\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\r\n                      <option value=\"AM\">AM</option>\r\n                      <option value=\"PM\">PM</option>\r\n                    </select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'DateTime'\">\r\n            <app-custom-date-picker [minDate]=\"ques.minDate\" [date]=\"ques.input\" (dateChange)=\"displayDate($event,ques)\"></app-custom-date-picker>\r\n          </div>\r\n          <!-- VD to show lable-->\r\n          <div *ngIf=\"ques.type === 'Label'\">\r\n            <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n            </app-custom-label>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <label>{{ ques.questionText }}</label>\r\n            <app-custom-input\r\n                  [value]=\"ques?.input\"\r\n                  [question]=\"ques\" \r\n                  [idValue]=\"ques?.trackingId\"\r\n                  [focusEvent]=\"clearSQError(ques?.id)\"\r\n                  [error]=\"ques?.error\"\r\n                  [placeholder]=\"ques?.question\"\r\n                  (inputValue)=\"selectedInput($event,ques)\">\r\n            </app-custom-input>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- for pick location -->\r\n            <!-- HA10012024 Added Api key as input -->\r\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\r\n          </div>\r\n          <!-- for  text area   -->\r\n          <div *ngIf=\"ques.type === 'TextArea'\">\r\n            <app-custom-text-area [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \" (textareaValueChange)=\"handleTextareaValueChange($event)\"></app-custom-text-area>\r\n          </div>\r\n\r\n          <!-- Email -->\r\n          <div *ngIf=\"ques.type === 'Email'\">\r\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n          </div>\r\n\r\n          <div *ngIf=\"ques.type === 'File'\">\r\n            <div *ngIf=\"!qbItem.progressBar\">\r\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\r\n                <span class=\"picture-upload-child\">\r\n                  <i class=\"fa fa-file-image-o fa-5x icolor\" aria-hidden=\"true\"></i>\r\n                </span>\r\n                <span class=\"\r\n                    fa fa-plus fa-2x\r\n                    picture-upload-child\r\n                    pic-upload\r\n                    icolor\r\n                  \">\r\n                  <i class=\"\" aria-hidden=\"true\"></i>\r\n                </span>\r\n              </label>\r\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\r\n            </div>\r\n\r\n            <ul *ngIf=\"\r\n                attachments?.length > 0 &&\r\n                ques.type === 'File' &&\r\n                !qbItem.progressBar\r\n              \" class=\"attach-ulist col-md-12\">\r\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\r\n                {{ attachment.attachmentName\r\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\r\n              </li>\r\n            </ul>\r\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\r\n\r\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\r\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\r\n              </div>\r\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\r\n                <span class=\"f-Name\">{{ ques?.question }}</span>\r\n                <label class=\"file-label \">\r\n                  <span style=\"color: #c5281c;text-decoration:underline\">\r\n                    {{'attach' | i18n:i18nService.currentLanguage}}\r\n                  </span>\r\n                  <!-- HA 20DEC23 For Translation -->\r\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\r\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\r\n                    class=\"file-upload-btn\">\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Table -->\r\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n            <app-custom-table \r\n              [question]=\"ques\"\r\n              (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-table>\r\n          </div>\r\n\r\n          <!-- Dropdown -->\r\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\r\n            <!-- for common dropdown -->\r\n            <!-- HA 20DEC23 For Translation -->\r\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\r\n                    [options]=\"ques.options\"\r\n                    [apiMeta]=\"ques.subText\"\r\n                    [id]=\"ques.Name\"\r\n                    [selectedValue]=\"ques.input\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques?.errorMessage\"\r\n                    [error]=\"ques?.error\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n            </app-custom-dropdown>\r\n            <app-dropdown-with-flag *ngIf=\"ques.isDependentPicklist && !ques.dropDownOnly\"  [certified]=\"ques.certifiedFlag\"  [JobPerformerCertificates]=\"ques.certificateList\" (flagDropDownChange)=\"dependentChange($event)\"></app-dropdown-with-flag>\r\n            <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"questionItem?.input?.length > 0\"></i>\r\n          </div>          \r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!--List start-->\r\n  <div *ngIf=\"listFlag\">\r\n    <div class=\"form-group\">\r\n      <div class=\"form-row\">\r\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\r\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\r\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\r\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\r\n          <div>\r\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\r\n          </div>\r\n          <div *ngIf=\"ques.type === 'Text'\">\r\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\r\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\r\n             textBox: !qbItem.progressBar\r\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\r\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\r\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"\" *ngIf=\"addFlag\">\r\n          <!-- HA 20DEC23 For Translation -->\r\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\"><i class=\"fa fa-plus\" ></i>{{'add' | i18n:i18nService.currentLanguage}}</button>\r\n         </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!--List End-->\r\n\r\n  <!-- Actions -->\r\n  <!-- VD button condition removed-->\r\n  <div class=\"flexer\">\r\n    <!-- Backward / Back -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n     <!--VD disabled -->\r\n    <div class=\"backbutton\" \r\n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-left-bt': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleBackClick()\">\r\n          {{ qbItem?.back }}\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Forward / Next -->\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div  *ngIf=\"qbItem.next\" >\r\n      <div class=\"nxtbutton\">\r\n         <!--VD disabled -->\r\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\r\n            'nxt-rusty': qbItem.progressBar,\r\n            'nxt-btn btn-primary':\r\n              !qbItem.progressBar\r\n          }\" (click)=\"handleNextClick()\">\r\n          {{ qbItem.next }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Summary -->\r\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\r\n  <h2>{{this.qbItem.summaryText}}</h2>\r\n  <p>{{this.qbItem.summarySubText}}</p>\r\n</div>\r\n\r\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\r\n              'col-md-12':!qbItem.progressBar\r\n               }\">\r\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \r\n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div *ngFor=\"let qa of summary\">\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\r\n           <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\r\n            </div>\r\n            <!-- VD Question No added -->\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div>\r\n            <div class=\"nxt-answer\" >\r\n                <div *ngIf=\"qa.qTyp === 'File'\">\r\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                  {{ qa.ansValue }}\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\r\n                <div *ngIf=\"qa.qTyp == 'Book'\">\r\n                  <div *ngFor=\"let val of qa.myVal\">\r\n                    <p>{{ val.questionText }}:<span>{{ val.input }}</span></p>\r\n                  </div>\r\n                </div>\r\n                <!-- HA 02FEB24 Displaying the value for direct question -->\r\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'\">{{ qa.questionText }} <span></span>{{ qa.ansValue }}</div>\r\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n                  </button>\r\n                </div>\r\n          </div>\r\n        </div>\r\n        </div>\r\n    </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\r\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\r\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\r\n        <circle-progress class=\"titlebar\" [percent]=\"this.percent\" [radius]=\"40\" [space]=\"-4\" [outerStrokeWidth]=\"4\"\r\n        [innerStrokeWidth]=\"4\" [outerStrokeColor]=\"'#e0b1b0'\" [innerStrokeColor]=\"'#e7e8ea'\" [animation]=\"true\" [backgroundPadding]= \"0\"\r\n        [backgroundColor]= \"'#dd2e13'\" [backgroundGradientStopColor]=\"'#f9bfbd'\" [titleColor]=\"'#f3eded'\" \r\n        class=\"ng-star-inserted\" [title]=\"this.percent+'%'\" [showSubtitle]=\"false\" [showBackground]=\"true\" [animationDuration]=\"300\"\r\n        [startFromZero]=\"false\" [responsive]=\"false\" >\r\n      </circle-progress>\r\n      \r\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \r\n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\r\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\r\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"!qbItem.progressBar\">\r\n      <h3 class=\"summary-h\">\r\n        {{ qbItem.summaryText }}\r\n      </h3>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\r\n    <div class=\"summary-groupText myt-font2\">\r\n      <!-- <p>Informe de da\u00F1o</p> -->\r\n    </div>\r\n    <div *ngFor=\"let qa of summary\" >\r\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\r\n          <div class=\"summary\">\r\n            <!-- <div *ngIf=\"!qbItem.edit\"\r\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\r\n            </div>\r\n            <div *ngIf=\"qbItem.edit\"\r\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\r\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\r\n                [innerHTML]=\"getText(qa.quesValue)\">\r\n                {{ qa.quesValue }}\r\n              </div>\r\n            </div> -->\r\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\r\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\r\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\r\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\r\n              </button>\r\n            </div>\r\n           \r\n            <div class=\"nxt-answer\">\r\n              <div *ngIf=\"qa.qTyp === 'File'\">\r\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\r\n                {{ qa.ansValue }}\r\n              </div>\r\n              <div *ngIf=\"qa.qTyp != 'File'\">\r\n                {{ qa.ansValue }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\r\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\r\n      <div class=\"col-md-12\">\r\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\r\n          (click)=\"handleCancelClick()\">\r\n          {{ qbItem.cancel }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n\r\n  <!-- Group Actions -->\r\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\r\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \r\n        (click)=\"handleSubmitClick()\">\r\n        {{ qbItem.submit }}\r\n      </button>\r\n    </div>\r\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\r\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\r\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\r\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \r\n              (click)=\"handleBackClickNew()\">\r\n        {{ qbItem.edit }}\r\n      </button>\r\n    </div> -->\r\n  </div>\r\n\r\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:-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}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-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}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"] }]
         }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: SharedService }, { type: i1.ActivatedRoute }, { type: i6$1.DomSanitizer }, { type: i7.NgxSpinnerService }, { type: i3.UntypedFormBuilder }, { type: i9.DeviceDetectorService }, { type: i0.ElementRef }, { type: I18nService }]; }, propDecorators: { qbId: [{
                 type: Input
             }], insuranceStartDate: [{
@@ -8896,6 +8421,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+//import { ComponenthostDirective } from '../../directives/componenthost/componenthost.directive';
+//import { CustomCalendarComponent } from '../../components/custom-calendar/custom-calendar.component';
 class QuestionbookComponent {
     sfService;
     dataService;
@@ -9161,20 +8688,12 @@ class QuestionbookComponent {
             else if (ques.type == 'List') {
                 // VD 20Aug24 handling the list type  handle multiple object values
                 ques.input = this.dataService.getValue(event.valueObj, event.field);
-            } //RS 06JAN25
-            else if (ques.type === 'RichTextArea') {
-                console.log('RichTextArea event:', event);
-                ques.input = event || '';
             }
             else {
                 ques.input = event;
             }
-            //RS 06JAN25
-            // Validate error message - modified to handle rich text
-            const hasError = ques.Error_Message__c && ((ques.type === 'File' && ques.input.length === 0) ||
-                (ques.type === 'RichTextArea' && (!ques.input || ques.input.trim() === '')) ||
-                (ques.type !== 'File' && ques.Type__c !== 'RichTextArea' && !ques.input));
-            ques.error = hasError ? new ErrorWrapper() : null;
+            // validating   error message
+            const hasError = ques.errorMessage && ((ques.type === 'File' && ques.input.length == 0) || (ques.type != 'File' && !ques.input));
             ques.error = hasError ? new ErrorWrapper() : null;
             // Once the right value is stored in ques.input store the ques (with input) in storageService
             this.storageService.update(ques);
@@ -9240,11 +8759,11 @@ class QuestionbookComponent {
         this.isCalendarModalOpen = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: I18nService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\r\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24  Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n    <div class=\"form-row\">\r\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n        <!-- RA09DEC24 Changed keys-->\r\n        <div\r\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n            <!-- Sub Question Label -->\r\n            <!-- HA 20DEC23 Label Style from salesforce -->\r\n            <!-- VD 09May24 is hide field change-->\r\n         <div *ngIf=\"!ques.isHidden\">\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n            </div>\r\n            <!-- VD 20JUN24 - help text changes-->\r\n            <!-- VD 01Aug24 - validation change-->\r\n            <!-- // VD 02Aug24 - label value style-->\r\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" class=\"icon\" [matTooltip]=\"ques?.helpText\">i</div></span>\r\n            </div>\r\n            <!-- // VD 12Jun24 - readonly change-->\r\n            <!-- DateTime -->\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date-picker>\r\n            </div>\r\n \r\n             <!-- Date-->\r\n             <div *ngIf=\"ques.type === 'Date'\">\r\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date>\r\n            </div>\r\n \r\n             <!-- Time-->\r\n             <div *ngIf=\"ques.type === 'Time'\">\r\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-time>\r\n            </div>\r\n           <!-- calendar  -->\r\n            <div *ngIf=\"ques.type === 'Calendar'\">\r\n                <app-custom-calendar\r\n                [question]=\"ques\"\r\n                (eventSelected)=\"getCalendarEvent($event)\"\r\n                (dateSelected)=\"getCurrentCalendar($event)\"\r\n                (openModal)=\"openCalendarModal($event)\"\r\n                (closeModal)=\"closeCalendarModal($event)\"\r\n                ></app-custom-calendar>\r\n                <!-- model used in calendar component -->\r\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n                    [modalTitle]=\"calendarModalTitle\"\r\n                    [isModalOpen]=\"isCalendarModalOpen\"\r\n                    [modalSize]=\"calendarModalSize\"\r\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\r\n                    [modalFooter]=\"modalCalendarModalFooter\"\r\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\r\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n                >\r\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n                </app-custom-model>\r\n            </div>\r\n            <!-- Text -->\r\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n                        textBox: !qbItem.progressBar\r\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n                </app-custom-input>\r\n            </div>\r\n \r\n            <!-- for pick location -->\r\n            <!--   VD 21DEC23 - dependent field change -->\r\n            <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- HA10012024 Added Api key as input -->\r\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n                </app-pick-location>\r\n            </div>\r\n \r\n            <!-- for  text area   -->\r\n            <div *ngIf=\"ques.type === 'TextArea'\">\r\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n            </div>\r\n            <!-- RS 06JAN25 -->\r\n           <!-- for rich text editor -->\r\n<div *ngIf=\"ques.type === 'RichTextArea'\">\r\n    <app-custom-rich-text \r\n        [question]=\"ques\"\r\n        [readOnly]=\"ques.isReadOnly\"\r\n        [value]=\"ques.input || ''\"\r\n        [error]=\"ques.error\"\r\n        [placeholder]=\"ques.question\"\r\n        (textValueChange)=\"childEventCapture($event, ques)\">\r\n    </app-custom-rich-text>\r\n</div>\r\n\r\n            <!-- Email -->\r\n            <div *ngIf=\"ques.type === 'Email'\">\r\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n            </div>\r\n \r\n            <!-- Table -->\r\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-table>\r\n            </div>\r\n \r\n              <!-- Table Appendix -->\r\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-table-appendix>\r\n            </div>\r\n             <!-- list -->\r\n             <!-- VD 20Aug24 used correct attribute -->\r\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\r\n                </lib-search-box>\r\n            </div>\r\n \r\n            <!-- Dropdown -->\r\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n            <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n                <app-custom-dropdown [options]=\"ques.options\"\r\n                    [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n                    [selectedValue]=\"ques.selectedValue\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [question]=\"ques\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-dropdown>\r\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n            </div>\r\n            <!-- // VD 02Aug24 custom-radio component -->\r\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-radio>\r\n            </div>\r\n \r\n            <!-- Attachment / Files -->\r\n            <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n                </app-dependent-table>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n                </app-custom-label>\r\n            </div>\r\n             <!-- // VD 02Aug24 image component -->\r\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n                <app-custom-image [question]=\"ques\">\r\n                </app-custom-image>\r\n            </div>\r\n            <!-- 08NOV23 - button type question added -->\r\n             <!-- Button -->\r\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n                <app-custom-button [height]=\"'50px'\"\r\n                [width]=\"'150px'\"\r\n                [buttonText]=\"ques?.question\"\r\n                [value]=\"ques?.question\"\r\n                (buttonValue)=\"childEventCapture($event, ques)\"\r\n                >\r\n                </app-custom-button>\r\n            </div>\r\n            <!-- HA 20DEC23  This is to load book type questions-->\r\n            <div *ngIf=\"ques.type === 'Book'\">\r\n                <!-- HA 09FEB24 Added ternary operator -->\r\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n         </div>\r\n        </div>\r\n    </div>\r\n  <!-- 06-09-24 for calendar type-->\r\n<!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly", "error", "errorMessage"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly", "error", "errorMessage"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomImageComponent, selector: "app-custom-image", inputs: ["alt", "src", "imageStyle", "question"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\r\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24  Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n    <div class=\"form-row\">\r\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n        <!-- RA09DEC24 Changed keys-->\r\n        <div\r\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n            <!-- Sub Question Label -->\r\n            <!-- HA 20DEC23 Label Style from salesforce -->\r\n            <!-- VD 09May24 is hide field change-->\r\n         <div *ngIf=\"!ques.isHidden\">\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n            </div>\r\n            <!-- VD 20JUN24 - help text changes-->\r\n            <!-- VD 01Aug24 - validation change-->\r\n            <!-- // VD 02Aug24 - label value style-->\r\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" class=\"icon\" [matTooltip]=\"ques?.helpText\">i</div></span>\r\n            </div>\r\n            <!-- // VD 12Jun24 - readonly change-->\r\n            <!-- DateTime -->\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date-picker>\r\n            </div>\r\n \r\n             <!-- Date-->\r\n             <div *ngIf=\"ques.type === 'Date'\">\r\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date>\r\n            </div>\r\n \r\n             <!-- Time-->\r\n             <div *ngIf=\"ques.type === 'Time'\">\r\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-time>\r\n            </div>\r\n           <!-- calendar  -->\r\n            <div *ngIf=\"ques.type === 'Calendar'\">\r\n                <app-custom-calendar\r\n                [question]=\"ques\"\r\n                (eventSelected)=\"getCalendarEvent($event)\"\r\n                (dateSelected)=\"getCurrentCalendar($event)\"\r\n                (openModal)=\"openCalendarModal($event)\"\r\n                (closeModal)=\"closeCalendarModal($event)\"\r\n                ></app-custom-calendar>\r\n                <!-- model used in calendar component -->\r\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n                    [modalTitle]=\"calendarModalTitle\"\r\n                    [isModalOpen]=\"isCalendarModalOpen\"\r\n                    [modalSize]=\"calendarModalSize\"\r\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\r\n                    [modalFooter]=\"modalCalendarModalFooter\"\r\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\r\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n                >\r\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n                </app-custom-model>\r\n            </div>\r\n            <!-- Text -->\r\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n                        textBox: !qbItem.progressBar\r\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n                </app-custom-input>\r\n            </div>\r\n \r\n            <!-- for pick location -->\r\n            <!--   VD 21DEC23 - dependent field change -->\r\n            <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- HA10012024 Added Api key as input -->\r\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n                </app-pick-location>\r\n            </div>\r\n \r\n            <!-- for  text area   -->\r\n            <div *ngIf=\"ques.type === 'TextArea'\">\r\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n            </div>\r\n \r\n            <!-- Email -->\r\n            <div *ngIf=\"ques.type === 'Email'\">\r\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n            </div>\r\n \r\n            <!-- Table -->\r\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-table>\r\n            </div>\r\n \r\n              <!-- Table Appendix -->\r\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-table-appendix>\r\n            </div>\r\n             <!-- list -->\r\n             <!-- VD 20Aug24 used correct attribute -->\r\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\r\n                </lib-search-box>\r\n            </div>\r\n \r\n            <!-- Dropdown -->\r\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n            <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n                <app-custom-dropdown [options]=\"ques.options\"\r\n                    [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n                    [selectedValue]=\"ques.selectedValue\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [question]=\"ques\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-dropdown>\r\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n            </div>\r\n            <!-- // VD 02Aug24 custom-radio component -->\r\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-radio>\r\n            </div>\r\n \r\n            <!-- Attachment / Files -->\r\n            <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n                </app-dependent-table>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n                </app-custom-label>\r\n            </div>\r\n             <!-- // VD 02Aug24 image component -->\r\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n                <app-custom-image [question]=\"ques\">\r\n                </app-custom-image>\r\n            </div>\r\n            <!-- 08NOV23 - button type question added -->\r\n             <!-- Button -->\r\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n                <app-custom-button [height]=\"'50px'\"\r\n                [width]=\"'150px'\"\r\n                [buttonText]=\"ques?.question\"\r\n                [value]=\"ques?.question\"\r\n                (buttonValue)=\"childEventCapture($event, ques)\"\r\n                >\r\n                </app-custom-button>\r\n            </div>\r\n            <!-- HA 20DEC23  This is to load book type questions-->\r\n            <div *ngIf=\"ques.type === 'Book'\">\r\n                <!-- HA 09FEB24 Added ternary operator -->\r\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n         </div>\r\n        </div>\r\n    </div>\r\n  <!-- 06-09-24 for calendar type-->\r\n<!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly", "error", "errorMessage"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly", "error", "errorMessage"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomImageComponent, selector: "app-custom-image", inputs: ["alt", "src", "imageStyle", "question"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: QuestionbookComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\r\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24  Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n    <div class=\"form-row\">\r\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n        <!-- RA09DEC24 Changed keys-->\r\n        <div\r\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n            <!-- Sub Question Label -->\r\n            <!-- HA 20DEC23 Label Style from salesforce -->\r\n            <!-- VD 09May24 is hide field change-->\r\n         <div *ngIf=\"!ques.isHidden\">\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n            </div>\r\n            <!-- VD 20JUN24 - help text changes-->\r\n            <!-- VD 01Aug24 - validation change-->\r\n            <!-- // VD 02Aug24 - label value style-->\r\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" class=\"icon\" [matTooltip]=\"ques?.helpText\">i</div></span>\r\n            </div>\r\n            <!-- // VD 12Jun24 - readonly change-->\r\n            <!-- DateTime -->\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date-picker>\r\n            </div>\r\n \r\n             <!-- Date-->\r\n             <div *ngIf=\"ques.type === 'Date'\">\r\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date>\r\n            </div>\r\n \r\n             <!-- Time-->\r\n             <div *ngIf=\"ques.type === 'Time'\">\r\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-time>\r\n            </div>\r\n           <!-- calendar  -->\r\n            <div *ngIf=\"ques.type === 'Calendar'\">\r\n                <app-custom-calendar\r\n                [question]=\"ques\"\r\n                (eventSelected)=\"getCalendarEvent($event)\"\r\n                (dateSelected)=\"getCurrentCalendar($event)\"\r\n                (openModal)=\"openCalendarModal($event)\"\r\n                (closeModal)=\"closeCalendarModal($event)\"\r\n                ></app-custom-calendar>\r\n                <!-- model used in calendar component -->\r\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n                    [modalTitle]=\"calendarModalTitle\"\r\n                    [isModalOpen]=\"isCalendarModalOpen\"\r\n                    [modalSize]=\"calendarModalSize\"\r\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\r\n                    [modalFooter]=\"modalCalendarModalFooter\"\r\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\r\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n                >\r\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n                </app-custom-model>\r\n            </div>\r\n            <!-- Text -->\r\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n                        textBox: !qbItem.progressBar\r\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n                </app-custom-input>\r\n            </div>\r\n \r\n            <!-- for pick location -->\r\n            <!--   VD 21DEC23 - dependent field change -->\r\n            <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- HA10012024 Added Api key as input -->\r\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n                </app-pick-location>\r\n            </div>\r\n \r\n            <!-- for  text area   -->\r\n            <div *ngIf=\"ques.type === 'TextArea'\">\r\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n            </div>\r\n            <!-- RS 06JAN25 -->\r\n           <!-- for rich text editor -->\r\n<div *ngIf=\"ques.type === 'RichTextArea'\">\r\n    <app-custom-rich-text \r\n        [question]=\"ques\"\r\n        [readOnly]=\"ques.isReadOnly\"\r\n        [value]=\"ques.input || ''\"\r\n        [error]=\"ques.error\"\r\n        [placeholder]=\"ques.question\"\r\n        (textValueChange)=\"childEventCapture($event, ques)\">\r\n    </app-custom-rich-text>\r\n</div>\r\n\r\n            <!-- Email -->\r\n            <div *ngIf=\"ques.type === 'Email'\">\r\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n            </div>\r\n \r\n            <!-- Table -->\r\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-table>\r\n            </div>\r\n \r\n              <!-- Table Appendix -->\r\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-table-appendix>\r\n            </div>\r\n             <!-- list -->\r\n             <!-- VD 20Aug24 used correct attribute -->\r\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\r\n                </lib-search-box>\r\n            </div>\r\n \r\n            <!-- Dropdown -->\r\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n            <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n                <app-custom-dropdown [options]=\"ques.options\"\r\n                    [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n                    [selectedValue]=\"ques.selectedValue\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [question]=\"ques\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-dropdown>\r\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n            </div>\r\n            <!-- // VD 02Aug24 custom-radio component -->\r\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-radio>\r\n            </div>\r\n \r\n            <!-- Attachment / Files -->\r\n            <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n                </app-dependent-table>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n                </app-custom-label>\r\n            </div>\r\n             <!-- // VD 02Aug24 image component -->\r\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n                <app-custom-image [question]=\"ques\">\r\n                </app-custom-image>\r\n            </div>\r\n            <!-- 08NOV23 - button type question added -->\r\n             <!-- Button -->\r\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n                <app-custom-button [height]=\"'50px'\"\r\n                [width]=\"'150px'\"\r\n                [buttonText]=\"ques?.question\"\r\n                [value]=\"ques?.question\"\r\n                (buttonValue)=\"childEventCapture($event, ques)\"\r\n                >\r\n                </app-custom-button>\r\n            </div>\r\n            <!-- HA 20DEC23  This is to load book type questions-->\r\n            <div *ngIf=\"ques.type === 'Book'\">\r\n                <!-- HA 09FEB24 Added ternary operator -->\r\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n         </div>\r\n        </div>\r\n    </div>\r\n  <!-- 06-09-24 for calendar type-->\r\n<!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"] }]
+            args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\r\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24  Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n    <div class=\"form-row\">\r\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n        <!-- RA09DEC24 Changed keys-->\r\n        <div\r\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n            <!-- Sub Question Label -->\r\n            <!-- HA 20DEC23 Label Style from salesforce -->\r\n            <!-- VD 09May24 is hide field change-->\r\n         <div *ngIf=\"!ques.isHidden\">\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n            </div>\r\n            <!-- VD 20JUN24 - help text changes-->\r\n            <!-- VD 01Aug24 - validation change-->\r\n            <!-- // VD 02Aug24 - label value style-->\r\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" class=\"icon\" [matTooltip]=\"ques?.helpText\">i</div></span>\r\n            </div>\r\n            <!-- // VD 12Jun24 - readonly change-->\r\n            <!-- DateTime -->\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date-picker>\r\n            </div>\r\n \r\n             <!-- Date-->\r\n             <div *ngIf=\"ques.type === 'Date'\">\r\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date>\r\n            </div>\r\n \r\n             <!-- Time-->\r\n             <div *ngIf=\"ques.type === 'Time'\">\r\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-time>\r\n            </div>\r\n           <!-- calendar  -->\r\n            <div *ngIf=\"ques.type === 'Calendar'\">\r\n                <app-custom-calendar\r\n                [question]=\"ques\"\r\n                (eventSelected)=\"getCalendarEvent($event)\"\r\n                (dateSelected)=\"getCurrentCalendar($event)\"\r\n                (openModal)=\"openCalendarModal($event)\"\r\n                (closeModal)=\"closeCalendarModal($event)\"\r\n                ></app-custom-calendar>\r\n                <!-- model used in calendar component -->\r\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n                    [modalTitle]=\"calendarModalTitle\"\r\n                    [isModalOpen]=\"isCalendarModalOpen\"\r\n                    [modalSize]=\"calendarModalSize\"\r\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\r\n                    [modalFooter]=\"modalCalendarModalFooter\"\r\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\r\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n                >\r\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n                </app-custom-model>\r\n            </div>\r\n            <!-- Text -->\r\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n                        textBox: !qbItem.progressBar\r\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n                </app-custom-input>\r\n            </div>\r\n \r\n            <!-- for pick location -->\r\n            <!--   VD 21DEC23 - dependent field change -->\r\n            <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- HA10012024 Added Api key as input -->\r\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n                </app-pick-location>\r\n            </div>\r\n \r\n            <!-- for  text area   -->\r\n            <div *ngIf=\"ques.type === 'TextArea'\">\r\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n            </div>\r\n \r\n            <!-- Email -->\r\n            <div *ngIf=\"ques.type === 'Email'\">\r\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n            </div>\r\n \r\n            <!-- Table -->\r\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-table>\r\n            </div>\r\n \r\n              <!-- Table Appendix -->\r\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-table-appendix>\r\n            </div>\r\n             <!-- list -->\r\n             <!-- VD 20Aug24 used correct attribute -->\r\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\r\n                </lib-search-box>\r\n            </div>\r\n \r\n            <!-- Dropdown -->\r\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n            <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n                <app-custom-dropdown [options]=\"ques.options\"\r\n                    [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n                    [selectedValue]=\"ques.selectedValue\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [question]=\"ques\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-dropdown>\r\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n            </div>\r\n            <!-- // VD 02Aug24 custom-radio component -->\r\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-radio>\r\n            </div>\r\n \r\n            <!-- Attachment / Files -->\r\n            <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n                </app-dependent-table>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n                </app-custom-label>\r\n            </div>\r\n             <!-- // VD 02Aug24 image component -->\r\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n                <app-custom-image [question]=\"ques\">\r\n                </app-custom-image>\r\n            </div>\r\n            <!-- 08NOV23 - button type question added -->\r\n             <!-- Button -->\r\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n                <app-custom-button [height]=\"'50px'\"\r\n                [width]=\"'150px'\"\r\n                [buttonText]=\"ques?.question\"\r\n                [value]=\"ques?.question\"\r\n                (buttonValue)=\"childEventCapture($event, ques)\"\r\n                >\r\n                </app-custom-button>\r\n            </div>\r\n            <!-- HA 20DEC23  This is to load book type questions-->\r\n            <div *ngIf=\"ques.type === 'Book'\">\r\n                <!-- HA 09FEB24 Added ternary operator -->\r\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n         </div>\r\n        </div>\r\n    </div>\r\n  <!-- 06-09-24 for calendar type-->\r\n<!-- <ng-template dynamicComponentHost></ng-template> -->", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"] }]
         }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: I18nService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -9550,13 +9069,13 @@ class BookletComponent {
     // HA 18-JAN-24 handleCompleteBooklet is to simplify the logic
     handleCompleteBooklet(completeBooklet) {
         if (Object.keys(completeBooklet?.bookQuestionsMap ?? {}).length === 0) { // HA 11-JAN-24 If condition to load booklet
-            this.handleBook(completeBooklet?.questionbook?.subQuestions);
+            this.handleBook(completeBooklet?.questionbook?.Questions__r);
         }
         else { // HA 11-JAN-24 To load book questions
             for (const key in completeBooklet.bookQuestionsMap) {
                 const val = completeBooklet.bookQuestionsMap[key];
                 if (val.type === 'Book') {
-                    this.handleBook(val.subQuestions);
+                    this.handleBook(val.Questions__r);
                 }
                 else {
                     this.handleQues(val);
@@ -9567,7 +9086,7 @@ class BookletComponent {
     // HA 11-JAN-24 handleBook loads the Book
     // RS 09DEC24 Changed keys
     handleBook(quesList) {
-        quesList?.forEach(element => {
+        quesList?.records.forEach(element => {
             if (element.type === 'Book') {
                 // HA 24JAN24 Fetching from QB reference
                 var book = JSON.parse(element.qbReferenceQuestions);
@@ -10148,7 +9667,6 @@ class NxtAppModule {
             DropdownWithFlagComponent,
             CustomDropdownComponent,
             BookletComponent,
-            CustomRichTextComponent,
             SearchBoxComponent,
             QuestionbookComponent,
             FileUploadComponent,
@@ -10165,10 +9683,7 @@ class NxtAppModule {
             I18nComponent,
             I18nPipe,
             CustomImageComponent,
-            CustomRadioComponent], imports: [i3$1.QuillModule, // RS 06JAN2025 Initializes the QuillModule with default settings for integrating the Quill editor.
-            CommonModule, FormsModule,
-            BrowserModule,
-            ReactiveFormsModule,
+            CustomRadioComponent], imports: [CommonModule, FormsModule,
             MyDatePickerModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
@@ -10182,7 +9697,7 @@ class NxtAppModule {
             //  apiKey: GOOGLE_MAP_API_KEY,
             //  libraries: ['geometry', 'places', 'visualization', 'drawing']
             //  }),
-            NgxSpinnerModule, I18nModule, i13.NgCircleProgressModule], exports: [NxtAppComponent,
+            ReactiveFormsModule, NgxSpinnerModule, I18nModule, i13.NgCircleProgressModule], exports: [NxtAppComponent,
             QuestionnaireComponent,
             BookletComponent,
             SummaryPageComponent,
@@ -10191,10 +9706,7 @@ class NxtAppModule {
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NxtAppModule, providers: [
             I18nService,
             I18nPipe
-        ], imports: [QuillModule.forRoot(),
-            CommonModule, FormsModule,
-            BrowserModule,
-            ReactiveFormsModule,
+        ], imports: [CommonModule, FormsModule,
             MyDatePickerModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
@@ -10206,7 +9718,7 @@ class NxtAppModule {
             //  apiKey: GOOGLE_MAP_API_KEY,
             //  libraries: ['geometry', 'places', 'visualization', 'drawing']
             //  }),
-            NgxSpinnerModule,
+            ReactiveFormsModule, NgxSpinnerModule,
             I18nModule.forRoot(languages),
             /*NgCircleProgressModule.forRoot({
               "backgroundPadding": -10,
@@ -10300,7 +9812,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         DropdownWithFlagComponent,
                         CustomDropdownComponent,
                         BookletComponent,
-                        CustomRichTextComponent,
                         SearchBoxComponent,
                         QuestionbookComponent,
                         FileUploadComponent,
@@ -10320,10 +9831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         CustomRadioComponent
                     ],
                     imports: [
-                        QuillModule.forRoot(),
                         CommonModule, FormsModule,
-                        BrowserModule,
-                        ReactiveFormsModule,
                         MyDatePickerModule,
                         OwlDateTimeModule,
                         OwlNativeDateTimeModule,
@@ -10337,7 +9845,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         //  apiKey: GOOGLE_MAP_API_KEY,
                         //  libraries: ['geometry', 'places', 'visualization', 'drawing']
                         //  }),
-                        NgxSpinnerModule,
+                        ReactiveFormsModule, NgxSpinnerModule,
                         I18nModule.forRoot(languages),
                         /*NgCircleProgressModule.forRoot({
                           "backgroundPadding": -10,
@@ -10424,7 +9932,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         SummaryPageComponent,
                         I18nPipe,
                         I18nComponent,
-                        // CustomRichTextComponent
                     ],
                     providers: [
                         I18nService,