npm - tango-app-ui-analyse-trax - Versions diffs - 3.3.1-alpha-task.66 → 3.3.1-alpha-task.67 - Mend

tango-app-ui-analyse-trax 3.3.1-alpha-task.66 → 3.3.1-alpha-task.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/fesm2022/tango-app-ui-analyse-trax.mjs CHANGED Viewed

@@ -153,6 +153,18 @@ class TraxService {
     getchecklist(data) {
         return this.http.post(`${this.galleryApiUrl}/getchecklist`, data);
     }
+    getTaskList(data) {
+        return this.http.post(`${this.traxTaskUrl}/taskDropdown`, data);
+    }
+    getQuestions(data) {
+        return this.http.post(`${this.traxTaskUrl}/getQuestions`, data);
+    }
+    getAnswers(data) {
+        return this.http.post(`${this.traxTaskUrl}/getAnswers`, data);
+    }
+    getAnswercount(data) {
+        return this.http.post(`${this.traxTaskUrl}/getAnswerount`, data);
+    }
     getMobUsagelist(data) {
         return this.http.post(`${this.galleryApiUrl}/getMobileUseagelist`, data);
     }
@@ -270,6 +282,18 @@ class TraxService {
         return this.http
             .post(`${this.traxUrl}/flag/flagChecklistTableV1`, body);
     }
+    CreatechecklistTask(body) {
+        return this.http
+            .post(`${this.traxTaskUrl}/checklistTask`, body);
+    }
+    redoTaskchecklist(body) {
+        return this.http
+            .post(`${this.galleryApiUrl}/redo`, body);
+    }
+    redoTask(body) {
+        return this.http
+            .post(`${this.traxTaskUrl}/redo`, body);
+    }
     exportChecklistFlagTable(body) {
         return this.http
             .post(`${this.traxUrl}/flag/flagChecklistTableV1`, body, { responseType: 'arraybuffer' });
@@ -4464,6 +4488,8 @@ class ExportGalleryComponent {
     }
     cancel() {
         this.activeModal.close('close');
+        const triggerButton = document.querySelector('#triggerButtonId');
+        triggerButton?.focus();
     }
     onSubmit() {
         this.traxService.reportTableExport(this.payload)?.pipe(takeUntil(this.destroy$))?.subscribe({
@@ -4807,15 +4833,16 @@ const time_question_template$1 = {
 dayjs.extend(utc);
 class AddTaskComponent {
     fb;
+    activeModal;
     gs;
     traxService;
     cd;
-    activeModal;
+    modalService;
     router;
     toastService;
-    elRef;
     taskForm;
     type;
+    sourceCheckList_id;
     headerData;
     answerTypes = [
         { label: 'Descriptive Answer', value: 'descriptive' },
@@ -4840,18 +4867,22 @@ class AddTaskComponent {
     destroy$ = new Subject();
     taskDetails;
     inputData;
+    checklistInfo;
+    storeProfile;
+    sectionInfo;
+    operationtype;
     timeDetails = [{ id: '00:00', text: "00:00" }, { id: '00:30', text: "00:30" }, { id: '01:00', text: "01:00" }, { id: '01:30', text: "01:30" }, { id: '02:00', text: "02:00" }, { id: '02:30', text: "02:30" }, { id: '03:00', text: "03:00" }, { id: '03:30', text: "03:30" }, { id: '04:00', text: "04:00" }, { id: '04:30', text: "04:30" }, { id: '05:00', text: "05:00" }, { id: '05:30', text: "05:30" }, { id: '06:00', text: "06:00" }, { id: '06:30', text: "06:30" }, { id: '07:00', text: "07:00" }, { id: '07:30', text: "07:30" }, { id: '08:00', text: "08:00" }, { id: '08:30', text: "08:30" }, { id: '09:00', text: "09:00" }, { id: '09:30', text: "09:30" }, { id: '10:00', text: "10:00" }, { id: '10:30', text: "10:30" },
         { id: '11:00', text: "11:00" }, { id: '11:30', text: "11:30" }, { id: '12:00', text: "12:00" }, { id: '12:30', text: "12:30" }, { id: '13:00', text: "13:00" }, { id: '13:30', text: "13:30" }, { id: '14:00', text: "14:00" }, { id: '14:30', text: "14:30" }, { id: '15:00', text: "15:00" }, { id: '15:30', text: "15:30" }, { id: '16:00', text: "16:00" }, { id: '16:30', text: "16:30" }, { id: '17:00', text: "17:00" }, { id: '17:30', text: "17:30" }, { id: '18:00', text: "18:00" }, { id: '18:30', text: "18:30" }, { id: '19:00', text: "19:00" }, { id: '19:30', text: "19:30" }, { id: '20:00', text: "20:00" }, { id: '20:30', text: "20:30" }, { id: '21:00', text: "21:00" }, { id: '21:30', text: "21:30" }, { id: '22:00', text: "22:00" }, { id: '22:30', text: "22:30" }, { id: '23:00', text: "23:00" }, { id: '23:30', text: "23:30" }, { id: '24:00', text: "24:00" }
     ];
-    constructor(fb, gs, traxService, cd, activeModal, router, toastService, elRef) {
+    constructor(fb, activeModal, gs, traxService, cd, modalService, router, toastService) {
         this.fb = fb;
+        this.activeModal = activeModal;
         this.gs = gs;
         this.traxService = traxService;
         this.cd = cd;
-        this.activeModal = activeModal;
+        this.modalService = modalService;
         this.router = router;
         this.toastService = toastService;
-        this.elRef = elRef;
         this.headerData = JSON.parse(localStorage.getItem('header-filters'));
     }
     ngOnInit() {
@@ -4873,8 +4904,6 @@ class AddTaskComponent {
         });
         for (let i = 0; i < this.taskDetails?.sections?.length; i++) {
             this.addSectionForm(this.taskDetails.sections[i]);
-            console.log(this.taskDetails.sections[i]);
-            console.log(this.taskDetails.sections[i]?.questions);
             for (let j = 0; j < this.taskDetails.sections[i]?.questions?.length; j++) {
                 this.addQuestionForm(this.taskDetails.sections[i]?.questions[j], i);
                 for (let k = 0; k < this.taskDetails.sections[i]?.questions[j]?.answers?.length; k++) {
@@ -4884,9 +4913,85 @@ class AddTaskComponent {
         }
     }
     cancel() {
-        this.activeModal.close('cancel');
+        this.activeModal.close('submit');
+        const triggerButton = document.querySelector('#triggerButtonId');
+        triggerButton?.focus();
     }
     onSubmit() {
+        let response = this.taskForm.value.sections;
+        const time = dayjs(this.selectedItem, "HH:mm");
+        if (this.type === 'redo') {
+            let input = {
+                "payload": {
+                    "_id": this.checklistInfo.checklistId,
+                    "section_id": this.sectionInfo.section_id,
+                    "qno": response[0].questions[0].qno
+                },
+                "upsert": {
+                    "redoStatus": true,
+                    "redo": true
+                }
+            };
+            if (this.operationtype == 'task') {
+                this.traxService.redoTask(input).pipe(takeUntil(this.destroy$)).subscribe({
+                    next: (res) => {
+                        if (res.code === 200) {
+                            this.toastService.getSuccessToast(res?.message);
+                            this.activeModal.close('submit');
+                        }
+                    }
+                });
+            }
+            else {
+                this.traxService.redoTaskchecklist(input).pipe(takeUntil(this.destroy$)).subscribe({
+                    next: (res) => {
+                        if (res.code === 200) {
+                            this.toastService.getSuccessToast(res?.message);
+                            this.activeModal.close('submit');
+                        }
+                    }
+                });
+            }
+        }
+        else {
+            let payload = {
+                "checkListName": this.taskForm.value.checklistName,
+                "checkListDescription": this.taskForm.value.checklistDescription,
+                "processedChecklistId": this.checklistInfo?.checklistId,
+                "checkListId": this.sourceCheckList_id,
+                "sectionId": this.sectionInfo.section_id,
+                "qno": response[0].questions[0].qno,
+                "question": [
+                    {
+                        "qno": 1,
+                        "qname": response[0].questions[0].qname,
+                        "answerType": response[0].questions[0].answerType,
+                        "runAI": false,
+                        "runAIDescription": "",
+                        "allowUploadfromGallery": response[0].questions[0].allowUploadfromGallery,
+                        "linkType": false,
+                        "questionReferenceImage": this.uploadedFiles,
+                        "descriptivetype": response[0].questions[0].descriptivetype,
+                        "answers": response[0].questions[0].answers
+                    }
+                ],
+                "scheduleDate": this.selectedDate.startDate,
+                "scheduleEndTime": time.format("hh:mm A"),
+                "userEmail": this.checklistInfo?.userEmail,
+                "userName": this.checklistInfo?.submittedBy,
+                "storeName": this.storeProfile.storeName,
+                "clientId": this.storeProfile.client_id,
+                "checkListType": "checklistTask" // ['checklistTask','cctv]
+            };
+            this.traxService.CreatechecklistTask(payload).pipe(takeUntil(this.destroy$)).subscribe({
+                next: (res) => {
+                    if (res.code === 200) {
+                        this.toastService.getSuccessToast(res?.message);
+                        this.activeModal.close('submit');
+                    }
+                }
+            });
+        }
     }
     createForm() {
         this.taskForm = this.fb.group({
@@ -4897,7 +5002,6 @@ class AddTaskComponent {
         this.updateForm();
     }
     addSectionForm(section) {
-        console.log(section);
         const sectionFormData = this.fb.group({
             id: [section?.id ?? ''],
             name: [section?.name ?? ''],
@@ -4906,7 +5010,6 @@ class AddTaskComponent {
         this.taskForm.get('sections').push(sectionFormData);
     }
     addQuestionForm(question, sectionIndex, insertIndex) {
-        console.log(question, sectionIndex, insertIndex);
         const questionFormData = this.fb.group({
             qno: [question?.qno ?? (this.getQuestions(sectionIndex)?.length ? this.getQuestions(sectionIndex).length + 1 : 1), [Validators.required]],
             qname: [question?.qname ?? '', [Validators.required]],
@@ -5010,13 +5113,19 @@ class AddTaskComponent {
     currentTime = '';
     updateCurrentTime() {
         const now = new Date();
+        const nextHour = new Date();
+        nextHour.setHours(now.getHours() + 1);
         const hours = String(now.getHours()).padStart(2, '0');
         const minutes = String(Math.floor(now.getMinutes() / 30) * 30).padStart(2, '0');
         this.currentTime = `${hours}:${minutes}`;
-        this.selectedItem = this.currentTime;
+        const nextHourStr = `${String(nextHour.getHours()).padStart(2, '0')}:00`;
+        this.selectedItem = nextHourStr;
     }
     isDisabled(time) {
-        return time < this.currentTime;
+        const now = new Date();
+        now.setHours(now.getHours() + 1);
+        const disabledThreshold = `${String(now.getHours()).padStart(2, '0')}:00`;
+        return time < disabledThreshold;
     }
     selectItem(value) {
         this.selectedItem = value;
@@ -5114,6 +5223,25 @@ class AddTaskComponent {
             return;
         }
     }
+    uploadedFiles = [];
+    onFilesSelected(event) {
+        if (event.target.files != undefined && event.target.files.length) {
+            const formData = new FormData();
+            const file = event.target.files[0];
+            formData.append('file', file, file.name);
+            formData.append('clientId', this.storeProfile.client_id);
+            this.traxService.imageupload(formData).pipe(takeUntil(this.destroy$)).subscribe({
+                next: (res) => {
+                    if (res.data.imgUrl) {
+                        this.uploadedFiles.push(res.data.imgUrl);
+                    }
+                },
+                error: (err) => {
+                    this.toastService.getErrorToast(err?.error?.error?.message || 'Something went wrong');
+                }
+            });
+        }
+    }
     selectedFile;
     previewUrl;
     fileInput;
@@ -5131,18 +5259,28 @@ class AddTaskComponent {
             this.fileInput.nativeElement.value = '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddTaskComponent, deps: [{ token: i1.FormBuilder }, { token: i2$1.GlobalStateService }, { token: TraxService }, { token: i0.ChangeDetectorRef }, { token: i6.NgbActiveModal }, { token: i1$2.Router }, { token: i3.ToastService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddTaskComponent, selector: "lib-add-task", inputs: { type: "type", taskDetails: "taskDetails", inputData: "inputData" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"card group-delete py-0\">\r\n    <div *ngIf=\"type ==='createtask'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                    <path\r\n                        d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"modal-body scroll-y w-100 p-1\">\r\n            <form [formGroup]=\"taskForm\">\r\n                <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n                    <ng-container [formGroup]=\"section\">\r\n                        <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n                            <ng-container [formGroup]=\"question\">\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Name\r\n                                    </label>\r\n                                    <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\"\r\n                                        placeholder=\"Enter Task Name\" class=\"form-control mb-5\">\r\n                                    <div\r\n                                        class=\"fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback\">\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div class=\"text-gray-600\">This Task is linked to </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        {{question.get('qno')?.value}}. {{question.get('qname')?.value}}\r\n\r\n                                    </label>\r\n                                </div>\r\n                                <div class=\"row px-5\" *ngIf=\"inputData.answerType==='video'\">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <div class=\"title-ref my-3\">Uploaded Video</div>\r\n                                        <video controls class=\"recap-img p-3\"\r\n                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                        </video>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"inputData.answerType==='image'||inputData.answerType=='descriptiveImage'||inputData.answerType=='multipleImage'||inputData.answerType=='multiplechoicemultiple'\">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                        <img class=\"img-logo\" src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\" alt=\"\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"inputData.answerType==='multiplechoicesingle'||inputData.answerType=='yes/no'||inputData.answerType=='date'||inputData.answerType=='time'||inputData.answerType=='linearscale'||inputData.answerType=='descriptive' \">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <span class=\"mt-1\">{{item.answer}}</span>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Description\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-control\" placeholder=\"Enter a permission name\"\r\n                                        name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n                                        rows=\"4\"></textarea>\r\n                                </div>\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Response Type\r\n                                    </label>\r\n                                    <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n                                        class=\"form-select mb-5\">\r\n                                        <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n                                            {{answer.label}}</option>\r\n                                    </select>\r\n\r\n                                </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name1 my-3\">\r\n                                        Answer Options\r\n                                    </label>\r\n                                    <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n                                            <div class=\"d-flex mb-5\">\r\n                                                <div class=\"form-check\">\r\n                                                    <input formControlName=\"descriptivetype\"\r\n                                                        class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n                                                        value=\"text\" [id]=\"'descriptivetype_text' + i + j\">\r\n                                                    <label class=\"cursor-pointer dscriptiveType\"\r\n                                                        [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n                                                </div>\r\n                                                <div class=\"form-check ms-5\">\r\n                                                    <input formControlName=\"descriptivetype\"\r\n                                                        class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n                                                        value=\"number\" [id]=\"'descriptivetype_number' + i + j\">\r\n                                                    <label class=\"cursor-pointer dscriptiveType\"\r\n                                                        [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            <div class=\"input-group \">\r\n                                                                <input formControlName=\"answer\" type=\"text\"\r\n                                                                    class=\"form-control\"\r\n                                                                    placeholder=\"Enter answer here\">\r\n\r\n                                                            </div>\r\n                                                            <ng-container\r\n                                                                *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n                                                                <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n                                                                    class=\"text-danger mt-2\">* Answer is required</div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            <div class=\"input-group \">\r\n                                                                <input formControlName=\"answer\" type=\"text\"\r\n                                                                    class=\"form-control\"\r\n                                                                    placeholder=\"Enter answer here\">\r\n\r\n                                                                <button (click)=\"onAnswerDelete(i, j, k)\"\r\n                                                                    class=\"btn btn-outline\" type=\"button\">\r\n                                                                    <svg class=\"cursor-pointer\"\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                        matTooltip=\"Delete answer\"\r\n                                                                        matTooltipPosition=\"above\"\r\n                                                                        matTooltipClass=\"custom-test\" width=\"20\"\r\n                                                                        height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                        <path _ngcontent-ng-c1491044170=\"\"\r\n                                                                            d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n                                                                            stroke-width=\"1.66667\"\r\n                                                                            stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\"></path>\r\n                                                                    </svg>\r\n                                                                </button>\r\n                                                            </div>\r\n                                                            <ng-container\r\n                                                                *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n                                                                <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n                                                                    class=\"text-danger mt-2\">* Answer is required</div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n\r\n\r\n\r\n\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                            <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n                                                class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n                                                Add More Answer\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n\r\n\r\n\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            \r\n\r\n\r\n                                                            \r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-between\">\r\n                                                                        \r\n\r\n                                                                        <div>\r\n                                                                            <div class=\"form-check form-switch\">\r\n                                                                                <input\r\n                                                                                    [formControl]=\"question.controls.allowUploadfromGallery\"\r\n                                                                                    class=\"form-check-input\"\r\n                                                                                    type=\"checkbox\" role=\"switch\"\r\n                                                                                    [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                                                <label\r\n                                                                                    class=\"form-check-label check-label\"\r\n                                                                                    [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                                                    upload from gallery</label>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n                                            <div class=\"row\">\r\n                                                <div class=\"col-12 mb-5\">\r\n                                                    <div class=\"form-check form-switch\">\r\n                                                        <input formControlName=\"allowUploadfromGallery\"\r\n                                                            class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n                                                            [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                        <label class=\"form-check-label check-label\"\r\n                                                            [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                            upload from gallery</label>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">                                                            \r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div class=\"d-flex align-items-center justify-content-between\">\r\n                                                                        <div>\r\n                                                                            <div class=\"form-check form-switch\">\r\n                                                                                <input\r\n                                                                                    [formControl]=\"question.controls.allowUploadfromGallery\"\r\n                                                                                    class=\"form-check-input\"\r\n                                                                                    type=\"checkbox\" role=\"switch\"\r\n                                                                                    [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                                                <label\r\n                                                                                    class=\"form-check-label check-label\"\r\n                                                                                    [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                                                    upload from gallery</label>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div class=\"d-flex align-items-center h-100\">\r\n                                                                        <div class=\"form-check\">\r\n                                                                            <input formControlName=\"descriptivetype\"\r\n                                                                                class=\"form-check-input cursor-pointer\"\r\n                                                                                type=\"radio\" value=\"text\"\r\n                                                                                [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n                                                                            <label class=\"cursor-pointer dscriptiveType\"\r\n                                                                                [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n                                                                        </div>\r\n                                                                        <div class=\"form-check ms-5\">\r\n                                                                            <input formControlName=\"descriptivetype\"\r\n                                                                                class=\"form-check-input cursor-pointer\"\r\n                                                                                type=\"radio\" value=\"number\"\r\n                                                                                [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n                                                                            <label class=\"cursor-pointer dscriptiveType\"\r\n                                                                                [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n\r\n        \r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"col-4\">\r\n                                                        <div class=\"d-flex justify-content-between align-items-center \">\r\n                                                            <div class=\"me-2\">\r\n                                                                <input type=\"number\" formControlName=\"rangeStart\"\r\n                                                                    class=\"form-control\">\r\n                                                            </div>\r\n                                                            <div class=\"me-2 check-label\">\r\n                                                                to\r\n                                                            </div>\r\n                                                            <div>\r\n                                                                <input type=\"number\" formControlName=\"rangeEnd\"\r\n                                                                    class=\"form-control\">\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n\r\n                                    </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <div class=\"row mb-3 fv-plugins-icon-container \">\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">\r\n                            Due date\r\n                        </label>\r\n\r\n                        <div class=\"d-flex align-items-center position-relative my-1\">\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14\"  type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n                                [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\" [ngModelOptions]=\"{standalone: true}\"\r\n                                [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDate\" (startDateChanged)=\"onStartDateChange($event)\"  [isCustomDate]=\"isCustomDate\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\"  [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">Due time</label>\r\n                        <div class=\"position-relative w-100\">\r\n                          <button\r\n                            type=\"button\"\r\n                            (click)=\"openDropdown($event)\"\r\n                            class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\"\r\n                          >\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n                                  stroke=\"#667085\"\r\n                                  stroke-width=\"1.66667\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                            </span>\r\n                            <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                          </button>\r\n                          <div *ngIf=\"dropDown\" class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n                            <ul class=\"list-unstyled\">\r\n                              <li\r\n                                *ngFor=\"let item of timeDetails\"\r\n                                [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n                                class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n                                [class.disabled]=\"isDisabled(item.text)\"\r\n                                (click)=\"selectItem(item.text)\"\r\n                              >\r\n                                {{ item.text }}\r\n                              </li>\r\n                            </ul>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      \r\n                </div>\r\n\r\n                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                    <label class=\"label-name my-2\">\r\n                        Assign to\r\n                    </label>\r\n                    <input type=\"text\" class=\"form-control\" [disabled]=\"true\">\r\n\r\n                </div>\r\n                <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n                    <div class=\"border-attach col-md-3 cursor-pointer\" (click)=\"fileInput.click()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                          <path\r\n                            d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                          />\r\n                        </svg>\r\n                        <span class=\"ms-3\">Add Attachment</span>\r\n                        <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\" (change)=\"onFileSelected($event)\" hidden />\r\n                      </div>\r\n\r\n                      <div class=\"image-preview mt-2\" *ngIf=\"previewUrl\">\r\n                        <button class=\"remove-icon\" (click)=\"removeImage()\">\u2716</button>\r\n                        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n                      </div>    \r\n                </div>                  \r\n                <div class=\"mt-5 w-100\">\r\n                    <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n                        <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                        <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" (click)=\"onSubmit()\">Create\r\n                            Task</button>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n\r\n        </div>\r\n\r\n\r\n    </div>\r\n\r\n    <div *ngIf=\"type ==='redo'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                    <path\r\n                        d=\"M39 20.0001V26.0001M39 26.0001H33M39 26.0001L34.36 21.6401C33.2853 20.5648 31.9556 19.7793 30.4952 19.3568C29.0348 18.9344 27.4911 18.8888 26.0083 19.2243C24.5255 19.5598 23.1518 20.2655 22.0155 21.2755C20.8791 22.2855 20.0172 23.5669 19.51 25.0001M17 36.0001V30.0001M17 30.0001H23M17 30.0001L21.64 34.3601C22.7147 35.4354 24.0444 36.2209 25.5048 36.6433C26.9652 37.0657 28.5089 37.1113 29.9917 36.7758C31.4745 36.4403 32.8482 35.7346 33.9845 34.7247C35.1209 33.7147 35.9828 32.4333 36.49 31.0001\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"modal-body scroll-y w-100 p-1\">\r\n            <h5 class=\"label-name1 my-2\">\r\n                Redo\r\n            </h5>\r\n            <h5 class=\"label-name1 my-2\">\r\n                Hygiene Task\r\n            </h5>\r\n            <div class=\"text-gray-600\">The table on the main room has to be cleaned immediately, because it is too\r\n                clumsy to look there..,</div>\r\n\r\n            <form [formGroup]=\"taskForm\">\r\n\r\n                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                    <label class=\"label-name my-2\">\r\n                        Comment\r\n                    </label>\r\n                    <textarea class=\"form-control form-control\" placeholder=\"Enter a permission name\"\r\n                        name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n                        rows=\"4\"></textarea>\r\n                </div>\r\n                <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n                    <div class=\"border-attach col-md-3 cursor-pointer\" (click)=\"fileInput.click()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                          <path\r\n                            d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                          />\r\n                        </svg>\r\n                        <span class=\"ms-3\">Add Attachment</span>\r\n                        <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\" (change)=\"onFileSelected($event)\" hidden />\r\n                      </div>\r\n\r\n                      <div class=\"image-preview mt-2\" *ngIf=\"previewUrl\">\r\n                        <button class=\"remove-icon\" (click)=\"removeImage()\">\u2716</button>\r\n                        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n                      </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"row mb-3 fv-plugins-icon-container \">\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">\r\n                            Due date\r\n                        </label>\r\n\r\n                        <div class=\"d-flex align-items-center position-relative my-1\">\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14\"  type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n                                [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\" [ngModelOptions]=\"{standalone: true}\"\r\n                                [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDate\" (startDateChanged)=\"onStartDateChange($event)\"  [isCustomDate]=\"isCustomDate\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\"  [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">Due time</label>\r\n                        <div class=\"position-relative w-100\">\r\n                          <button\r\n                            type=\"button\"\r\n                            (click)=\"openDropdown($event)\"\r\n                            class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\"\r\n                          >\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n                                  stroke=\"#667085\"\r\n                                  stroke-width=\"1.66667\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                            </span>\r\n                            <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                          </button>\r\n                          <div *ngIf=\"dropDown\" class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n                            <ul class=\"list-unstyled\">\r\n                              <li\r\n                                *ngFor=\"let item of timeDetails\"\r\n                                [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n                                class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n                                [class.disabled]=\"isDisabled(item.text)\"\r\n                                (click)=\"selectItem(item.text)\"\r\n                              >\r\n                                {{ item.text }}\r\n                              </li>\r\n                            </ul>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                </div>\r\n\r\n                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                    <label class=\"label-name my-2\">\r\n                        Assign to\r\n                    </label>\r\n                    <input type=\"text\" class=\"form-control\" [disabled]=\"true\">\r\n\r\n                </div>\r\n                <div class=\"form-check\">\r\n                    <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n                    <label class=\"form-check-label label-name\" for=\"flexCheckDefault\">\r\n                        Mandatory image response\r\n                    </label>\r\n                  </div>\r\n                <div class=\"mt-5 w-100\">\r\n                    <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n                        <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                        <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" (click)=\"onSubmit()\">Submit</button>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n            </form>\r\n\r\n        </div>\r\n\r\n\r\n    </div>\r\n</div>", styles: [".label-name{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.form-control{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:400!important;line-height:24px!important}.btn-light1{padding:10px 18px!important;border-radius:8px!important;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Primary-700, #009BF3)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-transform:capitalize}.label-name1{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500;line-height:24px}.scroll-y{overflow-y:auto;position:relative;overflow-x:hidden}.border-attach{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}img.img-logo{width:100%;height:400px!important}.c-card{padding:24px;background:#fff;border-radius:16px}.question-badge{padding:8px 12px;border-radius:6px;font-size:16px;font-weight:500;line-height:24px;margin-bottom:12px;cursor:pointer}.question-badge-selected{color:#009bf3;background:#eaf8ff}.question-container{border-radius:8px;border:1px solid #D0D5DD;padding:24px 16px 16px;position:relative}.question-container .question-name{position:absolute;top:-15px;left:15px;padding:0 4px;border-radius:4px;border:.5px solid #D0D5DD;background:#fff;color:#101828;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.add-reference-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer}.ans-header{color:#101828;font-size:20px;font-weight:600;line-height:30px}.check-label{color:#344054;font-size:14px;font-weight:500;line-height:20px}.check-desc{color:#667085;font-size:14px;font-weight:400;line-height:20px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .daterangepicker{position:fixed!important;top:30%!important;left:50%!important;transform:translate(-50%);z-index:1050!important}.image-preview{position:relative;width:150px;height:150px;border:1px solid #ddd;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.image-preview img{width:100%;height:100%;object-fit:cover}.image-preview .remove-icon{position:absolute;top:0;right:0;background:#df0000;color:#fff;border:none;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px}.image-preview .remove-icon:hover{background:#8b0000}.disabled{color:#b0b0b0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$1.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddTaskComponent, deps: [{ token: i1.FormBuilder }, { token: i6.NgbActiveModal }, { token: i2$1.GlobalStateService }, { token: TraxService }, { token: i0.ChangeDetectorRef }, { token: i6.NgbModal }, { token: i1$2.Router }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddTaskComponent, selector: "lib-add-task", inputs: { type: "type", sourceCheckList_id: "sourceCheckList_id", taskDetails: "taskDetails", inputData: "inputData", checklistInfo: "checklistInfo", storeProfile: "storeProfile", sectionInfo: "sectionInfo", operationtype: "operationtype" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"card group-delete py-0\">\r\n    <div *ngIf=\"type ==='createtask'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                    <path\r\n                        d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"modal-body scroll-y w-100 p-1\">\r\n            <form [formGroup]=\"taskForm\">\r\n                <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n                    <ng-container [formGroup]=\"section\">\r\n                        <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n                            <ng-container [formGroup]=\"question\">\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Name\r\n                                    </label>\r\n                                    <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\"\r\n                                        placeholder=\"Enter Task Name\" class=\"form-control mb-5\">\r\n                                    <div\r\n                                        class=\"fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback\">\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div class=\"text-gray-600\">This Task is linked to </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        {{question.get('qno')?.value}}. {{question.get('qname')?.value}}\r\n\r\n                                    </label>\r\n                                </div>\r\n                                <div class=\"row px-5\" *ngIf=\"inputData.answerType==='video'\">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <div class=\"title-ref my-3\">Uploaded Video</div>\r\n                                        <video controls class=\"recap-img p-3\"\r\n                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                        </video>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"inputData.answerType==='image'||inputData.answerType==='descriptiveImage'||inputData.answerType==='multipleImage'||inputData.answerType==='multiplechoicemultiple'\">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                        <img class=\"img-logo\" src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\" alt=\"\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"inputData.answerType==='multiplechoicesingle'||inputData.answerType==='yes/no'||inputData.answerType==='date'||inputData.answerType==='time'||inputData.answerType==='linearscale'||inputData.answerType==='descriptive' \">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <span class=\"mt-1\">{{item.answer}}</span>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Description\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a permission name\"\r\n                                        name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n                                        rows=\"4\"></textarea>\r\n                                </div>\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Response Type\r\n                                    </label>\r\n                                    <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n                                        class=\"form-select mb-5\">\r\n                                        <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n                                            {{answer.label}}</option>\r\n                                    </select>\r\n\r\n                                </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name1 my-3\">\r\n                                        Answer Options\r\n                                    </label>\r\n                                    <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n                                            <div class=\"d-flex mb-5\">\r\n                                                <div class=\"form-check\">\r\n                                                    <input formControlName=\"descriptivetype\"\r\n                                                        class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n                                                        value=\"text\" [id]=\"'descriptivetype_text' + i + j\">\r\n                                                    <label class=\"cursor-pointer dscriptiveType\"\r\n                                                        [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n                                                </div>\r\n                                                <div class=\"form-check ms-5\">\r\n                                                    <input formControlName=\"descriptivetype\"\r\n                                                        class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n                                                        value=\"number\" [id]=\"'descriptivetype_number' + i + j\">\r\n                                                    <label class=\"cursor-pointer dscriptiveType\"\r\n                                                        [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            <div class=\"input-group \">\r\n                                                                <input formControlName=\"answer\" type=\"text\"\r\n                                                                    class=\"form-control\"\r\n                                                                    placeholder=\"Enter answer here\">\r\n\r\n                                                            </div>\r\n                                                            <ng-container\r\n                                                                *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n                                                                <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n                                                                    class=\"text-danger mt-2\">* Answer is required</div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            <div class=\"input-group \">\r\n                                                                <input formControlName=\"answer\" type=\"text\"\r\n                                                                    class=\"form-control\"\r\n                                                                    placeholder=\"Enter answer here\">\r\n\r\n                                                                <button (click)=\"onAnswerDelete(i, j, k)\"\r\n                                                                    class=\"btn btn-outline\" type=\"button\">\r\n                                                                    <svg class=\"cursor-pointer\"\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                        matTooltip=\"Delete answer\"\r\n                                                                        matTooltipPosition=\"above\"\r\n                                                                        matTooltipClass=\"custom-test\" width=\"20\"\r\n                                                                        height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                        <path _ngcontent-ng-c1491044170=\"\"\r\n                                                                            d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n                                                                            stroke-width=\"1.66667\"\r\n                                                                            stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\"></path>\r\n                                                                    </svg>\r\n                                                                </button>\r\n                                                            </div>\r\n                                                            <ng-container\r\n                                                                *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n                                                                <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n                                                                    class=\"text-danger mt-2\">* Answer is required</div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n\r\n\r\n\r\n\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                            <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n                                                class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n                                                Add More Answer\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n\r\n\r\n\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n\r\n\r\n\r\n\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-between\">\r\n\r\n\r\n                                                                        <div>\r\n                                                                            <div class=\"form-check form-switch ps-0\">\r\n                                                                                <input\r\n                                                                                    [formControl]=\"question.controls.allowUploadfromGallery\"\r\n                                                                                    class=\"form-check-input me-3\"\r\n                                                                                    type=\"checkbox\" role=\"switch\"\r\n                                                                                    [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                                                <label\r\n                                                                                    class=\"form-check-label check-label\"\r\n                                                                                    [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                                                    upload from gallery</label>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n                                            <div class=\"row\">\r\n                                                <div class=\"col-12 mb-5\">\r\n                                                    <div class=\"form-check form-switch ps-0\">\r\n                                                        <input formControlName=\"allowUploadfromGallery\"\r\n                                                            class=\"form-check-input me-3\" type=\"checkbox\" role=\"switch\"\r\n                                                            [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                        <label class=\"form-check-label check-label\"\r\n                                                            [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                            upload from gallery</label>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-between\">\r\n                                                                        <div>\r\n                                                                            <div class=\"form-check form-switch ps-0\">\r\n                                                                                <input\r\n                                                                                    [formControl]=\"question.controls.allowUploadfromGallery\"\r\n                                                                                    class=\"form-check-input me-3\"\r\n                                                                                    type=\"checkbox\" role=\"switch\"\r\n                                                                                    [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                                                <label\r\n                                                                                    class=\"form-check-label check-label\"\r\n                                                                                    [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                                                    upload from gallery</label>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div class=\"d-flex align-items-center h-100\">\r\n                                                                        <div class=\"form-check\">\r\n                                                                            <input formControlName=\"descriptivetype\"\r\n                                                                                class=\"form-check-input cursor-pointer\"\r\n                                                                                type=\"radio\" value=\"text\"\r\n                                                                                [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n                                                                            <label class=\"cursor-pointer dscriptiveType\"\r\n                                                                                [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n                                                                        </div>\r\n                                                                        <div class=\"form-check ms-5\">\r\n                                                                            <input formControlName=\"descriptivetype\"\r\n                                                                                class=\"form-check-input cursor-pointer\"\r\n                                                                                type=\"radio\" value=\"number\"\r\n                                                                                [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n                                                                            <label class=\"cursor-pointer dscriptiveType\"\r\n                                                                                [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"col-4\">\r\n                                                        <div class=\"d-flex justify-content-between align-items-center \">\r\n                                                            <div class=\"me-2\">\r\n                                                                <input type=\"number\" formControlName=\"rangeStart\"\r\n                                                                    class=\"form-control\">\r\n                                                            </div>\r\n                                                            <div class=\"me-2 check-label\">\r\n                                                                to\r\n                                                            </div>\r\n                                                            <div>\r\n                                                                <input type=\"number\" formControlName=\"rangeEnd\"\r\n                                                                    class=\"form-control\">\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n\r\n                                    </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <div class=\"row mb-3 fv-plugins-icon-container \">\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">\r\n                            Due date\r\n                        </label>\r\n\r\n                        <div class=\"d-flex align-items-center position-relative my-1\">\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n                                [drops]=\"'down'\" [opens]=\"'right'\" [showCustomRangeLabel]=\"false\"\r\n                                [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n                                [ngModelOptions]=\"{standalone: true}\" [keepCalendarOpeningWithRange]=\"true\"\r\n                                [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDate\"\r\n                                (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">Due time</label>\r\n                        <div class=\"position-relative w-100\">\r\n                          <button\r\n                            type=\"button\"\r\n                            (click)=\"openDropdown($event)\"\r\n                            class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\"\r\n                          >\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n                                  stroke=\"#667085\"\r\n                                  stroke-width=\"1.66667\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                            </span>\r\n                            <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                          </button>\r\n                          <div *ngIf=\"dropDown\" class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n                            <ul class=\"list-unstyled\">\r\n                              <li\r\n                                *ngFor=\"let item of timeDetails\"\r\n                                [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n                                class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n                                [class.disabled]=\"isDisabled(item.text)\"\r\n                                (click)=\"selectItem(item.text)\"\r\n                              >\r\n                                {{ item.text }}\r\n                              </li>\r\n                            </ul>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      \r\n                </div>\r\n\r\n                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                    <label class=\"label-name my-2\">\r\n                        Assign to\r\n                    </label>\r\n                    <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\" [disabled]=\"true\">\r\n\r\n                </div>\r\n                <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n                    <div class=\"border-attach col-md-3 cursor-pointer\" (click)=\"fileInput.click()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                        <span class=\"ms-3\">Add Attachment</span>\r\n                        <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\" (change)=\"onFileSelected($event)\" hidden />\r\n                      </div>\r\n\r\n                      <div class=\"image-preview mt-2\" *ngIf=\"previewUrl\">\r\n                        <button class=\"remove-icon\" (click)=\"removeImage()\">\u2716</button>\r\n                        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n                      </div>    \r\n                </div>                  \r\n                <div class=\"mt-5 w-100\">\r\n                    <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n                        <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                        <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" [disabled]=\"!this.taskForm.valid\"\r\n                            (click)=\"onSubmit()\">Create\r\n                            Task</button>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n\r\n        </div>\r\n\r\n\r\n    </div>\r\n\r\n    <div *ngIf=\"type ==='redo'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                    <path\r\n                        d=\"M39 20.0001V26.0001M39 26.0001H33M39 26.0001L34.36 21.6401C33.2853 20.5648 31.9556 19.7793 30.4952 19.3568C29.0348 18.9344 27.4911 18.8888 26.0083 19.2243C24.5255 19.5598 23.1518 20.2655 22.0155 21.2755C20.8791 22.2855 20.0172 23.5669 19.51 25.0001M17 36.0001V30.0001M17 30.0001H23M17 30.0001L21.64 34.3601C22.7147 35.4354 24.0444 36.2209 25.5048 36.6433C26.9652 37.0657 28.5089 37.1113 29.9917 36.7758C31.4745 36.4403 32.8482 35.7346 33.9845 34.7247C35.1209 33.7147 35.9828 32.4333 36.49 31.0001\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n        <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n            <ng-container [formGroup]=\"section\">\r\n                <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n                    <ng-container [formGroup]=\"question\">\r\n\r\n                        <div class=\"modal-body scroll-y w-100 p-1\">\r\n                            <h5 class=\"label-name1 my-2\">\r\n                                Redo\r\n                            </h5>\r\n                            <h5 class=\"label-name1 my-2\">\r\n                                {{checklistInfo.checklistName}}\r\n                            </h5>\r\n                            <div class=\"text-gray-600\">\r\n                                {{question.get('qno')?.value}}. {{question.get('qname')?.value}}\r\n                            </div>\r\n                            <div class=\"row px-5\" *ngIf=\"inputData.answerType==='video'\">\r\n                                <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                    <div class=\"title-ref my-3\">Uploaded Video</div>\r\n                                    <video controls class=\"recap-img p-3\"\r\n                                        src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                    </video>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row px-5\"\r\n                                *ngIf=\"inputData.answerType==='image'||inputData.answerType==='descriptiveImage'||inputData.answerType==='multipleImage'||inputData.answerType==='multiplechoicemultiple'\">\r\n                                <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                    <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                    <img class=\"img-logo\" src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\" alt=\"\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row px-5\"\r\n                                *ngIf=\"inputData.answerType==='multiplechoicesingle'||inputData.answerType==='yes/no'||inputData.answerType==='date'||inputData.answerType==='time'||inputData.answerType==='linearscale'||inputData.answerType==='descriptive' \">\r\n                                <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                    <span class=\"mt-1\">{{item.answer}}</span>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <form [formGroup]=\"taskForm\">\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Comment\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a permission name\"\r\n                                        name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n                                        rows=\"4\"></textarea>\r\n                                </div>\r\n                                <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n                                    <div class=\"border-attach col-md-3 cursor-pointer\" (click)=\"fileInput.click()\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                          <path\r\n                                            d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                          />\r\n                                        </svg>\r\n                                        <span class=\"ms-3\">Add Attachment</span>\r\n                                        <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\" (change)=\"onFileSelected($event)\" hidden />\r\n                                      </div>\r\n                \r\n                                      <div class=\"image-preview mt-2\" *ngIf=\"previewUrl\">\r\n                                        <button class=\"remove-icon\" (click)=\"removeImage()\">\u2716</button>\r\n                                        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n                                      </div>\r\n                                </div>\r\n\r\n\r\n                                <div class=\"row mb-3 fv-plugins-icon-container \">\r\n                                    <div class=\"col-md-6\">\r\n                                        <label class=\"label-name my-2\">\r\n                                            Due date\r\n                                        </label>\r\n                                        <div class=\"d-flex align-items-center position-relative my-1\">\r\n                                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                                                    viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                    <path\r\n                                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                                        stroke-linejoin=\"round\" />\r\n                                                </svg>\r\n                                            </span>\r\n                                            <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput\r\n                                                ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\"\r\n                                                [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\"\r\n                                                [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n                                                [ngModelOptions]=\"{standalone: true}\"\r\n                                                [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n                                                autocomplete=\"off\" [(ngModel)]=\"selectedDate\"\r\n                                                (startDateChanged)=\"onStartDateChange($event)\"\r\n                                                [isCustomDate]=\"isCustomDate\"\r\n                                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                                (datesUpdated)=\"datechange($event)\" name=\"daterange\"\r\n                                                [readonly]=\"true\" />\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-md-6\">\r\n                                        <label class=\"label-name my-2\">Due time</label>\r\n                                        <div class=\"position-relative w-100\">\r\n                                          <button\r\n                                            type=\"button\"\r\n                                            (click)=\"openDropdown($event)\"\r\n                                            class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\"\r\n                                          >\r\n                                            <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n                                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                <path\r\n                                                  d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n                                                  stroke=\"#667085\"\r\n                                                  stroke-width=\"1.66667\"\r\n                                                  stroke-linecap=\"round\"\r\n                                                  stroke-linejoin=\"round\"\r\n                                                />\r\n                                              </svg>\r\n                                            </span>\r\n                                            <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                                          </button>\r\n                                          <div *ngIf=\"dropDown\" class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n                                            <ul class=\"list-unstyled\">\r\n                                              <li\r\n                                                *ngFor=\"let item of timeDetails\"\r\n                                                [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n                                                class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n                                                [class.disabled]=\"isDisabled(item.text)\"\r\n                                                (click)=\"selectItem(item.text)\"\r\n                                              >\r\n                                                {{ item.text }}\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </div>\r\n                                      </div>\r\n                                </div>\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Assign to\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\"\r\n                                        [disabled]=\"true\">\r\n\r\n                                </div>\r\n                                <div class=\"form-check\">\r\n                                    <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n                                    <label class=\"form-check-label label-name\" for=\"flexCheckDefault\">\r\n                                        Mandatory image response\r\n                                    </label>\r\n                                </div>\r\n                                <div class=\"mt-5 w-100\">\r\n                                    <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n                                        <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                                        <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\"\r\n                                            (click)=\"onSubmit()\">Submit</button>\r\n                                    </div>\r\n                                </div>\r\n\r\n\r\n                            </form>\r\n\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n    </div>\r\n</div>", styles: [".label-name{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.form-control{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:400!important;line-height:24px!important}.btn-light1{padding:10px 18px!important;border-radius:8px!important;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Primary-700, #009BF3)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-transform:capitalize}.label-name1{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500;line-height:24px}.scroll-y{overflow-y:auto;position:relative;overflow-x:hidden}.border-attach{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}img.img-logo{width:100%;height:400px!important}.c-card{padding:24px;background:#fff;border-radius:16px}.question-badge{padding:8px 12px;border-radius:6px;font-size:16px;font-weight:500;line-height:24px;margin-bottom:12px;cursor:pointer}.question-badge-selected{color:#009bf3;background:#eaf8ff}.question-container{border-radius:8px;border:1px solid #D0D5DD;padding:24px 16px 16px;position:relative}.question-container .question-name{position:absolute;top:-15px;left:15px;padding:0 4px;border-radius:4px;border:.5px solid #D0D5DD;background:#fff;color:#101828;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.add-reference-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer}.ans-header{color:#101828;font-size:20px;font-weight:600;line-height:30px}.check-label{color:#344054;font-size:14px;font-weight:500;line-height:20px}.check-desc{color:#667085;font-size:14px;font-weight:400;line-height:20px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .daterangepicker{position:fixed!important;top:30%!important;left:50%!important;transform:translate(-50%);z-index:1050!important}.image-preview{position:relative;width:150px;height:150px;border:1px solid #ddd;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.image-preview img{width:100%;height:100%;object-fit:cover}.image-preview .remove-icon{position:absolute;top:0;right:0;background:#df0000;color:#fff;border:none;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px}.image-preview .remove-icon:hover{background:#8b0000}.disabled{color:#b0b0b0;pointer-events:none}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$1.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddTaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-add-task', template: "<div class=\"card group-delete py-0\">\r\n    <div *ngIf=\"type ==='createtask'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                    <path\r\n                        d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"modal-body scroll-y w-100 p-1\">\r\n            <form [formGroup]=\"taskForm\">\r\n                <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n                    <ng-container [formGroup]=\"section\">\r\n                        <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n                            <ng-container [formGroup]=\"question\">\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Name\r\n                                    </label>\r\n                                    <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\"\r\n                                        placeholder=\"Enter Task Name\" class=\"form-control mb-5\">\r\n                                    <div\r\n                                        class=\"fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback\">\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div class=\"text-gray-600\">This Task is linked to </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        {{question.get('qno')?.value}}. {{question.get('qname')?.value}}\r\n\r\n                                    </label>\r\n                                </div>\r\n                                <div class=\"row px-5\" *ngIf=\"inputData.answerType==='video'\">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <div class=\"title-ref my-3\">Uploaded Video</div>\r\n                                        <video controls class=\"recap-img p-3\"\r\n                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                        </video>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"inputData.answerType==='image'||inputData.answerType=='descriptiveImage'||inputData.answerType=='multipleImage'||inputData.answerType=='multiplechoicemultiple'\">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                        <img class=\"img-logo\" src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\" alt=\"\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"inputData.answerType==='multiplechoicesingle'||inputData.answerType=='yes/no'||inputData.answerType=='date'||inputData.answerType=='time'||inputData.answerType=='linearscale'||inputData.answerType=='descriptive' \">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <span class=\"mt-1\">{{item.answer}}</span>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Description\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-control\" placeholder=\"Enter a permission name\"\r\n                                        name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n                                        rows=\"4\"></textarea>\r\n                                </div>\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Response Type\r\n                                    </label>\r\n                                    <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n                                        class=\"form-select mb-5\">\r\n                                        <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n                                            {{answer.label}}</option>\r\n                                    </select>\r\n\r\n                                </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name1 my-3\">\r\n                                        Answer Options\r\n                                    </label>\r\n                                    <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n                                            <div class=\"d-flex mb-5\">\r\n                                                <div class=\"form-check\">\r\n                                                    <input formControlName=\"descriptivetype\"\r\n                                                        class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n                                                        value=\"text\" [id]=\"'descriptivetype_text' + i + j\">\r\n                                                    <label class=\"cursor-pointer dscriptiveType\"\r\n                                                        [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n                                                </div>\r\n                                                <div class=\"form-check ms-5\">\r\n                                                    <input formControlName=\"descriptivetype\"\r\n                                                        class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n                                                        value=\"number\" [id]=\"'descriptivetype_number' + i + j\">\r\n                                                    <label class=\"cursor-pointer dscriptiveType\"\r\n                                                        [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            <div class=\"input-group \">\r\n                                                                <input formControlName=\"answer\" type=\"text\"\r\n                                                                    class=\"form-control\"\r\n                                                                    placeholder=\"Enter answer here\">\r\n\r\n                                                            </div>\r\n                                                            <ng-container\r\n                                                                *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n                                                                <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n                                                                    class=\"text-danger mt-2\">* Answer is required</div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            <div class=\"input-group \">\r\n                                                                <input formControlName=\"answer\" type=\"text\"\r\n                                                                    class=\"form-control\"\r\n                                                                    placeholder=\"Enter answer here\">\r\n\r\n                                                                <button (click)=\"onAnswerDelete(i, j, k)\"\r\n                                                                    class=\"btn btn-outline\" type=\"button\">\r\n                                                                    <svg class=\"cursor-pointer\"\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                        matTooltip=\"Delete answer\"\r\n                                                                        matTooltipPosition=\"above\"\r\n                                                                        matTooltipClass=\"custom-test\" width=\"20\"\r\n                                                                        height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                        <path _ngcontent-ng-c1491044170=\"\"\r\n                                                                            d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n                                                                            stroke-width=\"1.66667\"\r\n                                                                            stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\"></path>\r\n                                                                    </svg>\r\n                                                                </button>\r\n                                                            </div>\r\n                                                            <ng-container\r\n                                                                *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n                                                                <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n                                                                    class=\"text-danger mt-2\">* Answer is required</div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n\r\n\r\n\r\n\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                            <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n                                                class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n                                                Add More Answer\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n\r\n\r\n\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            \r\n\r\n\r\n                                                            \r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-between\">\r\n                                                                        \r\n\r\n                                                                        <div>\r\n                                                                            <div class=\"form-check form-switch\">\r\n                                                                                <input\r\n                                                                                    [formControl]=\"question.controls.allowUploadfromGallery\"\r\n                                                                                    class=\"form-check-input\"\r\n                                                                                    type=\"checkbox\" role=\"switch\"\r\n                                                                                    [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                                                <label\r\n                                                                                    class=\"form-check-label check-label\"\r\n                                                                                    [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                                                    upload from gallery</label>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n                                            <div class=\"row\">\r\n                                                <div class=\"col-12 mb-5\">\r\n                                                    <div class=\"form-check form-switch\">\r\n                                                        <input formControlName=\"allowUploadfromGallery\"\r\n                                                            class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n                                                            [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                        <label class=\"form-check-label check-label\"\r\n                                                            [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                            upload from gallery</label>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">                                                            \r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div class=\"d-flex align-items-center justify-content-between\">\r\n                                                                        <div>\r\n                                                                            <div class=\"form-check form-switch\">\r\n                                                                                <input\r\n                                                                                    [formControl]=\"question.controls.allowUploadfromGallery\"\r\n                                                                                    class=\"form-check-input\"\r\n                                                                                    type=\"checkbox\" role=\"switch\"\r\n                                                                                    [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                                                <label\r\n                                                                                    class=\"form-check-label check-label\"\r\n                                                                                    [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                                                    upload from gallery</label>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div class=\"d-flex align-items-center h-100\">\r\n                                                                        <div class=\"form-check\">\r\n                                                                            <input formControlName=\"descriptivetype\"\r\n                                                                                class=\"form-check-input cursor-pointer\"\r\n                                                                                type=\"radio\" value=\"text\"\r\n                                                                                [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n                                                                            <label class=\"cursor-pointer dscriptiveType\"\r\n                                                                                [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n                                                                        </div>\r\n                                                                        <div class=\"form-check ms-5\">\r\n                                                                            <input formControlName=\"descriptivetype\"\r\n                                                                                class=\"form-check-input cursor-pointer\"\r\n                                                                                type=\"radio\" value=\"number\"\r\n                                                                                [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n                                                                            <label class=\"cursor-pointer dscriptiveType\"\r\n                                                                                [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n\r\n        \r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"col-4\">\r\n                                                        <div class=\"d-flex justify-content-between align-items-center \">\r\n                                                            <div class=\"me-2\">\r\n                                                                <input type=\"number\" formControlName=\"rangeStart\"\r\n                                                                    class=\"form-control\">\r\n                                                            </div>\r\n                                                            <div class=\"me-2 check-label\">\r\n                                                                to\r\n                                                            </div>\r\n                                                            <div>\r\n                                                                <input type=\"number\" formControlName=\"rangeEnd\"\r\n                                                                    class=\"form-control\">\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n\r\n                                    </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <div class=\"row mb-3 fv-plugins-icon-container \">\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">\r\n                            Due date\r\n                        </label>\r\n\r\n                        <div class=\"d-flex align-items-center position-relative my-1\">\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14\"  type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n                                [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\" [ngModelOptions]=\"{standalone: true}\"\r\n                                [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDate\" (startDateChanged)=\"onStartDateChange($event)\"  [isCustomDate]=\"isCustomDate\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\"  [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">Due time</label>\r\n                        <div class=\"position-relative w-100\">\r\n                          <button\r\n                            type=\"button\"\r\n                            (click)=\"openDropdown($event)\"\r\n                            class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\"\r\n                          >\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n                                  stroke=\"#667085\"\r\n                                  stroke-width=\"1.66667\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                            </span>\r\n                            <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                          </button>\r\n                          <div *ngIf=\"dropDown\" class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n                            <ul class=\"list-unstyled\">\r\n                              <li\r\n                                *ngFor=\"let item of timeDetails\"\r\n                                [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n                                class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n                                [class.disabled]=\"isDisabled(item.text)\"\r\n                                (click)=\"selectItem(item.text)\"\r\n                              >\r\n                                {{ item.text }}\r\n                              </li>\r\n                            </ul>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      \r\n                </div>\r\n\r\n                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                    <label class=\"label-name my-2\">\r\n                        Assign to\r\n                    </label>\r\n                    <input type=\"text\" class=\"form-control\" [disabled]=\"true\">\r\n\r\n                </div>\r\n                <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n                    <div class=\"border-attach col-md-3 cursor-pointer\" (click)=\"fileInput.click()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                          <path\r\n                            d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                          />\r\n                        </svg>\r\n                        <span class=\"ms-3\">Add Attachment</span>\r\n                        <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\" (change)=\"onFileSelected($event)\" hidden />\r\n                      </div>\r\n\r\n                      <div class=\"image-preview mt-2\" *ngIf=\"previewUrl\">\r\n                        <button class=\"remove-icon\" (click)=\"removeImage()\">\u2716</button>\r\n                        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n                      </div>    \r\n                </div>                  \r\n                <div class=\"mt-5 w-100\">\r\n                    <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n                        <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                        <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" (click)=\"onSubmit()\">Create\r\n                            Task</button>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n\r\n        </div>\r\n\r\n\r\n    </div>\r\n\r\n    <div *ngIf=\"type ==='redo'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                    <path\r\n                        d=\"M39 20.0001V26.0001M39 26.0001H33M39 26.0001L34.36 21.6401C33.2853 20.5648 31.9556 19.7793 30.4952 19.3568C29.0348 18.9344 27.4911 18.8888 26.0083 19.2243C24.5255 19.5598 23.1518 20.2655 22.0155 21.2755C20.8791 22.2855 20.0172 23.5669 19.51 25.0001M17 36.0001V30.0001M17 30.0001H23M17 30.0001L21.64 34.3601C22.7147 35.4354 24.0444 36.2209 25.5048 36.6433C26.9652 37.0657 28.5089 37.1113 29.9917 36.7758C31.4745 36.4403 32.8482 35.7346 33.9845 34.7247C35.1209 33.7147 35.9828 32.4333 36.49 31.0001\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"modal-body scroll-y w-100 p-1\">\r\n            <h5 class=\"label-name1 my-2\">\r\n                Redo\r\n            </h5>\r\n            <h5 class=\"label-name1 my-2\">\r\n                Hygiene Task\r\n            </h5>\r\n            <div class=\"text-gray-600\">The table on the main room has to be cleaned immediately, because it is too\r\n                clumsy to look there..,</div>\r\n\r\n            <form [formGroup]=\"taskForm\">\r\n\r\n                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                    <label class=\"label-name my-2\">\r\n                        Comment\r\n                    </label>\r\n                    <textarea class=\"form-control form-control\" placeholder=\"Enter a permission name\"\r\n                        name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n                        rows=\"4\"></textarea>\r\n                </div>\r\n                <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n                    <div class=\"border-attach col-md-3 cursor-pointer\" (click)=\"fileInput.click()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                          <path\r\n                            d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                          />\r\n                        </svg>\r\n                        <span class=\"ms-3\">Add Attachment</span>\r\n                        <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\" (change)=\"onFileSelected($event)\" hidden />\r\n                      </div>\r\n\r\n                      <div class=\"image-preview mt-2\" *ngIf=\"previewUrl\">\r\n                        <button class=\"remove-icon\" (click)=\"removeImage()\">\u2716</button>\r\n                        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n                      </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"row mb-3 fv-plugins-icon-container \">\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">\r\n                            Due date\r\n                        </label>\r\n\r\n                        <div class=\"d-flex align-items-center position-relative my-1\">\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14\"  type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n                                [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\" [ngModelOptions]=\"{standalone: true}\"\r\n                                [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDate\" (startDateChanged)=\"onStartDateChange($event)\"  [isCustomDate]=\"isCustomDate\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\"  [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">Due time</label>\r\n                        <div class=\"position-relative w-100\">\r\n                          <button\r\n                            type=\"button\"\r\n                            (click)=\"openDropdown($event)\"\r\n                            class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\"\r\n                          >\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n                                  stroke=\"#667085\"\r\n                                  stroke-width=\"1.66667\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                            </span>\r\n                            <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                          </button>\r\n                          <div *ngIf=\"dropDown\" class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n                            <ul class=\"list-unstyled\">\r\n                              <li\r\n                                *ngFor=\"let item of timeDetails\"\r\n                                [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n                                class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n                                [class.disabled]=\"isDisabled(item.text)\"\r\n                                (click)=\"selectItem(item.text)\"\r\n                              >\r\n                                {{ item.text }}\r\n                              </li>\r\n                            </ul>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                </div>\r\n\r\n                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                    <label class=\"label-name my-2\">\r\n                        Assign to\r\n                    </label>\r\n                    <input type=\"text\" class=\"form-control\" [disabled]=\"true\">\r\n\r\n                </div>\r\n                <div class=\"form-check\">\r\n                    <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n                    <label class=\"form-check-label label-name\" for=\"flexCheckDefault\">\r\n                        Mandatory image response\r\n                    </label>\r\n                  </div>\r\n                <div class=\"mt-5 w-100\">\r\n                    <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n                        <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                        <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" (click)=\"onSubmit()\">Submit</button>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n            </form>\r\n\r\n        </div>\r\n\r\n\r\n    </div>\r\n</div>", styles: [".label-name{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.form-control{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:400!important;line-height:24px!important}.btn-light1{padding:10px 18px!important;border-radius:8px!important;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Primary-700, #009BF3)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-transform:capitalize}.label-name1{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500;line-height:24px}.scroll-y{overflow-y:auto;position:relative;overflow-x:hidden}.border-attach{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}img.img-logo{width:100%;height:400px!important}.c-card{padding:24px;background:#fff;border-radius:16px}.question-badge{padding:8px 12px;border-radius:6px;font-size:16px;font-weight:500;line-height:24px;margin-bottom:12px;cursor:pointer}.question-badge-selected{color:#009bf3;background:#eaf8ff}.question-container{border-radius:8px;border:1px solid #D0D5DD;padding:24px 16px 16px;position:relative}.question-container .question-name{position:absolute;top:-15px;left:15px;padding:0 4px;border-radius:4px;border:.5px solid #D0D5DD;background:#fff;color:#101828;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.add-reference-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer}.ans-header{color:#101828;font-size:20px;font-weight:600;line-height:30px}.check-label{color:#344054;font-size:14px;font-weight:500;line-height:20px}.check-desc{color:#667085;font-size:14px;font-weight:400;line-height:20px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .daterangepicker{position:fixed!important;top:30%!important;left:50%!important;transform:translate(-50%);z-index:1050!important}.image-preview{position:relative;width:150px;height:150px;border:1px solid #ddd;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.image-preview img{width:100%;height:100%;object-fit:cover}.image-preview .remove-icon{position:absolute;top:0;right:0;background:#df0000;color:#fff;border:none;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px}.image-preview .remove-icon:hover{background:#8b0000}.disabled{color:#b0b0b0;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.GlobalStateService }, { type: TraxService }, { type: i0.ChangeDetectorRef }, { type: i6.NgbActiveModal }, { type: i1$2.Router }, { type: i3.ToastService }, { type: i0.ElementRef }], propDecorators: { type: [{
+            args: [{ selector: 'lib-add-task', template: "<div class=\"card group-delete py-0\">\r\n    <div *ngIf=\"type ==='createtask'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                    <path\r\n                        d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"modal-body scroll-y w-100 p-1\">\r\n            <form [formGroup]=\"taskForm\">\r\n                <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n                    <ng-container [formGroup]=\"section\">\r\n                        <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n                            <ng-container [formGroup]=\"question\">\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Name\r\n                                    </label>\r\n                                    <input [formControl]=\"taskForm.controls.checklistName\" type=\"text\"\r\n                                        placeholder=\"Enter Task Name\" class=\"form-control mb-5\">\r\n                                    <div\r\n                                        class=\"fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback\">\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div class=\"text-gray-600\">This Task is linked to </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        {{question.get('qno')?.value}}. {{question.get('qname')?.value}}\r\n\r\n                                    </label>\r\n                                </div>\r\n                                <div class=\"row px-5\" *ngIf=\"inputData.answerType==='video'\">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <div class=\"title-ref my-3\">Uploaded Video</div>\r\n                                        <video controls class=\"recap-img p-3\"\r\n                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                        </video>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"inputData.answerType==='image'||inputData.answerType==='descriptiveImage'||inputData.answerType==='multipleImage'||inputData.answerType==='multiplechoicemultiple'\">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                        <img class=\"img-logo\" src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\" alt=\"\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"row px-5\"\r\n                                    *ngIf=\"inputData.answerType==='multiplechoicesingle'||inputData.answerType==='yes/no'||inputData.answerType==='date'||inputData.answerType==='time'||inputData.answerType==='linearscale'||inputData.answerType==='descriptive' \">\r\n                                    <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                        <span class=\"mt-1\">{{item.answer}}</span>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Task Description\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a permission name\"\r\n                                        name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n                                        rows=\"4\"></textarea>\r\n                                </div>\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Response Type\r\n                                    </label>\r\n                                    <select (change)=\"onQuestionChange($event, i, j)\" formControlName=\"answerType\"\r\n                                        class=\"form-select mb-5\">\r\n                                        <option *ngFor=\"let answer of answerTypes\" [value]=\"answer.value\">\r\n                                            {{answer.label}}</option>\r\n                                    </select>\r\n\r\n                                </div>\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name1 my-3\">\r\n                                        Answer Options\r\n                                    </label>\r\n                                    <div [id]=\"'question-' + i + j\" class=\"question-container mb-10\">\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'descriptive'\">\r\n                                            <div class=\"d-flex mb-5\">\r\n                                                <div class=\"form-check\">\r\n                                                    <input formControlName=\"descriptivetype\"\r\n                                                        class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n                                                        value=\"text\" [id]=\"'descriptivetype_text' + i + j\">\r\n                                                    <label class=\"cursor-pointer dscriptiveType\"\r\n                                                        [for]=\"'descriptivetype_text' + i + j\">Text</label>\r\n                                                </div>\r\n                                                <div class=\"form-check ms-5\">\r\n                                                    <input formControlName=\"descriptivetype\"\r\n                                                        class=\"form-check-input cursor-pointer\" type=\"radio\"\r\n                                                        value=\"number\" [id]=\"'descriptivetype_number' + i + j\">\r\n                                                    <label class=\"cursor-pointer dscriptiveType\"\r\n                                                        [for]=\"'descriptivetype_number' + i + j\">Number</label>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'yes/no'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            <div class=\"input-group \">\r\n                                                                <input formControlName=\"answer\" type=\"text\"\r\n                                                                    class=\"form-control\"\r\n                                                                    placeholder=\"Enter answer here\">\r\n\r\n                                                            </div>\r\n                                                            <ng-container\r\n                                                                *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n                                                                <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n                                                                    class=\"text-danger mt-2\">* Answer is required</div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            <div class=\"input-group \">\r\n                                                                <input formControlName=\"answer\" type=\"text\"\r\n                                                                    class=\"form-control\"\r\n                                                                    placeholder=\"Enter answer here\">\r\n\r\n                                                                <button (click)=\"onAnswerDelete(i, j, k)\"\r\n                                                                    class=\"btn btn-outline\" type=\"button\">\r\n                                                                    <svg class=\"cursor-pointer\"\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                        matTooltip=\"Delete answer\"\r\n                                                                        matTooltipPosition=\"above\"\r\n                                                                        matTooltipClass=\"custom-test\" width=\"20\"\r\n                                                                        height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                                        <path _ngcontent-ng-c1491044170=\"\"\r\n                                                                            d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\"\r\n                                                                            stroke-width=\"1.66667\"\r\n                                                                            stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\"></path>\r\n                                                                    </svg>\r\n                                                                </button>\r\n                                                            </div>\r\n                                                            <ng-container\r\n                                                                *ngIf=\"answer.get('answer')?.invalid && answer.get('answer')?.touched\">\r\n                                                                <div *ngIf=\"answer.get('answer')?.hasError('required')\"\r\n                                                                    class=\"text-danger mt-2\">* Answer is required</div>\r\n                                                            </ng-container>\r\n                                                        </div>\r\n\r\n\r\n\r\n\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                            <div (click)=\"addNewAnswer(i, j, 'multiplechoicesingle')\"\r\n                                                class=\"add-reference-btn mb-5 d-flex justify-content-center\">\r\n                                                Add More Answer\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image'\">\r\n\r\n\r\n\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n\r\n\r\n\r\n\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-between\">\r\n\r\n\r\n                                                                        <div>\r\n                                                                            <div class=\"form-check form-switch ps-0\">\r\n                                                                                <input\r\n                                                                                    [formControl]=\"question.controls.allowUploadfromGallery\"\r\n                                                                                    class=\"form-check-input me-3\"\r\n                                                                                    type=\"checkbox\" role=\"switch\"\r\n                                                                                    [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                                                <label\r\n                                                                                    class=\"form-check-label check-label\"\r\n                                                                                    [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                                                    upload from gallery</label>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'video'\">\r\n                                            <div class=\"row\">\r\n                                                <div class=\"col-12 mb-5\">\r\n                                                    <div class=\"form-check form-switch ps-0\">\r\n                                                        <input formControlName=\"allowUploadfromGallery\"\r\n                                                            class=\"form-check-input me-3\" type=\"checkbox\" role=\"switch\"\r\n                                                            [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                        <label class=\"form-check-label check-label\"\r\n                                                            [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                            upload from gallery</label>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'multipleImage'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"row\">\r\n                                                        <div class=\"col-12 mb-5\">\r\n                                                            <div class=\"row\">\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div\r\n                                                                        class=\"d-flex align-items-center justify-content-between\">\r\n                                                                        <div>\r\n                                                                            <div class=\"form-check form-switch ps-0\">\r\n                                                                                <input\r\n                                                                                    [formControl]=\"question.controls.allowUploadfromGallery\"\r\n                                                                                    class=\"form-check-input me-3\"\r\n                                                                                    type=\"checkbox\" role=\"switch\"\r\n                                                                                    [id]=\"'allow_upload_from_gallery' + i + j\">\r\n                                                                                <label\r\n                                                                                    class=\"form-check-label check-label\"\r\n                                                                                    [for]=\"'allow_upload_from_gallery' + i + j\">Allow\r\n                                                                                    upload from gallery</label>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                                <div class=\"col-6\">\r\n                                                                    <div class=\"d-flex align-items-center h-100\">\r\n                                                                        <div class=\"form-check\">\r\n                                                                            <input formControlName=\"descriptivetype\"\r\n                                                                                class=\"form-check-input cursor-pointer\"\r\n                                                                                type=\"radio\" value=\"text\"\r\n                                                                                [id]=\"'descriptive_answer_validation_text' + i + j + k\">\r\n                                                                            <label class=\"cursor-pointer dscriptiveType\"\r\n                                                                                [for]=\"'descriptive_answer_validation_text' + i + j + k\">Text</label>\r\n                                                                        </div>\r\n                                                                        <div class=\"form-check ms-5\">\r\n                                                                            <input formControlName=\"descriptivetype\"\r\n                                                                                class=\"form-check-input cursor-pointer\"\r\n                                                                                type=\"radio\" value=\"number\"\r\n                                                                                [id]=\"'descriptive_answer_validation_number' + i + j + k\">\r\n                                                                            <label class=\"cursor-pointer dscriptiveType\"\r\n                                                                                [for]=\"'descriptive_answer_validation_number' + i + j + k\">Number</label>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container\r\n                                            *ngIf=\"question.get('answerType')?.value === 'date' || question.get('answerType')?.value === 'time'\">\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"question.get('answerType')?.value === 'linearscale'\">\r\n                                            <ng-container\r\n                                                *ngFor=\"let answer of getAnswers(i, j).controls; let k = index\">\r\n                                                <ng-container [formGroup]=\"answer\">\r\n                                                    <div class=\"col-4\">\r\n                                                        <div class=\"d-flex justify-content-between align-items-center \">\r\n                                                            <div class=\"me-2\">\r\n                                                                <input type=\"number\" formControlName=\"rangeStart\"\r\n                                                                    class=\"form-control\">\r\n                                                            </div>\r\n                                                            <div class=\"me-2 check-label\">\r\n                                                                to\r\n                                                            </div>\r\n                                                            <div>\r\n                                                                <input type=\"number\" formControlName=\"rangeEnd\"\r\n                                                                    class=\"form-control\">\r\n                                                            </div>\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n\r\n                                    </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <div class=\"row mb-3 fv-plugins-icon-container \">\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">\r\n                            Due date\r\n                        </label>\r\n\r\n                        <div class=\"d-flex align-items-center position-relative my-1\">\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n                                [drops]=\"'down'\" [opens]=\"'right'\" [showCustomRangeLabel]=\"false\"\r\n                                [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n                                [ngModelOptions]=\"{standalone: true}\" [keepCalendarOpeningWithRange]=\"true\"\r\n                                [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDate\"\r\n                                (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-6\">\r\n                        <label class=\"label-name my-2\">Due time</label>\r\n                        <div class=\"position-relative w-100\">\r\n                          <button\r\n                            type=\"button\"\r\n                            (click)=\"openDropdown($event)\"\r\n                            class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\"\r\n                          >\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                  d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n                                  stroke=\"#667085\"\r\n                                  stroke-width=\"1.66667\"\r\n                                  stroke-linecap=\"round\"\r\n                                  stroke-linejoin=\"round\"\r\n                                />\r\n                              </svg>\r\n                            </span>\r\n                            <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                          </button>\r\n                          <div *ngIf=\"dropDown\" class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n                            <ul class=\"list-unstyled\">\r\n                              <li\r\n                                *ngFor=\"let item of timeDetails\"\r\n                                [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n                                class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n                                [class.disabled]=\"isDisabled(item.text)\"\r\n                                (click)=\"selectItem(item.text)\"\r\n                              >\r\n                                {{ item.text }}\r\n                              </li>\r\n                            </ul>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      \r\n                </div>\r\n\r\n                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                    <label class=\"label-name my-2\">\r\n                        Assign to\r\n                    </label>\r\n                    <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\" [disabled]=\"true\">\r\n\r\n                </div>\r\n                <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n                    <div class=\"border-attach col-md-3 cursor-pointer\" (click)=\"fileInput.click()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                        <span class=\"ms-3\">Add Attachment</span>\r\n                        <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\" (change)=\"onFileSelected($event)\" hidden />\r\n                      </div>\r\n\r\n                      <div class=\"image-preview mt-2\" *ngIf=\"previewUrl\">\r\n                        <button class=\"remove-icon\" (click)=\"removeImage()\">\u2716</button>\r\n                        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n                      </div>    \r\n                </div>                  \r\n                <div class=\"mt-5 w-100\">\r\n                    <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n                        <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                        <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\" [disabled]=\"!this.taskForm.valid\"\r\n                            (click)=\"onSubmit()\">Create\r\n                            Task</button>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n\r\n        </div>\r\n\r\n\r\n    </div>\r\n\r\n    <div *ngIf=\"type ==='redo'\" class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n        <div class=\"my-5\">\r\n            <div class=\"symbol symbol-75px symbol-circle\">\r\n                <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n                    <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n                    <path\r\n                        d=\"M39 20.0001V26.0001M39 26.0001H33M39 26.0001L34.36 21.6401C33.2853 20.5648 31.9556 19.7793 30.4952 19.3568C29.0348 18.9344 27.4911 18.8888 26.0083 19.2243C24.5255 19.5598 23.1518 20.2655 22.0155 21.2755C20.8791 22.2855 20.0172 23.5669 19.51 25.0001M17 36.0001V30.0001M17 30.0001H23M17 30.0001L21.64 34.3601C22.7147 35.4354 24.0444 36.2209 25.5048 36.6433C26.9652 37.0657 28.5089 37.1113 29.9917 36.7758C31.4745 36.4403 32.8482 35.7346 33.9845 34.7247C35.1209 33.7147 35.9828 32.4333 36.49 31.0001\"\r\n                        stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n\r\n            </div>\r\n        </div>\r\n        <ng-container *ngFor=\"let section of getSections?.controls; let i = index\">\r\n            <ng-container [formGroup]=\"section\">\r\n                <ng-container *ngFor=\"let question of getQuestions(i)?.controls; let j = index\">\r\n                    <ng-container [formGroup]=\"question\">\r\n\r\n                        <div class=\"modal-body scroll-y w-100 p-1\">\r\n                            <h5 class=\"label-name1 my-2\">\r\n                                Redo\r\n                            </h5>\r\n                            <h5 class=\"label-name1 my-2\">\r\n                                {{checklistInfo.checklistName}}\r\n                            </h5>\r\n                            <div class=\"text-gray-600\">\r\n                                {{question.get('qno')?.value}}. {{question.get('qname')?.value}}\r\n                            </div>\r\n                            <div class=\"row px-5\" *ngIf=\"inputData.answerType==='video'\">\r\n                                <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                    <div class=\"title-ref my-3\">Uploaded Video</div>\r\n                                    <video controls class=\"recap-img p-3\"\r\n                                        src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                    </video>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row px-5\"\r\n                                *ngIf=\"inputData.answerType==='image'||inputData.answerType==='descriptiveImage'||inputData.answerType==='multipleImage'||inputData.answerType==='multiplechoicemultiple'\">\r\n                                <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                    <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                    <img class=\"img-logo\" src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\" alt=\"\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row px-5\"\r\n                                *ngIf=\"inputData.answerType==='multiplechoicesingle'||inputData.answerType==='yes/no'||inputData.answerType==='date'||inputData.answerType==='time'||inputData.answerType==='linearscale'||inputData.answerType==='descriptive' \">\r\n                                <div class=\"col-md-6\" *ngFor=\"let item of inputData.userAnswer\">\r\n                                    <span class=\"mt-1\">{{item.answer}}</span>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <form [formGroup]=\"taskForm\">\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Comment\r\n                                    </label>\r\n                                    <textarea [formControl]=\"taskForm.controls.checklistDescription\"\r\n                                        class=\"form-control form-control\" placeholder=\"Enter a permission name\"\r\n                                        name=\"Main entrance signage is cracked, and lights are flickering. Please retake the image\"\r\n                                        rows=\"4\"></textarea>\r\n                                </div>\r\n                                <div class=\"fv-row my-3 fv-plugins-icon-container\">\r\n                                    <div class=\"border-attach col-md-3 cursor-pointer\" (click)=\"fileInput.click()\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                          <path\r\n                                            d=\"M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831\"\r\n                                            stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                          />\r\n                                        </svg>\r\n                                        <span class=\"ms-3\">Add Attachment</span>\r\n                                        <input #fileInput type=\"file\" accept=\".png, .jpg, .jpeg, .svg, .gif\" (change)=\"onFileSelected($event)\" hidden />\r\n                                      </div>\r\n                \r\n                                      <div class=\"image-preview mt-2\" *ngIf=\"previewUrl\">\r\n                                        <button class=\"remove-icon\" (click)=\"removeImage()\">\u2716</button>\r\n                                        <img [src]=\"previewUrl\" alt=\"Preview\" />\r\n                                      </div>\r\n                                </div>\r\n\r\n\r\n                                <div class=\"row mb-3 fv-plugins-icon-container \">\r\n                                    <div class=\"col-md-6\">\r\n                                        <label class=\"label-name my-2\">\r\n                                            Due date\r\n                                        </label>\r\n                                        <div class=\"d-flex align-items-center position-relative my-1\">\r\n                                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                                                    viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                    <path\r\n                                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                                        stroke-linejoin=\"round\" />\r\n                                                </svg>\r\n                                            </span>\r\n                                            <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput\r\n                                                ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\"\r\n                                                [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\"\r\n                                                [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n                                                [ngModelOptions]=\"{standalone: true}\"\r\n                                                [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n                                                autocomplete=\"off\" [(ngModel)]=\"selectedDate\"\r\n                                                (startDateChanged)=\"onStartDateChange($event)\"\r\n                                                [isCustomDate]=\"isCustomDate\"\r\n                                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                                (datesUpdated)=\"datechange($event)\" name=\"daterange\"\r\n                                                [readonly]=\"true\" />\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-md-6\">\r\n                                        <label class=\"label-name my-2\">Due time</label>\r\n                                        <div class=\"position-relative w-100\">\r\n                                          <button\r\n                                            type=\"button\"\r\n                                            (click)=\"openDropdown($event)\"\r\n                                            class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px\"\r\n                                          >\r\n                                            <span class=\"svg-icon svg-icon-1 position-absolute\">\r\n                                              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                <path\r\n                                                  d=\"M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z\"\r\n                                                  stroke=\"#667085\"\r\n                                                  stroke-width=\"1.66667\"\r\n                                                  stroke-linecap=\"round\"\r\n                                                  stroke-linejoin=\"round\"\r\n                                                />\r\n                                              </svg>\r\n                                            </span>\r\n                                            <span class=\"ps-12\">{{ selectedItem }}</span>\r\n                                          </button>\r\n                                          <div *ngIf=\"dropDown\" class=\"card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0\">\r\n                                            <ul class=\"list-unstyled\">\r\n                                              <li\r\n                                                *ngFor=\"let item of timeDetails\"\r\n                                                [ngClass]=\"selectedItem === item.text ? 'active' : ''\"\r\n                                                class=\"camera px-5 items fw-semibold cursor-pointer py-2\"\r\n                                                [class.disabled]=\"isDisabled(item.text)\"\r\n                                                (click)=\"selectItem(item.text)\"\r\n                                              >\r\n                                                {{ item.text }}\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </div>\r\n                                      </div>\r\n                                </div>\r\n\r\n                                <div class=\"fv-row mb-3 fv-plugins-icon-container\">\r\n                                    <label class=\"label-name my-2\">\r\n                                        Assign to\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control\" [value]=\"this.checklistInfo?.submittedBy\"\r\n                                        [disabled]=\"true\">\r\n\r\n                                </div>\r\n                                <div class=\"form-check\">\r\n                                    <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\">\r\n                                    <label class=\"form-check-label label-name\" for=\"flexCheckDefault\">\r\n                                        Mandatory image response\r\n                                    </label>\r\n                                </div>\r\n                                <div class=\"mt-5 w-100\">\r\n                                    <div role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n                                        <button class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n                                        <button id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\"\r\n                                            (click)=\"onSubmit()\">Submit</button>\r\n                                    </div>\r\n                                </div>\r\n\r\n\r\n                            </form>\r\n\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n    </div>\r\n</div>", styles: [".label-name{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.form-control{color:var(--Gray-800, #1D2939)!important;font-size:16px!important;font-weight:400!important;line-height:24px!important}.btn-light1{padding:10px 18px!important;border-radius:8px!important;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Primary-700, #009BF3)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-transform:capitalize}.label-name1{color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500;line-height:24px}.scroll-y{overflow-y:auto;position:relative;overflow-x:hidden}.border-attach{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}img.img-logo{width:100%;height:400px!important}.c-card{padding:24px;background:#fff;border-radius:16px}.question-badge{padding:8px 12px;border-radius:6px;font-size:16px;font-weight:500;line-height:24px;margin-bottom:12px;cursor:pointer}.question-badge-selected{color:#009bf3;background:#eaf8ff}.question-container{border-radius:8px;border:1px solid #D0D5DD;padding:24px 16px 16px;position:relative}.question-container .question-name{position:absolute;top:-15px;left:15px;padding:0 4px;border-radius:4px;border:.5px solid #D0D5DD;background:#fff;color:#101828;font-size:18px;font-style:normal;font-weight:600;line-height:28px}.add-reference-btn{padding:8px 14px;border-radius:8px;border:1px solid #EAF8FF;background:#eaf8ff;box-shadow:0 1px 2px #1018280d;color:#009bf3;font-size:14px;font-weight:600;line-height:20px;cursor:pointer}.ans-header{color:#101828;font-size:20px;font-weight:600;line-height:30px}.check-label{color:#344054;font-size:14px;font-weight:500;line-height:20px}.check-desc{color:#667085;font-size:14px;font-weight:400;line-height:20px}input[type=checkbox].c-checkbox{width:16px!important;height:16px!important;margin:5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox].c-checkbox:checked{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox].c-checkbox:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.plain-input{border:none;outline:none;background:transparent;padding:0;margin:0;width:100%;overflow:hidden;color:var(--black, #101828);text-overflow:ellipsis;font-family:Inter;font-size:18px;font-style:normal;font-weight:500;line-height:28px}.plain-input:focus{border-radius:0!important;border:white!important;outline:none!important;box-shadow:none!important}.checklist-name{font-size:20px;font-weight:600;line-height:28px;text-align:left;color:#667085!important}.checklist-desc{font-size:14px;font-weight:400;line-height:18px;text-align:left}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .daterangepicker{position:fixed!important;top:30%!important;left:50%!important;transform:translate(-50%);z-index:1050!important}.image-preview{position:relative;width:150px;height:150px;border:1px solid #ddd;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.image-preview img{width:100%;height:100%;object-fit:cover}.image-preview .remove-icon{position:absolute;top:0;right:0;background:#df0000;color:#fff;border:none;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px}.image-preview .remove-icon:hover{background:#8b0000}.disabled{color:#b0b0b0;pointer-events:none}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i6.NgbActiveModal }, { type: i2$1.GlobalStateService }, { type: TraxService }, { type: i0.ChangeDetectorRef }, { type: i6.NgbModal }, { type: i1$2.Router }, { type: i3.ToastService }], propDecorators: { type: [{
+                type: Input
+            }], sourceCheckList_id: [{
                 type: Input
             }], taskDetails: [{
                 type: Input
             }], inputData: [{
                 type: Input
+            }], checklistInfo: [{
+                type: Input
+            }], storeProfile: [{
+                type: Input
+            }], sectionInfo: [{
+                type: Input
+            }], operationtype: [{
+                type: Input
             }], closeDropdown: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -5652,7 +5790,7 @@ class GalleryComponent {
     };
     galleryForm;
     type = [{ value: 'checklist', label: 'Checklist' },
-        // {value:'task', label:'Task'}
+        { value: 'task', label: 'Task' }
     ];
     checklists = [];
     answerType = [
@@ -5707,6 +5845,7 @@ class GalleryComponent {
     tempselectedSection = [];
     showmulti = true;
     showsingle = false;
+    showfilter = false;
     previewType = 'image';
     checkListDescription = '';
     constructor(fb, gs, traxService, cd, modalService, route, router, toastService, location, pageInfo) {
@@ -5720,11 +5859,17 @@ class GalleryComponent {
         this.toastService = toastService;
         this.location = location;
         this.pageInfo = pageInfo;
-        this.queryParams = this.route.snapshot.queryParams;
-        this.selectedDateRange = {
-            startDate: this.queryParams.ChecklistDate ? this.dayjs(this.queryParams.ChecklistDate).format('DD-MM-YYYY') : this.dayjs().subtract(1, 'day').format('DD-MM-YYYY'),
-            endDate: this.queryParams.ChecklistDate ? this.dayjs(this.queryParams.ChecklistDate).format('DD-MM-YYYY') : this.dayjs().subtract(1, 'day').format('DD-MM-YYYY')
-        };
+        this.route?.queryParams
+            ?.pipe(takeUntil(this.destroy$))
+            .subscribe((params) => {
+            this.queryParams = params;
+            this.selectedDateRange = {
+                startDate: this.queryParams.ChecklistDate ? this.dayjs(this.queryParams.ChecklistDate).format('DD-MM-YYYY') : this.dayjs().subtract(1, 'day').format('DD-MM-YYYY'),
+                endDate: this.queryParams.ChecklistDate ? this.dayjs(this.queryParams.ChecklistDate).format('DD-MM-YYYY') : this.dayjs().subtract(1, 'day').format('DD-MM-YYYY')
+            };
+            this.getAllStores();
+        });
+        // console.log("1111----->",this.queryParams)
         this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env) => {
             if (env) {
                 this.environment = env;
@@ -5787,6 +5932,14 @@ class GalleryComponent {
             }
         });
     }
+    redoChanged(event) {
+        if (event.target.checked) {
+            this.galleryForm.get("viewRedo")?.setValue(true);
+        }
+        else {
+            this.galleryForm.get("viewRedo")?.setValue(false);
+        }
+    }
     flagChanged(event) {
         if (event.target.checked) {
             this.galleryForm.get("viewFlag")?.setValue(true);
@@ -5796,7 +5949,13 @@ class GalleryComponent {
         }
     }
     onchecklistreset() {
-        this.getChecklistQA(false);
+        this.showmulti = true;
+        if (this.galleryForm.value.type === 'checklist') {
+            this.getChecklistQA(false);
+        }
+        else {
+            this.getTaskQA(this.galleryForm.value.type);
+        }
     }
     resetValidation() {
         this.isCustomDate = (m) => {
@@ -5818,7 +5977,6 @@ class GalleryComponent {
             this.selectAll = event.target.checked;
             this.mobileusageDataList.forEach((obj) => (obj.checked = this.selectAll));
             let store = this.mobileusageDataList.filter((el) => el.checked);
-            console.log(store);
             const change = JSON.parse(JSON.stringify(store));
             this.galleryForm.get('storeList')?.setValue(change);
         }
@@ -5844,11 +6002,12 @@ class GalleryComponent {
         this.galleryForm = this.fb.group({
             fromDate: [dayjs(this.selectedDateRange.startDate, "DD-MM-YYYY").format("YYYY-MM-DD")],
             toDate: [dayjs(this.selectedDateRange.endDate, "DD-MM-YYYY").format('YYYY-MM-DD')],
-            type: ['checklist'],
+            type: 'checklist',
             checklistName: '',
             storeList: [this.stores],
             answerType: ['all'],
             viewFlag: [false],
+            viewRedo: [false],
             checkListType: "custom",
             checkListId: "",
             groupList: [this.groups],
@@ -5883,7 +6042,12 @@ class GalleryComponent {
                         let getstore = this.storeList.filter((ele) => ele.storeId === this.queryParams.storeId);
                         this.stores = getstore;
                         this.galleryForm.get('storeList')?.setValue(this.stores);
-                        this.getAllCheckLists(true);
+                        if (this.queryParams.checklistType == 'task') {
+                            this.getAllTasks(true);
+                        }
+                        else {
+                            this.getAllCheckLists(true);
+                        }
                     }
                     else {
                         this.stores = res.data.storesData;
@@ -6052,6 +6216,38 @@ class GalleryComponent {
         });
         this.cd.detectChanges();
     }
+    storeListdropdownTask() {
+        this.traxService.getStoreslist({ clientId: this.headerFilters.client, clusters: this.groups, city: [] }).subscribe({
+            next: (res) => {
+                if (res && res.code == 200) {
+                    let stores = res.data.storesData.map((data) => data.storeId);
+                    let obj = {
+                        "fromDate": this.galleryForm.value.fromDate,
+                        "toDate": this.galleryForm.value.toDate,
+                        "ChecklistType": this.galleryForm.value.type,
+                        "checklistName": this.galleryForm.value.checklistName,
+                        "checklistId": this.galleryForm.value.checkListId,
+                        "storeId": stores,
+                        "answerType": this.galleryForm.value.answerType,
+                        "viewFlag": this.galleryForm.value.viewFlag,
+                        "viewRedo": this.galleryForm.value.viewRedo //[true, false]
+                    };
+                    this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+                        next: (res) => {
+                            if (res && res.code === 200) {
+                                this.stores = res.data.storesDetails;
+                                this.storeList = res.data.storesDetails;
+                                this.gettaskQA(false);
+                            }
+                            else {
+                                this.gettaskQA(false);
+                            }
+                        }
+                    });
+                }
+            }
+        });
+    }
     storeListdropdown() {
         this.traxService.getStoreslist({ clientId: this.headerFilters.client, clusters: this.groups, city: [] }).subscribe({
             next: (res) => {
@@ -6065,7 +6261,8 @@ class GalleryComponent {
                         "checklistId": this.galleryForm.value.checkListId,
                         "storeId": stores,
                         "answerType": this.galleryForm.value.answerType,
-                        "viewFlag": this.galleryForm.value.viewFlag //[true, false]
+                        "viewFlag": this.galleryForm.value.viewFlag,
+                        "viewRedo": this.galleryForm.value.viewRedo //[true, false]
                     };
                     this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
                         next: (res) => {
@@ -6115,8 +6312,13 @@ class GalleryComponent {
             this.customerunattendedlist(false);
         }
         else {
-            this.select = this.galleryForm.value.type === 'checklist' ? "custom" : "";
-            this.storeListdropdown();
+            this.select = this.galleryForm.value.type === 'checklist' ? "custom" : this.galleryForm.value.type;
+            if (this.galleryForm.value.type === 'checklist') {
+                this.storeListdropdown();
+            }
+            else {
+                this.storeListdropdownTask();
+            }
         }
     }
     show = 0;
@@ -6289,10 +6491,13 @@ class GalleryComponent {
         if (event.target.checked) {
             if (this.tempselectedSection.length == 0) {
                 let questions = [];
+                let answer = [];
+                answer.push(Question.answerType);
                 questions.push(Question.qname.replace(/\n/g, " "));
                 let response = {
                     sectionName: section.sectionName,
-                    questions: questions
+                    questions: questions,
+                    answerType: answer
                 };
                 this.tempselectedSection.push(response);
             }
@@ -6307,10 +6512,13 @@ class GalleryComponent {
                 }
                 else {
                     let questions = [];
+                    let answer = [];
+                    answer.push(Question.answerType);
                     questions.push(Question.qname.replace(/\n/g, " "));
                     let response = {
                         sectionName: section.sectionName,
-                        questions: questions
+                        questions: questions,
+                        answerType: answer
                     };
                     this.tempselectedSection.push(response);
                 }
@@ -6330,12 +6538,13 @@ class GalleryComponent {
             this.tempselectedSection.map((data) => {
                 if (data.sectionName == section.sectionName) {
                     data.questions = data.questions.filter((ele) => ele != Question.qname.replace(/\n/g, " "));
+                    data.answerType = data.answerType.filter((ele) => ele != Question.answerType);
                 }
             });
             this.tempselectedSection = this.tempselectedSection.filter((ele) => ele.questions.length > 0);
         }
         this.selectedExport = this.tempselectedSection.length > 0;
-        console.log(this.tempselectedSection);
+        // console.log(this.tempselectedSection)
     }
     getmobileUsageDatalist(type) {
         this.loading = true;
@@ -6509,11 +6718,86 @@ class GalleryComponent {
         else if (this.questionscount(this.selectedSection) == 1) {
             this.showsingle = true;
             this.showmulti = false;
+            // console.log(this.selectedSection)
         }
         this.offset = 1;
         this.viewloading = true;
         this.viewnoData = false;
         let stores = this.galleryForm.value.storeList.map((data) => data.storeId);
+        // console.log(this.galleryForm.value.type)
+        if (this.galleryForm.value.type === 'checklist') {
+            let obj = {
+                "fromDate": this.galleryForm.value.fromDate,
+                "toDate": this.galleryForm.value.toDate,
+                "ChecklistType": this.galleryForm.value.checkListType,
+                "checklistName": this.galleryForm.value.checklistName,
+                "checklistId": this.galleryForm.value.checkListId,
+                "storeId": stores,
+                "answerType": this.galleryForm.value.answerType,
+                "viewFlag": this.galleryForm.value.viewFlag,
+                "viewRedo": this.galleryForm.value.viewRedo //[true, false]
+            };
+            this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+                next: (res) => {
+                    if (res && res.code === 200) {
+                        // this.checklistData = res?.data.checklistQuestions;
+                        this.loading = false;
+                        this.noData = false;
+                        this.galleryForm.get('storeList')?.setValue(res?.data?.storesDetails);
+                        this.viewChecklists("all", "all");
+                    }
+                    else {
+                        this.checklistData = [];
+                        this.viewChecklistsData = [];
+                        this.loading = false;
+                        this.noData = true;
+                        this.viewloading = false;
+                        this.viewnoData = true;
+                    }
+                }
+            });
+        }
+        else {
+            let obj = {
+                "fromDate": this.galleryForm.value.fromDate,
+                "toDate": this.galleryForm.value.toDate,
+                "ChecklistType": this.galleryForm.value.type,
+                "checklistName": this.galleryForm.value.checklistName,
+                "checklistId": this.galleryForm.value.checkListId,
+                "storeId": stores,
+                "answerType": this.galleryForm.value.answerType,
+                "viewFlag": this.galleryForm.value.viewFlag,
+                "viewRedo": this.galleryForm.value.viewRedo //[true, false]
+            };
+            this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+                next: (res) => {
+                    if (res && res.code === 200) {
+                        // this.checklistData = res?.data.checklistQuestions;
+                        this.loading = false;
+                        this.noData = false;
+                        this.galleryForm.get('storeList')?.setValue(res?.data?.storesDetails);
+                        this.viewTaskList("all", "all");
+                    }
+                    else {
+                        this.checklistData = [];
+                        this.viewChecklistsData = [];
+                        this.loading = false;
+                        this.noData = true;
+                        this.viewloading = false;
+                        this.viewnoData = true;
+                    }
+                }
+            });
+        }
+    }
+    getChecklistQA(type) {
+        this.selectedSection = [];
+        this.tempselectedSection = [];
+        this.loading = true;
+        this.noData = false;
+        this.viewloading = true;
+        this.viewnoData = false;
+        let stores = this.galleryForm.value.storeList.map((data) => data.storeId);
         let obj = {
             "fromDate": this.galleryForm.value.fromDate,
             "toDate": this.galleryForm.value.toDate,
@@ -6522,12 +6806,13 @@ class GalleryComponent {
             "checklistId": this.galleryForm.value.checkListId,
             "storeId": stores,
             "answerType": this.galleryForm.value.answerType,
-            "viewFlag": this.galleryForm.value.viewFlag //[true, false]
+            "viewFlag": this.galleryForm.value.viewFlag,
+            "viewRedo": this.galleryForm.value.viewRedo //[true, false]
         };
         this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
             next: (res) => {
                 if (res && res.code === 200) {
-                    // this.checklistData = res?.data.checklistQuestions;
+                    this.checklistData = res?.data.checklistQuestions;
                     this.loading = false;
                     this.noData = false;
                     this.galleryForm.get('storeList')?.setValue(res?.data?.storesDetails);
@@ -6544,7 +6829,7 @@ class GalleryComponent {
             }
         });
     }
-    getChecklistQA(type) {
+    gettaskQA(type) {
         this.selectedSection = [];
         this.tempselectedSection = [];
         this.loading = true;
@@ -6555,21 +6840,22 @@ class GalleryComponent {
         let obj = {
             "fromDate": this.galleryForm.value.fromDate,
             "toDate": this.galleryForm.value.toDate,
-            "ChecklistType": this.galleryForm.value.checkListType,
+            "ChecklistType": this.galleryForm.value.type,
             "checklistName": this.galleryForm.value.checklistName,
             "checklistId": this.galleryForm.value.checkListId,
             "storeId": stores,
             "answerType": this.galleryForm.value.answerType,
-            "viewFlag": this.galleryForm.value.viewFlag //[true, false]
+            "viewFlag": this.galleryForm.value.viewFlag,
+            "viewRedo": this.galleryForm.value.viewRedo //[true, false]
         };
-        this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+        this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
             next: (res) => {
                 if (res && res.code === 200) {
                     this.checklistData = res?.data.checklistQuestions;
                     this.loading = false;
                     this.noData = false;
                     this.galleryForm.get('storeList')?.setValue(res?.data?.storesDetails);
-                    this.viewChecklists("all", "all");
+                    this.viewTaskList("all", "all");
                 }
                 else {
                     this.checklistData = [];
@@ -6582,6 +6868,50 @@ class GalleryComponent {
             }
         });
     }
+    viewTaskList(sectionName, questionName) {
+        this.selectedExport = false;
+        this.sectionName = sectionName;
+        this.questionName = questionName;
+        this.limit = 1;
+        this.paginationSizes = [1];
+        if (this.selectedSection.length > 0) {
+            this.limit = 10,
+                this.paginationSizes = [10];
+        }
+        this.viewloading = true;
+        this.viewnoData = false;
+        let stores = this.galleryForm.value.storeList.map((data) => data.storeId);
+        this.viewChecklistsoptions = {
+            "fromDate": this.galleryForm.value.fromDate,
+            "toDate": this.galleryForm.value.toDate,
+            "ChecklistType": this.galleryForm.value.type,
+            "checklistName": this.galleryForm.value.checklistName,
+            "storeId": stores,
+            "answerType": this.galleryForm.value.answerType,
+            "offset": (this.offset - 1),
+            "limit": this.limit,
+            "checklistId": this.galleryForm.value.checkListId,
+            "sourceCheckList_id": this.galleryForm.value.checkListId,
+            "viewFlag": this.galleryForm.value.viewFlag,
+            "viewRedo": this.galleryForm.value.viewRedo,
+            "questions": this.selectedSection
+        };
+        this.traxService.getAnswers(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
+            next: (res) => {
+                if (res && res.code === 200) {
+                    this.viewChecklistsData = res.data;
+                    this.totalCount = this.viewChecklistsData.total_count;
+                    this.viewloading = false;
+                    this.viewnoData = false;
+                }
+                else {
+                    this.viewChecklistsData = [];
+                    this.viewloading = false;
+                    this.viewnoData = true;
+                }
+            }
+        });
+    }
     viewChecklists(sectionName, questionName) {
         // this.selectedSection = []
         this.selectedExport = false;
@@ -6608,6 +6938,7 @@ class GalleryComponent {
             "checklistId": this.galleryForm.value.checkListId,
             "sourceCheckList_id": this.galleryForm.value.checkListId,
             "viewFlag": this.galleryForm.value.viewFlag,
+            "viewRedo": this.galleryForm.value.viewRedo,
             "questions": this.selectedSection
         };
         this.traxService.viewChecklists(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
@@ -6756,7 +7087,8 @@ class GalleryComponent {
             "clientId": this.headerFilters.client,
             "questions": this.selectedSection,
             "previewType": this.previewType,
-            "viewFlag": this.galleryForm.value.viewFlag
+            "viewFlag": this.galleryForm.value.viewFlag,
+            "viewRedo": this.galleryForm.value.viewRedo //[true, false]
         };
         if (type === 'Export as CSV' || type === 'Export as PPT' || type === 'Export as ZIP') {
             const modalRef = this.modalService.open(ExportGalleryComponent, {
@@ -6793,12 +7125,162 @@ class GalleryComponent {
             });
         }
     }
-    reset() {
+    typeChange(event) {
+        // console.log(event)
+        this.galleryForm.get('type')?.setValue(event);
+        if (event === 'task') {
+            this.getAllTasks(event);
+        }
+        else {
+            this.getAllCheckLists(event);
+        }
+    }
+    getAllTasks(type) {
+        let stores = this.stores?.map((data) => data.storeId);
+        const payload = {
+            fromDate: this.galleryForm.get('fromDate')?.value,
+            toDate: this.galleryForm.get('toDate')?.value,
+            storeId: stores,
+            clientId: this.headerFilters?.client,
+            sortColumnName: "checkListName",
+            sortBy: 1
+        };
+        this.traxService.getTaskList(payload).subscribe({
+            next: (res) => {
+                if (res && res.code == 200) {
+                    this.checklists = res.data.checklistData;
+                    // console.log(this.queryParams)
+                    setTimeout(() => {
+                        if (this.queryParams.checklistId && this.queryParams.checklistType == 'task') {
+                            this.galleryForm.get('checkListId')?.setValue(this.queryParams.checklistId);
+                            this.galleryForm.get('type')?.setValue('task');
+                            this.galleryForm.get('checkListType')?.setValue(this.queryParams.checklistType);
+                            let getchecklist = this.checklists.filter((ele) => ele.sourceCheckList_id === this.queryParams.checklistId);
+                            if (getchecklist && getchecklist.length > 0) {
+                                this.galleryForm.get('checklistName')?.setValue(getchecklist[0]?.checkListName);
+                                this.galleryForm.get('checkListDescription')?.setValue(getchecklist[0]?.checkListDescription);
+                                this.checklistName = getchecklist[0]?.checkListName;
+                            }
+                            this.removeQueryParams();
+                        }
+                        else {
+                            this.galleryForm.get('checklistName')?.setValue(this.checklists[0]?.checkListName);
+                            this.galleryForm.get('checklistId')?.setValue(this.checklists[0]?.checklistId);
+                        }
+                        this.gettaskQA(false);
+                    }, 0);
+                }
+                else {
+                    this.checklists = [];
+                }
+            }
+        });
+    }
+    getTaskQA(type) {
+        this.selectedSection = [];
+        this.tempselectedSection = [];
+        this.loading = true;
+        this.noData = false;
+        this.viewloading = true;
+        this.viewnoData = false;
+        let stores = this.galleryForm.value.storeList.map((data) => data.storeId);
+        let obj = {
+            "fromDate": this.galleryForm.value.fromDate,
+            "toDate": this.galleryForm.value.toDate,
+            "ChecklistType": this.galleryForm.value.type,
+            "checklistName": this.galleryForm.value.checklistName,
+            "checklistId": this.galleryForm.value.checkListId,
+            "storeId": stores,
+            "answerType": this.galleryForm.value.answerType,
+            "viewFlag": this.galleryForm.value.viewFlag,
+            "viewRedo": this.galleryForm.value.viewRedo //[true, false]
+        };
+        this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+            next: (res) => {
+                if (res && res.code === 200) {
+                    this.checklistData = res?.data.checklistQuestions;
+                    this.loading = false;
+                    this.noData = false;
+                    this.galleryForm.get('storeList')?.setValue(res?.data?.storesDetails);
+                    this.viewTaskList("all", "all");
+                }
+                else {
+                    this.checklistData = [];
+                    this.viewChecklistsData = [];
+                    this.loading = false;
+                    this.noData = true;
+                    this.viewloading = false;
+                    this.viewnoData = true;
+                }
+            }
+        });
+    }
+    viewTasks(sectionName, questionName) {
+        // this.selectedSection = []
+        this.selectedExport = false;
+        this.sectionName = sectionName;
+        this.questionName = questionName;
+        this.limit = 1;
+        this.paginationSizes = [1];
+        if (this.selectedSection.length > 0) {
+            this.limit = 10,
+                this.paginationSizes = [10];
+        }
+        this.viewloading = true;
+        this.viewnoData = false;
+        let stores = this.galleryForm.value.storeList.map((data) => data.storeId);
+        this.viewChecklistsoptions = {
+            "fromDate": this.galleryForm.value.fromDate,
+            "toDate": this.galleryForm.value.toDate,
+            "ChecklistType": this.galleryForm.value.checkListType,
+            "checklistName": this.galleryForm.value.checklistName,
+            "storeId": stores,
+            "answerType": this.galleryForm.value.answerType,
+            "offset": (this.offset - 1),
+            "limit": this.limit,
+            "checklistId": this.galleryForm.value.checkListId,
+            "sourceCheckList_id": this.galleryForm.value.checkListId,
+            "viewFlag": this.galleryForm.value.viewFlag,
+            "viewRedo": this.galleryForm.value.viewRedo,
+            "questions": this.selectedSection
+        };
+        this.traxService.viewChecklists(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
+            next: (res) => {
+                if (res && res.code === 200) {
+                    this.viewChecklistsData = res.data;
+                    this.totalCount = this.viewChecklistsData.total_count;
+                    this.viewloading = false;
+                    this.viewnoData = false;
+                }
+                else {
+                    this.viewChecklistsData = [];
+                    this.viewloading = false;
+                    this.viewnoData = true;
+                }
+            }
+        });
+    }
+    taskredirect(question, storeProfile, checklistInfo) {
+        this.router.navigate(['/manage/trax/gallery'], {
+            queryParams: {
+                ChecklistDate: dayjs(checklistInfo.date).format('YYYY-MM-DD'),
+                storeId: storeProfile?.store_id,
+                checklistType: "task",
+                checklistId: question.taskId,
+            },
+            relativeTo: this.route,
+            queryParamsHandling: 'merge',
+        });
     }
-    addTask(type, data) {
+    addTask(type, data, checklistInfo, storeProfile, section) {
         const modalRef = this.modalService.open(AddTaskComponent, { centered: true, size: 'lg', });
         modalRef.componentInstance.type = type;
+        modalRef.componentInstance.operationtype = this.galleryForm.value.type;
+        modalRef.componentInstance.sourceCheckList_id = this.galleryForm.value.checkListId;
         modalRef.componentInstance.inputData = data;
+        modalRef.componentInstance.checklistInfo = checklistInfo;
+        modalRef.componentInstance.storeProfile = storeProfile;
+        modalRef.componentInstance.sectionInfo = section;
         modalRef.componentInstance.taskDetails = {
             sections: [
                 {
@@ -6809,6 +7291,9 @@ class GalleryComponent {
             ]
         };
         modalRef.result.then((result) => {
+            if (result == 'submit') {
+                this.getChecklistQA(true);
+            }
         });
     }
     selectedTask = 'yes';
@@ -6816,11 +7301,11 @@ class GalleryComponent {
         this.selectedTask = task;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, deps: [{ token: i1.FormBuilder }, { token: i2$1.GlobalStateService }, { token: TraxService }, { token: i0.ChangeDetectorRef }, { token: i6.NgbModal }, { token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i3.ToastService }, { token: i6$1.Location }, { token: i2$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryComponent, selector: "lib-gallery", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"gallery-card\">\r\n    <div class=\"header mb-4\">Gallery</div>\r\n\r\n    <form [formGroup]=\"galleryForm\">\r\n        <div class=\"row\">\r\n            <div class=\"col-md-12\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-md-3 mb-3\">\r\n                        <div class=\"position-relative\">\r\n                            <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n                                type=\"text\" matInput ngxDaterangepickerMd  [drops]=\"'down'\"\r\n                                [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n                                [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                                [ngModelOptions]=\"{standalone: true}\"  (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n                                (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                 name=\"daterange\" [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-2 mb-4\">\r\n                        <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"type\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <lib-select [items]=\"checklists\"  [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'checkListName'\"\r\n                         (selected)=\"checklistNamechange($event,false)\" [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-select>\r\n                    </div>                   \r\n                    <div class=\"col-md-3 mb-4\">\r\n                        <lib-reactive-select formControlName=\"answerType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"answerType\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <div class=\"select-wrapper\">\r\n                            <!-- Placeholder Overlay -->\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('groupList')?.value?.length)\">\r\n                              Select cluster\r\n                            </div>\r\n                          \r\n                            <!-- Actual Select Component -->\r\n                            <lib-group-select [items]=\"groupList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n                                               [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n                                               [selectedValues]=\"galleryForm.get('groupList')?.value\">\r\n                            </lib-group-select>\r\n                          </div>\r\n                          \r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <div class=\"select-wrapper\">\r\n                        <!-- Placeholder Overlay -->\r\n                        <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n                            Select Stores\r\n                          </div>\r\n                        <!-- {{storeList.length}}\r\n                        {{galleryForm.get('storeList')?.value.length}} -->\r\n                          <!-- Actual Select Component -->\r\n                        <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n                            [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n                            [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n                    </div>\r\n                   </div>\r\n                    <div class=\"col-md-4 text-end\">\r\n                        <div class=\"d-flex justify-content-end\">\r\n                            <span class=\"me-4 mt-3\">\r\n                                    \r\n                        \r\n                                <input formControlName=\"viewFlag\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"flagChanged($event)\" \r\n                                            class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n                                        <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewFlag\">View Re-do\u2019s only</label>\r\n                                    </span>\r\n                            <span class=\"me-3 mt-3\">\r\n                                    \r\n                        \r\n                            <input formControlName=\"viewFlag\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"flagChanged($event)\" \r\n                                        class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n                                    <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewFlag\">View flagged only</label>\r\n                                </span>\r\n                            <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            \r\n\r\n        </div>\r\n    </form>\r\n</div>\r\n<div class=\"row my-5\">\r\n    <div [ngClass]=\"showsidenav ? 'col-md-4':'d-none'\">\r\n        <div class=\"card position-relative h-auto\">\r\n            <div class=\"card-body p-5\">\r\n                <div class=\"checklist-left\">\r\n                    <div class=\"checklist-title\">{{this.checklistName}}</div>\r\n                    <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n                </div>\r\n                <div *ngIf=\"loading\" class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"noData\" class=\"row mt-20\">\r\n                    <div class=\"col-lg-12 mt-20 mb-3\">\r\n                        <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                            <img class=\"w-50 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                            <div class=\"nodata-title mt-0\">No data found</div>\r\n                            <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <section *ngIf=\"!noData && !loading\">\r\n\r\n                    <div *ngIf=\"select === 'custom'\">\r\n                        <div class=\"text-end mt-10\">\r\n                            <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n                            <button class=\"btn btn-outline w-25 me-3 btn-resize\" *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" (click)=\"onchecklistreset()\"> Reset </button>\r\n                            <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" class=\"btn btn-primary w-25  btn-resize\" (click)=\"selectsinglequestion()\">Apply</button>\r\n                                </div>\r\n                        <div class=\"my-6\"  [ngClass]=\"selectedSection.length==0 ? 'view-all':'view-questions'\" style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n                            View All Answers\r\n                        </div>\r\n                        <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n                            <div class=\"d-flex align-items-center justify-content-between mt-4\" style=\"cursor: pointer;\"\r\n                                (click)=\"accordian(i)\">\r\n                                <div class=\"fs-4 fw-bold section\" >{{section.sectionName}}</div>\r\n                                <hr class=\"mx-2\">\r\n                                <svg  class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </div>\r\n                            <div *ngIf=\"show===i\" class=\"question-left\">\r\n                                <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n                                    <div *ngFor=\"let question of section.questions;let j=index;\" class=\"d-flex my-2 q-btn\"\r\n                                        cdkDrag>\r\n                                        <input  id=\"label\" [(ngModel)]=\"question.checked\" (click)=\"selectedQuestion($event,section,question)\" class=\"form-check-input cursor-pointer mt-2 me-4\"  type=\"checkbox\" >                                                           \r\n                                        <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\" style=\"cursor: pointer;\">\r\n                                            {{question.qno}} . {{question.qname}}\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                <!-- </div>  -->\r\n                <div *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'||select ==='storeopenandclose'||select==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n                    <div class=\"text-end mt-10\">\r\n                <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset </button>\r\n                <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"onview()\">Apply</button>\r\n                    </div>\r\n                    <div class=\"dropdownselect h-900px scroll-y\">\r\n                        <div class=\"d-flex justify-content-left \" [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n                            <input\r\n                            class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"  [(ngModel)]=\"selectAll\"\r\n                            (click)=\"selectAllStore($event)\"> <span [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n                        </div>\r\n                        <!-- dropdownbg -->\r\n                        <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n                            <div (change)=\"updateCheck($event,list)\" [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n                                <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"  type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n                                <label for=\"label{{i}}\" [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\" >{{list?.storeName}}</label>\r\n                                <span class=\"badge badge-light-primary detectionright\" *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n</div>\r\n                </section>\r\n                \r\n            </div>\r\n\r\n\r\n\r\n           \r\n\r\n            <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"showsidenav ? 'col-md-8':'col-md-12'\">\r\n        <div class=\"card position-relative h-100\">\r\n            <div class=\"card-header border-0  px-0 my-0\" *ngIf=\"select ==='custom'&&!viewloading&&!viewnoData\">\r\n                <h3></h3>\r\n                <!-- Switch toggle -->\r\n                <div class=\"card-toolbar\">\r\n                    <div class=\"position-relative cursor-pointer me-10\">\r\n                        <div class=\"ms-5 btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n                          {{ exportLabel }} <!-- Bind label text here -->\r\n                        </div>\r\n                      </div>\r\n                      <div *ngIf=\"exportShow\"\r\n                        class=\"card py-2  position-absolute productdrop top-20 end-0 mt-10 z-1\">\r\n                        <ul class=\"list-unstyled mb-2\">\r\n                          <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n                            Export as PDF\r\n                          </li>\r\n                          <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n                            Export as CSV\r\n                          </li>\r\n                          <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n                            Export as PPT\r\n                          </li>\r\n                          <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n                            Export as ZIP\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                </div>\r\n            </div>\r\n            \r\n            <div class=\"card-body p-0\">\r\n                <div>\r\n                    <div *ngIf=\"viewloading\" class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"viewnoData\" class=\"row mt-20\">\r\n                        <div class=\"col-lg-12 mt-20  mb-3\">\r\n                            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                                <div class=\"nodata-title\">No data found</div>\r\n                                <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <section *ngIf=\"!viewloading && !viewnoData\">\r\n                        <div *ngIf=\"select==='custom' \">\r\n                            <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">{{this.selectedSection[0]?.questions[0]}}</div>\r\n                            <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n                                <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                    <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                                </div>\r\n                                <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n                                    <div class=\"col-md-3\">\r\n                                        <h3 class=\"uni-title\">Store Name:</h3>\r\n                                    </div>\r\n                                    <div class=\"col-md-9\">\r\n                                        <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n                                    </div>\r\n                                    <div class=\"col-md-3\">\r\n                                        <h3 class=\"uni-title\">Checklist Name:</h3>\r\n                                    </div>\r\n                                    <div class=\"col-md-9\">\r\n                                        <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n                                    </div>\r\n\r\n                                    <ng-container>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">State & Country :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n                                                {{checklist?.storeProfile?.Country}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Duration :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">No. of Questions :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Date :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">Submitted By :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Time :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n                                        </div>\r\n                                    </ng-container>\r\n\r\n                                </div>\r\n                                <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n                                    <li class=\"nav-item\">\r\n                                        <a (click)=\"taskTab('yes')\" [ngClass]=\"selectedTask === 'yes' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                            Yes<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'yes' ? 'badge-num-primary' :'badge-num-muted'\">10</span>\r\n                                        </a>\r\n                                    </li>\r\n                                    <li class=\"nav-item\" >\r\n                                        <a (click)=\"taskTab('no')\" [ngClass]=\"selectedTask === 'no' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                            No<span class=\"mx-2\" [ngClass]=\"selectedTask ==='no' ? 'badge-num-primary' :'badge-num-muted'\">20</span>\r\n                                        </a>\r\n                                    </li>    \r\n                                    <li class=\"nav-item\">\r\n                                        <a (click)=\"taskTab('maybe')\" [ngClass]=\"selectedTask === 'maybe' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                            May be<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'maybe' ? 'badge-num-primary' :'badge-num-muted'\">0</span>\r\n                                        </a>\r\n                                    </li>\r\n                                 \r\n                                </ul>\r\n                                <div class=\"row px-10\" >\r\n\r\n                                    <div *ngFor=\"let questionlist of checklist.questionAnswer\">\r\n                                        <div class=\"qa-bodrer my-5\" *ngFor=\"let question of questionlist.questions\">\r\n                                            <div class=\"row w-100 m-3\" *ngIf=\"showsingle\">\r\n                                                <div class=\"col-md-4 text-title\">\r\n                                                    {{checklist?.storeProfile?.storeName}}\r\n                                                </div>\r\n                                                <div class=\"col-md-8 text-end title-description\">\r\n                                                    Submitted by : {{checklist?.checklistInfo?.submittedBy}} On : {{checklist?.checklistInfo?.date}} {{checklist?.checklistInfo?.time}}\r\n                                                </div>\r\n                                            </div>\r\n                                            <ul>\r\n                                                <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}. {{question?.qname}}</li>\r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='descriptive'\">\r\n                                                    <div *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                  \r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='linearscale'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <!-- <br> -->\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='time'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <br>\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n\r\n\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='date'\">\r\n                                            <div *ngFor=\"let item of question.userAnswer\">\r\n                                                <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                    <img class=\"img-logo\"\r\n                                                        src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                        alt=\"\">\r\n                                                </div>\r\n                                                <br>\r\n                                                <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                            </div>\r\n                                             </div>\r\n\r\n\r\n\r\n\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='yes/no'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <br *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"row\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                        <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                        <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                            alt=\"\">\r\n                                                            <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                        </div>\r\n                                                            <span class=\"remarksTxt\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer :{{item.validationAnswer}}</span>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>  \r\n\r\n\r\n\r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div *ngFor=\"let item of question.userAnswer\">\r\n                                                        <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                            <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                            <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                              \r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='image'\">\r\n                                                    <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                            alt=\"\">\r\n                                                        </div>\r\n                                                            <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\"></div>\r\n                                                    <div class=\"Partially my-3 px-5\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <span class=\"mt-3\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                            <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                            <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                            alt=\"\">\r\n                                                            <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                            <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    \r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n                                                    \r\n                                                    <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <img class=\"img-logo\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                    alt=\"\">\r\n                                                        </div>\r\n                                                            <div class=\"col-md-6 mt-3\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span [ngClass]=\"item.sopFlag ? 'flagclour':''\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    \r\n                                                    <div class=\"Partially my-3 px-5\" *ngIf=\"question.remarks!=''\">{{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Video</div>\r\n\r\n                                                        <video controls class=\"recap-img p-3\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                                        </video>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='multipleImage'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                            alt=\"\">\r\n                                                            <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                                \r\n                                            </ul>\r\n                                            <div class=\"row\">\r\n                                                <div class=\"col-md-12 text-end\">\r\n                                                    <button class=\"btn btn-sm btn-default border-default me-3\" (click)=\"addTask('redo',question)\">\r\n                                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                            <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                            <path d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                            </g>\r\n                                                            <defs>\r\n                                                            <clipPath id=\"clip0_6004_11734\">\r\n                                                            <rect width=\"20\" height=\"20\" fill=\"white\"/>\r\n                                                            </clipPath>\r\n                                                            </defs>\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-defult-task\">Redo</span>\r\n                                                    </button>\r\n\r\n                                                    <button class=\"btn btn-sm  border-val1\" (click)=\"addTask('createtask',question)\">\r\n                                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                            <path d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-task\">Task</span>\r\n                                                    </button>\r\n                                                    <button *ngIf=\"\" class=\"btn btn-sm btn-light-primary border-val1\">\r\n                                                            <span class=\"ms-2 font-task\">View Task</span>\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                        <div class=\"px-10 my-5\" *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'\">\r\n                            <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                            </div>\r\n                            <div>\r\n                                <h2>Checklist Name : {{this.checklistName}}</h2>\r\n                            </div>\r\n                            <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item  of mobileusageData\">\r\n                                <ul class=\"row w-100\">\r\n                                    <li class=\"qa-heading\">\r\n                                        {{item.storeName}}\r\n                                    </li>\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imageUrl\">\r\n                                            <div class=\"\">\r\n                                                <img class=\"w-100 h-500px rounded-top\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n                                                <div class=\"text-center mt-3\" *ngIf=\"select ==='uniformdetection'\">\r\n                                                    Uniform Detection</div>\r\n                                                <div class=\"text-center mt-3\" *ngIf=\"select ==='mobileusagedetection'\">\r\n                                                    Mobile Usage Detection</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </ul>\r\n                            </div>\r\n\r\n                        </div>\r\n                        <div class=\"px-10 my-5\" *ngIf=\"select ==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n                            <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                            </div>\r\n                            <div>\r\n                                <h2>Checklist Name : {{this.checklistName}}</h2>\r\n                            </div>\r\n                            <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item  of customerunattendedData\">\r\n                                <ul class=\"row w-100\">\r\n                                    <li class=\"qa-heading\">\r\n                                       \r\n                                    </li>\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imagesData\">\r\n                                            <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n                                                <h3 class=\"card-title\">\r\n                                                    <span class=\"me-3 store-title\">{{item.storeName}}</span>\r\n                                                    <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.customer_id\">Cust ID : {{detection.customer_id}}</span>\r\n                                                </h3>\r\n                                            \r\n                                                <!-- Switch toggle -->\r\n                                                <div class=\"card-toolbar\">\r\n                                                    <div class=\"col-md-12 text-end\">\r\n                                                        <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_entry_time\">Entry time : {{detection.customer_entry_time}}</span>\r\n                                                        <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_exit_time\">Exit time : {{detection.customer_exit_time}}</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                           \r\n                                              \r\n                                            <div class=\"my-0\">\r\n                                                <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\" alt=\"\">  \r\n                                                    </video>                                             \r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </ul>\r\n                            </div>\r\n\r\n                        </div>\r\n                        <div *ngIf=\"select ==='storeopenandclose'\">\r\n                            <div class=\"col-md-12 card\" *ngFor=\"let item of storeOpencloseView\">\r\n                                <div class=\"snapcard mx-8 my-8\">\r\n                                    <div class=\"snapheader ms-6\">\r\n                                        {{item.storeName}}\r\n                                    </div>\r\n                                    <div class=\"row m-0 w-100\">\r\n                                        <div class=\"col-6\">\r\n                                            <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n                                                <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n                                                    <span>\r\n                                                        <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                            <g id=\"Group\">\r\n                                                                <path id=\"Vector\"\r\n                                                                    d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                                \\\r\n                                                                <path id=\"Vector_2\"\r\n                                                                    d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </g>\r\n                                                        </svg>\r\n\r\n                                                    </span>\r\n                                                    <span class=\"prvtxt mt-5 textclr\">Preview not\r\n                                                        available</span>\r\n                                                    <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n                                                        is not available at the moment.</span>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"row\" *ngIf=\"item.openTime\">\r\n                                                <img class=\"mx-1 img-opc\"\r\n                                                    src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/open.jpeg\"\r\n                                                    alt=\"Checklist Video Player\">\r\n                                                <div class=\"col-12\">\r\n                                                    <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n                                                        <div>\r\n                                                            <div class=\"snaptext\">Opening Snap</div>\r\n                                                            <div class=\"snaptime\">{{item.openTime}} - {{item.date}}\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <span class=\"badge badge-light-primary snapbadge\"\r\n                                                            *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n                                                        <span class=\"badge badge-light-danger snapbadge\"\r\n                                                            *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </div>\r\n                                        <div class=\"col-6\">\r\n                                            <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.closeTime\">\r\n                                                <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n                                                    <span>\r\n                                                        <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                            <g id=\"Group\">\r\n                                                                <path id=\"Vector\"\r\n                                                                    d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                                \\\r\n                                                                <path id=\"Vector_2\"\r\n                                                                    d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </g>\r\n                                                        </svg>\r\n\r\n                                                    </span>\r\n                                                    <span class=\"prvtxt mt-5 textclr\">Preview not\r\n                                                        available</span>\r\n                                                    <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n                                                        is not available at the moment.</span>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"row\" *ngIf=\"item.closeTime\">\r\n                                                <img class=\"mx-1 img-opc\"\r\n                                                    src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/close.jpeg\"\r\n                                                    alt=\"Checklist Video Player\">\r\n                                                <div class=\"col-12\">\r\n                                                    <div class=\"d-flex flex-stack mx-1 \">\r\n                                                        <div>\r\n                                                            <div class=\"snaptext\">Closing Snap</div>\r\n                                                            <div class=\"snaptime\">{{item.closeTime}} - {{item.date}}\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <span class=\"badge badge-light-primary snapbadge\"\r\n                                                            *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n                                                        <span class=\"badge badge-light-danger snapbadge\"\r\n                                                            *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                </div>\r\n\r\n\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n                        <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalCount\"\r\n                            [paginationSizes]='paginationSizes' [pageSize]=\"limit\"\r\n                            (pageChange)=\"onPageChangeview($event)\"\r\n                            (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n                    </section>\r\n                </div>\r\n\r\n\r\n\r\n            </div>\r\n            <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n                <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <path\r\n                        d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n                        stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n\r\n", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:20%;height:125px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:6px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:cover!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.w-50{width:75%!important}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i3.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$1.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-stores-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryComponent, selector: "lib-gallery", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"gallery-card\">\r\n    <div class=\"header mb-4\">Gallery</div>\r\n\r\n    <form [formGroup]=\"galleryForm\">\r\n        <div class=\"row\">\r\n            <div class=\"col-md-12\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-md-3 mb-3\">\r\n                        <div class=\"position-relative\">\r\n                            <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n                                type=\"text\" matInput ngxDaterangepickerMd  [drops]=\"'down'\"\r\n                                [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n                                [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                                [ngModelOptions]=\"{standalone: true}\"  (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n                                (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                 name=\"daterange\" [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-2 mb-4\">\r\n                        <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"type\" (itemChange)=\"typeChange($event)\" ></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <lib-select [items]=\"checklists\"  [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'checkListName'\"\r\n                         (selected)=\"checklistNamechange($event,false)\" [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-select>\r\n                    </div>                   \r\n                    <div class=\"col-md-3 mb-4\">\r\n                        <lib-reactive-select formControlName=\"answerType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"answerType\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <div class=\"select-wrapper\">\r\n                            <!-- Placeholder Overlay -->\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('groupList')?.value?.length)\">\r\n                              Select cluster\r\n                            </div>\r\n                          \r\n                            <!-- Actual Select Component -->\r\n                            <lib-group-select [items]=\"groupList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n                                               [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n                                               [selectedValues]=\"galleryForm.get('groupList')?.value\">\r\n                            </lib-group-select>\r\n                          </div>\r\n                          \r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <div class=\"select-wrapper\">\r\n                        <!-- Placeholder Overlay -->\r\n                        <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n                            Select Stores\r\n                          </div>\r\n                        <!-- {{storeList.length}}\r\n                        {{galleryForm.get('storeList')?.value.length}} -->\r\n                          <!-- Actual Select Component -->\r\n                        <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n                            [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n                            [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n                    </div>\r\n                   </div>\r\n                    <div class=\"col-md-4 text-end\">\r\n                        <div class=\"d-flex justify-content-end\">\r\n                            <span class=\"me-4 mt-3\">\r\n                                   \r\n                       \r\n                                <input formControlName=\"viewRedo\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n                                            class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n                                        <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewRedo\">View Re-do\u2019s only</label>\r\n                                    </span>\r\n                            <span class=\"me-3 mt-3\">\r\n                                   \r\n                       \r\n                            <input formControlName=\"viewFlag\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n                                        class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n                                    <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewFlag\">View flagged only</label>\r\n                                </span>\r\n                            <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            \r\n\r\n        </div>\r\n    </form>\r\n</div>\r\n<div class=\"row my-5\">\r\n    <div [ngClass]=\"showsidenav ? 'col-md-4':'d-none'\">\r\n        <div class=\"card position-relative h-auto\">\r\n            <div class=\"card-body p-5\">\r\n                <div class=\"checklist-left\">\r\n                    <div class=\"checklist-title\">{{this.checklistName}}</div>\r\n                    <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n                </div>\r\n                <div *ngIf=\"loading\" class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"noData\" class=\"row mt-20\">\r\n                    <div class=\"col-lg-12 mt-20 mb-3\">\r\n                        <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                            <img class=\"w-50 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                            <div class=\"nodata-title mt-0\">No data found</div>\r\n                            <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <section *ngIf=\"!noData && !loading\">\r\n\r\n                    <div *ngIf=\"select === 'custom'||select === 'task'\">\r\n                        <div class=\"text-end mt-10\">\r\n                            <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n                            <button class=\"btn btn-outline w-25 me-3 btn-resize\" *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" (click)=\"onchecklistreset()\"> Reset </button>\r\n                            <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" class=\"btn btn-primary w-25  btn-resize\" (click)=\"selectsinglequestion()\">Apply</button>\r\n                                </div>\r\n                        <div class=\"my-6\"  [ngClass]=\"selectedSection.length==0 ? 'view-all':'view-questions'\" style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n                            View All Answers\r\n                        </div>\r\n                        <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n                            <div class=\"d-flex align-items-center justify-content-between mt-4\" style=\"cursor: pointer;\"\r\n                                (click)=\"accordian(i)\">\r\n                                <div class=\"fs-4 fw-bold section\" >{{section.sectionName}}</div>\r\n                                <hr class=\"mx-2\">\r\n                                <svg  class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </div>\r\n                            <div *ngIf=\"show===i\" class=\"question-left\">\r\n                                <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n                                    <div *ngFor=\"let question of section.questions;let j=index;\" class=\"d-flex my-2 q-btn\"\r\n                                        cdkDrag>\r\n                                        <input  id=\"label\" [(ngModel)]=\"question.checked\" (click)=\"selectedQuestion($event,section,question)\" class=\"form-check-input cursor-pointer mt-2 me-4\"  type=\"checkbox\" >                                                           \r\n                                        <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\" style=\"cursor: pointer;\">\r\n                                            {{question.qno}} . {{question.qname}}\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                <!-- </div>  -->\r\n                <div *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'||select ==='storeopenandclose'||select==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n                    <div class=\"text-end mt-10\">\r\n                <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset </button>\r\n                <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"onview()\">Apply</button>\r\n                    </div>\r\n                    <div class=\"dropdownselect h-900px scroll-y\">\r\n                        <div class=\"d-flex justify-content-left \" [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n                            <input\r\n                            class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"  [(ngModel)]=\"selectAll\"\r\n                            (click)=\"selectAllStore($event)\"> <span [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n                        </div>\r\n                        <!-- dropdownbg -->\r\n                        <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n                            <div (change)=\"updateCheck($event,list)\" [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n                                <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"  type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n                                <label for=\"label{{i}}\" [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\" >{{list?.storeName}}</label>\r\n                                <span class=\"badge badge-light-primary detectionright\" *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n</div>\r\n                </section>\r\n                \r\n            </div>\r\n\r\n\r\n\r\n           \r\n\r\n            <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"showsidenav ? 'col-md-8':'col-md-12'\">\r\n        <div class=\"card position-relative h-100\">\r\n            <div class=\"card-header border-0  px-0 my-0\" *ngIf=\"select ==='custom'&&!viewloading&&!viewnoData||select === 'task'&&!viewloading&&!viewnoData\">\r\n                <h3></h3>\r\n                <!-- Switch toggle -->\r\n                <div class=\"card-toolbar\">\r\n                    <div class=\"position-relative cursor-pointer me-10\">\r\n                        <div class=\"ms-5 btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n                          {{ exportLabel }} <!-- Bind label text here -->\r\n                        </div>\r\n                      </div>\r\n                      <div *ngIf=\"exportShow\"\r\n                        class=\"card py-2  position-absolute productdrop top-20 end-0 mt-10 z-1\">\r\n                        <ul class=\"list-unstyled mb-2\">\r\n                          <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n                            Export as PDF\r\n                          </li>\r\n                          <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n                            Export as CSV\r\n                          </li>\r\n                          <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n                            Export as PPT\r\n                          </li>\r\n                          <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n                            Export as ZIP\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                </div>\r\n            </div>\r\n            \r\n            <div class=\"card-body p-0\">\r\n                <div>\r\n                    <div *ngIf=\"viewloading\" class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"viewnoData\" class=\"row mt-20\">\r\n                        <div class=\"col-lg-12 mt-20  mb-3\">\r\n                            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                                <div class=\"nodata-title\">No data found</div>\r\n                                <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <section *ngIf=\"!viewloading && !viewnoData\">\r\n                        <div *ngIf=\"select==='custom'||select==='task' \">\r\n                            <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">{{this.selectedSection[0]?.questions[0]}}</div>\r\n                            <div *ngIf=\"showsingle&&showfilter\">\r\n                            <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n                                <li class=\"nav-item\">\r\n                                    <a (click)=\"taskTab('yes')\" [ngClass]=\"selectedTask === 'yes' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                        Yes<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'yes' ? 'badge-num-primary' :'badge-num-muted'\">10</span>\r\n                                    </a>\r\n                                </li>\r\n                                <li class=\"nav-item\" >\r\n                                    <a (click)=\"taskTab('no')\" [ngClass]=\"selectedTask === 'no' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                        No<span class=\"mx-2\" [ngClass]=\"selectedTask ==='no' ? 'badge-num-primary' :'badge-num-muted'\">20</span>\r\n                                    </a>\r\n                                </li>    \r\n                                <li class=\"nav-item\">\r\n                                    <a (click)=\"taskTab('maybe')\" [ngClass]=\"selectedTask === 'maybe' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                        May be<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'maybe' ? 'badge-num-primary' :'badge-num-muted'\">0</span>\r\n                                    </a>\r\n                                </li>\r\n                             \r\n                            </ul>\r\n                            </div>\r\n                            <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n                                <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                    <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                                </div>\r\n                                \r\n\r\n                                <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n                                    <div class=\"col-md-3\">\r\n                                        <h3 class=\"uni-title\">Store Name:</h3>\r\n                                    </div>\r\n                                    <div class=\"col-md-9\">\r\n                                        <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n                                    </div>\r\n                                    <div class=\"col-md-3\">\r\n                                        <h3 class=\"uni-title\">Checklist Name:</h3>\r\n                                    </div>\r\n                                    <div class=\"col-md-9\">\r\n                                        <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n                                    </div>\r\n\r\n                                    <ng-container>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">State & Country :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n                                                {{checklist?.storeProfile?.Country}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Duration :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">No. of Questions :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Date :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">Submitted By :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Time :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n                                        </div>\r\n                                    </ng-container>\r\n\r\n                                </div>\r\n                               \r\n\r\n                                <div class=\"row px-10\" >\r\n\r\n                                    <div *ngFor=\"let questionlist of checklist.questionAnswer\">\r\n                                        <div class=\"qa-bodrer my-5\" *ngFor=\"let question of questionlist.questions\">\r\n                                            <div class=\"row w-100 m-3\" *ngIf=\"showsingle\">\r\n                                                <div class=\"col-md-4 text-title\">\r\n                                                    {{checklist?.storeProfile?.storeName}}\r\n                                                </div>\r\n                                                <div class=\"col-md-8 text-end title-description\">\r\n                                                    Submitted by : {{checklist?.checklistInfo?.submittedBy}} On : {{checklist?.checklistInfo?.date}} {{checklist?.checklistInfo?.time}}\r\n                                                </div>\r\n                                            </div>\r\n                                            <ul>\r\n                                                <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}. {{question?.qname}}</li>\r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='descriptive'\">\r\n                                                    <div *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                  \r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='linearscale'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <!-- <br> -->\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='time'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <br>\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n\r\n\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='date'\">\r\n                                            <div *ngFor=\"let item of question.userAnswer\">\r\n                                                <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                    <img class=\"img-logo\"\r\n                                                        src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                        alt=\"\">\r\n                                                </div>\r\n                                                <br>\r\n                                                <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                            </div>\r\n                                             </div>\r\n\r\n\r\n\r\n\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='yes/no'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <br *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"row\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                        <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                        <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                            alt=\"\">\r\n                                                            <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                        </div>\r\n                                                            <span class=\"remarksTxt\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer :{{item.validationAnswer}}</span>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>  \r\n\r\n\r\n\r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div *ngFor=\"let item of question.userAnswer\">\r\n                                                        <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                            <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                            <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                              \r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='image'\">\r\n                                                    <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                            alt=\"\">\r\n                                                        </div>\r\n                                                            <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\"></div>\r\n                                                    <div class=\"Partially my-3 px-5\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <span class=\"mt-3\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                            <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                            <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                            alt=\"\">\r\n                                                            <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                            <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    \r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n                                                    \r\n                                                    <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <img class=\"img-logo\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                    alt=\"\">\r\n                                                        </div>\r\n                                                            <div class=\"col-md-6 mt-3\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span [ngClass]=\"item.sopFlag ? 'flagclour':''\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    \r\n                                                    <div class=\"Partially my-3 px-5\" *ngIf=\"question.remarks!=''\">{{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Video</div>\r\n\r\n                                                        <video controls class=\"recap-img p-3\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                                        </video>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='multipleImage'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                            alt=\"\">\r\n                                                            <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                                \r\n                                            </ul>\r\n                                            <div class=\"row\">\r\n                                                <div class=\"col-md-12 text-end\">\r\n                                                    <button class=\"btn btn-sm btn-default border-default me-3\" [disabled]=\"question.redo\" (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n                                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                            <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                            <path d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                            </g>\r\n                                                            <defs>\r\n                                                            <clipPath id=\"clip0_6004_11734\">\r\n                                                            <rect width=\"20\" height=\"20\" fill=\"white\"/>\r\n                                                            </clipPath>\r\n                                                            </defs>\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-defult-task\">Redo</span>\r\n                                                    </button>\r\n\r\n                                                    <button class=\"btn btn-sm  border-val1\" *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type!='task'\" (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n                                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                            <path d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-task\">Task</span>\r\n                                                    </button>\r\n                                                    <button *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\" class=\"btn btn-sm  border-val1\" (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\">\r\n                                                            <span class=\"ms-2 font-task\">View Task</span>\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                        <div class=\"px-10 my-5\" *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'\">\r\n                            <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                            </div>\r\n                            <div>\r\n                                <h2>Checklist Name : {{this.checklistName}}</h2>\r\n                            </div>\r\n                            <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item  of mobileusageData\">\r\n                                <ul class=\"row w-100\">\r\n                                    <li class=\"qa-heading\">\r\n                                        {{item.storeName}}\r\n                                    </li>\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imageUrl\">\r\n                                            <div class=\"\">\r\n                                                <img class=\"w-100 h-500px rounded-top\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n                                                <div class=\"text-center mt-3\" *ngIf=\"select ==='uniformdetection'\">\r\n                                                    Uniform Detection</div>\r\n                                                <div class=\"text-center mt-3\" *ngIf=\"select ==='mobileusagedetection'\">\r\n                                                    Mobile Usage Detection</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </ul>\r\n                            </div>\r\n\r\n                        </div>\r\n                        <div class=\"px-10 my-5\" *ngIf=\"select ==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n                            <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                            </div>\r\n                            <div>\r\n                                <h2>Checklist Name : {{this.checklistName}}</h2>\r\n                            </div>\r\n                            <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item  of customerunattendedData\">\r\n                                <ul class=\"row w-100\">\r\n                                    <li class=\"qa-heading\">\r\n                                       \r\n                                    </li>\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imagesData\">\r\n                                            <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n                                                <h3 class=\"card-title\">\r\n                                                    <span class=\"me-3 store-title\">{{item.storeName}}</span>\r\n                                                    <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.customer_id\">Cust ID : {{detection.customer_id}}</span>\r\n                                                </h3>\r\n                                            \r\n                                                <!-- Switch toggle -->\r\n                                                <div class=\"card-toolbar\">\r\n                                                    <div class=\"col-md-12 text-end\">\r\n                                                        <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_entry_time\">Entry time : {{detection.customer_entry_time}}</span>\r\n                                                        <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_exit_time\">Exit time : {{detection.customer_exit_time}}</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                           \r\n                                              \r\n                                            <div class=\"my-0\">\r\n                                                <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\" alt=\"\">  \r\n                                                    </video>                                             \r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </ul>\r\n                            </div>\r\n\r\n                        </div>\r\n                        <div *ngIf=\"select ==='storeopenandclose'\">\r\n                            <div class=\"col-md-12 card\" *ngFor=\"let item of storeOpencloseView\">\r\n                                <div class=\"snapcard mx-8 my-8\">\r\n                                    <div class=\"snapheader ms-6\">\r\n                                        {{item.storeName}}\r\n                                    </div>\r\n                                    <div class=\"row m-0 w-100\">\r\n                                        <div class=\"col-6\">\r\n                                            <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n                                                <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n                                                    <span>\r\n                                                        <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                            <g id=\"Group\">\r\n                                                                <path id=\"Vector\"\r\n                                                                    d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                                \\\r\n                                                                <path id=\"Vector_2\"\r\n                                                                    d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </g>\r\n                                                        </svg>\r\n\r\n                                                    </span>\r\n                                                    <span class=\"prvtxt mt-5 textclr\">Preview not\r\n                                                        available</span>\r\n                                                    <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n                                                        is not available at the moment.</span>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"row\" *ngIf=\"item.openTime\">\r\n                                                <img class=\"mx-1 img-opc\"\r\n                                                    src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/open.jpeg\"\r\n                                                    alt=\"Checklist Video Player\">\r\n                                                <div class=\"col-12\">\r\n                                                    <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n                                                        <div>\r\n                                                            <div class=\"snaptext\">Opening Snap</div>\r\n                                                            <div class=\"snaptime\">{{item.openTime}} - {{item.date}}\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <span class=\"badge badge-light-primary snapbadge\"\r\n                                                            *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n                                                        <span class=\"badge badge-light-danger snapbadge\"\r\n                                                            *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </div>\r\n                                        <div class=\"col-6\">\r\n                                            <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.closeTime\">\r\n                                                <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n                                                    <span>\r\n                                                        <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                            <g id=\"Group\">\r\n                                                                <path id=\"Vector\"\r\n                                                                    d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                                \\\r\n                                                                <path id=\"Vector_2\"\r\n                                                                    d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </g>\r\n                                                        </svg>\r\n\r\n                                                    </span>\r\n                                                    <span class=\"prvtxt mt-5 textclr\">Preview not\r\n                                                        available</span>\r\n                                                    <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n                                                        is not available at the moment.</span>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"row\" *ngIf=\"item.closeTime\">\r\n                                                <img class=\"mx-1 img-opc\"\r\n                                                    src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/close.jpeg\"\r\n                                                    alt=\"Checklist Video Player\">\r\n                                                <div class=\"col-12\">\r\n                                                    <div class=\"d-flex flex-stack mx-1 \">\r\n                                                        <div>\r\n                                                            <div class=\"snaptext\">Closing Snap</div>\r\n                                                            <div class=\"snaptime\">{{item.closeTime}} - {{item.date}}\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <span class=\"badge badge-light-primary snapbadge\"\r\n                                                            *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n                                                        <span class=\"badge badge-light-danger snapbadge\"\r\n                                                            *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                </div>\r\n\r\n\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n                        <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalCount\"\r\n                            [paginationSizes]='paginationSizes' [pageSize]=\"limit\"\r\n                            (pageChange)=\"onPageChangeview($event)\"\r\n                            (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n                    </section>\r\n                </div>\r\n\r\n\r\n\r\n            </div>\r\n            <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n                <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <path\r\n                        d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n                        stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n\r\n", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:20%;height:125px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:6px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:cover!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.w-50{width:75%!important}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i3.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$1.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-stores-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-gallery', template: "<div class=\"gallery-card\">\r\n    <div class=\"header mb-4\">Gallery</div>\r\n\r\n    <form [formGroup]=\"galleryForm\">\r\n        <div class=\"row\">\r\n            <div class=\"col-md-12\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-md-3 mb-3\">\r\n                        <div class=\"position-relative\">\r\n                            <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n                                type=\"text\" matInput ngxDaterangepickerMd  [drops]=\"'down'\"\r\n                                [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n                                [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                                [ngModelOptions]=\"{standalone: true}\"  (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n                                (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                 name=\"daterange\" [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-2 mb-4\">\r\n                        <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"type\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <lib-select [items]=\"checklists\"  [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'checkListName'\"\r\n                         (selected)=\"checklistNamechange($event,false)\" [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-select>\r\n                    </div>                   \r\n                    <div class=\"col-md-3 mb-4\">\r\n                        <lib-reactive-select formControlName=\"answerType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"answerType\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <div class=\"select-wrapper\">\r\n                            <!-- Placeholder Overlay -->\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('groupList')?.value?.length)\">\r\n                              Select cluster\r\n                            </div>\r\n                          \r\n                            <!-- Actual Select Component -->\r\n                            <lib-group-select [items]=\"groupList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n                                               [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n                                               [selectedValues]=\"galleryForm.get('groupList')?.value\">\r\n                            </lib-group-select>\r\n                          </div>\r\n                          \r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <div class=\"select-wrapper\">\r\n                        <!-- Placeholder Overlay -->\r\n                        <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n                            Select Stores\r\n                          </div>\r\n                        <!-- {{storeList.length}}\r\n                        {{galleryForm.get('storeList')?.value.length}} -->\r\n                          <!-- Actual Select Component -->\r\n                        <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n                            [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n                            [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n                    </div>\r\n                   </div>\r\n                    <div class=\"col-md-4 text-end\">\r\n                        <div class=\"d-flex justify-content-end\">\r\n                            <span class=\"me-4 mt-3\">\r\n                                    \r\n                        \r\n                                <input formControlName=\"viewFlag\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"flagChanged($event)\" \r\n                                            class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n                                        <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewFlag\">View Re-do\u2019s only</label>\r\n                                    </span>\r\n                            <span class=\"me-3 mt-3\">\r\n                                    \r\n                        \r\n                            <input formControlName=\"viewFlag\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"flagChanged($event)\" \r\n                                        class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n                                    <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewFlag\">View flagged only</label>\r\n                                </span>\r\n                            <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            \r\n\r\n        </div>\r\n    </form>\r\n</div>\r\n<div class=\"row my-5\">\r\n    <div [ngClass]=\"showsidenav ? 'col-md-4':'d-none'\">\r\n        <div class=\"card position-relative h-auto\">\r\n            <div class=\"card-body p-5\">\r\n                <div class=\"checklist-left\">\r\n                    <div class=\"checklist-title\">{{this.checklistName}}</div>\r\n                    <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n                </div>\r\n                <div *ngIf=\"loading\" class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"noData\" class=\"row mt-20\">\r\n                    <div class=\"col-lg-12 mt-20 mb-3\">\r\n                        <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                            <img class=\"w-50 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                            <div class=\"nodata-title mt-0\">No data found</div>\r\n                            <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <section *ngIf=\"!noData && !loading\">\r\n\r\n                    <div *ngIf=\"select === 'custom'\">\r\n                        <div class=\"text-end mt-10\">\r\n                            <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n                            <button class=\"btn btn-outline w-25 me-3 btn-resize\" *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" (click)=\"onchecklistreset()\"> Reset </button>\r\n                            <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" class=\"btn btn-primary w-25  btn-resize\" (click)=\"selectsinglequestion()\">Apply</button>\r\n                                </div>\r\n                        <div class=\"my-6\"  [ngClass]=\"selectedSection.length==0 ? 'view-all':'view-questions'\" style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n                            View All Answers\r\n                        </div>\r\n                        <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n                            <div class=\"d-flex align-items-center justify-content-between mt-4\" style=\"cursor: pointer;\"\r\n                                (click)=\"accordian(i)\">\r\n                                <div class=\"fs-4 fw-bold section\" >{{section.sectionName}}</div>\r\n                                <hr class=\"mx-2\">\r\n                                <svg  class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </div>\r\n                            <div *ngIf=\"show===i\" class=\"question-left\">\r\n                                <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n                                    <div *ngFor=\"let question of section.questions;let j=index;\" class=\"d-flex my-2 q-btn\"\r\n                                        cdkDrag>\r\n                                        <input  id=\"label\" [(ngModel)]=\"question.checked\" (click)=\"selectedQuestion($event,section,question)\" class=\"form-check-input cursor-pointer mt-2 me-4\"  type=\"checkbox\" >                                                           \r\n                                        <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\" style=\"cursor: pointer;\">\r\n                                            {{question.qno}} . {{question.qname}}\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                <!-- </div>  -->\r\n                <div *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'||select ==='storeopenandclose'||select==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n                    <div class=\"text-end mt-10\">\r\n                <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset </button>\r\n                <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"onview()\">Apply</button>\r\n                    </div>\r\n                    <div class=\"dropdownselect h-900px scroll-y\">\r\n                        <div class=\"d-flex justify-content-left \" [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n                            <input\r\n                            class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"  [(ngModel)]=\"selectAll\"\r\n                            (click)=\"selectAllStore($event)\"> <span [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n                        </div>\r\n                        <!-- dropdownbg -->\r\n                        <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n                            <div (change)=\"updateCheck($event,list)\" [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n                                <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"  type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n                                <label for=\"label{{i}}\" [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\" >{{list?.storeName}}</label>\r\n                                <span class=\"badge badge-light-primary detectionright\" *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n</div>\r\n                </section>\r\n                \r\n            </div>\r\n\r\n\r\n\r\n           \r\n\r\n            <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"showsidenav ? 'col-md-8':'col-md-12'\">\r\n        <div class=\"card position-relative h-100\">\r\n            <div class=\"card-header border-0  px-0 my-0\" *ngIf=\"select ==='custom'&&!viewloading&&!viewnoData\">\r\n                <h3></h3>\r\n                <!-- Switch toggle -->\r\n                <div class=\"card-toolbar\">\r\n                    <div class=\"position-relative cursor-pointer me-10\">\r\n                        <div class=\"ms-5 btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n                          {{ exportLabel }} <!-- Bind label text here -->\r\n                        </div>\r\n                      </div>\r\n                      <div *ngIf=\"exportShow\"\r\n                        class=\"card py-2  position-absolute productdrop top-20 end-0 mt-10 z-1\">\r\n                        <ul class=\"list-unstyled mb-2\">\r\n                          <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n                            Export as PDF\r\n                          </li>\r\n                          <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n                            Export as CSV\r\n                          </li>\r\n                          <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n                            Export as PPT\r\n                          </li>\r\n                          <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n                            Export as ZIP\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                </div>\r\n            </div>\r\n            \r\n            <div class=\"card-body p-0\">\r\n                <div>\r\n                    <div *ngIf=\"viewloading\" class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"viewnoData\" class=\"row mt-20\">\r\n                        <div class=\"col-lg-12 mt-20  mb-3\">\r\n                            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                                <div class=\"nodata-title\">No data found</div>\r\n                                <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <section *ngIf=\"!viewloading && !viewnoData\">\r\n                        <div *ngIf=\"select==='custom' \">\r\n                            <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">{{this.selectedSection[0]?.questions[0]}}</div>\r\n                            <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n                                <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                    <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                                </div>\r\n                                <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n                                    <div class=\"col-md-3\">\r\n                                        <h3 class=\"uni-title\">Store Name:</h3>\r\n                                    </div>\r\n                                    <div class=\"col-md-9\">\r\n                                        <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n                                    </div>\r\n                                    <div class=\"col-md-3\">\r\n                                        <h3 class=\"uni-title\">Checklist Name:</h3>\r\n                                    </div>\r\n                                    <div class=\"col-md-9\">\r\n                                        <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n                                    </div>\r\n\r\n                                    <ng-container>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">State & Country :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n                                                {{checklist?.storeProfile?.Country}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Duration :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">No. of Questions :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Date :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">Submitted By :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Time :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n                                        </div>\r\n                                    </ng-container>\r\n\r\n                                </div>\r\n                                <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n                                    <li class=\"nav-item\">\r\n                                        <a (click)=\"taskTab('yes')\" [ngClass]=\"selectedTask === 'yes' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                            Yes<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'yes' ? 'badge-num-primary' :'badge-num-muted'\">10</span>\r\n                                        </a>\r\n                                    </li>\r\n                                    <li class=\"nav-item\" >\r\n                                        <a (click)=\"taskTab('no')\" [ngClass]=\"selectedTask === 'no' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                            No<span class=\"mx-2\" [ngClass]=\"selectedTask ==='no' ? 'badge-num-primary' :'badge-num-muted'\">20</span>\r\n                                        </a>\r\n                                    </li>    \r\n                                    <li class=\"nav-item\">\r\n                                        <a (click)=\"taskTab('maybe')\" [ngClass]=\"selectedTask === 'maybe' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                            May be<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'maybe' ? 'badge-num-primary' :'badge-num-muted'\">0</span>\r\n                                        </a>\r\n                                    </li>\r\n                                 \r\n                                </ul>\r\n                                <div class=\"row px-10\" >\r\n\r\n                                    <div *ngFor=\"let questionlist of checklist.questionAnswer\">\r\n                                        <div class=\"qa-bodrer my-5\" *ngFor=\"let question of questionlist.questions\">\r\n                                            <div class=\"row w-100 m-3\" *ngIf=\"showsingle\">\r\n                                                <div class=\"col-md-4 text-title\">\r\n                                                    {{checklist?.storeProfile?.storeName}}\r\n                                                </div>\r\n                                                <div class=\"col-md-8 text-end title-description\">\r\n                                                    Submitted by : {{checklist?.checklistInfo?.submittedBy}} On : {{checklist?.checklistInfo?.date}} {{checklist?.checklistInfo?.time}}\r\n                                                </div>\r\n                                            </div>\r\n                                            <ul>\r\n                                                <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}. {{question?.qname}}</li>\r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='descriptive'\">\r\n                                                    <div *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                  \r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='linearscale'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <!-- <br> -->\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='time'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <br>\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n\r\n\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='date'\">\r\n                                            <div *ngFor=\"let item of question.userAnswer\">\r\n                                                <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                    <img class=\"img-logo\"\r\n                                                        src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                        alt=\"\">\r\n                                                </div>\r\n                                                <br>\r\n                                                <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                            </div>\r\n                                             </div>\r\n\r\n\r\n\r\n\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='yes/no'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <br *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"row\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                        <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                        <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                            alt=\"\">\r\n                                                            <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                        </div>\r\n                                                            <span class=\"remarksTxt\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer :{{item.validationAnswer}}</span>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>  \r\n\r\n\r\n\r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div *ngFor=\"let item of question.userAnswer\">\r\n                                                        <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                            <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                            <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                              \r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='image'\">\r\n                                                    <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                            alt=\"\">\r\n                                                        </div>\r\n                                                            <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\"></div>\r\n                                                    <div class=\"Partially my-3 px-5\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <span class=\"mt-3\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                            <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                            <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                            alt=\"\">\r\n                                                            <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                            <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    \r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n                                                    \r\n                                                    <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <img class=\"img-logo\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                    alt=\"\">\r\n                                                        </div>\r\n                                                            <div class=\"col-md-6 mt-3\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span [ngClass]=\"item.sopFlag ? 'flagclour':''\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    \r\n                                                    <div class=\"Partially my-3 px-5\" *ngIf=\"question.remarks!=''\">{{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Video</div>\r\n\r\n                                                        <video controls class=\"recap-img p-3\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                                        </video>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='multipleImage'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                            alt=\"\">\r\n                                                            <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                                \r\n                                            </ul>\r\n                                            <div class=\"row\">\r\n                                                <div class=\"col-md-12 text-end\">\r\n                                                    <button class=\"btn btn-sm btn-default border-default me-3\" (click)=\"addTask('redo',question)\">\r\n                                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                            <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                            <path d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                            </g>\r\n                                                            <defs>\r\n                                                            <clipPath id=\"clip0_6004_11734\">\r\n                                                            <rect width=\"20\" height=\"20\" fill=\"white\"/>\r\n                                                            </clipPath>\r\n                                                            </defs>\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-defult-task\">Redo</span>\r\n                                                    </button>\r\n\r\n                                                    <button class=\"btn btn-sm  border-val1\" (click)=\"addTask('createtask',question)\">\r\n                                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                            <path d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-task\">Task</span>\r\n                                                    </button>\r\n                                                    <button *ngIf=\"\" class=\"btn btn-sm btn-light-primary border-val1\">\r\n                                                            <span class=\"ms-2 font-task\">View Task</span>\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                        <div class=\"px-10 my-5\" *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'\">\r\n                            <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                            </div>\r\n                            <div>\r\n                                <h2>Checklist Name : {{this.checklistName}}</h2>\r\n                            </div>\r\n                            <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item  of mobileusageData\">\r\n                                <ul class=\"row w-100\">\r\n                                    <li class=\"qa-heading\">\r\n                                        {{item.storeName}}\r\n                                    </li>\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imageUrl\">\r\n                                            <div class=\"\">\r\n                                                <img class=\"w-100 h-500px rounded-top\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n                                                <div class=\"text-center mt-3\" *ngIf=\"select ==='uniformdetection'\">\r\n                                                    Uniform Detection</div>\r\n                                                <div class=\"text-center mt-3\" *ngIf=\"select ==='mobileusagedetection'\">\r\n                                                    Mobile Usage Detection</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </ul>\r\n                            </div>\r\n\r\n                        </div>\r\n                        <div class=\"px-10 my-5\" *ngIf=\"select ==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n                            <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                            </div>\r\n                            <div>\r\n                                <h2>Checklist Name : {{this.checklistName}}</h2>\r\n                            </div>\r\n                            <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item  of customerunattendedData\">\r\n                                <ul class=\"row w-100\">\r\n                                    <li class=\"qa-heading\">\r\n                                       \r\n                                    </li>\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imagesData\">\r\n                                            <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n                                                <h3 class=\"card-title\">\r\n                                                    <span class=\"me-3 store-title\">{{item.storeName}}</span>\r\n                                                    <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.customer_id\">Cust ID : {{detection.customer_id}}</span>\r\n                                                </h3>\r\n                                            \r\n                                                <!-- Switch toggle -->\r\n                                                <div class=\"card-toolbar\">\r\n                                                    <div class=\"col-md-12 text-end\">\r\n                                                        <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_entry_time\">Entry time : {{detection.customer_entry_time}}</span>\r\n                                                        <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_exit_time\">Exit time : {{detection.customer_exit_time}}</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                           \r\n                                              \r\n                                            <div class=\"my-0\">\r\n                                                <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\" alt=\"\">  \r\n                                                    </video>                                             \r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </ul>\r\n                            </div>\r\n\r\n                        </div>\r\n                        <div *ngIf=\"select ==='storeopenandclose'\">\r\n                            <div class=\"col-md-12 card\" *ngFor=\"let item of storeOpencloseView\">\r\n                                <div class=\"snapcard mx-8 my-8\">\r\n                                    <div class=\"snapheader ms-6\">\r\n                                        {{item.storeName}}\r\n                                    </div>\r\n                                    <div class=\"row m-0 w-100\">\r\n                                        <div class=\"col-6\">\r\n                                            <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n                                                <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n                                                    <span>\r\n                                                        <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                            <g id=\"Group\">\r\n                                                                <path id=\"Vector\"\r\n                                                                    d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                                \\\r\n                                                                <path id=\"Vector_2\"\r\n                                                                    d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </g>\r\n                                                        </svg>\r\n\r\n                                                    </span>\r\n                                                    <span class=\"prvtxt mt-5 textclr\">Preview not\r\n                                                        available</span>\r\n                                                    <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n                                                        is not available at the moment.</span>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"row\" *ngIf=\"item.openTime\">\r\n                                                <img class=\"mx-1 img-opc\"\r\n                                                    src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/open.jpeg\"\r\n                                                    alt=\"Checklist Video Player\">\r\n                                                <div class=\"col-12\">\r\n                                                    <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n                                                        <div>\r\n                                                            <div class=\"snaptext\">Opening Snap</div>\r\n                                                            <div class=\"snaptime\">{{item.openTime}} - {{item.date}}\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <span class=\"badge badge-light-primary snapbadge\"\r\n                                                            *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n                                                        <span class=\"badge badge-light-danger snapbadge\"\r\n                                                            *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </div>\r\n                                        <div class=\"col-6\">\r\n                                            <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.closeTime\">\r\n                                                <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n                                                    <span>\r\n                                                        <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                            <g id=\"Group\">\r\n                                                                <path id=\"Vector\"\r\n                                                                    d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                                \\\r\n                                                                <path id=\"Vector_2\"\r\n                                                                    d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </g>\r\n                                                        </svg>\r\n\r\n                                                    </span>\r\n                                                    <span class=\"prvtxt mt-5 textclr\">Preview not\r\n                                                        available</span>\r\n                                                    <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n                                                        is not available at the moment.</span>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"row\" *ngIf=\"item.closeTime\">\r\n                                                <img class=\"mx-1 img-opc\"\r\n                                                    src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/close.jpeg\"\r\n                                                    alt=\"Checklist Video Player\">\r\n                                                <div class=\"col-12\">\r\n                                                    <div class=\"d-flex flex-stack mx-1 \">\r\n                                                        <div>\r\n                                                            <div class=\"snaptext\">Closing Snap</div>\r\n                                                            <div class=\"snaptime\">{{item.closeTime}} - {{item.date}}\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <span class=\"badge badge-light-primary snapbadge\"\r\n                                                            *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n                                                        <span class=\"badge badge-light-danger snapbadge\"\r\n                                                            *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                </div>\r\n\r\n\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n                        <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalCount\"\r\n                            [paginationSizes]='paginationSizes' [pageSize]=\"limit\"\r\n                            (pageChange)=\"onPageChangeview($event)\"\r\n                            (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n                    </section>\r\n                </div>\r\n\r\n\r\n\r\n            </div>\r\n            <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n                <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <path\r\n                        d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n                        stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n\r\n", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:20%;height:125px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:6px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:cover!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.w-50{width:75%!important}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}\n"] }]
+            args: [{ selector: 'lib-gallery', template: "<div class=\"gallery-card\">\r\n    <div class=\"header mb-4\">Gallery</div>\r\n\r\n    <form [formGroup]=\"galleryForm\">\r\n        <div class=\"row\">\r\n            <div class=\"col-md-12\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-md-3 mb-3\">\r\n                        <div class=\"position-relative\">\r\n                            <span style=\"top: 20%;\" class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"fx-date-range form-control ps-14 z-2\" style=\"min-width: 260px !important;\"\r\n                                type=\"text\" matInput ngxDaterangepickerMd  [drops]=\"'down'\"\r\n                                [opens]=\"'right'\" [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\"\r\n                                [showCancel]=\"false\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                                [ngModelOptions]=\"{standalone: true}\"  (datesUpdated)=\"datechange($event)\" (click)=\"resetValidation()\" \r\n                                (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" [autoApply]=\"true\" \r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                 name=\"daterange\" [readonly]=\"true\" />\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-md-2 mb-4\">\r\n                        <lib-reactive-select formControlName=\"type\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"type\" (itemChange)=\"typeChange($event)\" ></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <lib-select [items]=\"checklists\"  [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'checkListName'\"\r\n                         (selected)=\"checklistNamechange($event,false)\" [selectedValues]=\"[{checkListName:galleryForm.get('checklistName')?.value}]\"></lib-select>\r\n                    </div>                   \r\n                    <div class=\"col-md-3 mb-4\">\r\n                        <lib-reactive-select formControlName=\"answerType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n                            [data]=\"answerType\"></lib-reactive-select>\r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <div class=\"select-wrapper\">\r\n                            <!-- Placeholder Overlay -->\r\n                            <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('groupList')?.value?.length)\">\r\n                              Select cluster\r\n                            </div>\r\n                          \r\n                            <!-- Actual Select Component -->\r\n                            <lib-group-select [items]=\"groupList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'groupName'\"\r\n                                               [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n                                               [selectedValues]=\"galleryForm.get('groupList')?.value\">\r\n                            </lib-group-select>\r\n                          </div>\r\n                          \r\n                    </div>\r\n                    <div class=\"col-md-4 mb-4\">\r\n                        <div class=\"select-wrapper\">\r\n                        <!-- Placeholder Overlay -->\r\n                        <div class=\"placeholder-overlay\" *ngIf=\"!(galleryForm.get('storeList')?.value?.length)\">\r\n                            Select Stores\r\n                          </div>\r\n                        <!-- {{storeList.length}}\r\n                        {{galleryForm.get('storeList')?.value.length}} -->\r\n                          <!-- Actual Select Component -->\r\n                        <lib-stores-select [items]=\"storeList\" [disabled]=\"false\" [multi]=\"true\" [searchField]=\"'storeName'\"\r\n                            [idField]=\"'storeId'\" (selected)=\"onStoreSelect($event)\"\r\n                            [selectedValues]=\"galleryForm.get('storeList')?.value\"></lib-stores-select>\r\n                    </div>\r\n                   </div>\r\n                    <div class=\"col-md-4 text-end\">\r\n                        <div class=\"d-flex justify-content-end\">\r\n                            <span class=\"me-4 mt-3\">\r\n                                   \r\n                       \r\n                                <input formControlName=\"viewRedo\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"redoChanged($event)\"\r\n                                            class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewRedo\">\r\n                                        <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewRedo\">View Re-do\u2019s only</label>\r\n                                    </span>\r\n                            <span class=\"me-3 mt-3\">\r\n                                   \r\n                       \r\n                            <input formControlName=\"viewFlag\" *ngIf=\"showflag\" change type=\"checkbox\" (click)=\"flagChanged($event)\"\r\n                                        class=\"form-check-input cursor-pointer mt-1 me-2\" id=\"viewFlag\">\r\n                                    <label *ngIf=\"showflag\" class=\"checkbox-label\" for=\"viewFlag\">View flagged only</label>\r\n                                </span>\r\n                            <a (click)=\"onSubmit()\" type=\"submit\" class=\"btn btn-primary px-4 \"><span>Apply</span></a>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            \r\n\r\n        </div>\r\n    </form>\r\n</div>\r\n<div class=\"row my-5\">\r\n    <div [ngClass]=\"showsidenav ? 'col-md-4':'d-none'\">\r\n        <div class=\"card position-relative h-auto\">\r\n            <div class=\"card-body p-5\">\r\n                <div class=\"checklist-left\">\r\n                    <div class=\"checklist-title\">{{this.checklistName}}</div>\r\n                    <div class=\"checklist-text\">{{checkListDescription}}</div>\r\n                </div>\r\n                <div *ngIf=\"loading\" class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"noData\" class=\"row mt-20\">\r\n                    <div class=\"col-lg-12 mt-20 mb-3\">\r\n                        <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                            <img class=\"w-50 h-300px\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                            <div class=\"nodata-title mt-0\">No data found</div>\r\n                            <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <section *ngIf=\"!noData && !loading\">\r\n\r\n                    <div *ngIf=\"select === 'custom'||select === 'task'\">\r\n                        <div class=\"text-end mt-10\">\r\n                            <!-- <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"viewChecklists()\"> Reset </button> -->\r\n                            <button class=\"btn btn-outline w-25 me-3 btn-resize\" *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" (click)=\"onchecklistreset()\"> Reset </button>\r\n                            <button *ngIf=\"selectedSection.length>0||tempselectedSection.length>0\" class=\"btn btn-primary w-25  btn-resize\" (click)=\"selectsinglequestion()\">Apply</button>\r\n                                </div>\r\n                        <div class=\"my-6\"  [ngClass]=\"selectedSection.length==0 ? 'view-all':'view-questions'\" style=\"cursor: pointer;\" (click)=\"onchecklistreset()\">\r\n                            View All Answers\r\n                        </div>\r\n                        <div class=\"mx-2\" *ngFor=\"let section of checklistData; let i=index;\">\r\n                            <div class=\"d-flex align-items-center justify-content-between mt-4\" style=\"cursor: pointer;\"\r\n                                (click)=\"accordian(i)\">\r\n                                <div class=\"fs-4 fw-bold section\" >{{section.sectionName}}</div>\r\n                                <hr class=\"mx-2\">\r\n                                <svg  class=\"cursor-pointer\" [ngClass]=\"{'rotate' : show !== i}\"\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </div>\r\n                            <div *ngIf=\"show===i\" class=\"question-left\">\r\n                                <div cdkDropList [cdkDropListData]=\"section.questions\">\r\n                                    <div *ngFor=\"let question of section.questions;let j=index;\" class=\"d-flex my-2 q-btn\"\r\n                                        cdkDrag>\r\n                                        <input  id=\"label\" [(ngModel)]=\"question.checked\" (click)=\"selectedQuestion($event,section,question)\" class=\"form-check-input cursor-pointer mt-2 me-4\"  type=\"checkbox\" >                                                           \r\n                                        <div class=\"editablecontent\" [ngClass]=\"question?.checked ? 'view-all':''\" style=\"cursor: pointer;\">\r\n                                            {{question.qno}} . {{question.qname}}\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                <!-- </div>  -->\r\n                <div *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'||select ==='storeopenandclose'||select==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n                    <div class=\"text-end mt-10\">\r\n                <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"onreset()\"> Reset </button>\r\n                <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"onview()\">Apply</button>\r\n                    </div>\r\n                    <div class=\"dropdownselect h-900px scroll-y\">\r\n                        <div class=\"d-flex justify-content-left \" [ngClass]=\"selectAll ? 'backgroundBorder':'withoutbackground'\">\r\n                            <input\r\n                            class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\"  [(ngModel)]=\"selectAll\"\r\n                            (click)=\"selectAllStore($event)\"> <span [ngClass]=\"selectAll ? 'usage-detection':'usage-text'\">Select All</span>\r\n                        </div>\r\n                        <!-- dropdownbg -->\r\n                        <div class=\"my-4\" *ngFor=\"let list of mobileusageDataList;let i=index\">\r\n                            <div (change)=\"updateCheck($event,list)\" [ngClass]=\"list.checked ? 'backgroundBorder':'withoutbackground'\">\r\n                                <input id=\"label{{i}}\" class=\"form-check-input cursor-pointer me-4\"  type=\"checkbox\" [(ngModel)]=\"list.checked\">\r\n                                <label for=\"label{{i}}\" [ngClass]=\"list.checked ? 'usage-detection':'usage-text'\" >{{list?.storeName}}</label>\r\n                                <span class=\"badge badge-light-primary detectionright\" *ngIf=\"list.detection\">{{list.detection}} Detections</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n</div>\r\n                </section>\r\n                \r\n            </div>\r\n\r\n\r\n\r\n           \r\n\r\n            <div *ngIf=\"showsidenav\" (click)=\"sidenav()\" class=\"backButtonright text-center pt-1 cursor-pointer\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <path d=\"M11 17L6 12L11 7M18 17L13 12L18 7\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"showsidenav ? 'col-md-8':'col-md-12'\">\r\n        <div class=\"card position-relative h-100\">\r\n            <div class=\"card-header border-0  px-0 my-0\" *ngIf=\"select ==='custom'&&!viewloading&&!viewnoData||select === 'task'&&!viewloading&&!viewnoData\">\r\n                <h3></h3>\r\n                <!-- Switch toggle -->\r\n                <div class=\"card-toolbar\">\r\n                    <div class=\"position-relative cursor-pointer me-10\">\r\n                        <div class=\"ms-5 btn btn-primary form-control no-text-transform\" (click)=\"exportDet($event)\">\r\n                          {{ exportLabel }} <!-- Bind label text here -->\r\n                        </div>\r\n                      </div>\r\n                      <div *ngIf=\"exportShow\"\r\n                        class=\"card py-2  position-absolute productdrop top-20 end-0 mt-10 z-1\">\r\n                        <ul class=\"list-unstyled mb-2\">\r\n                          <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PDF','pdf')\">\r\n                            Export as PDF\r\n                          </li>\r\n                          <li class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as CSV','csv')\">\r\n                            Export as CSV\r\n                          </li>\r\n                          <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as PPT','ppt')\">\r\n                            Export as PPT\r\n                          </li>\r\n                          <li *ngIf=\"selectedSection.length>0\" class=\"px-5 cursor-pointer py-4\" type=\"button\" (click)=\"setExportAsPPT('Export as ZIP','zipfiles')\">\r\n                            Export as ZIP\r\n                          </li>\r\n                        </ul>\r\n                      </div>\r\n                </div>\r\n            </div>\r\n            \r\n            <div class=\"card-body p-0\">\r\n                <div>\r\n                    <div *ngIf=\"viewloading\" class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"shimmer\">\r\n                            <div class=\"wrapper\">\r\n                                <div class=\"stroke animate title\"></div>\r\n                                <div class=\"stroke animate link\"></div>\r\n                                <div class=\"stroke animate description\"></div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"viewnoData\" class=\"row mt-20\">\r\n                        <div class=\"col-lg-12 mt-20  mb-3\">\r\n                            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-src w-40\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                                <div class=\"nodata-title\">No data found</div>\r\n                                <div class=\"nodata-sub\">There is no result for this checklist</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <section *ngIf=\"!viewloading && !viewnoData\">\r\n                        <div *ngIf=\"select==='custom'||select==='task' \">\r\n                            <div *ngIf=\"showsingle\" class=\"qa-heading m-3 mx-11\">{{this.selectedSection[0]?.questions[0]}}</div>\r\n                            <div *ngIf=\"showsingle&&showfilter\">\r\n                            <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10\">\r\n                                <li class=\"nav-item\">\r\n                                    <a (click)=\"taskTab('yes')\" [ngClass]=\"selectedTask === 'yes' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                        Yes<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'yes' ? 'badge-num-primary' :'badge-num-muted'\">10</span>\r\n                                    </a>\r\n                                </li>\r\n                                <li class=\"nav-item\" >\r\n                                    <a (click)=\"taskTab('no')\" [ngClass]=\"selectedTask === 'no' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                        No<span class=\"mx-2\" [ngClass]=\"selectedTask ==='no' ? 'badge-num-primary' :'badge-num-muted'\">20</span>\r\n                                    </a>\r\n                                </li>    \r\n                                <li class=\"nav-item\">\r\n                                    <a (click)=\"taskTab('maybe')\" [ngClass]=\"selectedTask === 'maybe' ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-3\">\r\n                                        May be<span class=\"mx-2 \" [ngClass]=\"selectedTask === 'maybe' ? 'badge-num-primary' :'badge-num-muted'\">0</span>\r\n                                    </a>\r\n                                </li>\r\n                             \r\n                            </ul>\r\n                            </div>\r\n                            <div *ngFor=\"let checklist of viewChecklistsData?.checklistAnswers\">\r\n                                <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                    <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                                </div>\r\n                                \r\n\r\n                                <div class=\"row px-10 mt-5\" *ngIf=\"showmulti\">\r\n                                    <div class=\"col-md-3\">\r\n                                        <h3 class=\"uni-title\">Store Name:</h3>\r\n                                    </div>\r\n                                    <div class=\"col-md-9\">\r\n                                        <p class=\"uni-subtitle\">{{checklist?.storeProfile?.storeName}} </p>\r\n                                    </div>\r\n                                    <div class=\"col-md-3\">\r\n                                        <h3 class=\"uni-title\">Checklist Name:</h3>\r\n                                    </div>\r\n                                    <div class=\"col-md-9\">\r\n                                        <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.checklistName}}</p>\r\n                                    </div>\r\n\r\n                                    <ng-container>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">State & Country :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.storeProfile?.state}}\r\n                                                {{checklist?.storeProfile?.Country}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Duration :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.duration}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">No. of Questions :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.noofQuestions}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Date :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.date}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <h3 class=\"uni-title\">Submitted By :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-4\">\r\n                                            <p class=\"uni-subtitle\">{{checklist?.checklistInfo?.submittedBy}}</p>\r\n                                        </div>\r\n                                        <div class=\"col-md-2\">\r\n                                            <h3 class=\"uni-title\">Time :</h3>\r\n                                        </div>\r\n                                        <div class=\"col-md-3\">\r\n                                            <p class=\"uni-subtitle\"> {{checklist?.checklistInfo?.time}}</p>\r\n                                        </div>\r\n                                    </ng-container>\r\n\r\n                                </div>\r\n                               \r\n\r\n                                <div class=\"row px-10\" >\r\n\r\n                                    <div *ngFor=\"let questionlist of checklist.questionAnswer\">\r\n                                        <div class=\"qa-bodrer my-5\" *ngFor=\"let question of questionlist.questions\">\r\n                                            <div class=\"row w-100 m-3\" *ngIf=\"showsingle\">\r\n                                                <div class=\"col-md-4 text-title\">\r\n                                                    {{checklist?.storeProfile?.storeName}}\r\n                                                </div>\r\n                                                <div class=\"col-md-8 text-end title-description\">\r\n                                                    Submitted by : {{checklist?.checklistInfo?.submittedBy}} On : {{checklist?.checklistInfo?.date}} {{checklist?.checklistInfo?.time}}\r\n                                                </div>\r\n                                            </div>\r\n                                            <ul>\r\n                                                <li *ngIf=\"showmulti\" class=\"qa-heading\">{{question?.qno}}. {{question?.qname}}</li>\r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='descriptive'\">\r\n                                                    <div *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                  \r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='linearscale'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <!-- <br> -->\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='time'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <br>\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n\r\n\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='date'\">\r\n                                            <div *ngFor=\"let item of question.userAnswer\">\r\n                                                <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                    <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                    <img class=\"img-logo\"\r\n                                                        src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                        alt=\"\">\r\n                                                </div>\r\n                                                <br>\r\n                                                <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                            </div>\r\n                                             </div>\r\n\r\n\r\n\r\n\r\n                                            <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='yes/no'\">\r\n                                                <div *ngFor=\"let item of question.userAnswer\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <br *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                    <span class=\"mt-4\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                    <div class=\"row\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                        <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                        <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                            alt=\"\">\r\n                                                            <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                        </div>\r\n                                                            <span class=\"remarksTxt\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer :{{item.validationAnswer}}</span>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                            </div>  \r\n\r\n\r\n\r\n                                                <div class=\"Partially my-3 px-5\" *ngIf=\"question?.answerType==='multiplechoicesingle'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div *ngFor=\"let item of question.userAnswer\">\r\n                                                        <span class=\"mt-2\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                            <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                            <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                              \r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='image'\">\r\n                                                    <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                            alt=\"\">\r\n                                                        </div>\r\n                                                            <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='multiplechoicemultiple'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\"></div>\r\n                                                    <div class=\"Partially my-3 px-5\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <span class=\"mt-3\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">{{item.answer}}</span>\r\n                                                        <div class=\"col-md-6 mt-2\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                            <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                            <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                            alt=\"\">\r\n                                                            <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                            <span *ngIf=\"item.validationType=='Descriptive Answer'\" [ngClass]=\"item.sopFlag ? 'flagclour':''\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    \r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='descriptiveImage'\">\r\n                                                    \r\n                                                    <div class=\"row\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"col-md-6\" *ngIf=\"item.referenceImage!==''\">\r\n                                                            <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                            <img class=\"img-logo\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.referenceImage}}\"\r\n                                                                alt=\"\">\r\n                                                        </div>\r\n                                                        <div class=\"col-md-6\">\r\n                                                                <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                                <img class=\"img-logo\"\r\n                                                                    src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                                    alt=\"\">\r\n                                                        </div>\r\n                                                            <div class=\"col-md-6 mt-3\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\"  *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span [ngClass]=\"item.sopFlag ? 'flagclour':''\" *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    \r\n                                                    <div class=\"Partially my-3 px-5\" *ngIf=\"question.remarks!=''\">{{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='video'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Video</div>\r\n\r\n                                                        <video controls class=\"recap-img p-3\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\">\r\n                                                        </video>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n\r\n\r\n\r\n\r\n                                                <div class=\"row px-5\" *ngIf=\"question?.answerType==='multipleImage'\">\r\n                                                    <div class=\"col-md-6\" *ngIf=\"question.questionReferenceImage!==''\">\r\n                                                        <div class=\"title-ref my-3\">Reference Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}\"\r\n                                                            alt=\"\">\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6\" *ngFor=\"let item of question.userAnswer\">\r\n                                                        <div class=\"title-ref my-3\">Uploaded Image</div>\r\n                                                        <img class=\"img-logo\"\r\n                                                            src=\"{{environment.TraxAnswerCDN}}{{item.answer}}\"\r\n                                                            alt=\"\">\r\n                                                            <div class=\"col-md-6\" *ngIf=\"item.validation&&item.validationAnswer!=''\">\r\n                                                                <div class=\"title-ref my-3\" *ngIf=\"item.validationType=='Capture Image'||item.validationType=='Capture Video'\">Validation Answer</div>\r\n                                                                <img class=\"img-logo\" *ngIf=\"item.validationType=='Capture Image'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"\r\n                                                                alt=\"\">\r\n                                                                <video controls class=\"recap-img p-3\"  *ngIf=\"item.validationType=='Capture Video'\"\r\n                                                                src=\"{{environment.TraxAnswerCDN}}{{item.validationAnswer}}\"></video>\r\n                                                                <span *ngIf=\"item.validationType=='Descriptive Answer'\">Validation Answer : {{item.validationAnswer}}</span>\r\n                                                            </div>\r\n                                                    </div>\r\n                                                    <div class=\"remarksTxt\" *ngIf=\"question.remarks!=''\">Remarks : {{question.remarks}}</div>\r\n                                                </div>\r\n                                                \r\n                                            </ul>\r\n                                            <div class=\"row\">\r\n                                                <div class=\"col-md-12 text-end\">\r\n                                                    <button class=\"btn btn-sm btn-default border-default me-3\" [disabled]=\"question.redo\" (click)=\"addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n                                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                            <g clip-path=\"url(#clip0_6004_11734)\">\r\n                                                            <path d=\"M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                            </g>\r\n                                                            <defs>\r\n                                                            <clipPath id=\"clip0_6004_11734\">\r\n                                                            <rect width=\"20\" height=\"20\" fill=\"white\"/>\r\n                                                            </clipPath>\r\n                                                            </defs>\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-defult-task\">Redo</span>\r\n                                                    </button>\r\n\r\n                                                    <button class=\"btn btn-sm  border-val1\" *ngIf=\"!question.task&&!question.taskId&&this.galleryForm.value.type!='task'\" (click)=\"addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,questionlist)\">\r\n                                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                            <path d=\"M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                            </svg>\r\n                                                            <span class=\"ms-2 font-task\">Task</span>\r\n                                                    </button>\r\n                                                    <button *ngIf=\"question.task&&question.taskId &&this.galleryForm.value.type!=='task'\" class=\"btn btn-sm  border-val1\" (click)=\"taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)\">\r\n                                                            <span class=\"ms-2 font-task\">View Task</span>\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                        <div class=\"px-10 my-5\" *ngIf=\"select ==='mobileusagedetection'||select ==='uniformdetection'\">\r\n                            <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                            </div>\r\n                            <div>\r\n                                <h2>Checklist Name : {{this.checklistName}}</h2>\r\n                            </div>\r\n                            <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item  of mobileusageData\">\r\n                                <ul class=\"row w-100\">\r\n                                    <li class=\"qa-heading\">\r\n                                        {{item.storeName}}\r\n                                    </li>\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imageUrl\">\r\n                                            <div class=\"\">\r\n                                                <img class=\"w-100 h-500px rounded-top\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{detection}}\" alt=\"\">\r\n                                                <div class=\"text-center mt-3\" *ngIf=\"select ==='uniformdetection'\">\r\n                                                    Uniform Detection</div>\r\n                                                <div class=\"text-center mt-3\" *ngIf=\"select ==='mobileusagedetection'\">\r\n                                                    Mobile Usage Detection</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </ul>\r\n                            </div>\r\n\r\n                        </div>\r\n                        <div class=\"px-10 my-5\" *ngIf=\"select ==='customerunattended'||select ==='staffleftinthemiddle'\">\r\n                            <div class=\"text-center\" *ngIf=\"clientData.logo&&clientData.logo!==''\">\r\n                                <img class=\"mt-5 mb-3 text-center iconsize\" src=\"{{clientData.logo}}\">\r\n                            </div>\r\n                            <div>\r\n                                <h2>Checklist Name : {{this.checklistName}}</h2>\r\n                            </div>\r\n                            <div class=\"qa-bodrer my-3 mt-5\" *ngFor=\"let item  of customerunattendedData\">\r\n                                <ul class=\"row w-100\">\r\n                                    <li class=\"qa-heading\">\r\n                                       \r\n                                    </li>\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-md-12 my-2\" *ngFor=\"let detection of item.imagesData\">\r\n                                            <div class=\"card-header border-0 min-h-45px px-0 my-0\">\r\n                                                <h3 class=\"card-title\">\r\n                                                    <span class=\"me-3 store-title\">{{item.storeName}}</span>\r\n                                                    <span class=\"ms-2 badge badge-light-default\" *ngIf=\"detection?.customer_id\">Cust ID : {{detection.customer_id}}</span>\r\n                                                </h3>\r\n                                            \r\n                                                <!-- Switch toggle -->\r\n                                                <div class=\"card-toolbar\">\r\n                                                    <div class=\"col-md-12 text-end\">\r\n                                                        <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_entry_time\">Entry time : {{detection.customer_entry_time}}</span>\r\n                                                        <span class=\"ms-3 badge badge-light-default\" *ngIf=\"detection?.customer_exit_time\">Exit time : {{detection.customer_exit_time}}</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                           \r\n                                              \r\n                                            <div class=\"my-0\">\r\n                                                <video controls class=\"w-100 h-450px rounded-top\"\r\n                                                    src=\"{{environment.TraxAIchecklistCDN}}{{detection.video_path}}\" alt=\"\">  \r\n                                                    </video>                                             \r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </ul>\r\n                            </div>\r\n\r\n                        </div>\r\n                        <div *ngIf=\"select ==='storeopenandclose'\">\r\n                            <div class=\"col-md-12 card\" *ngFor=\"let item of storeOpencloseView\">\r\n                                <div class=\"snapcard mx-8 my-8\">\r\n                                    <div class=\"snapheader ms-6\">\r\n                                        {{item.storeName}}\r\n                                    </div>\r\n                                    <div class=\"row m-0 w-100\">\r\n                                        <div class=\"col-6\">\r\n                                            <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.openTime\">\r\n                                                <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n                                                    <span>\r\n                                                        <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                            <g id=\"Group\">\r\n                                                                <path id=\"Vector\"\r\n                                                                    d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                                \\\r\n                                                                <path id=\"Vector_2\"\r\n                                                                    d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </g>\r\n                                                        </svg>\r\n\r\n                                                    </span>\r\n                                                    <span class=\"prvtxt mt-5 textclr\">Preview not\r\n                                                        available</span>\r\n                                                    <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n                                                        is not available at the moment.</span>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"row\" *ngIf=\"item.openTime\">\r\n                                                <img class=\"mx-1 img-opc\"\r\n                                                    src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/open.jpeg\"\r\n                                                    alt=\"Checklist Video Player\">\r\n                                                <div class=\"col-12\">\r\n                                                    <div class=\"d-flex flex-stack mx-1 mt-2\">\r\n                                                        <div>\r\n                                                            <div class=\"snaptext\">Opening Snap</div>\r\n                                                            <div class=\"snaptime\">{{item.openTime}} - {{item.date}}\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <span class=\"badge badge-light-primary snapbadge\"\r\n                                                            *ngIf=\"!item?.openTimeFlag\">On Time</span>\r\n                                                        <span class=\"badge badge-light-danger snapbadge\"\r\n                                                            *ngIf=\"item?.openTimeFlag\">Late Open</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </div>\r\n                                        <div class=\"col-6\">\r\n                                            <div class=\"img mt-4 px-3 position-relative\" *ngIf=\"!item.closeTime\">\r\n                                                <div class=\"preview align-items-center justify-content-center d-flex flex-column\">\r\n                                                    <span>\r\n                                                        <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n                                                            xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                            <g id=\"Group\">\r\n                                                                <path id=\"Vector\"\r\n                                                                    d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                                \\\r\n                                                                <path id=\"Vector_2\"\r\n                                                                    d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n                                                                    stroke=\"#667085\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </g>\r\n                                                        </svg>\r\n\r\n                                                    </span>\r\n                                                    <span class=\"prvtxt mt-5 textclr\">Preview not\r\n                                                        available</span>\r\n                                                    <span class=\"refreshtxt mt-2 textclr\">The selected camera\r\n                                                        is not available at the moment.</span>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"row\" *ngIf=\"item.closeTime\">\r\n                                                <img class=\"mx-1 img-opc\"\r\n                                                    src=\"{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString}}/operation_snaps/close.jpeg\"\r\n                                                    alt=\"Checklist Video Player\">\r\n                                                <div class=\"col-12\">\r\n                                                    <div class=\"d-flex flex-stack mx-1 \">\r\n                                                        <div>\r\n                                                            <div class=\"snaptext\">Closing Snap</div>\r\n                                                            <div class=\"snaptime\">{{item.closeTime}} - {{item.date}}\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <span class=\"badge badge-light-primary snapbadge\"\r\n                                                            *ngIf=\"!item?.closeTimeFlag\">On Time</span>\r\n                                                        <span class=\"badge badge-light-danger snapbadge\"\r\n                                                            *ngIf=\"item?.closeTimeFlag\">Early Close</span>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                </div>\r\n\r\n\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n                        <lib-pagination *ngIf=\"!viewloading && !viewnoData\" [itemsPerPage]=\"limit\" [currentPage]=\"offset\" [totalItems]=\"totalCount\"\r\n                            [paginationSizes]='paginationSizes' [pageSize]=\"limit\"\r\n                            (pageChange)=\"onPageChangeview($event)\"\r\n                            (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n                    </section>\r\n                </div>\r\n\r\n\r\n\r\n            </div>\r\n            <div *ngIf=\"!showsidenav\" (click)=\"sidenav()\" class=\"backButtonleft text-center pt-1 cursor-pointer\">\r\n                <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <path\r\n                        d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n                        stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n\r\n", styles: [".gallery-card{padding:24px;border-radius:12px;background:#fff}.gallery-card .header{color:#101828;font-size:18px;font-weight:500;line-height:28px}.img{border-radius:10px;border:1px solid var(--Gray-500, #667085);background:var(--Gray-100, #F2F4F7);width:100%;height:230px}.prvtxt{color:var(--Gray-500, #667085);font-family:Inter;font-size:20px;font-style:normal;font-weight:700;line-height:20px;letter-spacing:-.4px}.refreshtxt{color:var(--Gray-400, #98A2B3);font-family:Inter;font-size:12px;font-style:normal;font-weight:500;line-height:18px}::ng-deep .applyBtn{display:none!important}::ng-deep .custom-height-modal .modal-dialog{max-height:80vh;height:80vh}::ng-deep .custom-height-modal .modal-content{overflow:auto;max-height:100%}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .md-drppicker.shown.drops-down-right{transform-origin:0 0;width:560px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}.checkbox-label{color:#344054;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.checklist-left .checklist-title{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:18px!important;font-weight:500;line-height:28px}.checklist-left .checklist-text{overflow:hidden;color:var(--Black, #101828)!important;text-overflow:ellipsis;font-size:12px!important;font-weight:400!important;line-height:18px}.section{display:inline-block;width:600px;white-space:nowrap;outline:none!important;border:none!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--Black, #101828)!important;font-size:16px!important;font-weight:500!important}.card hr{width:-webkit-fill-available}.editablecontent{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.rotate{transform:rotate(180deg);transition:1s}.question-left{color:var(--Gray-700, #344054)!important;font-size:16px;font-weight:400;line-height:24px}.view-all{padding:12px!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.view-questions{padding:12px!important;border-radius:6px!important;color:var(--Primary-500, #33B5FF)!important;font-size:16px!important;font-weight:600!important;line-height:24px;text-decoration-line:underline!important}.iconsize{width:20%;height:125px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:0!important;padding-top:8px;padding-right:5px}.uni-title{color:#000!important;font-size:18px!important;font-weight:600!important;line-height:28px}.uni-subtitle{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.qa-heading{color:var(--Black, #101828)!important;font-size:18px!important;font-weight:700!important;line-height:28px;list-style:none}.qa-bodrer{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--text-primary, #FFF)!important;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f!important}.title-ref{color:var(--Gray-900, #101828)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.btn-outline-primary{border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:calc(.7rem + 0px) calc(1.5rem + 1px)!important}.Partially{color:#000;font-size:18px!important;font-style:italic!important;font-weight:500;line-height:28px}.task-remarks{color:#000!important;font-size:18px!important;font-weight:400!important;line-height:28px}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:6px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}img.img-logo{width:100%;height:400px!important}.recap-img{width:100%;height:400px;object-fit:cover!important}.img-src{width:30%!important;height:20%!important}.dropdownselect{padding:20px 10px}.dropdownbg{width:Fill(372px) px;height:Hug(40px) px;padding:8px 16px;gap:0px;border-radius:6px 0 0;justify-content:space-between;opacity:0px;background:#eaf8ff}.detectionright{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-weight:500;line-height:14px;float:right!important;mix-blend-mode:multiply}.backgroundBorder{background:#eaf8ff!important;color:#00a3ff!important;padding:12px;border-radius:8px;font-weight:500;line-height:10px}.withoutbackground{padding:8px;font-weight:500;line-height:10px}.snapcard{display:flex;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-200, #EAECF0);background:var(--White, #FFF);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.snapheader{color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px}.snaptext{color:var(--Gray-900, #101828);font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.snaptime{color:var(--Gray-900, #101828);font-size:12px!important;font-style:normal;font-weight:500!important;line-height:22px}.snapbadge{text-align:center;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.preview{position:absolute;top:30%;left:14%}.w-25{width:17%!important}.w-40{width:40%!important}.usage-detection{color:var(--Primary-700, #009BF3);text-overflow:ellipsis!important;font-size:16px!important;font-style:normal;font-weight:400;line-height:16px}.usage-text{color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:400;line-height:17px}.h-450px{object-fit:cover!important}.store-title{color:var(--Black, #101828)!important;font-size:18px;font-weight:700;line-height:28px}.img-opc{width:100%!important;height:300px!important;border-radius:12px!important}.h-900px{min-height:auto!important;max-height:2800px!important}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.w-50{width:75%!important}.flagclour{color:red}.remarksTxt{margin-top:10px;font-family:Inter;font-size:18px;font-weight:400;line-height:28px;text-align:left}.no-text-transform{text-transform:none!important}.border-val1{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Primary-500, #33B5FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.font-task{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.border-default{padding:8px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.font-defult-task{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-title{font-size:16px!important;font-weight:600!important;color:#101828!important;line-height:24px}.title-description{font-size:14px!important;font-weight:400;color:#101828!important;line-height:24px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2$1.GlobalStateService }, { type: TraxService }, { type: i0.ChangeDetectorRef }, { type: i6.NgbModal }, { type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i3.ToastService }, { type: i6$1.Location }, { type: i2$1.PageInfoService }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]